From 993659568e9ffbc9ef1e9e8e2452f41b4d72da04 Mon Sep 17 00:00:00 2001 From: Daniel Del Core Date: Mon, 21 Sep 2020 16:50:30 +1000 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9=20Removes=20the=20old=20way=20to?= =?UTF-8?q?=20mount=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/Misc.tsx | 2 - packages/registry/src/registry-prod.spec.ts | 127 -------------------- packages/registry/src/registry.ts | 43 ++----- 3 files changed, 12 insertions(+), 160 deletions(-) delete mode 100644 packages/registry/src/registry-prod.spec.ts diff --git a/examples/Misc.tsx b/examples/Misc.tsx index 37975cb..82ddee3 100644 --- a/examples/Misc.tsx +++ b/examples/Misc.tsx @@ -226,8 +226,6 @@ storiesOf('Miscellaneous', module) ) : ( setActive(false)} /> )} - setActive(true)} /> - setActive(false)} /> ); }; diff --git a/packages/registry/src/registry-prod.spec.ts b/packages/registry/src/registry-prod.spec.ts deleted file mode 100644 index e417fa3..0000000 --- a/packages/registry/src/registry-prod.spec.ts +++ /dev/null @@ -1,127 +0,0 @@ -import registry, { Registry } from './registry'; - -describe('Registry (Prod mode)', () => { - let clientRegistry: Registry; - let element: HTMLHeadElement; - let attributeId: string; - - beforeEach(() => { - process.env.NODE_ENV = 'production'; - element = document.createElement('head'); - attributeId = 'data-testing-trousers'; - clientRegistry = registry(element, attributeId); - }); - - afterEach(() => { - process.env.NODE_ENV = 'test'; - }); - - it.skip('registers a new style', () => { - const key = '1'; - const style = 'background-color:red;'; - - clientRegistry.register(key, style); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('registers multiple styles', () => { - clientRegistry.register('1', 'background-color:red;'); - clientRegistry.register('2', 'background-color:blue;'); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('registers a global style', () => { - const key = '1'; - const style = 'background-color:red;'; - - clientRegistry.register(key, style, true); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('registers a global, with preexisting style tag', () => { - clientRegistry.register('1', 'background-color:red;'); - clientRegistry.register('2', 'background-color:blue;', true); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('registering an existing key does not update the style', () => { - const key = '1'; - const style = 'background-color:red;'; - const styleBlue = 'background-color:blue;'; - - clientRegistry.register(key, style); - clientRegistry.register(key, styleBlue); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('detects an existing style', () => { - const key = '1'; - const style = 'background-color:red;'; - - clientRegistry.register(key, style); - - expect(clientRegistry.has('1')).toBe(true); - }); - - it.skip('detects a non existing style', () => { - expect(clientRegistry.has('123')).toBe(false); - }); - - it.skip('registries can mount their own style tags', () => { - const secondaryRegistry = registry(element, 'data-testing-secondary', { - forceNewNode: true, - }); - - clientRegistry.register('1', 'background-color:red;'); - secondaryRegistry.register('2', 'background-color:blue;'); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('registries can hoist style tags to the top', () => { - const secondaryRegistry = registry(element, 'data-testing-secondary', { - forceNewNode: true, - appendBefore: attributeId, - }); - - clientRegistry.register('1', 'background-color:red;'); - secondaryRegistry.register('2', 'background-color:blue;', true); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('registries will append style node if append before selector returns null', () => { - const secondaryRegistry = registry(element, 'data-testing-secondary', { - forceNewNode: true, - appendBefore: 'data-unknown-element', - }); - - secondaryRegistry.register('1', 'background-color:blue;'); - - expect(element.innerHTML).toMatchSnapshot(); - }); - - it.skip('clears multiple mounted style tags', () => { - const secondaryRegistry = registry(element, 'data-testing-secondary', { - forceNewNode: true, - }); - - clientRegistry.register('1', 'background-color:red;'); - secondaryRegistry.register('2', 'background-color:blue;'); - - expect(element.childElementCount).toEqual(2); - - secondaryRegistry.clear(); - - expect(element.childElementCount).toEqual(1); - - clientRegistry.clear(); - - expect(element.childElementCount).toEqual(0); - }); -}); diff --git a/packages/registry/src/registry.ts b/packages/registry/src/registry.ts index f9664ec..d5283f9 100644 --- a/packages/registry/src/registry.ts +++ b/packages/registry/src/registry.ts @@ -23,15 +23,11 @@ const createStyleElement = (attributeId: string) => { const getStyleElement = (targetElement: HTMLElement, attributeId: string) => targetElement.querySelector(`style[${attributeId}]`); -const getSheet = (tag: HTMLStyleElement): CSSStyleSheet => { - if (tag.sheet) { - // @ts-ignore - return tag.sheet; - } +const getSheet = (element: HTMLStyleElement): CSSStyleSheet => { + if (element.sheet) return element.sheet; for (let i = 0; i < document.styleSheets.length; i++) { - if (document.styleSheets[i].ownerNode === tag) { - // @ts-ignore + if (document.styleSheets[i].ownerNode === element) { return document.styleSheets[i]; } } @@ -71,36 +67,21 @@ const registry = ( const register = (id: string, styles: string, isGlobal?: boolean) => { if (has(id)) return; - const selector = !isGlobal ? id : ``; - const processedStyles = stylis(selector, styles); - - if (process.env.NODE_ENV === 'production') { - try { - splitRules(processedStyles).forEach(styles => { - const sheet = getSheet(styleElement!); - sheet.insertRule( - styles, - isGlobal ? 0 : sheet.cssRules.length, - ); - }); - - return; - } catch (error) { + const processedStyles = stylis(!isGlobal ? id : ``, styles); + + try { + splitRules(processedStyles).forEach(styles => { + const sheet = getSheet(styleElement!); + sheet.insertRule(styles, isGlobal ? 0 : sheet.cssRules.length); + }); + } catch (error) { + if (process.env.NODE_ENV !== 'production') { console.warn( `Trousers: unable to insert rule: ${styles}`, error, ); } } - - const styleNode = document.createTextNode(`${processedStyles}\n`); - const mountedStyles = styleElement!.getAttribute(attributeId); - - styleElement!.appendChild(styleNode); - styleElement!.setAttribute( - attributeId, - `${mountedStyles} ${id}`.trim(), - ); }; return {