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() {