diff --git a/.gitignore b/.gitignore index 3c3629e..7c78742 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ +.vscode node_modules diff --git a/src/styleSheetSerializer.js b/src/styleSheetSerializer.js index f01956d..898b616 100644 --- a/src/styleSheetSerializer.js +++ b/src/styleSheetSerializer.js @@ -52,22 +52,18 @@ const includesClassNames = (classNames, selectors) => const filterRules = classNames => rule => rule.type === 'rule' && includesClassNames(classNames, rule.selectors) && rule.declarations.length; -const getAtRules = (ast, filter) => - ast.stylesheet.rules - .filter(rule => rule.type === 'media' || rule.type === 'supports') - .reduce((acc, atRule) => { - atRule.rules = atRule.rules.filter(filter); - - return acc.concat(atRule); - }, []); +const getAllRules = (rules, classNames) => rules + .filter( + rule => rule.type === 'media' + || rule.type === 'supports' + || (rule.type === 'rule' && includesClassNames(classNames, rule.selectors) && rule.declarations.length) + ) + .map(rule => (rule.type === "rule" ? rule : Object.assign({}, rule, { rules: getAllRules(rule.rules, classNames) }))); const getStyle = classNames => { const ast = getCSS(); - const filter = filterRules(classNames); - const rules = ast.stylesheet.rules.filter(filter); - const atRules = getAtRules(ast, filter); - ast.stylesheet.rules = rules.concat(atRules); + ast.stylesheet.rules = getAllRules(ast.stylesheet.rules, classNames); return css.stringify(ast); }; @@ -93,8 +89,8 @@ const replaceClassNames = (result, classNames, style) => .reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result); const stripUnreferencedClassNames = (result, classNames) => - classNames - .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`,'g'), ''), result); + classNames + .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`, 'g'), ''), result); const replaceHashes = (result, hashes) => hashes.reduce( diff --git a/test/__snapshots__/styleSheetSerializer.spec.js.snap b/test/__snapshots__/styleSheetSerializer.spec.js.snap index dda2d8d..ea1def1 100644 --- a/test/__snapshots__/styleSheetSerializer.spec.js.snap +++ b/test/__snapshots__/styleSheetSerializer.spec.js.snap @@ -727,15 +727,6 @@ exports[`supported css: mount 1`] = ` background: palevioletred; } -.c0 > p { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -html.test .c0 { - display: none; -} - @media (max-width:600px) { .c0 { background: tomato; @@ -744,6 +735,21 @@ html.test .c0 { .c0:hover { background: yellow; } + +@supports (top:max(1px,0px)) { + .c0 { + padding-left: max(1em,env(safe-area-inset-left,0px)); + } +} +} + +.c0 > p { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +html.test .c0 { + display: none; } @@ -767,15 +773,6 @@ exports[`supported css: react-test-renderer 1`] = ` background: palevioletred; } -.c0 > p { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -html.test .c0 { - display: none; -} - @media (max-width:600px) { .c0 { background: tomato; @@ -784,6 +781,21 @@ html.test .c0 { .c0:hover { background: yellow; } + +@supports (top:max(1px,0px)) { + .c0 { + padding-left: max(1em,env(safe-area-inset-left,0px)); + } +} +} + +.c0 > p { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +html.test .c0 { + display: none; }
p { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -html.test .c0 { - display: none; -} - @media (max-width:600px) { .c0 { background: tomato; @@ -822,6 +825,21 @@ html.test .c0 { .c0:hover { background: yellow; } + +@supports (top:max(1px,0px)) { + .c0 { + padding-left: max(1em,env(safe-area-inset-left,0px)); + } +} +} + +.c0 > p { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +html.test .c0 { + display: none; }
p { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -html.test .c0 { - display: none; -} - @media (max-width:600px) { .c0 { background: tomato; @@ -860,6 +869,21 @@ html.test .c0 { .c0:hover { background: yellow; } + +@supports (top:max(1px,0px)) { + .c0 { + padding-left: max(1em,env(safe-area-inset-left,0px)); + } +} +} + +.c0 > p { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +html.test .c0 { + display: none; }
{ &:hover { background: yellow; } + + @supports (top: max(1px, 0px)) { + padding-left: max(1em, env(safe-area-inset-left, 0px)); + } } > p {