[fix] StyleSheet hydration with single quotes in attribute selectors

Edge uses single quotes for attribute selectors.

Fix #1317
Close #1415
This commit is contained in:
Giuseppe Gurgone
2019-08-09 19:39:26 +03:00
committed by Nicolas Gallagher
parent ebbade3a6f
commit 96a23c1c21
2 changed files with 21 additions and 1 deletions
@@ -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;}"
`);
});
});
});
@@ -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 }) {