From 301c724c04c849be1f5bc7bfd47dabbfaf54722a Mon Sep 17 00:00:00 2001 From: Evan Scott Date: Thu, 21 Dec 2017 16:30:25 -0600 Subject: [PATCH] Use a simplified hashing strategy when a file system is available (#498) avoiding the file contents when hashing helps alleviate some pains that can occur if build environments make subtle changes, like running a particular loader for an SSR build that changes unrelated code --- packages/babel-plugin-emotion/src/index.js | 15 +- .../test/__snapshots__/macro.test.js.snap | 8 +- .../__snapshots__/source-map.test.js.snap | 4 +- .../test/__snapshots__/styled.test.js.snap | 175 +++++++++++------- .../macro/__snapshots__/react.test.js.snap | 4 +- .../babel-plugin-emotion/test/styled.test.js | 5 + packages/babel-plugin-emotion/test/util.js | 2 +- .../test/__snapshots__/index.test.js.snap | 6 +- .../__snapshots__/auto-label.test.js.snap | 6 +- .../component-selector.test.js.snap | 2 +- .../__snapshots__/extract.test.js.snap | 6 +- .../test/__snapshots__/index.test.js.snap | 10 +- .../component-selector.test.js.snap | 8 +- 13 files changed, 150 insertions(+), 101 deletions(-) diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 5c7773c15..5d4699d3a 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -118,12 +118,17 @@ function buildTargetObjectProperty(path, state, t) { filename === rootPath ? basename(filename) : filename.slice(rootPath.length) const positionInFile = state.count++ + + const stuffToHash = [moduleName] + + if (finalPath) { + stuffToHash.push(normalize(finalPath)) + } else { + stuffToHash.push(state.file.code) + } + const stableClassName = getName( - `${hashArray([ - normalize(finalPath), - moduleName, - state.file.code - ])}${positionInFile}`, + `${hashArray(stuffToHash)}${positionInFile}`, 'css' ) diff --git a/packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap index 877f929c7..3120db616 100644 --- a/packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/macro.test.js.snap @@ -181,7 +181,7 @@ exports[`styled macro babel 6 tagged template literal function 1`] = ` "import _styled from './styled'; const SomeComponent = /*#__PURE__*/_styled('div', { - target: 'css-gx73fp0' + target: 'css-o9rakq0' })('display:flex;');" `; @@ -189,7 +189,7 @@ exports[`styled macro babel 6 tagged template literal member 1`] = ` "import _styled from './styled'; const SomeComponent = /*#__PURE__*/_styled('div', { - target: 'css-5a9af00' + target: 'css-o9rakq0' })('display:flex;');" `; @@ -232,7 +232,7 @@ exports[`styled macro babel 7 tagged template literal function 1`] = ` const SomeComponent = /*#__PURE__*/ _styled('div', { - target: \\"css-gx73fp0\\" + target: \\"css-o9rakq0\\" })(\\"display:flex;\\");" `; @@ -242,6 +242,6 @@ exports[`styled macro babel 7 tagged template literal member 1`] = ` const SomeComponent = /*#__PURE__*/ _styled(\\"div\\", { - target: \\"css-5a9af00\\" + target: \\"css-o9rakq0\\" })(\\"display:flex;\\");" `; diff --git a/packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap index d3d350a8d..e5a8b458b 100644 --- a/packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap @@ -57,7 +57,7 @@ exports[`source map babel 6 styled object styles source map 1`] = ` exports[`source map babel 6 styled source map 1`] = ` "const Avatar = /*#__PURE__*/styled('img', { - target: 'css-1xslkpx0' + target: 'css-1367ks30' })('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQTRCIiwiZmlsZSI6InN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBBdmF0YXIgPSBzdHlsZWQoJ2ltZycpYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJSYWRpdXN9O1xuXG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG4gICAgICBgIl19 */');" `; @@ -124,6 +124,6 @@ exports[`source map babel 7 styled source map 1`] = ` "const Avatar = /*#__PURE__*/ styled('img', { - target: \\"css-1xslkpx0\\" + target: \\"css-1367ks30\\" })(\\"width:96px;height:96px;border-radius:\\", props => props.theme.borderRadius, \\";border:1px solid \\", props => props.theme.borderColor, \\";/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQTRCIiwiZmlsZSI6InN0eWxlZC5zb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBBdmF0YXIgPSBzdHlsZWQoJ2ltZycpYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuXG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJSYWRpdXN9O1xuXG4gICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7cHJvcHMgPT5cbiAgICAgICAgICBwcm9wcy50aGVtZS5ib3JkZXJDb2xvcn07XG4gICAgICBgIl19 */\\");" `; diff --git a/packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap index c2325936c..90440bf78 100644 --- a/packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap +++ b/packages/babel-plugin-emotion/test/__snapshots__/styled.test.js.snap @@ -23,7 +23,7 @@ exports[`styled extract babel 6 autoLabel string styles 1`] = ` const Profile = () => { const ProfileH1 = styled('h1', { e: 'css-kmz3n4', - target: 'css-1ijvdqd0' + target: 'css-8nbyc50' })(); return

Hello

; @@ -36,7 +36,7 @@ emotion.emotion.css exports[`styled extract babel 6 basic 1`] = ` "const H1 = /*#__PURE__*/styled('h1', { - target: 'css-o5753g0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';');" `; @@ -45,15 +45,15 @@ exports[`styled extract babel 6 component selector 1`] = ` const Child = styled('div', { e: 'css-1vhj9jp', - target: 'css-geic7r0' + target: 'css-8nbyc50' })(); const SecondChild = Child.withComponent('span', { - target: 'css-geic7r1' + target: 'css-8nbyc51' }); const Parent = /*#__PURE__*/styled('div', { - target: 'css-geic7r2' + target: 'css-8nbyc52' })(Child, '{color:blue;}', SecondChild, '{color:pink;}'); @@ -66,7 +66,7 @@ exports[`styled extract babel 6 composition based on props 1`] = ` const cls1 = 'css-cls1-1ltut9y'; const H1 = /*#__PURE__*/styled('h1', { - target: 'css-13k5f760' + target: 'css-8nbyc50' })(props => { return props.a ? cssA : cssB; }, ';font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');'); @@ -81,7 +81,7 @@ exports[`styled extract babel 6 config rename 1`] = ` what(\\"h1\\", { e: \\"css-14ksm7b\\", - target: \\"css-1h0g5b00\\" + target: \\"css-8nbyc50\\" })(); @@ -91,16 +91,29 @@ emotion.emotion.css exports[`styled extract babel 6 dynamic fns 1`] = ` "const Avatar = /*#__PURE__*/styled('img', { - target: 'css-9w3j6t0' + target: 'css-8nbyc50' })('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';');" `; exports[`styled extract babel 6 function call 1`] = ` "/*#__PURE__*/styled(MyComponent, { - target: 'css-1eib4cn0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';');" `; +exports[`styled extract babel 6 hash generation no file system 1`] = ` +"require(\\"./emotion.emotion.css\\"); + +styled(\\"h1\\", { + e: \\"css-14ksm7b\\", + target: \\"css-8nbyc50\\" +})(); + + +emotion.emotion.css +.css-14ksm7b{color:blue;}" +`; + exports[`styled extract babel 6 hoisting 1`] = ` "var _ref = { borderRadius: '50%', @@ -123,7 +136,7 @@ const Profile = () => { exports[`styled extract babel 6 interpolation in different places 1`] = ` " const H1 = /*#__PURE__*/styled('h1', { - target: 'css-j7tppq0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');height1:', something, 'wow;width:w', something, 'ow;transform:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform1:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform2:translateX(', props => props.translateX, ') ', props => props.translateX, ';');" `; @@ -132,7 +145,7 @@ exports[`styled extract babel 6 media query 1`] = ` const H1 = styled(\\"h1\\", { e: \\"css-6skbg5\\", - target: \\"css-idb50k0\\" + target: \\"css-8nbyc50\\" })(); @@ -142,13 +155,13 @@ emotion.emotion.css exports[`styled extract babel 6 more than 10 dynamic values 1`] = ` "const H1 = /*#__PURE__*/styled('h1', { - target: 'css-glr6230' + target: 'css-8nbyc50' })('text-decoration:', 'underline', ';border-right:solid blue ', 54, 'px;background:', 'white', ';color:', 'black', ';display:', 'block', ';border-radius:', '3px', ';padding:', '25px', ';width:', '500px', ';z-index:', 100, ';font-size:', '18px', ';text-align:', 'center', ';border-left:', p => p.theme.blue, ';');" `; exports[`styled extract babel 6 nested 1`] = ` "const H1 = /*#__PURE__*/styled('h1', { - target: 'css-1nam8lm0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';& div{color:blue;& span{color:red}}');" `; @@ -157,7 +170,7 @@ exports[`styled extract babel 6 no dynamic 1`] = ` styled(\\"h1\\", { e: \\"css-14ksm7b\\", - target: \\"css-1png8uo0\\" + target: \\"css-8nbyc50\\" })(); @@ -170,7 +183,7 @@ exports[`styled extract babel 6 no use 1`] = ` styled(\\"h1\\", { e: \\"css-0\\", - target: \\"css-r72qfc0\\" + target: \\"css-8nbyc50\\" })(); @@ -212,7 +225,7 @@ exports[`styled extract babel 6 random expressions 1`] = ` const a = () => \\"css-a-1cvrkk1\\"; /*#__PURE__*/styled(\\"h1\\", { - target: \\"css-1r8atxk0\\" + target: \\"css-8nbyc50\\" })(\\"margin:12px 48px;\\", \\"css-143zpy6\\", \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { backgroundColor: \\"hotpink\\" }, \\";\\"); @@ -277,7 +290,7 @@ exports[`styled extract babel 6 variable import: no dynamic 1`] = ` "import './emotion.emotion.css'; import what from 'emotion';what('h1', { e: 'css-14ksm7b', - target: 'css-1vqygkc0' + target: 'css-8nbyc50' })(); @@ -309,7 +322,7 @@ exports[`styled extract babel 7 autoLabel string styles 1`] = ` const Profile = () => { const ProfileH1 = styled('h1', { e: \\"css-kmz3n4\\", - target: \\"css-1ijvdqd0\\" + target: \\"css-8nbyc50\\" })(); return

Hello

; }; @@ -323,7 +336,7 @@ exports[`styled extract babel 7 basic 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-o5753g0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";\\");" `; @@ -332,15 +345,15 @@ exports[`styled extract babel 7 component selector 1`] = ` const Child = styled(\\"div\\", { e: \\"css-1vhj9jp\\", - target: \\"css-geic7r0\\" + target: \\"css-8nbyc50\\" })(); const SecondChild = Child.withComponent('span', { - target: \\"css-geic7r1\\" + target: \\"css-8nbyc51\\" }); const Parent = /*#__PURE__*/ styled(\\"div\\", { - target: \\"css-geic7r2\\" + target: \\"css-8nbyc52\\" })(Child, \\"{color:blue;}\\", SecondChild, \\"{color:pink;}\\"); @@ -355,7 +368,7 @@ const cls1 = \\"css-cls1-1ltut9y\\"; const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-13k5f760\\" + target: \\"css-8nbyc50\\" })(props => { return props.a ? cssA : cssB; }, \\";font-size:\\", fontSize + 'px', \\";height:20px;transform:translateX(\\", props => props.translateX, \\");\\"); @@ -370,7 +383,7 @@ exports[`styled extract babel 7 config rename 1`] = ` what(\\"h1\\", { e: \\"css-14ksm7b\\", - target: \\"css-1h0g5b00\\" + target: \\"css-8nbyc50\\" })(); @@ -382,17 +395,30 @@ exports[`styled extract babel 7 dynamic fns 1`] = ` "const Avatar = /*#__PURE__*/ styled('img', { - target: \\"css-9w3j6t0\\" + target: \\"css-8nbyc50\\" })(\\"width:96px;height:96px;border-radius:\\", props => props.theme.borderRadius, \\";border:1px solid \\", props => props.theme.borderColor, \\";\\");" `; exports[`styled extract babel 7 function call 1`] = ` "/*#__PURE__*/ styled(MyComponent, { - target: \\"css-1eib4cn0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";\\");" `; +exports[`styled extract babel 7 hash generation no file system 1`] = ` +"require(\\"./emotion.emotion.css\\"); + +styled(\\"h1\\", { + e: \\"css-14ksm7b\\", + target: \\"css-8nbyc50\\" +})(); + + +emotion.emotion.css +.css-14ksm7b{color:blue;}" +`; + exports[`styled extract babel 7 hoisting 1`] = ` "var _ref = { borderRadius: '50%', @@ -420,7 +446,7 @@ exports[`styled extract babel 7 interpolation in different places 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-j7tppq0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";height:20px;transform:translateX(\\", props => props.translateX, \\");height1:\\", something, \\"wow;width:w\\", something, \\"ow;transform:translateX(\\", props => props.translateX, \\") translateY(\\", props => props.translateX, \\");transform1:translateX(\\", props => props.translateX, \\") translateY(\\", props => props.translateX, \\");transform2:translateX(\\", props => props.translateX, \\") \\", props => props.translateX, \\";\\");" `; @@ -429,7 +455,7 @@ exports[`styled extract babel 7 media query 1`] = ` const H1 = styled(\\"h1\\", { e: \\"css-6skbg5\\", - target: \\"css-idb50k0\\" + target: \\"css-8nbyc50\\" })(); @@ -441,7 +467,7 @@ exports[`styled extract babel 7 more than 10 dynamic values 1`] = ` "const H1 = /*#__PURE__*/ styled('h1', { - target: \\"css-glr6230\\" + target: \\"css-8nbyc50\\" })(\\"text-decoration:\\", 'underline', \\";border-right:solid blue \\", 54, \\"px;background:\\", 'white', \\";color:\\", 'black', \\";display:\\", 'block', \\";border-radius:\\", '3px', \\";padding:\\", '25px', \\";width:\\", '500px', \\";z-index:\\", 100, \\";font-size:\\", '18px', \\";text-align:\\", 'center', \\";border-left:\\", p => p.theme.blue, \\";\\");" `; @@ -449,7 +475,7 @@ exports[`styled extract babel 7 nested 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-1nam8lm0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";& div{color:blue;& span{color:red}}\\");" `; @@ -458,7 +484,7 @@ exports[`styled extract babel 7 no dynamic 1`] = ` styled(\\"h1\\", { e: \\"css-14ksm7b\\", - target: \\"css-1png8uo0\\" + target: \\"css-8nbyc50\\" })(); @@ -471,7 +497,7 @@ exports[`styled extract babel 7 no use 1`] = ` styled(\\"h1\\", { e: \\"css-0\\", - target: \\"css-r72qfc0\\" + target: \\"css-8nbyc50\\" })(); @@ -520,7 +546,7 @@ const a = () => \\"css-a-1cvrkk1\\"; /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-1r8atxk0\\" + target: \\"css-8nbyc50\\" })(\\"margin:12px 48px;\\", \\"css-143zpy6\\", \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { backgroundColor: \\"hotpink\\" }, \\";\\"); @@ -604,7 +630,7 @@ exports[`styled extract babel 7 variable import: no dynamic 1`] = ` import what from 'emotion'; what(\\"h1\\", { e: \\"css-14ksm7b\\", - target: \\"css-1vqygkc0\\" + target: \\"css-8nbyc50\\" })(); @@ -634,7 +660,7 @@ exports[`styled inline babel 6 autoLabel string styles 1`] = ` const Profile = () => { const ProfileH1 = /*#__PURE__*/styled('h1', { label: 'ProfileH1', - target: 'css-1ijvdqd0' + target: 'css-8nbyc50' })('color:blue;'); return

Hello

; @@ -643,29 +669,29 @@ const Profile = () => { exports[`styled inline babel 6 basic 1`] = ` "const H1 = /*#__PURE__*/styled('h1', { - target: 'css-o5753g0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';');" `; exports[`styled inline babel 6 component selector 1`] = ` " const Child = /*#__PURE__*/styled('div', { - target: 'css-geic7r0' + target: 'css-8nbyc50' })('color:red;'); const SecondChild = Child.withComponent('span', { - target: 'css-geic7r1' + target: 'css-8nbyc51' }); const Parent = /*#__PURE__*/styled('div', { - target: 'css-geic7r2' + target: 'css-8nbyc52' })(Child, '{color:blue;}', SecondChild, '{color:pink;}');" `; exports[`styled inline babel 6 composition based on props 1`] = ` "const cls1 = /*#__PURE__*/css('width:20px;'); const H1 = /*#__PURE__*/styled('h1', { - target: 'css-13k5f760' + target: 'css-8nbyc50' })(props => { return props.a ? cssA : cssB; }, ';font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');');" @@ -673,22 +699,28 @@ const H1 = /*#__PURE__*/styled('h1', { exports[`styled inline babel 6 config rename 1`] = ` "/*#__PURE__*/what(\\"h1\\", { - target: \\"css-1h0g5b00\\" + target: \\"css-8nbyc50\\" })(\\"color:blue;\\");" `; exports[`styled inline babel 6 dynamic fns 1`] = ` "const Avatar = /*#__PURE__*/styled('img', { - target: 'css-9w3j6t0' + target: 'css-8nbyc50' })('width:96px;height:96px;border-radius:', props => props.theme.borderRadius, ';border:1px solid ', props => props.theme.borderColor, ';');" `; exports[`styled inline babel 6 function call 1`] = ` "/*#__PURE__*/styled(MyComponent, { - target: 'css-1eib4cn0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';');" `; +exports[`styled inline babel 6 hash generation no file system 1`] = ` +"/*#__PURE__*/styled(\\"h1\\", { + target: \\"css-1kqw4hu0\\" +})(\\"color:blue;\\");" +`; + exports[`styled inline babel 6 hoisting 1`] = ` "var _ref = { borderRadius: '50%', @@ -711,37 +743,37 @@ const Profile = () => { exports[`styled inline babel 6 interpolation in different places 1`] = ` " const H1 = /*#__PURE__*/styled('h1', { - target: 'css-j7tppq0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';height:20px;transform:translateX(', props => props.translateX, ');height1:', something, 'wow;width:w', something, 'ow;transform:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform1:translateX(', props => props.translateX, ') translateY(', props => props.translateX, ');transform2:translateX(', props => props.translateX, ') ', props => props.translateX, ';');" `; exports[`styled inline babel 6 media query 1`] = ` "const H1 = /*#__PURE__*/styled(\\"h1\\", { - target: \\"css-idb50k0\\" + target: \\"css-8nbyc50\\" })(\\"@media print{font-size:10pt}@media screen{.child-selector{font-size:13px}}@media screen,print{&:hover + &{line-height:1.2}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.child-selector{line-height:1.4}}\\");" `; exports[`styled inline babel 6 more than 10 dynamic values 1`] = ` "const H1 = /*#__PURE__*/styled('h1', { - target: 'css-glr6230' + target: 'css-8nbyc50' })('text-decoration:', 'underline', ';border-right:solid blue ', 54, 'px;background:', 'white', ';color:', 'black', ';display:', 'block', ';border-radius:', '3px', ';padding:', '25px', ';width:', '500px', ';z-index:', 100, ';font-size:', '18px', ';text-align:', 'center', ';border-left:', p => p.theme.blue, ';');" `; exports[`styled inline babel 6 nested 1`] = ` "const H1 = /*#__PURE__*/styled('h1', { - target: 'css-1nam8lm0' + target: 'css-8nbyc50' })('font-size:', fontSize + 'px', ';& div{color:blue;& span{color:red}}');" `; exports[`styled inline babel 6 no dynamic 1`] = ` "/*#__PURE__*/styled(\\"h1\\", { - target: \\"css-1png8uo0\\" + target: \\"css-8nbyc50\\" })(\\"color:blue;\\");" `; exports[`styled inline babel 6 no use 1`] = ` "/*#__PURE__*/styled(\\"h1\\", { - target: \\"css-r72qfc0\\" + target: \\"css-8nbyc50\\" })();" `; @@ -778,7 +810,7 @@ exports[`styled inline babel 6 random expressions 1`] = ` " const a = () => /*#__PURE__*/css(\\"font-size:1rem\\"); /*#__PURE__*/styled(\\"h1\\", { - target: \\"css-1r8atxk0\\" + target: \\"css-8nbyc50\\" })(\\"margin:12px 48px;\\", /*#__PURE__*/css(\\"font-size:32px\\"), \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { backgroundColor: \\"hotpink\\" }, \\";\\");" `; @@ -836,7 +868,7 @@ const Figure = /*#__PURE__*/styled(\\"figure\\")({ exports[`styled inline babel 6 variable import: no dynamic 1`] = ` "import what from 'emotion'; /*#__PURE__*/what('h1', { - target: 'css-1vqygkc0' + target: 'css-8nbyc50' })('color:blue;');" `; @@ -864,7 +896,7 @@ exports[`styled inline babel 7 autoLabel string styles 1`] = ` /*#__PURE__*/ styled('h1', { label: \\"ProfileH1\\", - target: \\"css-1ijvdqd0\\" + target: \\"css-8nbyc50\\" })(\\"color:blue;\\"); return

Hello

; };" @@ -874,7 +906,7 @@ exports[`styled inline babel 7 basic 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-o5753g0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";\\");" `; @@ -882,15 +914,15 @@ exports[`styled inline babel 7 component selector 1`] = ` "const Child = /*#__PURE__*/ styled(\\"div\\", { - target: \\"css-geic7r0\\" + target: \\"css-8nbyc50\\" })(\\"color:red;\\"); const SecondChild = Child.withComponent('span', { - target: \\"css-geic7r1\\" + target: \\"css-8nbyc51\\" }); const Parent = /*#__PURE__*/ styled(\\"div\\", { - target: \\"css-geic7r2\\" + target: \\"css-8nbyc52\\" })(Child, \\"{color:blue;}\\", SecondChild, \\"{color:pink;}\\");" `; @@ -901,7 +933,7 @@ css(\\"width:20px;\\"); const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-13k5f760\\" + target: \\"css-8nbyc50\\" })(props => { return props.a ? cssA : cssB; }, \\";font-size:\\", fontSize + 'px', \\";height:20px;transform:translateX(\\", props => props.translateX, \\");\\");" @@ -910,7 +942,7 @@ styled(\\"h1\\", { exports[`styled inline babel 7 config rename 1`] = ` "/*#__PURE__*/ what(\\"h1\\", { - target: \\"css-1h0g5b00\\" + target: \\"css-8nbyc50\\" })(\\"color:blue;\\");" `; @@ -918,17 +950,24 @@ exports[`styled inline babel 7 dynamic fns 1`] = ` "const Avatar = /*#__PURE__*/ styled('img', { - target: \\"css-9w3j6t0\\" + target: \\"css-8nbyc50\\" })(\\"width:96px;height:96px;border-radius:\\", props => props.theme.borderRadius, \\";border:1px solid \\", props => props.theme.borderColor, \\";\\");" `; exports[`styled inline babel 7 function call 1`] = ` "/*#__PURE__*/ styled(MyComponent, { - target: \\"css-1eib4cn0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";\\");" `; +exports[`styled inline babel 7 hash generation no file system 1`] = ` +"/*#__PURE__*/ +styled(\\"h1\\", { + target: \\"css-1kqw4hu0\\" +})(\\"color:blue;\\");" +`; + exports[`styled inline babel 7 hoisting 1`] = ` "var _ref = { borderRadius: '50%', @@ -956,7 +995,7 @@ exports[`styled inline babel 7 interpolation in different places 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-j7tppq0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";height:20px;transform:translateX(\\", props => props.translateX, \\");height1:\\", something, \\"wow;width:w\\", something, \\"ow;transform:translateX(\\", props => props.translateX, \\") translateY(\\", props => props.translateX, \\");transform1:translateX(\\", props => props.translateX, \\") translateY(\\", props => props.translateX, \\");transform2:translateX(\\", props => props.translateX, \\") \\", props => props.translateX, \\";\\");" `; @@ -964,7 +1003,7 @@ exports[`styled inline babel 7 media query 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-idb50k0\\" + target: \\"css-8nbyc50\\" })(\\"@media print{font-size:10pt}@media screen{.child-selector{font-size:13px}}@media screen,print{&:hover + &{line-height:1.2}}@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){.child-selector{line-height:1.4}}\\");" `; @@ -972,7 +1011,7 @@ exports[`styled inline babel 7 more than 10 dynamic values 1`] = ` "const H1 = /*#__PURE__*/ styled('h1', { - target: \\"css-glr6230\\" + target: \\"css-8nbyc50\\" })(\\"text-decoration:\\", 'underline', \\";border-right:solid blue \\", 54, \\"px;background:\\", 'white', \\";color:\\", 'black', \\";display:\\", 'block', \\";border-radius:\\", '3px', \\";padding:\\", '25px', \\";width:\\", '500px', \\";z-index:\\", 100, \\";font-size:\\", '18px', \\";text-align:\\", 'center', \\";border-left:\\", p => p.theme.blue, \\";\\");" `; @@ -980,21 +1019,21 @@ exports[`styled inline babel 7 nested 1`] = ` "const H1 = /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-1nam8lm0\\" + target: \\"css-8nbyc50\\" })(\\"font-size:\\", fontSize + 'px', \\";& div{color:blue;& span{color:red}}\\");" `; exports[`styled inline babel 7 no dynamic 1`] = ` "/*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-1png8uo0\\" + target: \\"css-8nbyc50\\" })(\\"color:blue;\\");" `; exports[`styled inline babel 7 no use 1`] = ` "/*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-r72qfc0\\" + target: \\"css-8nbyc50\\" })();" `; @@ -1039,7 +1078,7 @@ css(\\"font-size:1rem\\"); /*#__PURE__*/ styled(\\"h1\\", { - target: \\"css-1r8atxk0\\" + target: \\"css-8nbyc50\\" })(\\"margin:12px 48px;\\", /*#__PURE__*/ css(\\"font-size:32px\\"), \\";color:#ffffff;& .profile{\\", props => props.prop && a(), \\"}\\", { @@ -1120,6 +1159,6 @@ exports[`styled inline babel 7 variable import: no dynamic 1`] = ` /*#__PURE__*/ what(\\"h1\\", { - target: \\"css-1vqygkc0\\" + target: \\"css-8nbyc50\\" })(\\"color:blue;\\");" `; diff --git a/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap index 63f70164e..9b0b89cf1 100644 --- a/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap +++ b/packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap @@ -716,7 +716,7 @@ exports[`styled theming 1`] = ` >
this will be green then pink
@@ -743,7 +743,7 @@ exports[`styled theming 2`] = ` >
this will be green then pink
diff --git a/packages/babel-plugin-emotion/test/styled.test.js b/packages/babel-plugin-emotion/test/styled.test.js index ab080dcd2..04ae8ec69 100644 --- a/packages/babel-plugin-emotion/test/styled.test.js +++ b/packages/babel-plugin-emotion/test/styled.test.js @@ -295,6 +295,11 @@ const cases = { } \`; ` + }, + + 'hash generation no file system': { + code: 'styled.h1`color:blue;`', + filename: '' } } diff --git a/packages/babel-plugin-emotion/test/util.js b/packages/babel-plugin-emotion/test/util.js index aa5735967..c9146b95a 100644 --- a/packages/babel-plugin-emotion/test/util.js +++ b/packages/babel-plugin-emotion/test/util.js @@ -25,7 +25,7 @@ const createInlineTester = transform => opts => { } ] ], - filename: opts.filename || 'emotion.js', + filename: opts.filename !== undefined ? opts.filename : 'emotion.js', babelrc: false }).code ).toMatchSnapshot() diff --git a/packages/emotion-server/test/__snapshots__/index.test.js.snap b/packages/emotion-server/test/__snapshots__/index.test.js.snap index c7f5892a4..a759f7b10 100644 --- a/packages/emotion-server/test/__snapshots__/index.test.js.snap +++ b/packages/emotion-server/test/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`extractCritical returns static css 1`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-4xq7ky{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}.css-z382ib{-webkit-animation:animation-16qlhaj;animation:animation-16qlhaj;border-radius:50%;height:50px;width:50px;background-color:red;}", - "html": "
", + "html": "
", "ids": Array [ "w17k2a", "16qlhaj", @@ -26,7 +26,7 @@ Object { exports[`extractCritical returns static css 2`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-4xq7ky{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}", - "html": "
Hello
", + "html": "
Hello
", "ids": Array [ "w17k2a", "16qlhaj", @@ -47,7 +47,7 @@ Object { exports[`hydration only rules that are not in the critical css are inserted 1`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@-webkit-keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-16qlhaj{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-4xq7ky{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-4xq7ky:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}.css-z382ib{-webkit-animation:animation-16qlhaj;animation:animation-16qlhaj;border-radius:50%;height:50px;width:50px;background-color:red;}", - "html": "
", + "html": "
", "ids": Array [ "w17k2a", "16qlhaj", diff --git a/packages/emotion-server/test/auto-label/__snapshots__/auto-label.test.js.snap b/packages/emotion-server/test/auto-label/__snapshots__/auto-label.test.js.snap index b36a07479..6eccc00bf 100644 --- a/packages/emotion-server/test/auto-label/__snapshots__/auto-label.test.js.snap +++ b/packages/emotion-server/test/auto-label/__snapshots__/auto-label.test.js.snap @@ -3,7 +3,7 @@ exports[`extractCritical returns static css 1`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@-webkit-keyframes animation-1fps0gg-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-1fps0gg-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-19m49uk-Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-19m49uk-Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}.css-1m3qzmz-Image{-webkit-animation:animation-1fps0gg-bounce;animation:animation-1fps0gg-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}", - "html": "
", + "html": "
", "ids": Array [ "j3c2ih", "1fps0gg", @@ -28,7 +28,7 @@ Object { exports[`extractCritical returns static css 2`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@-webkit-keyframes animation-1fps0gg-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-1fps0gg-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-19m49uk-Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-19m49uk-Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}", - "html": "
Hello
", + "html": "
Hello
", "ids": Array [ "j3c2ih", "1fps0gg", @@ -52,7 +52,7 @@ Object { exports[`hydration only rules that are not in the critical css are inserted 1`] = ` Object { "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'),local('PatrickHandSC-Regular'),url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;}@-webkit-keyframes animation-1fps0gg-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation-1fps0gg-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-19m49uk-Main{color:hotpink;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-19m49uk-Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}.css-1m3qzmz-Image{-webkit-animation:animation-1fps0gg-bounce;animation:animation-1fps0gg-bounce;border-radius:50%;height:50px;width:50px;background-color:red;}", - "html": "
", + "html": "
", "ids": Array [ "j3c2ih", "1fps0gg", diff --git a/packages/emotion/test/__snapshots__/component-selector.test.js.snap b/packages/emotion/test/__snapshots__/component-selector.test.js.snap index 0965dbf96..aece2622c 100644 --- a/packages/emotion/test/__snapshots__/component-selector.test.js.snap +++ b/packages/emotion/test/__snapshots__/component-selector.test.js.snap @@ -19,7 +19,7 @@ exports[`component selector should be converted to use the emotion target classN `; exports[`component selector should be converted to use the emotion target className 2`] = ` -".css-15bo3am .css-1p21h840 { +".css-12walcm .css-42j9n60 { color: red; } diff --git a/packages/emotion/test/extract/__snapshots__/extract.test.js.snap b/packages/emotion/test/extract/__snapshots__/extract.test.js.snap index 5c758af22..0c2dc587f 100644 --- a/packages/emotion/test/extract/__snapshots__/extract.test.js.snap +++ b/packages/emotion/test/extract/__snapshots__/extract.test.js.snap @@ -2,7 +2,7 @@ exports[`styled basic render nested 1`] = `

hello world

@@ -10,7 +10,7 @@ exports[`styled basic render nested 1`] = ` exports[`styled className prop on styled 1`] = `

hello world

@@ -18,7 +18,7 @@ exports[`styled className prop on styled 1`] = ` exports[`styled no dynamic 1`] = `

hello world

diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap index 751039a9a..680dea7c7 100644 --- a/packages/react-emotion/test/__snapshots__/index.test.js.snap +++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap @@ -709,7 +709,7 @@ exports[`styled theming 1`] = ` >
this will be green then pink
@@ -736,7 +736,7 @@ exports[`styled theming 2`] = ` >
this will be green then pink
@@ -784,11 +784,11 @@ exports[`styled with higher order component that hoists statics 1`] = ` /> `; -exports[`styled withComponent creates a new, unique stable class per invocation 1`] = `"css-19nej3h46"`; +exports[`styled withComponent creates a new, unique stable class per invocation 1`] = `"css-ldhy9946"`; -exports[`styled withComponent creates a new, unique stable class per invocation 2`] = `"css-19nej3h47"`; +exports[`styled withComponent creates a new, unique stable class per invocation 2`] = `"css-ldhy9947"`; -exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"css-19nej3h48"`; +exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"css-ldhy9948"`; exports[`styled withComponent will replace tags but keep styling classes 1`] = ` .glamor-0 { diff --git a/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap b/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap index b5f02da87..014201e53 100644 --- a/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap +++ b/packages/react-emotion/test/component-selectors/__snapshots__/component-selector.test.js.snap @@ -30,14 +30,14 @@ exports[`component as selector 1`] = ` `; exports[`component as selector 2`] = ` -".css-1kmu0ik { +".css-1n9lalg { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.css-1kmu0ik .css-hp998q0 { +.css-1n9lalg .css-qeli5r0 { color: green; } @@ -78,14 +78,14 @@ exports[`component as selector function interpolation 1`] = ` `; exports[`component as selector function interpolation 2`] = ` -".css-hp387i { +".css-1rfbkon { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.css-hp387i .css-hp998q2 { +.css-1rfbkon .css-qeli5r2 { color: green; }