mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-22 14:21:44 +00:00
[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:
committed by
Nicolas Gallagher
parent
ebbade3a6f
commit
96a23c1c21
Vendored
+20
@@ -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;}"
|
||||
`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+1
-1
@@ -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 }) {
|
||||
|
||||
Reference in New Issue
Block a user