From b6dc201330aedfb7979da7590da8208f7380b322 Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Tue, 6 Jun 2017 21:29:03 +0200 Subject: [PATCH 1/6] Fix expressions placeholders parsing/validation for external files --- src/_utils.js | 17 ++++++++++------- test/fixtures/expressions.js | 2 +- test/fixtures/styles.js | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 8 deletions(-) diff --git a/src/_utils.js b/src/_utils.js index 8182b323..709024bc 100644 --- a/src/_utils.js +++ b/src/_utils.js @@ -58,18 +58,14 @@ export const getExpressionText = expr => { // e.g. // p { color: ${myConstant}; } // becomes - // p { color: var(--styled-jsx-expression-${id}--); } - // - // We use a dummy custom property so that the resulting css - // passes the css validation which is needed to detect - // external styles. + // p { color: %%styled-jsx-placeholder-${id}%%; } const replacements = expressions .map((e, id) => ({ pattern: new RegExp( `\\$\\{\\s*${escapeStringRegExp(e.getSource())}\\s*\\}` ), - replacement: `var(--styled-jsx-expression-${id}--)`, + replacement: `%%styled-jsx-placeholder-${id}%%`, initial: `$\{${e.getSource()}}` })) .sort((a, b) => a.initial.length < b.initial.length) @@ -197,7 +193,14 @@ export const generateAttribute = (name, value) => export const isValidCss = str => { try { - parseCss(str) + parseCss( + // Replace the placeholder with some valid css + str.replace( + /(\S\s*)%%styled-jsx-placeholder-[^%]+%%/gi, + (match, delimiter) => + `${delimiter}all${['{', ';'].includes(delimiter.trim()) ? ':' : ''}${['{', ';'].includes(delimiter.trim()) ? ';' : ''}` + ) + ) return true } catch (err) {} return false diff --git a/test/fixtures/expressions.js b/test/fixtures/expressions.js index 8efb86cf..53a1524a 100644 --- a/test/fixtures/expressions.js +++ b/test/fixtures/expressions.js @@ -23,7 +23,7 @@ export default ({ display }) => ( diff --git a/test/fixtures/styles.js b/test/fixtures/styles.js index bde1d077..012c4a26 100644 --- a/test/fixtures/styles.js +++ b/test/fixtures/styles.js @@ -6,3 +6,38 @@ export default ` div { font-size: 3em } p { color: ${color}} ` + +const expr = 'test' + +export const expressionsTest = ` + div { + display: ${expr}; + color: ${expr}; + ${expr}; + ${expr}; + background: red; + animation: ${expr} 10s ease-out; + } + + @media (${expr}) { + div.${expr} { + color: red; + } + ${expr} { + color: red; + } + } + + @media (min-width: ${expr}) { + div.${expr} { + color: red; + } + all${expr} { + color: red; + } + } + + @font-face { + ${expr} + } +` From f385366484c91561fc36ea36c4bc822eace0a476 Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Fri, 9 Jun 2017 13:14:10 +0200 Subject: [PATCH 2/6] improve placeholder matching and fixtures --- package.json | 2 +- src/_utils.js | 47 +++++++++++++++++++--- test/__snapshots__/external.js.snap | 48 +++++++++++++++++++++++ test/external.js | 8 ++++ test/fixtures/styles-expressions.js | 60 +++++++++++++++++++++++++++++ test/fixtures/styles.js | 37 +----------------- yarn.lock | 6 +-- 7 files changed, 162 insertions(+), 46 deletions(-) create mode 100644 test/fixtures/styles-expressions.js diff --git a/package.json b/package.json index 60747686..d89fa4c9 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "escape-string-regexp": "1.0.5", "source-map": "0.5.6", "string-hash": "1.1.1", - "stylis": "3.0.17" + "stylis": "3.1.4" }, "devDependencies": { "ava": "0.19.1", diff --git a/src/_utils.js b/src/_utils.js index 709024bc..a4b599c6 100644 --- a/src/_utils.js +++ b/src/_utils.js @@ -194,12 +194,47 @@ export const generateAttribute = (name, value) => export const isValidCss = str => { try { parseCss( - // Replace the placeholder with some valid css - str.replace( - /(\S\s*)%%styled-jsx-placeholder-[^%]+%%/gi, - (match, delimiter) => - `${delimiter}all${['{', ';'].includes(delimiter.trim()) ? ':' : ''}${['{', ';'].includes(delimiter.trim()) ? ';' : ''}` - ) + // Replace the placeholders with some valid CSS + // so that parsing doesn't fail for otherwise valid CSS. + str + // Replace all the placeholders with `all` + .replace( + // `\S` (the `delimiter`) is to match + // the beginning of a block `{` + // a property `:` + // or the end of a property `;` + /(\S)?\s*%%styled-jsx-placeholder-[^%]+%%(?:\s*(\}))?/gi, + (match, delimiter, isBlockEnd) => { + // The `end` of the replacement would be + let end + + if (delimiter === ':' && isBlockEnd) { + // ';}' single property block without semicolon + // E.g. { color: all;} + end = `;${isBlockEnd}` + } else if (delimiter === '{' || isBlockEnd) { + // ':;' when we are at the beginning or the end of a block + // E.g. { all:; ...otherstuff + // E.g. all:; } + end = `:;${isBlockEnd || ''}` + } else if (delimiter === ';') { + // ':' when we are inside of a block + // E.g. color: red; all:; display: block; + end = ':' + } else { + // Otherwise empty + end = '' + } + + return `${delimiter || ''}all${end}` + } + ) + // Replace block placeholders before media queries + // E.g. all @media (all) {} + .replace(/all\s*([@])/g, (match, delimiter) => `all {} ${delimiter}`) + // Replace block placeholders at the beginning of a media query block + // E.g. @media (all) { all:; div { ... }} + .replace(/@media[^{]+{\s*all:;/g, () => `@media (all) { `) ) return true } catch (err) {} diff --git a/test/__snapshots__/external.js.snap b/test/__snapshots__/external.js.snap index f1e8501c..6639d07c 100644 --- a/test/__snapshots__/external.js.snap +++ b/test/__snapshots__/external.js.snap @@ -26,6 +26,15 @@ __styledJsxDefaultExport.__scopedHash = '22515736096'; export default __styledJsxDefaultExport;" `; +exports[`transpiles external stylesheets with validation (expressions) 1`] = ` +"const expr = 'test'; + +export const expressionsTest = new String(\`\${expr} \${expr} \${expr},div{display:\${expr};color:\${expr};\${expr};\${expr} \${expr};background:red;-webkit-animation:\${expr} 10s ease-out;animation:\${expr} 10s ease-out}div{color:red;\${expr}}@media (\${expr}){\${expr} span.\${expr}{color:red}\${expr} \${expr}{color:red}\${expr},\${expr}{color:red}\${expr} div,\${expr}{color:red}}@media (min-width:\${expr}){div.\${expr}{color:red}all\${expr}{\${expr} color:red}}@font-face{\${expr}}\`); +expressionsTest.__hash = '11708545958'; +expressionsTest.__scoped = \`\${expr}[data-jsx-ext~=\\"21708545958\\"] \${expr}[data-jsx-ext~=\\"21708545958\\"] \${expr}[data-jsx-ext~=\\"21708545958\\"],div[data-jsx-ext~=\\"21708545958\\"]{display:\${expr};color:\${expr};\${expr};\${expr} \${expr};background:red;-webkit-animation:\${expr} 10s ease-out;animation:\${expr} 10s ease-out}div[data-jsx-ext~=\\"21708545958\\"]{color:red;\${expr}}@media (\${expr}){\${expr} span.\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}\${expr} \${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}\${expr}[data-jsx-ext~=\\"21708545958\\"],\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}\${expr} div[data-jsx-ext~=\\"21708545958\\"],\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}}@media (min-width:\${expr}){div.\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}all\${expr}[data-jsx-ext~=\\"21708545958\\"]{\${expr} color:red}}@font-face{\${expr}}\`; +expressionsTest.__scopedHash = '21708545958';" +`; + exports[`transpiles external stylesheets with validation 1`] = ` "const color = 'red'; @@ -42,3 +51,42 @@ __styledJsxDefaultExport.__scoped = \`div[data-jsx-ext~=\\"22515736096\\"]{font- __styledJsxDefaultExport.__scopedHash = '22515736096'; export default __styledJsxDefaultExport;" `; + +exports[`transpiles external stylesheets with validation 2`] = ` +"const expr = 'test'; + +export const expressionsTest = \` + div { + display: \${expr}; + color: \${expr}; + \${expr}; + \${expr} + \${expr}; + background: red; + animation: \${expr} 10s ease-out; + } + + @media (\${expr}) { + div.\${expr} { + color: red; + } + \${expr} + \${expr} { + color: red; + } + } + + @media (min-width: \${expr}) { + div.\${expr} { + color: red; + } + all\${expr} { + color: red; + } + } + + @font-face { + \${expr} + } +\`;" +`; diff --git a/test/external.js b/test/external.js index 5a7a711b..7cdbd37a 100644 --- a/test/external.js +++ b/test/external.js @@ -29,3 +29,11 @@ test('transpiles external stylesheets with validation', async t => { t.regex(code, new RegExp(escapeStringRegExp(MARKUP_ATTRIBUTE_EXTERNAL), 'g')) t.snapshot(code) }) + +test('transpiles external stylesheets with validation (expressions)', async t => { + const { code } = await transform('./fixtures/styles-expressions.js', { + validate: true + }) + t.regex(code, new RegExp(escapeStringRegExp(MARKUP_ATTRIBUTE_EXTERNAL), 'g')) + t.snapshot(code) +}) diff --git a/test/fixtures/styles-expressions.js b/test/fixtures/styles-expressions.js new file mode 100644 index 00000000..10720074 --- /dev/null +++ b/test/fixtures/styles-expressions.js @@ -0,0 +1,60 @@ +const expr = 'test' + +export default `${expr} ${expr} ${expr}, + div { + display: ${expr}; + color: ${expr}; + ${expr}; + ${expr} + ${expr}; + background: red; + animation: ${expr} 10s ease-out; + } + + div { + color: red; +${expr} +} + +div { + color: red; +${expr}; +} + + @media (${expr}) { + +${expr} + span.${expr} { + color: red; + } + +${expr} + + ${expr} { + color: red; + } + ${expr}, ${expr} { + color: red; + } + + ${expr} + + div, ${expr} { + color: red; + } + } + + + @media (min-width: ${expr}) { + div.${expr} { + color: red; + } + all${expr} { +${expr} + color: red; + } + } + + @font-face { + ${expr} +}` diff --git a/test/fixtures/styles.js b/test/fixtures/styles.js index 012c4a26..b76deb25 100644 --- a/test/fixtures/styles.js +++ b/test/fixtures/styles.js @@ -4,40 +4,5 @@ export const foo = `div { color: ${color}}` export default ` div { font-size: 3em } - p { color: ${color}} -` - -const expr = 'test' - -export const expressionsTest = ` - div { - display: ${expr}; - color: ${expr}; - ${expr}; - ${expr}; - background: red; - animation: ${expr} 10s ease-out; - } - - @media (${expr}) { - div.${expr} { - color: red; - } - ${expr} { - color: red; - } - } - - @media (min-width: ${expr}) { - div.${expr} { - color: red; - } - all${expr} { - color: red; - } - } - - @font-face { - ${expr} - } + p { color: ${color};} ` diff --git a/yarn.lock b/yarn.lock index 32d2d0d6..36595e17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4625,9 +4625,9 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -stylis@3.0.17: - version "3.0.17" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.0.17.tgz#978643aed384f2138c54af9c02adeb61f1aa75f6" +stylis@3.1.4: + version "3.1.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.1.4.tgz#cade55ef3f8bee350cec7350cd4a76c9308bcda3" supports-color@^2.0.0: version "2.0.0" From df4a3de10db2a471687fef987599f19bb03096d2 Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Fri, 9 Jun 2017 20:29:31 +0200 Subject: [PATCH 3/6] Update snapshots --- test/__snapshots__/external.js.snap | 34 +++++++++++++++-------------- test/__snapshots__/index.js.snap | 24 ++++++++++---------- 2 files changed, 30 insertions(+), 28 deletions(-) diff --git a/test/__snapshots__/external.js.snap b/test/__snapshots__/external.js.snap index 6639d07c..e85fcd33 100644 --- a/test/__snapshots__/external.js.snap +++ b/test/__snapshots__/external.js.snap @@ -14,25 +14,27 @@ exports[`transpiles external stylesheets 1`] = ` export const foo = new String(\`div{color:\${color}}\`); -foo.__hash = '1882068550'; -foo.__scoped = \`div[data-jsx-ext~=\\"2882068550\\"]{color:\${color}}\`; -foo.__scopedHash = '2882068550'; +foo.__hash = '166851635'; +foo.__scoped = \`div[data-jsx-ext~=\\"266851635\\"]{color:\${color}}\`; +foo.__scopedHash = '266851635'; var __styledJsxDefaultExport = new String(\`div{font-size:3em}p{color:\${color}}\`); -__styledJsxDefaultExport.__hash = '12515736096'; -__styledJsxDefaultExport.__scoped = \`div[data-jsx-ext~=\\"22515736096\\"]{font-size:3em}p[data-jsx-ext~=\\"22515736096\\"]{color:\${color}}\`; -__styledJsxDefaultExport.__scopedHash = '22515736096'; +__styledJsxDefaultExport.__hash = '12602670606'; +__styledJsxDefaultExport.__scoped = \`div[data-jsx-ext~=\\"22602670606\\"]{font-size:3em}p[data-jsx-ext~=\\"22602670606\\"]{color:\${color}}\`; +__styledJsxDefaultExport.__scopedHash = '22602670606'; export default __styledJsxDefaultExport;" `; exports[`transpiles external stylesheets with validation (expressions) 1`] = ` "const expr = 'test'; -export const expressionsTest = new String(\`\${expr} \${expr} \${expr},div{display:\${expr};color:\${expr};\${expr};\${expr} \${expr};background:red;-webkit-animation:\${expr} 10s ease-out;animation:\${expr} 10s ease-out}div{color:red;\${expr}}@media (\${expr}){\${expr} span.\${expr}{color:red}\${expr} \${expr}{color:red}\${expr},\${expr}{color:red}\${expr} div,\${expr}{color:red}}@media (min-width:\${expr}){div.\${expr}{color:red}all\${expr}{\${expr} color:red}}@font-face{\${expr}}\`); -expressionsTest.__hash = '11708545958'; -expressionsTest.__scoped = \`\${expr}[data-jsx-ext~=\\"21708545958\\"] \${expr}[data-jsx-ext~=\\"21708545958\\"] \${expr}[data-jsx-ext~=\\"21708545958\\"],div[data-jsx-ext~=\\"21708545958\\"]{display:\${expr};color:\${expr};\${expr};\${expr} \${expr};background:red;-webkit-animation:\${expr} 10s ease-out;animation:\${expr} 10s ease-out}div[data-jsx-ext~=\\"21708545958\\"]{color:red;\${expr}}@media (\${expr}){\${expr} span.\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}\${expr} \${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}\${expr}[data-jsx-ext~=\\"21708545958\\"],\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}\${expr} div[data-jsx-ext~=\\"21708545958\\"],\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}}@media (min-width:\${expr}){div.\${expr}[data-jsx-ext~=\\"21708545958\\"]{color:red}all\${expr}[data-jsx-ext~=\\"21708545958\\"]{\${expr} color:red}}@font-face{\${expr}}\`; -expressionsTest.__scopedHash = '21708545958';" +var __styledJsxDefaultExport = new String(\`\${expr} \${expr} \${expr},div{display:\${expr};color:\${expr};\${expr};\${expr} \${expr};background:red;-webkit-animation:\${expr} 10s ease-out;animation:\${expr} 10s ease-out}div{color:red;\${expr}}div{color:red;\${expr}}@media (\${expr}){\${expr} span.\${expr}{color:red}\${expr} \${expr}{color:red}\${expr},\${expr}{color:red}\${expr} div,\${expr}{color:red}}@media (min-width:\${expr}){div.\${expr}{color:red}all\${expr}{\${expr} color:red}}@font-face{\${expr}}\`); + +__styledJsxDefaultExport.__hash = '12538838655'; +__styledJsxDefaultExport.__scoped = \`\${expr}[data-jsx-ext~=\\"22538838655\\"] \${expr}[data-jsx-ext~=\\"22538838655\\"] \${expr}[data-jsx-ext~=\\"22538838655\\"],div[data-jsx-ext~=\\"22538838655\\"]{display:\${expr};color:\${expr};\${expr};\${expr} \${expr};background:red;-webkit-animation:\${expr} 10s ease-out;animation:\${expr} 10s ease-out}div[data-jsx-ext~=\\"22538838655\\"]{color:red;\${expr}}div[data-jsx-ext~=\\"22538838655\\"]{color:red;\${expr}}@media (\${expr}){\${expr} span.\${expr}[data-jsx-ext~=\\"22538838655\\"]{color:red}\${expr} \${expr}[data-jsx-ext~=\\"22538838655\\"]{color:red}\${expr}[data-jsx-ext~=\\"22538838655\\"],\${expr}[data-jsx-ext~=\\"22538838655\\"]{color:red}\${expr} div[data-jsx-ext~=\\"22538838655\\"],\${expr}[data-jsx-ext~=\\"22538838655\\"]{color:red}}@media (min-width:\${expr}){div.\${expr}[data-jsx-ext~=\\"22538838655\\"]{color:red}all\${expr}[data-jsx-ext~=\\"22538838655\\"]{\${expr} color:red}}@font-face{\${expr}}\`; +__styledJsxDefaultExport.__scopedHash = '22538838655'; +export default __styledJsxDefaultExport;" `; exports[`transpiles external stylesheets with validation 1`] = ` @@ -40,15 +42,15 @@ exports[`transpiles external stylesheets with validation 1`] = ` export const foo = new String(\`div{color:\${color}}\`); -foo.__hash = '1882068550'; -foo.__scoped = \`div[data-jsx-ext~=\\"2882068550\\"]{color:\${color}}\`; -foo.__scopedHash = '2882068550'; +foo.__hash = '166851635'; +foo.__scoped = \`div[data-jsx-ext~=\\"266851635\\"]{color:\${color}}\`; +foo.__scopedHash = '266851635'; var __styledJsxDefaultExport = new String(\`div{font-size:3em}p{color:\${color}}\`); -__styledJsxDefaultExport.__hash = '12515736096'; -__styledJsxDefaultExport.__scoped = \`div[data-jsx-ext~=\\"22515736096\\"]{font-size:3em}p[data-jsx-ext~=\\"22515736096\\"]{color:\${color}}\`; -__styledJsxDefaultExport.__scopedHash = '22515736096'; +__styledJsxDefaultExport.__hash = '12602670606'; +__styledJsxDefaultExport.__scoped = \`div[data-jsx-ext~=\\"22602670606\\"]{font-size:3em}p[data-jsx-ext~=\\"22602670606\\"]{color:\${color}}\`; +__styledJsxDefaultExport.__scopedHash = '22602670606'; export default __styledJsxDefaultExport;" `; diff --git a/test/__snapshots__/index.js.snap b/test/__snapshots__/index.js.snap index c4f4e62e..3c632c15 100644 --- a/test/__snapshots__/index.js.snap +++ b/test/__snapshots__/index.js.snap @@ -5,7 +5,7 @@ exports[`generates source maps 1`] = ` export default (() =>

test

woot

- <_JSXStyle styleId={188072295} css={\\"p[data-jsx=\\\\\\"188072295\\\\\\"]{color:red}\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJzb3VyY2UtbWFwcy5qcyIsInNvdXJjZXNDb250ZW50IjpbXX0= */\\\\n/*@ sourceURL=source-maps.js */\\"} /> + <_JSXStyle styleId={188072295} css={\\"p[data-jsx=\\\\\\"188072295\\\\\\"]{color:red}\\\\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXBzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQixBQUNjLFdBQUMiLCJmaWxlIjoic291cmNlLW1hcHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxkaXY+XG4gICAgPHA+dGVzdDwvcD5cbiAgICA8cD53b290PC9wPlxuICAgIDxzdHlsZSBqc3g+eydwIHsgY29sb3I6IHJlZCB9J308L3N0eWxlPlxuICA8L2Rpdj5cbilcbiJdfQ== */\\\\n/*@ sourceURL=source-maps.js */\\"} />
);" `; @@ -92,19 +92,19 @@ const animationName = 'my-cool-animation'; const obj = { display: 'block' }; // eslint-disable-next-line no-unused-vars -export default (({ display }) =>
-

