From 96a23c1c21f1f0cc38d70a3a705a37a9d962eda1 Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Fri, 9 Aug 2019 19:39:26 +0300 Subject: [PATCH] [fix] StyleSheet hydration with single quotes in attribute selectors Edge uses single quotes for attribute selectors. Fix #1317 Close #1415 --- .../createOrderedCSSStyleSheet-test.js | 20 +++++++++++++++++++ .../StyleSheet/createOrderedCSSStyleSheet.js | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) 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 }) {