diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js index 548d0ffe..c279ea3b 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createOrderedCSSStyleSheet-test.js @@ -86,5 +86,25 @@ describe('createOrderedCSSStyleSheet', () => { const clientSheet = createOrderedCSSStyleSheet(element.sheet); expect(clientSheet.getTextContent()).toMatchSnapshot(); }); + + test('works when the group marker is in single quotes', () => { + // Setup SSR CSS + const serverSheet = createOrderedCSSStyleSheet(); + serverSheet.insert('.a { color: red }', 0); + serverSheet.insert('.b { color: red }', 1); + const textContent = serverSheet.getTextContent().replace(/"/g, "'"); + + // Add SSR CSS to client style sheet + element.appendChild(document.createTextNode(textContent)); + const clientSheet = createOrderedCSSStyleSheet(element.sheet); + clientSheet.insert('.c { color: red }', 0); + expect(clientSheet.getTextContent()).toMatchInlineSnapshot(` +"[stylesheet-group='0'] {} +.a {color: red;} +.c { color: red } +[stylesheet-group='1'] {} +.b {color: red;}" +`); + }); }); }); diff --git a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js index f72c2175..1a99e52c 100644 --- a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js +++ b/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js @@ -143,7 +143,7 @@ function encodeGroupRule(group) { } function decodeGroupRule(cssRule) { - return Number(cssRule.selectorText.split('"')[1]); + return Number(cssRule.selectorText.split(/["']/)[1]); } function getOrderedGroups(obj: { [key: number]: any }) {