test

- <_JSXStyle styleId={2129566164} css={\`p.\${color}[data-jsx=\\"290536030\\"]{color:\${otherColor};display:\${obj.display}}\`} /> - <_JSXStyle styleId={188072295} css={\\"p[data-jsx=\\\\\\"290536030\\\\\\"]{color:red}\\"} /> +export default (({ display }) =>
+

test

+ <_JSXStyle styleId={2129566164} css={\`p.\${color}[data-jsx=\\"4091813028\\"]{color:\${otherColor};display:\${obj.display}}\`} /> + <_JSXStyle styleId={188072295} css={\\"p[data-jsx=\\\\\\"4091813028\\\\\\"]{color:red}\\"} /> <_JSXStyle styleId={806016056} css={\`body{background:\${color}}\`} /> <_JSXStyle styleId={806016056} css={\`body{background:\${color}}\`} /> - <_JSXStyle styleId={924167211} css={\`p[data-jsx=\\"290536030\\"]{color:\${color}}\`} /> - <_JSXStyle styleId={924167211} css={\`p[data-jsx=\\"290536030\\"]{color:\${color}}\`} /> - <_JSXStyle styleId={3469794077} css={\`p[data-jsx=\\"290536030\\"]{color:\${darken(color)}}\`} /> - <_JSXStyle styleId={945380644} css={\`p[data-jsx=\\"290536030\\"]{color:\${darken(color) + 2}}\`} /> - <_JSXStyle styleId={4106311606} css={\`@media (min-width:\${mediumScreen}){p[data-jsx=\\"290536030\\"]{color:green}p[data-jsx=\\"290536030\\"]{color \${\`red\`}}}p[data-jsx=\\"290536030\\"]{color:red}\`} /> - <_JSXStyle styleId={2369334310} css={\`p[data-jsx=\\"290536030\\"]{-webkit-animation-duration:\${animationDuration};animation-duration:\${animationDuration}}\`} /> - <_JSXStyle styleId={3168033860} css={\`p[data-jsx=\\"290536030\\"]{-webkit-animation:\${animationDuration} forwards \${animationName};animation:\${animationDuration} forwards \${animationName}}\`} /> + <_JSXStyle styleId={924167211} css={\`p[data-jsx=\\"4091813028\\"]{color:\${color}}\`} /> + <_JSXStyle styleId={924167211} css={\`p[data-jsx=\\"4091813028\\"]{color:\${color}}\`} /> + <_JSXStyle styleId={3469794077} css={\`p[data-jsx=\\"4091813028\\"]{color:\${darken(color)}}\`} /> + <_JSXStyle styleId={945380644} css={\`p[data-jsx=\\"4091813028\\"]{color:\${darken(color) + 2}}\`} /> + <_JSXStyle styleId={3617592140} css={\`@media (min-width:\${mediumScreen}){p[data-jsx=\\"4091813028\\"]{color:green}p[data-jsx=\\"4091813028\\"]{color:\${\`red\`}}}p[data-jsx=\\"4091813028\\"]{color:red}\`} /> + <_JSXStyle styleId={2369334310} css={\`p[data-jsx=\\"4091813028\\"]{-webkit-animation-duration:\${animationDuration};animation-duration:\${animationDuration}}\`} /> + <_JSXStyle styleId={3168033860} css={\`p[data-jsx=\\"4091813028\\"]{-webkit-animation:\${animationDuration} forwards \${animationName};animation:\${animationDuration} forwards \${animationName}}\`} />
);" `; From 67e28d9b7f82b9a5d6350a18fd66f44af8cc262e Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Fri, 9 Jun 2017 20:30:26 +0200 Subject: [PATCH 4/6] Use Stylis 3.1.5 --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d89fa4c9..83bace70 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "escape-string-regexp": "1.0.5", "source-map": "0.5.6", "string-hash": "1.1.1", - "stylis": "3.1.4" + "stylis": "3.1.5" }, "devDependencies": { "ava": "0.19.1", diff --git a/yarn.lock b/yarn.lock index 36595e17..55fa6b1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4625,9 +4625,9 @@ strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" -stylis@3.1.4: - version "3.1.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.1.4.tgz#cade55ef3f8bee350cec7350cd4a76c9308bcda3" +stylis@3.1.5: + version "3.1.5" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.1.5.tgz#c585186286aaa79856c9ac62bbb38113923edda3" supports-color@^2.0.0: version "2.0.0" From ef22cc12481c9b2c63d804500fa79aa06377f333 Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Fri, 9 Jun 2017 20:58:38 +0200 Subject: [PATCH 5/6] nits --- src/_utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/_utils.js b/src/_utils.js index a4b599c6..85dbd386 100644 --- a/src/_utils.js +++ b/src/_utils.js @@ -211,7 +211,7 @@ export const isValidCss = str => { if (delimiter === ':' && isBlockEnd) { // ';}' single property block without semicolon // E.g. { color: all;} - end = `;${isBlockEnd}` + end = `;}` } else if (delimiter === '{' || isBlockEnd) { // ':;' when we are at the beginning or the end of a block // E.g. { all:; ...otherstuff @@ -234,7 +234,7 @@ export const isValidCss = str => { .replace(/all\s*([@])/g, (match, delimiter) => `all {} ${delimiter}`) // Replace block placeholders at the beginning of a media query block // E.g. @media (all) { all:; div { ... }} - .replace(/@media[^{]+{\s*all:;/g, () => `@media (all) { `) + .replace(/@media[^{]+{\s*all:;/g, '@media (all) { ') ) return true } catch (err) {} From 64d6c6cddd10f99a320978534af04ca147e0c5e1 Mon Sep 17 00:00:00 2001 From: Giuseppe Gurgone Date: Fri, 9 Jun 2017 21:00:04 +0200 Subject: [PATCH 6/6] remove useless regexp escaping --- src/_utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_utils.js b/src/_utils.js index 85dbd386..e33467e8 100644 --- a/src/_utils.js +++ b/src/_utils.js @@ -90,7 +90,7 @@ export const getExpressionText = expr => { export const restoreExpressions = (css, replacements) => replacements.reduce((css, currentReplacement) => { css = css.replace( - new RegExp(escapeStringRegExp(currentReplacement.replacement), 'g'), + new RegExp(currentReplacement.replacement, 'g'), currentReplacement.initial ) return css