diff --git a/examples/demos/TicTacToe/TicTacToe.js b/examples/demos/TicTacToe/TicTacToe.js index 860d5c53..386284f0 100644 --- a/examples/demos/TicTacToe/TicTacToe.js +++ b/examples/demos/TicTacToe/TicTacToe.js @@ -113,7 +113,7 @@ var Cell = React.createClass({ case 2: return styles.cellTextO; default: - return {}; + return null; } }, diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap index 1ac43ffb..a428fed8 100644 --- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap +++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -7,7 +7,7 @@ button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none} @keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}} @keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}} -.rn_pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn_pointerEvents\\:box-none *{pointer-events:auto}.rn_pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn_pointerEvents\\:box-none{pointer-events:none} +.rn-pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}.rn-pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none} .rn-bottom\\:0px{bottom:0px} .rn-left\\:0px{left:0px} .rn-position\\:absolute{position:absolute} diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap index db8ffeff..75f4e716 100644 --- a/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap +++ b/src/apis/StyleSheet/__tests__/__snapshots__/registry-test.js.snap @@ -1,4 +1,4 @@ -exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 1`] = ` +exports[`apis/StyleSheet/registry resolve with register, resolves to className 1`] = ` Object { "className": " rn-borderTopColor:red @@ -17,7 +17,7 @@ rn-width:100px", } `; -exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 2`] = ` +exports[`apis/StyleSheet/registry resolve with register, resolves to className 2`] = ` Object { "className": " rn-borderTopColor:red @@ -36,7 +36,7 @@ rn-width:200px", } `; -exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to className 3`] = ` +exports[`apis/StyleSheet/registry resolve with register, resolves to className 3`] = ` Object { "className": " rn-borderTopColor:red @@ -55,7 +55,7 @@ rn-width:100px", } `; -exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 1`] = ` +exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 1`] = ` Object { "className": " rn-left:50px @@ -75,7 +75,7 @@ rn-position:absolute", } `; -exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 2`] = ` +exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 2`] = ` Object { "className": " rn-left:50px @@ -95,7 +95,7 @@ rn-width:200px", } `; -exports[`apis/StyleSheet/registry resolve with stylesheet, resolves to mixed 3`] = ` +exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 3`] = ` Object { "className": " rn-left:50px @@ -115,7 +115,7 @@ rn-position:absolute", } `; -exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 1`] = ` +exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 1`] = ` Object { "className": " ", @@ -136,7 +136,7 @@ Object { } `; -exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 2`] = ` +exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 2`] = ` Object { "className": " ", @@ -157,7 +157,7 @@ Object { } `; -exports[`apis/StyleSheet/registry resolve without stylesheet, resolves to inline styles 3`] = ` +exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 3`] = ` Object { "className": " ", diff --git a/src/apis/StyleSheet/__tests__/injector.js b/src/apis/StyleSheet/__tests__/injector.js index 72cdbe01..0e50932f 100644 --- a/src/apis/StyleSheet/__tests__/injector.js +++ b/src/apis/StyleSheet/__tests__/injector.js @@ -2,7 +2,7 @@ import injector from '../injector'; -describe('apis/StyleSheet', () => { +describe('apis/StyleSheet/injector', () => { beforeEach(() => { document.head.insertAdjacentHTML('afterbegin', ` `; + +const reset = () => { registry = {}; }; + +/** + * Finds or injects the style sheet when in a browser environment + */ +let styleNode = null; +const getStyleNode = () => { if (global.document) { if (!styleNode) { + // look for existing style sheet (could also be server-rendered) styleNode = document.getElementById(STYLE_ELEMENT_ID); + if (!styleNode) { + // if there is no existing stylesheet, inject it style sheet + document.head.insertAdjacentHTML('afterbegin', getStyleSheetHtml()); + styleNode = document.getElementById(STYLE_ELEMENT_ID); + } } - if (styleNode) { - const text = styleNode.textContent; - return text.match(CLASSNAME_REXEP).map((name) => name.slice(1)); - } else { - return []; - } - } else { - return []; + return styleNode; } }; -const createStyleHTML = (text) => ``; +/** + * Determines which classes are available in the existing document. Doesn't + * rely on the registry so it can be used to read class names from a SSR style + * sheet. + */ +const getClassNames = () => { + const styleNode = getStyleNode(); + if (styleNode) { + const text = styleNode.textContent; + const matches = text.match(CLASSNAME_REXEP); + if (matches) { + return matches.map((name) => name.slice(1)).reduce((classMap, className) => { + classMap[className] = true; + return classMap; + }, {}); + } + } + return emptyObject; +}; const frame = () => { if (!isDirty || !global.document) { return; } isDirty = false; - styleNode = styleNode || document.getElementById(STYLE_ELEMENT_ID); - if (!styleNode) { - document.head.insertAdjacentHTML('afterbegin', createStyleHTML()); - styleNode = document.getElementById(STYLE_ELEMENT_ID); - } - - const css = getStyleText(); - - if (styleNode.styleSheet) { - styleNode.styleSheet.cssText = css; - } else { - /* eslint no-cond-assign:0 */ - let last; - while (last = styleNode.lastChild) { - styleNode.removeChild(last); - } - styleNode.appendChild(document.createTextNode(css)); + const styleNode = getStyleNode(); + if (styleNode) { + const css = getStyleText(); + styleNode.textContent = css; } }; -const addRule = (key, rule) => { - if (!registry[key]) { - registry[key] = rule; - if (!isDirty) { - isDirty = true; - if (global.document) { - asap(frame); - } - } - } -}; - -const getStyleSheetHtml = () => createStyleHTML(getStyleText()); - module.exports = { addRule, - getAvailableClassNames, + getClassNames, getStyleSheetHtml, - reset: () => { registry = {}; } + reset }; diff --git a/src/apis/StyleSheet/registry.js b/src/apis/StyleSheet/registry.js index 8468b658..28cef65f 100644 --- a/src/apis/StyleSheet/registry.js +++ b/src/apis/StyleSheet/registry.js @@ -67,7 +67,6 @@ const registerStyle = (id, flatStyle) => { */ const resolveProps = (reactNativeStyle) => { const flatStyle = flattenStyle(reactNativeStyle); - const domStyle = createReactDOMStyle(flatStyle); const style = {}; @@ -122,9 +121,8 @@ const resolvePropsIfNeeded = (key, style) => { * Web style registry */ const StyleRegistry = { - initialize() { - const classNames = injector.getAvailableClassNames(); - classNames.forEach((className) => { injectedClassNames[className] = true; }); + initialize(classNames) { + injectedClassNames = classNames; }, reset() {