From 735c986169cf5e60f18a00303a6bd9db4505dff4 Mon Sep 17 00:00:00 2001 From: Kye Hohenberger Date: Wed, 4 Oct 2017 16:50:38 -0600 Subject: [PATCH] Add isBrowser as a property of sheet so that it can be manually set. (#377) Why? You can get get the size of the css output in storybook or any other demo. ``` const renderedCssSize = (Component = () =>
) => { sheet.isBrowser = false; sheet.flush(); const { css } = extractCritical(() => ReactDOMServer.renderToString( , ), ); sheet.isBrowser = true; return css.length; }; ``` --- packages/emotion/src/sheet.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/emotion/src/sheet.js b/packages/emotion/src/sheet.js index bdeb0ce42..9ad5ccb02 100644 --- a/packages/emotion/src/sheet.js +++ b/packages/emotion/src/sheet.js @@ -35,8 +35,6 @@ function sheetForTag(tag) { } } -const isBrowser: boolean = typeof window !== 'undefined' - function makeStyleTag() { let tag = document.createElement('style') tag.type = 'text/css' @@ -48,6 +46,7 @@ function makeStyleTag() { export default class StyleSheet { constructor() { + this.isBrowser = typeof window !== 'undefined' this.isSpeedy = process.env.NODE_ENV === 'production' // the big drawback here is that the css won't be editable in devtools this.tags = [] this.ctr = 0 @@ -56,7 +55,7 @@ export default class StyleSheet { if (this.injected) { throw new Error('already injected!') } - if (isBrowser) { + if (this.isBrowser) { this.tags[0] = makeStyleTag() } else { // server side 'polyfill'. just enough behavior to be useful. @@ -72,7 +71,7 @@ export default class StyleSheet { this.isSpeedy = !!bool } insert(rule, sourceMap) { - if (isBrowser) { + if (this.isBrowser) { // this is the ultrafast version, works across browsers if (this.isSpeedy) { const tag = this.tags[this.tags.length - 1] @@ -101,7 +100,7 @@ export default class StyleSheet { } } flush() { - if (isBrowser) { + if (this.isBrowser) { this.tags.forEach(tag => tag.parentNode.removeChild(tag)) this.tags = [] this.ctr = 0