diff --git a/.changeset/lovely-wasps-reply.md b/.changeset/lovely-wasps-reply.md new file mode 100644 index 0000000000..6fc51dea2c --- /dev/null +++ b/.changeset/lovely-wasps-reply.md @@ -0,0 +1,5 @@ +--- +'@emotion/babel-plugin': patch +--- + +Fixed an issue in our tagged template expressions minifier which has caused whitespace before nested orphaned pseudo selectors being incorrectly removed. In a selector like `& :hover` the whitespace before colon has a semantic meaning and needs to be preserved. diff --git a/.changeset/tough-fans-do.md b/.changeset/tough-fans-do.md new file mode 100644 index 0000000000..00b9a78850 --- /dev/null +++ b/.changeset/tough-fans-do.md @@ -0,0 +1,5 @@ +--- +'@emotion/sheet': major +--- + +`@import` rules are no longer special-cased - they no longer are always inserted at the beginning of the stylesheet. The responsibility to put them first has been moved to a consumer of this package. diff --git a/.changeset/warm-ties-drop.md b/.changeset/warm-ties-drop.md new file mode 100644 index 0000000000..e2d73d2ea2 --- /dev/null +++ b/.changeset/warm-ties-drop.md @@ -0,0 +1,15 @@ +--- +'@emotion/cache': major +'@emotion/css': major +'@emotion/react': major +'@emotion/styled': major +--- + +The parser we use ([Stylis](https://github.com/thysultan/stylis.js)) got upgraded. It fixes some long-standing parsing edge cases while being smaller and faster 🚀 + +It has been completely rewritten and comes with some breaking changes. Most notable ones that might affect Emotion users are: + +- plugins written for the former Stylis v3 are not compatible with the new version. To learn more on how to write a plugin for Stylis v4 you can check out its [README](https://github.com/thysultan/stylis.js#middleware) and the source code of core plugins. +- vendor-prefixing was previously customizable using `prefix` option. This was always limited to turning off all of some of the prefixes as all available prefixes were on by default. The `prefix` option is gone and to customize which prefixes are applied you need to fork (copy-paste) the prefixer plugin and adjust it to your needs. While this being somewhat more problematic to setup at first we believe that the vast majority of users were not customizing this anyway. By not including the possibility to customize this through an extra option the final solution is more performant because there is no extra overhead of checking if a particular property should be prefixed or not. +- Prefixer is now just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. You can import `prefixer` from the `stylis` module to do that. +- `@import` rules are no longer special-cased. The responsibility to put them first has been moved to the author of the styles. They also can't be nested within other rules now. It's only possible to write them at the top level of global styles. diff --git a/.changeset/witty-dots-return.md b/.changeset/witty-dots-return.md new file mode 100644 index 0000000000..6b729b906d --- /dev/null +++ b/.changeset/witty-dots-return.md @@ -0,0 +1,5 @@ +--- +'@emotion/utils': major +--- + +`insertStyles` no longer calls `cache.insert` with a scoped class name as a selector when inserting keyframes. The change is internal and has no effect on Emotion users. diff --git a/docs/cache-provider.mdx b/docs/cache-provider.mdx index 7f165dc1c6..7fa05e9612 100644 --- a/docs/cache-provider.mdx +++ b/docs/cache-provider.mdx @@ -15,16 +15,6 @@ const myCache = createCache({ stylisPlugins: [ /* your plugins here */ ], - // prefix based on the css property - prefix: key => { - switch (key) { - case 'flex': - return false - case 'transform': - default: - return true - } - } }) render( diff --git a/docs/ssr.mdx b/docs/ssr.mdx index e0a6b18111..7e614e13a6 100644 --- a/docs/ssr.mdx +++ b/docs/ssr.mdx @@ -174,16 +174,6 @@ export const createMyCache = () => stylisPlugins: [ /* your plugins here */ ], - // prefix based on the css property - prefix: key => { - switch (key) { - case 'flex': - return false - case 'transform': - default: - return true - } - } }) export const myCache = createMyCache() diff --git a/package.json b/package.json index f05743b504..90a24b62ed 100644 --- a/package.json +++ b/package.json @@ -257,8 +257,6 @@ "react-router-dom": "^4.2.2", "react-scripts": "1.1.5", "react-test-renderer": "16.8.6", - "stylis": "3.5.4", - "stylis-rule-sheet": "^0.0.10", "svg-tag-names": "^1.1.1", "through": "^2.3.8", "unified": "^6.1.6", diff --git a/packages/babel-plugin/__tests__/__snapshots__/css.js.snap b/packages/babel-plugin/__tests__/__snapshots__/css.js.snap index 10bd5e6f43..ac845fcc61 100644 --- a/packages/babel-plugin/__tests__/__snapshots__/css.js.snap +++ b/packages/babel-plugin/__tests__/__snapshots__/css.js.snap @@ -710,7 +710,7 @@ import { css } from '@emotion/react'; function media(...args) { return ( /*#__PURE__*/ - css(\\"@media (min-width:100px){\\", + css(\\"@media (min-width: 100px){\\", /*#__PURE__*/ css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\") ); diff --git a/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap b/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap index f466029fe8..3221f64bb0 100644 --- a/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap +++ b/packages/babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap @@ -81,44 +81,44 @@ css(process.env.NODE_ENV === \\"production\\" ? { /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1q5yx8v\\", - styles: \\"/* @noflip */ left:1px\\" + name: \\"14fte1c\\", + styles: \\"/* @noflip */left:1px\\" } : { - name: \\"1q5yx8v\\", - styles: \\"/* @noflip */ left:1px\\", + name: \\"14fte1c\\", + styles: \\"/* @noflip */left:1px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1d9s3pk\\", - styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\" + name: \\"hdn0xn\\", + styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\" } : { - name: \\"1d9s3pk\\", - styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\", + name: \\"hdn0xn\\", + styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"bfdx0c\\", - styles: \\"/* @whatever */ left:4px\\" + name: \\"m1e8pu\\", + styles: \\"/* @whatever */left:4px\\" } : { - name: \\"bfdx0c\\", - styles: \\"/* @whatever */ left:4px\\", + name: \\"m1e8pu\\", + styles: \\"/* @whatever */left:4px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"11qyfqd\\", - styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\" + name: \\"ldghp9\\", + styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\" } : { - name: \\"11qyfqd\\", - styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\", + name: \\"ldghp9\\", + styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -167,7 +167,7 @@ css\` import { css } from '@emotion/css'; /*#__PURE__*/ -css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width:420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));" +css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width: 420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));" `; exports[`vanilla emotion css-object 1`] = ` @@ -289,7 +289,7 @@ import { css } from '@emotion/css'; function test() { const cls1 = /*#__PURE__*/ - css(\\"font-size:20px;@media (min-width:420px){color:blue;\\", + css(\\"font-size:20px;@media (min-width: 420px){color:blue;\\", /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { name: \\"14ht2kb\\", @@ -366,11 +366,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { injectGlobal } from '@emotion/css'; injectGlobal(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\" + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\" } : { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\", + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -414,11 +414,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { injectGlobal as inject } from '@emotion/css'; inject(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\" + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\" } : { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\", + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5pbmplY3RgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcblxubGV0IGluamVjdEdsb2JhbCA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -494,7 +494,7 @@ injectGlobal\` import { injectGlobal } from '@emotion/css'; let display = window.whatever; -injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));" +injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";&>div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));" `; exports[`vanilla emotion keyframes-basic 1`] = ` @@ -552,6 +552,35 @@ const rotate360 = keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:rotate360;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbmxldCBlbmRpbmdSb3RhdGlvbiA9IHdpbmRvdy53aGF0ZXZlclxuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgke2VuZGluZ1JvdGF0aW9ufSk7XG4gIH1cbmBcbiJdfQ== */\\");" `; +exports[`vanilla emotion nested-orphaned-pseudo 1`] = ` +"import { css } from '@emotion/css' + +// whitespace before pseudo should be preserved +css\` + & :hover { + color: hotpink; + } +\` + + + ↓ ↓ ↓ ↓ ↓ ↓ + +function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; } + +import { css } from '@emotion/css'; // whitespace before pseudo should be preserved + +/*#__PURE__*/ +css(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1e7lzue\\", + styles: \\"& :hover{color:hotpink;}\\" +} : { + name: \\"1e7lzue\\", + styles: \\"& :hover{color:hotpink;}\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5lc3RlZC1vcnBoYW5lZC1wc2V1ZG8uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0ciLCJmaWxlIjoibmVzdGVkLW9ycGhhbmVkLXBzZXVkby5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuLy8gd2hpdGVzcGFjZSBiZWZvcmUgcHNldWRvIHNob3VsZCBiZSBwcmVzZXJ2ZWRcbmNzc2BcbiAgJiA6aG92ZXIge1xuICAgIGNvbG9yOiBob3RwaW5rO1xuICB9XG5gXG4iXX0= */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`vanilla emotion object-label 1`] = ` "import { css } from '@emotion/css' diff --git a/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap index aac1fe6ad8..bbdef3092e 100644 --- a/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin/__tests__/css-macro/__snapshots__/index.js.snap @@ -702,7 +702,7 @@ import { css } from \\"@emotion/react\\"; function media(...args) { return ( /*#__PURE__*/ - css(\\"@media (min-width:100px){\\", + css(\\"@media (min-width: 100px){\\", /*#__PURE__*/ css(...args), \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:media;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJ0YWdnZWQtdGVtcGxhdGUtYXJncy1mb3J3YXJkZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdC9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\") ); diff --git a/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js new file mode 100644 index 0000000000..891bab3b54 --- /dev/null +++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js @@ -0,0 +1,8 @@ +import { css } from '@emotion/css/macro' + +// whitespace before pseudo should be preserved +css` + & :hover { + color: hotpink; + } +` diff --git a/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap index b6594c76c1..77a95929f6 100644 --- a/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap @@ -81,44 +81,44 @@ css(process.env.NODE_ENV === \\"production\\" ? { /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1q5yx8v\\", - styles: \\"/* @noflip */ left:1px\\" + name: \\"14fte1c\\", + styles: \\"/* @noflip */left:1px\\" } : { - name: \\"1q5yx8v\\", - styles: \\"/* @noflip */ left:1px\\", + name: \\"14fte1c\\", + styles: \\"/* @noflip */left:1px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5jc3NgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YqL1xuICBjb2xvcjogaG90cGluaztcbmBcblxuY3NzYFxuICAvKiBAbm9mbGlwICovXG4gIGxlZnQ6IDFweDtcbmBcblxuY3NzYFxuICBsZWZ0OiAycHg7XG5cbiAgLyogQG5vZmxpcCAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogM3B4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEBub2ZsaXAgKi9cbiAgICByaWdodDogMXB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLyogQHdoYXRldmVyICovXG4gIGxlZnQ6IDRweDtcbmBcblxuY3NzYFxuICBsZWZ0OiA1cHg7XG5cbiAgLyogQHdoYXRldmVyICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiA2cHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQHdoYXRldmVyICovXG4gICAgcmlnaHQ6IDJweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8vIEBub2ZsaXAgc2hvdWxkLWJlLXJlbW92ZWRcbiAgbGVmdDogN3B4O1xuYFxuXG5jc3NgXG4gIC8vIEBzaG91bGRiZXJlbW92ZWRcbiAgbGVmdDogOHB4O1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1d9s3pk\\", - styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\" + name: \\"hdn0xn\\", + styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\" } : { - name: \\"1d9s3pk\\", - styles: \\"left:2px;/* @noflip */ &.foo{left:3px;}&.zot{/* @noflip */ right:1px;}\\", + name: \\"hdn0xn\\", + styles: \\"left:2px;/* @noflip */&.foo{left:3px;}&.zot{/* @noflip */right:1px;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"bfdx0c\\", - styles: \\"/* @whatever */ left:4px\\" + name: \\"m1e8pu\\", + styles: \\"/* @whatever */left:4px\\" } : { - name: \\"bfdx0c\\", - styles: \\"/* @whatever */ left:4px\\", + name: \\"m1e8pu\\", + styles: \\"/* @whatever */left:4px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"11qyfqd\\", - styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\" + name: \\"ldghp9\\", + styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\" } : { - name: \\"11qyfqd\\", - styles: \\"left:5px;/* @whatever */ &.foo{left:6px;}&.zot{/* @whatever */ right:2px;}\\", + name: \\"ldghp9\\", + styles: \\"left:5px;/* @whatever */&.foo{left:6px;}&.zot{/* @whatever */right:2px;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -167,7 +167,7 @@ css\` import { css } from \\"@emotion/css\\"; /*#__PURE__*/ -css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width:420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));" +css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media (min-width: 420px){line-height:40px;}width:\\", window.whatever, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1iYXNpYy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJjc3MtYmFzaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmNzc2BcbiAgbWFyZ2luOiAxMnB4IDQ4cHg7XG4gIGNvbG9yOiAjZmZmZmZmO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4OiAxIDAgYXV0bztcbiAgY29sb3I6IGJsdWU7XG4gIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICB9XG4gIHdpZHRoOiAke3dpbmRvdy53aGF0ZXZlcn07XG5gXG4iXX0= */\\"));" `; exports[`vanilla emotion css-object 1`] = ` @@ -289,7 +289,7 @@ import { css } from \\"@emotion/css\\"; function test() { const cls1 = /*#__PURE__*/ - css(\\"font-size:20px;@media (min-width:420px){color:blue;\\", + css(\\"font-size:20px;@media (min-width: 420px){color:blue;\\", /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { name: \\"14ht2kb\\", @@ -366,11 +366,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { injectGlobal } from \\"@emotion/css\\"; injectGlobal(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\" + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\" } : { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\", + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtYmFzaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRVkiLCJmaWxlIjoiaW5qZWN0LWdsb2JhbC1iYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGluamVjdEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuaW5qZWN0R2xvYmFsYFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICAmID4gZGl2IHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgfVxuICB9XG4gIGh0bWwge1xuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICB9XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -414,11 +414,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { injectGlobal as inject } from \\"@emotion/css\\"; inject(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\" + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\" } : { - name: \\"1d66lop\\", - styles: \\"body{margin:0;padding:0;& > div{display:flex;}}html{background:green;}\\", + name: \\"59k0ad\\", + styles: \\"body{margin:0;padding:0;&>div{display:flex;}}html{background:green;}\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtY2hhbmdlLWltcG9ydC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFTSIsImZpbGUiOiJpbmplY3QtZ2xvYmFsLWNoYW5nZS1pbXBvcnQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RHbG9iYWwgYXMgaW5qZWN0IH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5pbmplY3RgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcblxubGV0IGluamVjdEdsb2JhbCA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgICYgPiBkaXYge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gIH1cbiAgaHRtbCB7XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gIH1cbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -494,7 +494,7 @@ injectGlobal\` import { injectGlobal } from \\"@emotion/css\\"; let display = window.whatever; -injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";& > div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));" +injectGlobal(\\"body{margin:0;padding:0;display:\\", display, \\";&>div{display:none;}}html{background:green;}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlZIiwiZmlsZSI6ImluamVjdC1nbG9iYWwtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgaW5qZWN0R2xvYmFsIH0gZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuXG5sZXQgZGlzcGxheSA9IHdpbmRvdy53aGF0ZXZlclxuXG5pbmplY3RHbG9iYWxgXG4gIGJvZHkge1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6ICR7ZGlzcGxheX07XG4gICAgJiA+IGRpdiB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgIH1cbiAgfVxuICBodG1sIHtcbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgfVxuYFxuIl19 */\\"));" `; exports[`vanilla emotion keyframes-basic 1`] = ` @@ -552,6 +552,35 @@ const rotate360 = keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:rotate360;\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbmxldCBlbmRpbmdSb3RhdGlvbiA9IHdpbmRvdy53aGF0ZXZlclxuXG5jb25zdCByb3RhdGUzNjAgPSBrZXlmcmFtZXNgXG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgke2VuZGluZ1JvdGF0aW9ufSk7XG4gIH1cbmBcbiJdfQ== */\\");" `; +exports[`vanilla emotion nested-orphaned-pseudo 1`] = ` +"import { css } from '@emotion/css/macro' + +// whitespace before pseudo should be preserved +css\` + & :hover { + color: hotpink; + } +\` + + + ↓ ↓ ↓ ↓ ↓ ↓ + +function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; } + +import { css } from \\"@emotion/css\\"; // whitespace before pseudo should be preserved + +/*#__PURE__*/ +css(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1e7lzue\\", + styles: \\"& :hover{color:hotpink;}\\" +} : { + name: \\"1e7lzue\\", + styles: \\"& :hover{color:hotpink;}\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5lc3RlZC1vcnBoYW5lZC1wc2V1ZG8uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0ciLCJmaWxlIjoibmVzdGVkLW9ycGhhbmVkLXBzZXVkby5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcblxuLy8gd2hpdGVzcGFjZSBiZWZvcmUgcHNldWRvIHNob3VsZCBiZSBwcmVzZXJ2ZWRcbmNzc2BcbiAgJiA6aG92ZXIge1xuICAgIGNvbG9yOiBob3RwaW5rO1xuICB9XG5gXG4iXX0= */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`vanilla emotion object-label 1`] = ` "import { css } from '@emotion/css/macro' diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json index f510d84432..20f450e86e 100644 --- a/packages/babel-plugin/package.json +++ b/packages/babel-plugin/package.json @@ -23,7 +23,8 @@ "convert-source-map": "^1.5.0", "escape-string-regexp": "^1.0.5", "find-root": "^1.1.0", - "source-map": "^0.5.7" + "source-map": "^0.5.7", + "stylis": "^4.0.0" }, "peerDependencies": { "@babel/core": "^7.0.0" diff --git a/packages/babel-plugin/src/utils/index.js b/packages/babel-plugin/src/utils/index.js index 076e03d3af..733b947dc3 100644 --- a/packages/babel-plugin/src/utils/index.js +++ b/packages/babel-plugin/src/utils/index.js @@ -1,5 +1,4 @@ // @flow -export { getExpressionsFromTemplateLiteral } from './minify' export { getLabelFromPath } from './label' export { getSourceMap } from './source-maps' export { getTargetClassName } from './get-target-class-name' diff --git a/packages/babel-plugin/src/utils/minify-utils.js b/packages/babel-plugin/src/utils/minify-utils.js deleted file mode 100644 index b90946401f..0000000000 --- a/packages/babel-plugin/src/utils/minify-utils.js +++ /dev/null @@ -1,96 +0,0 @@ -// @flow -// babel-plugin-styled-components -// https://github.com/styled-components/babel-plugin-styled-components/blob/8d44acc36f067d60d4e09f9c22ff89695bc332d2/src/minify/index.js - -const multilineCommentRegex = /\/\*[^!](.|[\r\n])*?\*\//g -const lineCommentStart = /\/\//g -const symbolRegex = /(\s*[;:{},]\s*)/g - -// Counts occurences of substr inside str -const countOccurences = (str, substr) => str.split(substr).length - 1 - -// Joins substrings until predicate returns true -const reduceSubstr = (substrs, join, predicate) => { - const length = substrs.length - let res = substrs[0] - - if (length === 1) { - return res - } - - for (let i = 1; i < length; i++) { - if (predicate(res)) { - break - } - - res += join + substrs[i] - } - - return res -} - -// Joins at comment starts when it's inside a string or parantheses -// effectively removing line comments -export const stripLineComment = (line: string) => - reduceSubstr( - line.split(lineCommentStart), - '//', - str => - !str.endsWith(':') && // NOTE: This is another guard against urls, if they're not inside strings or parantheses. - countOccurences(str, "'") % 2 === 0 && - countOccurences(str, '"') % 2 === 0 && - countOccurences(str, '(') === countOccurences(str, ')') - ) - -export const compressSymbols = (code: string) => - code.split(symbolRegex).reduce((str, fragment, index) => { - // Even-indices are non-symbol fragments - if (index % 2 === 0) { - return str + fragment - } - - // Only manipulate symbols outside of strings - if ( - countOccurences(str, "'") % 2 === 0 && - countOccurences(str, '"') % 2 === 0 - ) { - return str + fragment.trim() - } - - return str + fragment - }, '') - -// Detects lines that are exclusively line comments -const isLineComment = line => line.trim().startsWith('//') -const linebreakRegex = /[\r\n]\s*/g -const spacesAndLinebreakRegex = /\s+|\n+/g - -function multilineReplacer(match: string) { - // When we encounter a standard multi-line CSS comment and it contains a '@' - // character, we keep the comment but optimize it into a single line. Some - // Stylis plugins, such as the stylis-rtl via the cssjanus plugin, use this - // special comment syntax to control behavior (such as: /* @noflip */). - // We can do this with standard CSS comments because they will work with - // compression, as opposed to non-standard single-line comments that will - // break compressed CSS. If the comment doesn't contain '@', then we replace - // it with a line break, which effectively removes it from the output. - - const keepComment = match.indexOf('@') > -1 - - if (keepComment) { - return match.replace(spacesAndLinebreakRegex, ' ').trim() - } - - return '\n' -} - -export const minify = (code: string) => { - const newCode = code - .replace(multilineCommentRegex, multilineReplacer) // If allowed, remove line breaks and extra space from multi-line comments so they appear on one line - .split(linebreakRegex) // Split at newlines - .filter(line => line.length > 0 && !isLineComment(line)) // Removes lines containing only line comments - .map(stripLineComment) // Remove line comments inside text - .join(' ') // Rejoin all lines - - return compressSymbols(newCode) -} diff --git a/packages/babel-plugin/src/utils/minify.js b/packages/babel-plugin/src/utils/minify.js index d9f0b64af6..d37371274a 100644 --- a/packages/babel-plugin/src/utils/minify.js +++ b/packages/babel-plugin/src/utils/minify.js @@ -1,10 +1,66 @@ // @flow -import { minify } from './minify-utils' +import { compile } from 'stylis' -export function getExpressionsFromTemplateLiteral(node: *, t: *): Array<*> { - const raw = createRawStringFromTemplateLiteral(node) - const minified = minify(raw) - return replacePlaceholdersWithExpressions(minified, node.expressions || [], t) +const isAutoInsertedRule = element => { + if (element.type !== 'rule' || !element.parent) { + return false + } + + let parent = element + do { + parent = parent.parent + } while (parent && parent.type !== 'rule') + + return !!parent && element.value === parent.value +} + +const toInputTree = (elements, tree) => { + for (let i = 0; i < elements.length; i++) { + const element = elements[i] + const { parent, children } = element + + if (!parent) { + tree.push(element) + } else if (!isAutoInsertedRule(element)) { + parent.children.push(element) + } + + if (Array.isArray(children)) { + element.children = [] + toInputTree(children, tree) + } + } + + return tree +} + +var stringifyTree = elements => { + return elements + .map(element => { + switch (element.type) { + case 'import': + case 'decl': + return element.value + case 'comm': + // When we encounter a standard multi-line CSS comment and it contains a '@' + // character, we keep the comment. Some Stylis plugins, such as + // the stylis-rtl via the cssjanus plugin, use this special comment syntax + // to control behavior (such as: /* @noflip */). We can do this + // with standard CSS comments because they will work with compression, + // as opposed to non-standard single-line comments that will break compressed CSS. + return element.props === '/' && element.value.includes('@') + ? element.value + : '' + case 'rule': + return `${element.value.replace(/&\f/g, '&')}{${stringifyTree( + element.children + )}}` + default: { + return `${element.value}{${stringifyTree(element.children)}}` + } + } + }) + .join('') } const interleave = (strings: Array<*>, interpolations: Array<*>) => @@ -14,7 +70,7 @@ const interleave = (strings: Array<*>, interpolations: Array<*>) => ) function getDynamicMatches(str: string) { - const re = /xxx(\d+)xxx/gm + const re = /xxx(\d+):xxx/gm let match const matches = [] while ((match = re.exec(str)) !== null) { @@ -78,7 +134,7 @@ function createRawStringFromTemplateLiteral(quasi: { .reduce((arr, str, i) => { arr.push(str) if (i !== strs.length - 1) { - arr.push(`xxx${i}xxx`) + arr.push(`xxx${i}:xxx`) } return arr }, []) @@ -86,3 +142,15 @@ function createRawStringFromTemplateLiteral(quasi: { .trim() return src } + +export default function minify(path: *, t: *): void { + const quasi = path.node.quasi + const raw = createRawStringFromTemplateLiteral(quasi) + const minified = stringifyTree(toInputTree(compile(raw), [])) + const expressions = replacePlaceholdersWithExpressions( + minified, + quasi.expressions || [], + t + ) + path.replaceWith(t.callExpression(path.node.tag, expressions)) +} diff --git a/packages/babel-plugin/src/utils/transform-expression-with-styles.js b/packages/babel-plugin/src/utils/transform-expression-with-styles.js index 3f8178036d..0040a346ec 100644 --- a/packages/babel-plugin/src/utils/transform-expression-with-styles.js +++ b/packages/babel-plugin/src/utils/transform-expression-with-styles.js @@ -1,7 +1,7 @@ // @flow import { serializeStyles } from '@emotion/serialize' -import { getExpressionsFromTemplateLiteral } from './minify' +import minify from './minify' import { getLabelFromPath } from './label' import { getSourceMap } from './source-maps' import { simplifyObject } from './object-to-string' @@ -44,11 +44,14 @@ export let transformExpressionWithStyles = ({ const autoLabel = state.opts.autoLabel || 'dev-only' let t = babel.types if (t.isTaggedTemplateExpression(path)) { - const expressions = getExpressionsFromTemplateLiteral(path.node.quasi, t) - if (state.emotionSourceMap && path.node.quasi.loc !== undefined) { + if ( + !sourceMap && + state.emotionSourceMap && + path.node.quasi.loc !== undefined + ) { sourceMap = getSourceMap(path.node.quasi.loc.start, state) } - path.replaceWith(t.callExpression(path.node.tag, expressions)) + minify(path, t) } if (t.isCallExpression(path)) { @@ -65,9 +68,9 @@ export let transformExpressionWithStyles = ({ path.node.arguments = joinStringLiterals(path.node.arguments, t) if ( + !sourceMap && canAppendStrings && state.emotionSourceMap && - !sourceMap && path.node.loc !== undefined ) { sourceMap = getSourceMap(path.node.loc.start, state) diff --git a/packages/cache/README.md b/packages/cache/README.md index 3be078eb3b..dfdaa7b933 100644 --- a/packages/cache/README.md +++ b/packages/cache/README.md @@ -35,15 +35,13 @@ A nonce that will be set on each style tag that emotion inserts for [Content Sec ### `stylisPlugins` -`Function` | `Array` +``Array` -A Stylis plugin or plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#plugins). This can be used for many purposes such as RTL. +A Stylis plugins that will be run by Stylis during preprocessing. [Read the Stylis docs to find out more](https://github.com/thysultan/stylis.js#middleware). This can be used for many purposes such as RTL. -### `prefix` - -`boolean` | `Function`, defaults to `true` - -Allows changing Stylis's vendor prefixing settings. It can be a boolean or a function to dynamically set which properties are prefixed. [More information can be found in the Stylis docs](https://github.com/thysultan/stylis.js#vendor-prefixing). +> Note: +> +> Prefixer is just a plugin which happens to be put in default `stylisPlugins`. If you plan to use custom `stylisPlugins` and you want to have your styles prefixed automatically you must include prefixer in your custom `stylisPlugins`. ### `key` diff --git a/packages/cache/package.json b/packages/cache/package.json index 7edf6a4658..68be3385c5 100644 --- a/packages/cache/package.json +++ b/packages/cache/package.json @@ -16,9 +16,9 @@ }, "dependencies": { "@emotion/sheet": "0.10.0-next.1", - "@emotion/stylis": "0.8.5", "@emotion/utils": "0.11.3", - "@emotion/weak-memoize": "0.2.5" + "@emotion/weak-memoize": "0.2.5", + "stylis": "^4.0.0" }, "devDependencies": { "@emotion/hash": "*", diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js index 64ea5dcf1f..73317350f0 100644 --- a/packages/cache/src/index.js +++ b/packages/cache/src/index.js @@ -1,52 +1,46 @@ // @flow import { StyleSheet } from '@emotion/sheet' import { type EmotionCache, type SerializedStyles } from '@emotion/utils' -import Stylis from '@emotion/stylis' +import { + serialize, + compile, + middleware, + rulesheet, + stringify, + prefixer +} from 'stylis' import weakMemoize from '@emotion/weak-memoize' -import { Sheet, removeLabel, ruleSheet } from './stylis-plugins' +import { + compat, + removeLabel, + createUnsafeSelectorsAlarm, + incorrectImportAlarm +} from './stylis-plugins' import type { StylisPlugin } from './types' let isBrowser = typeof document !== 'undefined' -export type PrefixOption = - | boolean - | ((key: string, value: string, context: 1 | 2 | 3) => boolean) -type StylisPlugins = StylisPlugin[] | StylisPlugin - export type Options = { nonce?: string, - stylisPlugins?: StylisPlugins, - prefix?: PrefixOption, + stylisPlugins?: StylisPlugin[], key: string, container?: HTMLElement, speedy?: boolean, prepend?: boolean } -let rootServerStylisCache = {} - let getServerStylisCache = isBrowser ? undefined : weakMemoize(() => { - let getCache = weakMemoize(() => ({})) - let prefixTrueCache = {} - let prefixFalseCache = {} - return prefix => { - if (prefix === undefined || prefix === true) { - return prefixTrueCache - } - if (prefix === false) { - return prefixFalseCache - } - return getCache(prefix) - } + let cache = {} + return name => cache[name] }) +const defaultStylisPlugins = [prefixer] let movedStyles = false let createCache = (options: Options): EmotionCache => { let key = options.key - let stylisOptions if (!key) { throw new Error( @@ -66,13 +60,7 @@ let createCache = (options: Options): EmotionCache => { }) } - if (options.prefix !== undefined) { - stylisOptions = { - prefix: options.prefix - } - } - - let stylis = new Stylis(stylisOptions) + const stylisPlugins = options.stylisPlugins || defaultStylisPlugins if (process.env.NODE_ENV !== 'production') { // $FlowFixMe @@ -114,8 +102,33 @@ let createCache = (options: Options): EmotionCache => { shouldCache: boolean ) => string | void + const omnipresentPlugins = [compat, removeLabel] + + if (process.env.NODE_ENV !== 'production') { + omnipresentPlugins.push( + createUnsafeSelectorsAlarm({ + get compat() { + return cache.compat + } + }), + incorrectImportAlarm + ) + } + if (isBrowser) { - stylis.use(options.stylisPlugins)(ruleSheet) + let currentSheet + + const finalizingPlugins = [ + stringify, + rulesheet(rule => { + currentSheet.insert(rule) + }) + ] + + const serializer = middleware( + omnipresentPlugins.concat(stylisPlugins, finalizingPlugins) + ) + const stylis = styles => serialize(compile(styles), serializer) insert = ( selector: string, @@ -123,38 +136,39 @@ let createCache = (options: Options): EmotionCache => { sheet: StyleSheet, shouldCache: boolean ): void => { - let name = serialized.name - Sheet.current = sheet + currentSheet = sheet if ( process.env.NODE_ENV !== 'production' && serialized.map !== undefined ) { - let map = serialized.map - Sheet.current = { - insert: (rule: string) => { - sheet.insert(rule + map) + currentSheet = { + insert: rule => { + sheet.insert(rule + serialized.map) } } } - stylis(selector, serialized.styles) + + stylis(selector ? `${selector}{${serialized.styles}}` : serialized.styles) + if (shouldCache) { - cache.inserted[name] = true + cache.inserted[serialized.name] = true } } } else { - stylis.use(removeLabel) - let serverStylisCache = rootServerStylisCache - if (options.stylisPlugins || options.prefix !== undefined) { - stylis.use(options.stylisPlugins) - // $FlowFixMe - serverStylisCache = getServerStylisCache( - options.stylisPlugins || rootServerStylisCache - )(options.prefix) - } + const finalizingPlugins = [stringify] + const serializer = middleware( + omnipresentPlugins.concat(stylisPlugins, finalizingPlugins) + ) + const stylis = styles => serialize(compile(styles), serializer) + + // $FlowFixMe + let serverStylisCache = getServerStylisCache(stylisPlugins) let getRules = (selector: string, serialized: SerializedStyles): string => { let name = serialized.name if (serverStylisCache[name] === undefined) { - serverStylisCache[name] = stylis(selector, serialized.styles) + serverStylisCache[name] = stylis( + selector ? `${selector}{${serialized.styles}}` : serialized.styles + ) } return serverStylisCache[name] } @@ -200,65 +214,6 @@ let createCache = (options: Options): EmotionCache => { } } - if (process.env.NODE_ENV !== 'production') { - // https://esbench.com/bench/5bf7371a4cd7e6009ef61d0a - const commentStart = /\/\*/g - const commentEnd = /\*\//g - - stylis.use((context, content) => { - switch (context) { - case -1: { - while (commentStart.test(content)) { - commentEnd.lastIndex = commentStart.lastIndex - - if (commentEnd.test(content)) { - commentStart.lastIndex = commentEnd.lastIndex - continue - } - - throw new Error( - 'Your styles have an unterminated comment ("/*" without corresponding "*/").' - ) - } - - commentStart.lastIndex = 0 - break - } - } - }) - - stylis.use((context, content, selectors) => { - switch (context) { - case -1: { - const flag = - 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason' - const unsafePseudoClasses = content.match( - /(:first|:nth|:nth-last)-child/g - ) - - if (unsafePseudoClasses && cache.compat !== true) { - unsafePseudoClasses.forEach(unsafePseudoClass => { - const ignoreRegExp = new RegExp( - `${unsafePseudoClass}.*\\/\\* ${flag} \\*\\/` - ) - const ignore = ignoreRegExp.test(content) - - if (unsafePseudoClass && !ignore) { - console.error( - `The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${ - unsafePseudoClass.split('-child')[0] - }-of-type".` - ) - } - }) - } - - break - } - } - }) - } - const cache: EmotionCache = { key, sheet: new StyleSheet({ diff --git a/packages/cache/src/stylis-plugins.js b/packages/cache/src/stylis-plugins.js index c27e1bf901..6a53840c85 100644 --- a/packages/cache/src/stylis-plugins.js +++ b/packages/cache/src/stylis-plugins.js @@ -1,89 +1,170 @@ -// @flow -// https://github.com/thysultan/stylis.js/tree/master/plugins/rule-sheet -// inlined to avoid umd wrapper and peerDep warnings/installing stylis -// since we use stylis after closure compiler +import { + compile, + alloc, + dealloc, + next, + delimit, + token, + char, + from, + identifier, + peek, + position +} from 'stylis' -import type { StylisPlugin } from './types' +const last = arr => (arr.length ? arr[arr.length - 1] : null) -const delimiter = '/*|*/' -const needle = delimiter + '}' +const toRules = (parsed, points) => { + // pretend we've started with a comma + let index = -1 + let character = 44 -function toSheet(block) { - if (block) { - Sheet.current.insert(block + '}') - } -} + do { + switch (token(character)) { + case 0: + parsed[index] += identifier(position - 1) + break + case 2: + parsed[index] += delimit(character) + break + case 4: + // comma + if (character === 44) { + // colon + parsed[++index] = peek() === 58 ? '&\f' : '' + points[index] = parsed[index].length + break + } + // fallthrough + default: + parsed[index] += from(character) + } + } while ((character = next())) -export let Sheet: { current: { +insert: string => void } } = { - current: (null: any) + return parsed } -export let ruleSheet: StylisPlugin = ( - context, - content, - selectors, - parents, - line, - column, - length, - ns, - depth, - at -) => { - switch (context) { - // property - case 1: { - switch (content.charCodeAt(0)) { - case 64: { - // @import - Sheet.current.insert(content + ';') - return '' - } - // charcode for l - case 108: { - // charcode for b - // this ignores label - if (content.charCodeAt(2) === 98) { - return '' - } - } +const getRules = (value, points) => dealloc(toRules(alloc(value), points)) + +export let compat = element => { + if ( + element.type !== 'rule' || + !element.parent || + // .length indicates if this rule contains pseudo or not + !element.length + ) { + return + } + + const { value } = element + + // short-circuit for the simplest case + if (element.props.length === 1 && value.charCodeAt(0) !== 58 /* colon */) { + return + } + + let parent = element + + do { + parent = parent.parent + } while (parent.type !== 'rule') + + const points = [] + const rules = getRules(value, points) + const parentRules = parent.props + + for (let i = 0, k = 0; i < rules.length; i++) { + for (let j = 0; j < parentRules.length; j++, k++) { + if (points[i]) { + element.props[k] = rules[i].replace(/&\f/g, parentRules[j]) } - break } - // selector - case 2: { - if (ns === 0) return content + delimiter - break + } +} + +export let removeLabel = element => { + if (element.type === 'decl') { + var value = element.value + if ( + // charcode for l + value.charCodeAt(0) === 108 && + // charcode for b + value.charCodeAt(2) === 98 + ) { + // this ignores label + element.return = '' + element.value = '' } - // at-rule - case 3: { - switch (ns) { - // @font-face, @page - case 102: - case 112: { - Sheet.current.insert(selectors[0] + content) - return '' - } - default: { - return content + (at === 0 ? delimiter : '') - } - } + } +} + +const ignoreFlag = + 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason' + +const isIgnoringComment = element => + !!element && + element.type === 'comm' && + element.children.indexOf(ignoreFlag) > -1 + +export let createUnsafeSelectorsAlarm = cache => (element, index, children) => { + if (element.type !== 'rule') return + + const unsafePseudoClasses = element.value.match( + /(:first|:nth|:nth-last)-child/g + ) + + if (unsafePseudoClasses && cache.compat !== true) { + const prevElement = index > 0 ? children[index - 1] : null + if (prevElement && isIgnoringComment(last(prevElement.children))) { + return } - case -2: { - content.split(needle).forEach(toSheet) + unsafePseudoClasses.forEach(unsafePseudoClass => { + console.error( + `The pseudo class "${unsafePseudoClass}" is potentially unsafe when doing server-side rendering. Try changing it to "${ + unsafePseudoClass.split('-child')[0] + }-of-type".` + ) + }) + } +} + +let isImportRule = element => + element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64 + +const isPrependedWithRegularRules = (index, children) => { + for (let i = index - 1; i >= 0; i--) { + if (!isImportRule(children[i])) { + return true } } + return false } -export let removeLabel: StylisPlugin = (context, content) => { - if ( - context === 1 && - // charcode for l - content.charCodeAt(0) === 108 && - // charcode for b - content.charCodeAt(2) === 98 - // this ignores label - ) { - return '' +// use this to remove incorrect elements from further processing +// so they don't get handed to the `sheet` (or anything else) +// as that could potentially lead to additional logs which in turn could be overhelming to the user +const nullifyElement = element => { + element.type = '' + element.value = '' + element.return = '' + element.children = '' + element.props = '' +} + +export let incorrectImportAlarm = (element, index, children) => { + if (!isImportRule(element)) { + return + } + + if (element.parent) { + console.error( + "`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles." + ) + nullifyElement(element) + } else if (isPrependedWithRegularRules(index, children)) { + console.error( + "`@import` rules can't be after other rules. Please put your `@import` rules before your other rules." + ) + nullifyElement(element) } } diff --git a/packages/cache/src/types.js b/packages/cache/src/types.js index f719909031..92312fb30c 100644 --- a/packages/cache/src/types.js +++ b/packages/cache/src/types.js @@ -1,13 +1,26 @@ // @flow -export type StylisPlugin = ( - context: -2 | -1 | 0 | 1 | 2 | 3, - content: string, - selectors: Array, - parents: Array, +export type StylisElement = { + type: string, + value: string, + props: Array, + root: StylisElement | null, + children: Array, line: number, column: number, length: number, - at: number, - depth: number -) => mixed + return: string +} +export type StylisPluginCallback = ( + element: StylisElement, + index: number, + children: Array, + callback: StylisPluginCallback +) => string | void + +export type StylisPlugin = ( + element: StylisElement, + index: number, + children: Array, + callback: StylisPluginCallback +) => string | void diff --git a/packages/cache/types/index.d.ts b/packages/cache/types/index.d.ts index 9c86d0cc2d..1a856d442a 100644 --- a/packages/cache/types/index.d.ts +++ b/packages/cache/types/index.d.ts @@ -1,14 +1,37 @@ // Definitions by: Junyoung Clare Jang // TypeScript Version: 2.2 -import { Plugin as StylisPlugin, Prefix } from '@emotion/stylis' import { EmotionCache } from '@emotion/utils' -export { StylisPlugin, Prefix, EmotionCache } +export { EmotionCache } + +export interface StylisElement { + type: string + value: string + props: Array + root: StylisElement | null + children: Array + line: number + column: number + length: number + return: string +} +export type StylisPluginCallback = ( + element: StylisElement, + index: number, + children: Array, + callback: StylisPluginCallback +) => string | undefined + +export type StylisPlugin = ( + element: StylisElement, + index: number, + children: Array, + callback: StylisPluginCallback +) => string | undefined export interface Options { nonce?: string - stylisPlugins?: StylisPlugin | Array - prefix?: Prefix + stylisPlugins?: Array key: string container?: HTMLElement speedy?: boolean diff --git a/packages/css/package.json b/packages/css/package.json index c79565c6ed..8777ad8af3 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -34,11 +34,9 @@ }, "devDependencies": { "@babel/core": "^7.7.2", - "@emotion/stylis": "*", "babel-plugin-transform-define": "^1.3.0", "dtslint": "^0.3.0", - "stylis": "3.5.4", - "stylis-rule-sheet": "^0.0.10" + "stylis": "^4.0.0" }, "author": "Kye Hohenberger", "homepage": "https://emotion.sh", diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap index 60a67e5651..4cdfa73762 100644 --- a/packages/css/test/__snapshots__/css.test.js.snap +++ b/packages/css/test/__snapshots__/css.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`css @supports 1`] = ` -@supports (display:grid) { +@supports (display: grid) { .emotion-0 { display: grid; } @@ -83,8 +83,8 @@ exports[`css boolean as value 1`] = ` exports[`css composition stuff 1`] = ` .emotion-0 { -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -96,8 +96,8 @@ exports[`css composition stuff 1`] = ` exports[`css composition stuff 2`] = ` .emotion-0 { -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -115,8 +115,8 @@ exports[`css composition with objects 1`] = ` width: 30px; height: calc(40vw - 50px); -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -129,7 +129,7 @@ exports[`css composition with objects 1`] = ` color: red; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { color: green; } @@ -309,14 +309,14 @@ exports[`css manually use label property 2`] = ` `; exports[`css media query specificity 1`] = ` -".css-13ug87i-cls { +".css-xlxbv2-cls { width: 32px; height: 32px; border-radius: 50%; } -@media (min-width:420px) { - .css-13ug87i-cls { +@media (min-width: 420px) { + .css-xlxbv2-cls { width: 96px; height: 96px; } @@ -330,7 +330,7 @@ exports[`css media query specificity 2`] = ` border-radius: 50%; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { width: 96px; height: 96px; @@ -345,7 +345,7 @@ exports[`css media query specificity 2`] = ` exports[`css multiline declaration 1`] = ` .emotion-0 { display: grid; - grid: 'AppBar' auto 'Main' 1fr / 1fr; + grid: 'AppBar' auto 'Main' 1fr/1fr; }
#box-not-working{background:red;padding-left:8px;width:10px;height:10px;}", - "@media only screen and (min-width:10px){.css-13 > #box-not-working{width:calc(10px + 90px *(100vw - 10px) / 90);}}", - "@media only screen and (min-width:90px){.css-13 > #box-not-working{width:90px;}}", - "@media only screen and (min-width:10px){.css-13 > #box-not-working{height:calc(10px + 90px *(100vw - 10px) / 90);}}", - "@media only screen and (min-width:90px){.css-13 > #box-not-working{height:90px;}}", -] -`; - -exports[`@supports 1`] = ` -Array [ - "@supports (display:block){.css-11{color:red;display:none;}.css-11 h1{color:red;}.css-11 h1 h2{color:blue;}}", - "@supports (-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none){.css-11{color:red;}}", -] -`; - -exports[`[title="a,b"] and :matches(a,b) 1`] = ` -Array [ - ".css-16 .test:matches(a,b,c),.css-16 .test{color:blue;}", - ".css-16 .test[title=\\",\\"]{color:red;}", - ".css-16 [title=\\"a,b,c, something\\"],.css-16 h1,.css-16 [title=\\"a,b,c\\"]{color:red;}", - ".css-16 [title=\\"a\\"],.css-16 [title=\\"b\\"]{color:red;}", -] -`; - -exports[`at-rules 1`] = ` -Array [ - "@page{size:A4 landscape;}", - "@document url(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(mozilla.org),regexp(\\"https:.*\\"){.css-1 body{color:red;}}", - "@viewport{min-width:640px;max-width:800px;}/*|*/@counter-style list{system:fixed;symbols:url();suffix:\\" \\";}/*|*/}", -] -`; - -exports[`attribute namespace 1`] = ` -Array [ - ".css-31 h1{-webkit-animation:slide 1s;animation:slide 1s;}", -] -`; - -exports[`calc rules 1`] = ` -Array [ - ".css-0{height:calc( 100vh - 1px );height:calc(100vh -1px);}", -] -`; - -exports[`cascade isolation @at-rules 1`] = ` -Array [ - "@-webkit-keyframes hahaha{from{top:0;}to{top:100;}}", - "@keyframes hahaha{from{top:0;}to{top:100;}}", - "@media (min-width:480px){.css-38 div{color:red;}}", -] -`; - -exports[`cascade isolation complex 1`] = ` -Array [ - ".css-37 .List :global(>) :global(*){margin-top:10px;}", - ".css-37 .List :global(*) :global(+) :global(*){margin-top:10px;}", - ".css-37 .List :global(> *){margin-top:10px;}", - ".css-37 .List :global(* + *){margin-top:10px;}", - ".css-37:global(.foo #bar > baz){color:red;}", - ".css-37 div :global(.react-select .some-child-of-react-select){color:red;}", - ".css-37 .root > :global(*):not(header){color:red;}", - ".css-37 a:matches( a +b foo:hover :global(marquee) a) > :hover{color:red;}", -] -`; - -exports[`cascade isolation nesting 1`] = ` -Array [ - ".css-39{color:red;}", - ".css-39 h1:global(section){color:red;}", - ".css-39 h1 h2{color:red;}", - ".css-39 div h1,.css-39 span h1{color:red;}", - ".css-39 span:hover{color:red;}", - ".css-39 [data-id=foo]:hover{color:red;}", -] -`; - -exports[`cascade isolation simple 1`] = ` -Array [ - ".css-36 [data-id=foo]{color:red;}", - ".css-36 p{color:red;}", - ".css-36 p a{color:red;}", - ".css-36 p:hover{color:red;}", - ".css-36 p::before{color:red;}", - ".css-36:hover{color:red;}", - ".css-36::before{color:red;}", - ".css-36:hover p{color:red;}", - "html.something .css-36{color:red;}", - ".css-36 .class #id{color:red;}", - ".css-36{color:red;}", - ".css-36 .a.b .c{color:red;}", - ".css-36:nth-child(2n),.css-36:nth-last-child(2n),.css-36:nth-of-type(2n){color:red;}", - ".css-36 a:not(:focus):disabled{color:red;}", - ".css-36 a:not(:focus) :disabled{color:red;}", -] -`; - -exports[`class namespace 1`] = ` -Array [ - ".css-29 h1{-webkit-animation:slide 1s;animation:slide 1s;}", -] -`; - -exports[`comments 1`] = `Array []`; - -exports[`complex nested selector 1`] = ` -Array [ - ".css-47{font-size:2rem;padding:16px;}", - ".css-47:hover{color:blue;}", - ".css-47:hover:active{color:red;}", - ".css-47:hover{color:pink;}", - ".css-47:hover:active{color:purple;}", - ".css-47:hover.some-class{color:yellow;}", -] -`; - -exports[`edge cases 1`] = ` -Array [ - "@media (min-width:537px){.css-33{border-bottom:4px solid red;}}", - ".css-33::-webkit-input-placeholder{color:pink;}", - ".css-33::-moz-placeholder{color:pink;}", - ".css-33:-ms-input-placeholder{color:pink;}", - ".css-33::placeholder{color:pink;}", - ".css-33 .a{color:'red';}", - ".css-33 .b{color:\\"red\\";}", - ".css-33 .a{color:red;}", - ".css-33 [role=button]{color:red;}", - ".css-33 .b{padding:30 3;}", -] -`; - -exports[`empty namespace 1`] = ` -Array [ - ".css-32 h1{-webkit-animation:slide 1s;animation:slide 1s;}", - "@-webkit-keyframes name{0:{top:0;}}", - "@keyframes name{0:{top:0;}}", -] -`; - -exports[`escape breaking control characters 1`] = ` -Array [ - ".css-3{content:\\"\\\\f\\\\0\\\\v\\";}", -] -`; - -exports[`flat 1`] = ` -Array [ - ".css-5{color:20px;font-size:20px;-webkit-transition:all;transition:all;}", -] -`; - -exports[`id namespace 1`] = ` -Array [ - ".css-30 h1{-webkit-animation:slide 1s;animation:slide 1s;}", -] -`; - -exports[`isolation edge cases 1`] = ` -Array [ - ".css-40{width:0;}", - "@media(screen){.css-40{color:red;}}", - ".css-40 h1{color:red;}", -] -`; - -exports[`last semicolon omission 1`] = ` -Array [ - ".css-20 .content{display:none;}", - ".css-20 .content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", -] -`; - -exports[`monkey-patch some invalid css patterns 1`] = ` -Array [ - ".css-2{margin:20px;color:red;}", - ".css-2 .b{border:3px solid green;}", - ".css-2 .c{color:red;}", - ".css-2 .d{color:red;}", - "@media(screen){.css-2{width:20%;}}", - "@media(screen){.css-2{width:30%;}}", - ".css-2 h1{color:red;}", - ".css-2 h1{color:red;}", - ".css-2 h1:hover{color:red;}", -] -`; - -exports[`multiline declaration 1`] = ` -Array [ - ".css-44 html{background-image:linear-gradient(0deg,rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url(/static/background.svg);}", -] -`; - -exports[`multiple selectors 1`] = ` -Array [ - ".css-15 span,.css-15 h1{color:red;}", - ".css-15 h1,.css-15:after,.css-15:before{color:red;}", -] -`; - -exports[`namespace 1`] = ` -Array [ - ".css-6{color:blue;}", - ".css-6{color:red;}", -] -`; - -exports[`nested 1`] = ` -Array [ - ".css-28:global(div) h2{color:red;}", - ".css-28:global(div) h2 h3{color:blue;}", - ".foo .css-28{width:1px;}", - ".foo .css-28:hover{color:black;}", - ".foo .css-28 li{color:white;}", - ".css-28 h1,.css-28 div{color:red;color:blue;}", - ".css-28 h1 h2,.css-28 div h2,.css-28 h1:before,.css-28 div:before{color:red;}", - ".css-28 h1 header,.css-28 div header{font-size:12px;}", - "@media{.css-28 h1,.css-28 div{color:red;}}", - "@media{.css-28 h1,.css-28 div{color:blue;}}", - ".css-28.foo.bar{color:orange;}", - ".css-28.foo.bar.barbar{color:orange;}", -] -`; - -exports[`nesting selector multiple levels 1`] = ` -Array [ - ".css-45 a a a a a a a a a a a a{color:red;}", -] -`; - -exports[`no semi-colons I 1`] = ` -Array [ - ".css-42 color:redh2 color:bluewidth:0h3{display:none;}", - ".css-42 div:hover{color:red;}", -] -`; - -exports[`no semi-colons II 1`] = ` -Array [ - ".css-43 color:redcolor:redh1:hover,.css-43 h2:hover,.css-43 h3{color:redwidth:0/2;}", - ".css-43 h1{grid-template-areas:\\"header header header\\"'. main .';}", - ".css-43 h1{width:calc(20px)20px;}", -] -`; - -exports[`quoutes 1`] = ` -Array [ - ".css-17 .foo:before{content:\\".hello {world}\\";content:\\".hello {world} ' \\";content:'.hello {world} \\" ';}", -] -`; - -exports[`remove empty css 1`] = `Array []`; - -exports[`semi-colons 1`] = ` -Array [ - ".css-41 color:redh2 color:bluewidth:0h3{display:none;}", -] -`; - -exports[`universal selector 1`] = ` -Array [ - ".css-4 *{color:red;}", -] -`; - -exports[`urls 1`] = ` -Array [ - ".css-19{background:url(http://url.com/});background:url(http://url.com//1234) '(';}", -] -`; - -exports[`vendor prefixing 1`] = ` -Array [ - ".css-22 html{-webkit-text-size-adjust:none;text-size-adjust:none;}", - ".css-22 input.red::-webkit-input-placeholder{color:red;}", - ".css-22 input.red::-moz-placeholder{color:red;}", - ".css-22 input.red:-ms-input-placeholder{color:red;}", - ".css-22 input.red::placeholder{color:red;}", - ".css-22{width:var(--foo-content);width:var(-content);width:var(--max-content);width:--max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;width:-webkit-min-content;width:-moz-min-content;width:min-content;display:-webkit-box!important;display:-webkit-flex!important;display:-ms-flexbox!important;display:flex!important;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;display:-webkit-inline-box;display:inline-box;-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-pack:justify;-webkit-justify-content:justify;-ms-flex-pack:justify;justify-content:justify;}", - ".css-22 div{-webkit-align-items:value;-webkit-box-align:value;-ms-flex-align:value;align-items:value;-webkit-align-self:value;-ms-flex-item-align:value;align-self:value;-webkit-align-content:value;-ms-flex-line-pack:value;align-content:value;}", - ".css-22 div{color:papayawhip;-webkit-order:flex;-ms-flex-order:flex;order:flex;}", - ".css-22 div{-webkit-backface-visibility:hidden;backface-visibility:hidden;}", - ".css-22 h1:-moz-read-only{color:red;}", - ".css-22 h1:read-only{color:red;}", - ".css-22{-webkit-transition:-webkit-transform 1s,-webkit-transform all 400ms,text-transform;-webkit-transition:transform 1s,transform all 400ms,text-transform;transition:transform 1s,transform all 400ms,text-transform;}", -] -`; - -exports[`vendor prefixing II 1`] = ` -Array [ - ".css-23 div{-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb;writing-mode:vertical-lr;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr;writing-mode:horizontal-tb;writing-mode:sideways-rl;writing-mode:sideways-lr;}", -] -`; - -exports[`vendor prefixing III 1`] = ` -Array [ - ".css-24{color:red;-webkit-columns:auto;columns:auto;-webkit-column-count:auto;column-count:auto;-webkit-column-fill:auto;column-fill:auto;-webkit-column-gap:auto;column-gap:auto;-webkit-column-rule:auto;column-rule:auto;-webkit-column-rule-color:auto;column-rule-color:auto;-webkit-column-rule-style:auto;column-rule-style:auto;-webkit-column-rule-width:auto;column-rule-width:auto;-webkit-column-span:auto;column-span:auto;-webkit-column-width:auto;column-width:auto;}", -] -`; - -exports[`vendor prefixing IV 1`] = ` -Array [ - ".css-25{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-text-decoration:none;text-decoration:none;-webkit-filter:grayscale(100%);filter:grayscale(100%);fill:red;position:-webkit-sticky;position:sticky;-webkit-mask-image:linear-gradient(#fff);mask-image:linear-gradient(#fff);-webkit-mask-image:none;mask-image:none;}", -] -`; - -exports[`vendor prefixing V 1`] = ` -Array [ - ".css-26{display :-webkit-box!important;display :-webkit-flex!important;display :-ms-flexbox!important;display :flex!important;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}", -] -`; - -exports[`vendor prefixing VI 1`] = ` -Array [ - ".css-27{-webkit-clip-path:none;clip-path:none;-webkit-mask-image:none;mask-image:none;}", -] -`; - -exports[`whitespace cascade false 1`] = ` -Array [ - ".css-35 html{width:0;}", -] -`; - -exports[`whitespace cascade true 1`] = ` -Array [ - ".css-34 html{width:0;}", -] -`; diff --git a/packages/css/test/__snapshots__/keyframes.test.js.snap b/packages/css/test/__snapshots__/keyframes.test.js.snap index a3340f81e1..f0012fdc76 100644 --- a/packages/css/test/__snapshots__/keyframes.test.js.snap +++ b/packages/css/test/__snapshots__/keyframes.test.js.snap @@ -4,12 +4,14 @@ exports[`keyframes keyframes with interpolation 1`] = ` @keyframes animation-0 { from { -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } @@ -30,31 +32,35 @@ exports[`keyframes keyframes with interpolation 1`] = ` exports[`keyframes renders 1`] = ` @keyframes animation-0 { 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-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); + -moz-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); + -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); + -moz-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); + -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); + -moz-transform: translate3d(0, -15px, 0); + -ms-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); + -moz-transform: translate3d(0,-4px,0); -ms-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } diff --git a/packages/css/test/__snapshots__/label-pattern.test.js.snap b/packages/css/test/__snapshots__/label-pattern.test.js.snap index f5281e919b..be38536610 100644 --- a/packages/css/test/__snapshots__/label-pattern.test.js.snap +++ b/packages/css/test/__snapshots__/label-pattern.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`label pattern input + label styled 1`] = ` -.emotion-0 + label::after { +.emotion-0+label::after { color: pink; background: orange; } diff --git a/packages/css/test/__snapshots__/selectivity.test.js.snap b/packages/css/test/__snapshots__/selectivity.test.js.snap index 7d262ba822..82cc781408 100644 --- a/packages/css/test/__snapshots__/selectivity.test.js.snap +++ b/packages/css/test/__snapshots__/selectivity.test.js.snap @@ -1,14 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`css complex nested media queries 1`] = ` -"@media (max-width:600px) { - .css-acogag h1 { +"@media (max-width: 600px) { + .css-1vjvce5 h1 { font-size: 1.4rem; } } -@media (max-width:400px),(max-height:420px) { - .css-acogag h1 { +@media (max-width: 400px),(max-height: 420px) { + .css-1vjvce5 h1 { font-size: 1.1rem; } }" @@ -31,7 +31,7 @@ exports[`css complex nested styles 1`] = ` color: burlywood; } -@media (min-width:420px) { +@media (min-width: 420px) { .css-s7aswl:hover .name:focus { color: rebeccapurple; } @@ -45,31 +45,31 @@ exports[`css handles media query merges 1`] = ` color: purple; } -@media (min-width:420px) { +@media (min-width: 420px) { .css-vs4yix { color: amethyst; } } -@media (min-width:640px) { +@media (min-width: 640px) { .css-vs4yix { color: rebeccapurple; } } -@media (min-width:960px) { +@media (min-width: 960px) { .css-vs4yix { color: burlywood; } } -@media (min-width:640px) { +@media (min-width: 640px) { .css-vs4yix { color: blue; } } -@media (min-width:640px) { +@media (min-width: 640px) { .css-vs4yix { color: aquamarine; } @@ -77,49 +77,108 @@ exports[`css handles media query merges 1`] = ` `; exports[`css media queries with multiple nested selectors 1`] = ` -".css-17riori { +".css-snkf7h { color: blue; } -@media (max-width:400px) { - .css-17riori { +@media (max-width: 400px) { + .css-snkf7h { color: green; } - .css-17riori h1 { + .css-snkf7h h1 { color: red; } - .css-17riori span { + .css-snkf7h span { color: red; } }" `; exports[`css media query with nested selector with nested selector on root 1`] = ` -".css-1ssiu3j span { +".css-1hvbare span { color: blue; } -@media (max-width:400px) { - .css-1ssiu3j { +@media (max-width: 400px) { + .css-1hvbare { color: green; } - .css-1ssiu3j span { + .css-1hvbare span { color: red; } }" `; exports[`css media query with nested selector without declarations on root 1`] = ` -"@media (max-width:400px) { - .css-18muius { +"@media (max-width: 400px) { + .css-156bult { color: green; } - .css-18muius span { + .css-156bult span { color: red; } }" `; + +exports[`orphaned pseudos in nested atrules 1`] = ` +"@media (max-width: 400px) { +@supports (display: grid) { + .css-mlu596 div, + .css-mlu596:first-child { + color: hotpink; + } +} +}" +`; + +exports[`orphaned pseudos multiple in a group 1`] = ` +".css-ynt3gm:hover div, +.css-ynt3gm:focus { + color: hotpink; +}" +`; + +exports[`orphaned pseudos multiple in a group in multiple in a group 1`] = ` +".css-b4zt77 .foo:first-child, +.css-b4zt77 .bar div:first-child, +.css-b4zt77 .qwe:first-child, +.css-b4zt77 .foo div, +.css-b4zt77 .bar div div, +.css-b4zt77 .qwe div, +.css-b4zt77 .foo span, +.css-b4zt77 .bar div span, +.css-b4zt77 .qwe span, +.css-b4zt77 .foo:last-child, +.css-b4zt77 .bar div:last-child, +.css-b4zt77 .qwe:last-child { + color: hotpink; +}" +`; + +exports[`orphaned pseudos overlapping - reversed 1`] = ` +".css-15m4dbh :first-child:first-child .css-15m4dbh :first-child { + color: hotpink; +}" +`; + +exports[`orphaned pseudos overlapping 1`] = ` +".css-dmhqee :first-child:first-child { + color: hotpink; +}" +`; + +exports[`orphaned pseudos regexp special character 1`] = ` +".css-1545qp0:nth-child(3) { + color: hotpink; +}" +`; + +exports[`orphaned pseudos single 1`] = ` +".css-17n559g:focus { + color: hotpink; +}" +`; diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap index 75a76bc676..fef01cd1b6 100644 --- a/packages/css/test/__snapshots__/warnings.test.js.snap +++ b/packages/css/test/__snapshots__/warnings.test.js.snap @@ -15,7 +15,7 @@ exports[`does not warn when valid values are passed for the content property 1`] content: 'another thing'; content: url("http://www.example.com/test.png"); content: counter(chapter_counter); - content: counters(section_counter,"."); + content: counters(section_counter, "."); content: attr(value string); } diff --git a/packages/css/test/insertion.test.js b/packages/css/test/insertion.test.js deleted file mode 100644 index 347213f5e3..0000000000 --- a/packages/css/test/insertion.test.js +++ /dev/null @@ -1,253 +0,0 @@ -// @flow -import Stylis from '@emotion/stylis' -import stylisRuleSheet from 'stylis-rule-sheet' - -const specs: any = [ - { - name: 'calc rules', - sample: 'height:calc( 100vh - 1px );height:calc(100vh -1px);' - }, - { - name: 'at-rules', - sample: - '@page { size:A4 landscape; }@document url(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(mozilla.org),regexp("https:.*") { body { color: red; }}@viewport { min-width:640px; max-width:800px;}@counter-style list { system:fixed; symbols:url(); suffix:" ";}', - skip: true - }, - { - name: 'monkey-patch some invalid css patterns', - sample: - 'margin:20px;.b { border:3px solid green;}}.c {color:red;}color:red;}.d {color red;};@media(screen) { width:20%;};@media(screen) { width:30%;};;;;;h1 {color:red}}};}h1 {color:red}}} ;}h1: hover{color:red;}' - }, - { - name: 'escape breaking control characters', - sample: 'content:"\f\u0000\u000b";' - }, - { - name: 'universal selector', - sample: '* {color:red;}' - }, - { - name: 'flat', - sample: 'color:20px;font-size:20px;transition:all' - }, - { - name: 'namespace', - sample: '{color:blue;}& {color:red;}' - }, - { - name: 'comments', - sample: - "// line comment// color: red;/** * removes block comments and line comments, * there's a fire in the house // there is */button /* // what's xxx */{color: blue;}// hellobutton /* 1 */{color: red; /* 2 */}" - }, - { - name: '&', - sample: - '& {color:blue;}&&& {color:red;}& + & {color:red;}.wrapper button& { color:red;}' - }, - { - name: '&:before', - sample: '&:before{color:blue;}' - }, - { - name: '@import', - sample: "@import url('http://example.com')", - skip: true - }, - { - name: '@supports', - sample: - '@supports (display:block) {color:red;h1 {color:red;h2 {color:blue;}}display:none;}@supports (appearance: none) {color:red;}' - }, - { - name: '@media', - skip: true, - sample: - '@media (max-width:600px) {color:red;h1 {color:red;h2 {color:blue;}}display:none;}@media (min-width:576px) {&.card-deck {.card { &:not(:first-child) { margin-left:15px; }&:not(:last-child) { margin-right:15px;}}}}@supports (display:block) {@media (min-width:10px) { background-color:seagreen;}}@media (max-width:600px) { & { color:red } } &:hover { color:orange }' - }, - { - name: '@media specifity', - sample: - '> #box-not-working { background:red; padding-left:8px; width:10px; @media only screen and (min-width:10px) {width:calc(10px + 90px *(100vw - 10px) / 90); } @media only screen and (min-width:90px) {width:90px; } height: 10px; @media only screen and (min-width:10px) {height:calc(10px + 90px *(100vw - 10px) / 90); } @media only screen and (min-width:90px) { height: 90px; }}' - }, - { - name: '@font-face', - sample: - "@font-face {font-family:Pangolin;src:url('Pangolin-Regular.ttf') format('truetype');}" - }, - { - name: 'multiple selectors', - sample: 'span, h1 {color:red;}h1, &:after, &:before {color:red;}' - }, - { - name: '[title="a,b"] and :matches(a,b)', - sample: - '.test:matches(a,b,c), .test {color:blue;}.test[title=","] {color:red;}[title="a,b,c, something"], h1, [title="a,b,c"] { color:red}[title="a"],[title="b"] {color:red;}' - }, - { - name: 'quoutes', - sample: - '.foo:before { content:".hello {world}"; content:".hello {world} \' "; content:\'.hello {world} " \';}' - }, - { - name: 'remove empty css', - sample: '& {}' - }, - { - name: 'urls', - sample: - 'background:url(http://url.com/});background:url(http://url.com//1234) \'(\'; // sdsdbackground-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAABCAIAAADsEU8HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIklEQVQI12P8//8/Aw4wbdq0rKysAZG1trbGJXv06FH8sgDIJBbBfp+hFAAAAABJRU5ErkJggg==");' - }, - { - name: 'last semicolon omission', - sample: '.content {display:none}.content {display:flex}' - }, - { - name: ':matches(:not())', - sample: 'h1:matches(.a,.b,:not(.c)) {display: none}' - }, - { - name: 'vendor prefixing', - sample: - 'html { text-size-adjust: none;}input.red::placeholder { color:red;}& {width:var(--foo-content);width:var(-content);width:var(--max-content);width:--max-content;width:max-content;width:min-content;display:flex!important;display:inline-flex;display:inline-box; transform:rotate(30deg); cursor:grab; justify-content:flex-end; justify-content:flex-start; justify-content:justify;}div {align-items:value;align-self:value;align-content:value;}div {color:papayawhip;order:flex;}div {backface-visibility:hidden;}h1:read-only { color:red;}& {transition:transform 1s,transform all 400ms,text-transform;}' - }, - { - name: 'vendor prefixing II', - sample: - 'div {writing-mode:vertical-lr;writing-mode:vertical-rl;writing-mode:horizontal-tb;writing-mode:sideways-rl;writing-mode:sideways-lr;}' - }, - { - name: 'vendor prefixing III', - sample: - 'color:red;columns:auto;column-count:auto;column-fill:auto;column-gap:auto;column-rule:auto;column-rule-color:auto;column-rule-style:auto;column-rule-width:auto;column-span:auto;column-width:auto;' - }, - { - name: 'vendor prefixing IV', - sample: - 'text-size-adjust:none;text-decoration:none;filter:grayscale(100%);fill:red;position: sticky;mask-image: linear-gradient(#fff);mask-image: none;' - }, - { - name: 'vendor prefixing V', - sample: - 'display :flex!important;justify-content: space-between;align-self: flex-start;align-self: flex-end;' - }, - { - name: 'vendor prefixing VI', - sample: 'clip-path: none;mask-image: none;' - }, - { - name: 'nested', - sample: - ':global(div) {h2 {color:red;h3 {color:blue;}}}.foo & { width:1px; &:hover { color:black; } li { color:white; }}h1, div {color:red;h2,&:before {color:red;}color:blue;header {font-size:12px;}@media {color:red;}@media {color:blue;}}&.foo {&.bar {color:orange}}&.foo {&.bar {&.barbar {color:orange}}}' - }, - { - name: 'class namespace', - sample: 'h1 {animation:slide 1s;}' - }, - { - name: 'id namespace', - sample: 'h1 {animation: slide 1s;}' - }, - { - name: 'attribute namespace', - sample: 'h1 {animation: slide 1s;}' - }, - { - name: 'empty namespace', - sample: 'h1 {animation:slide 1s;}@keyframes name {0: {top:0}}' - }, - { - name: 'edge cases', - sample: - '@media (min-width:537px) { border-bottom:4px solid red;}&::placeholder { color:pink;}.a {color:\'red\'}.b {color:"red"}.a {color:red;}[role=button]{color:red;}.b {padding:30 3} ' - }, - { - name: 'whitespace cascade true', - sample: 'html {width:0;}' - }, - { - name: 'whitespace cascade false', - sample: 'html{width:0;}' - }, - { - name: 'cascade isolation simple', - sample: - '[data-id=foo] {color:red;}p {color:red;}p a {color:red;}p:hover { color:red;}p::before { color:red;}:hover { color:red;}::before { color:red;}:hover p { color:red;}html.something & {color:red;}.class #id {color:red;}& {color:red}.a.b .c {color:red;}:nth-child(2n),:nth-last-child(2n),:nth-of-type(2n) {color:red;}a:not(:focus):disabled {color:red;}a:not(:focus) :disabled {color:red;}' - }, - { - name: 'cascade isolation complex', - sample: - '.List :global(>) :global(*) { margin-top:10px;}.List :global(*) :global(+) :global(*) { margin-top:10px;}.List :global(> *) { margin-top:10px;}.List :global(* + *) { margin-top:10px;}:global(.foo #bar > baz) {color:red;}div :global(.react-select .some-child-of-react-select) {color:red;}.root > :global(*):not(header) { color:red;}a:matches( a +b foo:hover :global(marquee) a) > :hover { color:red;}' - }, - { - name: 'cascade isolation @at-rules', - sample: - '@keyframes hahaha { from { top:0 } to { top:100 }}span {} @media (min-width:480px) { div { color:red } }' - }, - { - name: 'cascade isolation nesting', - sample: - 'color:red;h1 {:global(section) {color:red}}h1 {h2 {color:red}}div, span {h1 {color:red}}span {&:hover {color:red}}[data-id=foo] {&:hover {color:red}}' - }, - { - name: 'isolation edge cases', - sample: 'width:0;@media(screen) { color:red;}h1 {color:red;}' - }, - { - name: 'semi-colons', - sample: 'color:redh2 {color:bluewidth:0h3 {display:none}}' - }, - { - name: 'no semi-colons I', - sample: - 'color:redh2 {color:bluewidth:0h3 {display:none}}div:hover{color:red}' - }, - { - name: 'no semi-colons II', - sample: - 'color:redcolor:redh1:hover,h2:hover,h3{color:redwidth:0/2}h1 {grid-template-areas:"header header header"\'. main .\';}h1 {width:calc(20px)20px;}' - }, - { - name: 'multiline declaration', - sample: - 'html { background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/static/background.svg);}' - }, - { - name: 'nesting selector multiple levels', - sample: 'a {a {a {a {a {a {a {a {a{a{a{a{color:red;}}}}}}}}}}}}' - }, - { - name: 'nesting @media multiple levels', - sample: 'div {@media {a {color:red;@media {h1 {color:red;}}}}}', - skip: true - }, - { - name: 'complex nested selector', - sample: - '&:hover{color:blue;&:active{color:red;}}font-size:2rem;padding:16px;&:hover{color:pink;&:active{color:purple;}&.some-class{color:yellow;}}' - } -] - -let stylisOptions = { - global: false, - preserve: false, - keyframe: false, - semicolon: true, - cascade: true -} - -let stylis = new Stylis(stylisOptions) -let regularStylis = new Stylis(stylisOptions) - -specs.forEach((spec, i) => { - const newTest = spec.only ? test.only : spec.skip ? test.skip : test - newTest(spec.name, () => { - let out = [] - const plugin = stylisRuleSheet(rule => { - out.push(rule) - }) - stylis.use(null)(plugin) - stylis(`.css-${i}`, spec.sample) - expect(out).toMatchSnapshot() - expect(out.join('')).toEqual(regularStylis(`.css-${i}`, spec.sample)) - }) -}) diff --git a/packages/css/test/instance/__snapshots__/css.test.js.snap b/packages/css/test/instance/__snapshots__/css.test.js.snap index 8478b44783..ec57cd312b 100644 --- a/packages/css/test/instance/__snapshots__/css.test.js.snap +++ b/packages/css/test/instance/__snapshots__/css.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`css @supports 1`] = ` -@supports (display:grid) { +@supports (display: grid) { .emotion-0 { display: grid; } @@ -35,8 +35,6 @@ exports[`css array with explicit true 1`] = ` exports[`css auto px 1`] = ` .emotion-0 { display: flex; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; font-size: 10px; } @@ -58,9 +56,6 @@ exports[`css boolean as value 1`] = ` exports[`css composition stuff 1`] = ` .emotion-0 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } @@ -71,9 +66,6 @@ exports[`css composition stuff 1`] = ` exports[`css composition stuff 2`] = ` .emotion-0 { - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } @@ -87,24 +79,21 @@ exports[`css composition with objects 1`] = ` display: flex; width: 30px; height: calc(40vw - 50px); - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } .emotion-0:hover { - color: blue; + color: hotpink; } .emotion-0:after { content: " "; - color: red; + color: hotpink; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { - color: green; + color: hotpink; } } @@ -179,7 +168,7 @@ exports[`css falsy value in nested selector on object 1`] = ` exports[`css float property 1`] = ` .emotion-0 { - float: right; + float: left; }
- @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+1-1eff,U+20a0-20ab,U+20ad-20cf, U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;} + @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+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
- .some-global-200{padding:0;margin:200;}.some-key-127stik{color:#0147ae;}.some-global-199{padding:0;margin:199;}.some-global-198{padding:0;margin:198;}.some-global-197{padding:0;margin:197;}.some-global-196{padding:0;margin:196;}.some-global-195{padding:0;margin:195;}.some-global-194{padding:0;margin:194;}.some-global-193{padding:0;margin:193;}.some-global-192{padding:0;margin:192;}.some-global-191{padding:0;margin:191;}.some-global-190{padding:0;margin:190;}.some-global-189{padding:0;margin:189;}.some-global-188{padding:0;margin:188;}.some-global-187{padding:0;margin:187;}.some-global-186{padding:0;margin:186;}.some-global-185{padding:0;margin:185;}.some-global-184{padding:0;margin:184;}.some-global-183{padding:0;margin:183;}.some-global-182{padding:0;margin:182;}.some-global-181{padding:0;margin:181;}.some-global-180{padding:0;margin:180;}.some-global-179{padding:0;margin:179;}.some-global-178{padding:0;margin:178;}.some-global-177{padding:0;margin:177;}.some-global-176{padding:0;margin:176;}.some-global-175{padding:0;margin:175;}.some-global-174{padding:0;margin:174;}.some-global-173{padding:0;margin:173;}.some-global-172{padding:0;margin:172;}.some-global-171{padding:0;margin:171;}.some-global-170{padding:0;margin:170;}.some-global-169{padding:0;margin:169;}.some-global-168{padding:0;margin:168;}.some-global-167{padding:0;margin:167;}.some-global-166{padding:0;margin:166;}.some-global-165{padding:0;margin:165;}.some-global-164{padding:0;margin:164;}.some-global-163{padding:0;margin:163;}.some-global-162{padding:0;margin:162;}.some-global-161{padding:0;margin:161;}.some-global-160{padding:0;margin:160;}.some-global-159{padding:0;margin:159;}.some-global-158{padding:0;margin:158;}.some-global-157{padding:0;margin:157;}.some-global-156{padding:0;margin:156;}.some-global-155{padding:0;margin:155;}.some-global-154{padding:0;margin:154;}.some-global-153{padding:0;margin:153;}.some-global-152{padding:0;margin:152;}.some-global-151{padding:0;margin:151;}.some-global-150{padding:0;margin:150;}.some-global-149{padding:0;margin:149;}.some-global-148{padding:0;margin:148;}.some-global-147{padding:0;margin:147;}.some-global-146{padding:0;margin:146;}.some-global-145{padding:0;margin:145;}.some-global-144{padding:0;margin:144;}.some-global-143{padding:0;margin:143;}.some-global-142{padding:0;margin:142;}.some-global-141{padding:0;margin:141;}.some-global-140{padding:0;margin:140;}.some-global-139{padding:0;margin:139;}.some-global-138{padding:0;margin:138;}.some-global-137{padding:0;margin:137;}.some-global-136{padding:0;margin:136;}.some-global-135{padding:0;margin:135;}.some-global-134{padding:0;margin:134;}.some-global-133{padding:0;margin:133;}.some-global-132{padding:0;margin:132;}.some-global-131{padding:0;margin:131;}.some-global-130{padding:0;margin:130;}.some-global-129{padding:0;margin:129;}.some-global-128{padding:0;margin:128;}.some-global-127{padding:0;margin:127;}.some-global-126{padding:0;margin:126;}.some-global-125{padding:0;margin:125;}.some-global-124{padding:0;margin:124;}.some-global-123{padding:0;margin:123;}.some-global-122{padding:0;margin:122;}.some-global-121{padding:0;margin:121;}.some-global-120{padding:0;margin:120;}.some-global-119{padding:0;margin:119;}.some-global-118{padding:0;margin:118;}.some-global-117{padding:0;margin:117;}.some-global-116{padding:0;margin:116;}.some-global-115{padding:0;margin:115;}.some-global-114{padding:0;margin:114;}.some-global-113{padding:0;margin:113;}.some-global-112{padding:0;margin:112;}.some-global-111{padding:0;margin:111;}.some-global-110{padding:0;margin:110;}.some-global-109{padding:0;margin:109;}.some-global-108{padding:0;margin:108;}.some-global-107{padding:0;margin:107;}.some-global-106{padding:0;margin:106;}.some-global-105{padding:0;margin:105;}.some-global-104{padding:0;margin:104;}.some-global-103{padding:0;margin:103;}.some-global-102{padding:0;margin:102;}.some-global-101{padding:0;margin:101;}.some-global-100{padding:0;margin:100;}.some-global-99{padding:0;margin:99;}.some-global-98{padding:0;margin:98;}.some-global-97{padding:0;margin:97;}.some-global-96{padding:0;margin:96;}.some-global-95{padding:0;margin:95;}.some-global-94{padding:0;margin:94;}.some-global-93{padding:0;margin:93;}.some-global-92{padding:0;margin:92;}.some-global-91{padding:0;margin:91;}.some-global-90{padding:0;margin:90;}.some-global-89{padding:0;margin:89;}.some-global-88{padding:0;margin:88;}.some-global-87{padding:0;margin:87;}.some-global-86{padding:0;margin:86;}.some-global-85{padding:0;margin:85;}.some-global-84{padding:0;margin:84;}.some-global-83{padding:0;margin:83;}.some-global-82{padding:0;margin:82;}.some-global-81{padding:0;margin:81;}.some-global-80{padding:0;margin:80;}.some-global-79{padding:0;margin:79;}.some-global-78{padding:0;margin:78;}.some-global-77{padding:0;margin:77;}.some-global-76{padding:0;margin:76;}.some-global-75{padding:0;margin:75;}.some-global-74{padding:0;margin:74;}.some-global-73{padding:0;margin:73;}.some-global-72{padding:0;margin:72;}.some-global-71{padding:0;margin:71;}.some-global-70{padding:0;margin:70;}.some-global-69{padding:0;margin:69;}.some-global-68{padding:0;margin:68;}.some-global-67{padding:0;margin:67;}.some-global-66{padding:0;margin:66;}.some-global-65{padding:0;margin:65;}.some-global-64{padding:0;margin:64;}.some-global-63{padding:0;margin:63;}.some-global-62{padding:0;margin:62;}.some-global-61{padding:0;margin:61;}.some-global-60{padding:0;margin:60;}.some-global-59{padding:0;margin:59;}.some-global-58{padding:0;margin:58;}.some-global-57{padding:0;margin:57;}.some-global-56{padding:0;margin:56;}.some-global-55{padding:0;margin:55;}.some-global-54{padding:0;margin:54;}.some-global-53{padding:0;margin:53;}.some-global-52{padding:0;margin:52;}.some-global-51{padding:0;margin:51;}.some-global-50{padding:0;margin:50;}.some-global-49{padding:0;margin:49;}.some-global-48{padding:0;margin:48;}.some-global-47{padding:0;margin:47;}.some-global-46{padding:0;margin:46;}.some-global-45{padding:0;margin:45;}.some-global-44{padding:0;margin:44;}.some-global-43{padding:0;margin:43;}.some-global-42{padding:0;margin:42;}.some-global-41{padding:0;margin:41;}.some-global-40{padding:0;margin:40;}.some-global-39{padding:0;margin:39;}.some-global-38{padding:0;margin:38;}.some-global-37{padding:0;margin:37;}.some-global-36{padding:0;margin:36;}.some-global-35{padding:0;margin:35;}.some-global-34{padding:0;margin:34;}.some-global-33{padding:0;margin:33;}.some-global-32{padding:0;margin:32;}.some-global-31{padding:0;margin:31;}.some-global-30{padding:0;margin:30;}.some-global-29{padding:0;margin:29;}.some-global-28{padding:0;margin:28;}.some-global-27{padding:0;margin:27;}.some-global-26{padding:0;margin:26;}.some-global-25{padding:0;margin:25;}.some-global-24{padding:0;margin:24;}.some-global-23{padding:0;margin:23;}.some-global-22{padding:0;margin:22;}.some-global-21{padding:0;margin:21;}.some-global-20{padding:0;margin:20;}.some-global-19{padding:0;margin:19;}.some-global-18{padding:0;margin:18;}.some-global-17{padding:0;margin:17;}.some-global-16{padding:0;margin:16;}.some-global-15{padding:0;margin:15;}.some-global-14{padding:0;margin:14;}.some-global-13{padding:0;margin:13;}.some-global-12{padding:0;margin:12;}.some-global-11{padding:0;margin:11;}.some-global-10{padding:0;margin:10;}.some-global-9{padding:0;margin:9;}.some-global-8{padding:0;margin:8;}.some-global-7{padding:0;margin:7;}.some-global-6{padding:0;margin:6;}.some-global-5{padding:0;margin:5;}.some-global-4{padding:0;margin:4;}.some-global-3{padding:0;margin:3;}.some-global-2{padding:0;margin:2;}.some-global-1{padding:0;margin:1;} + .some-global-200{padding:0;margin:200;}.some-key-127stik{color:hotpink;}.some-global-199{padding:0;margin:199;}.some-global-198{padding:0;margin:198;}.some-global-197{padding:0;margin:197;}.some-global-196{padding:0;margin:196;}.some-global-195{padding:0;margin:195;}.some-global-194{padding:0;margin:194;}.some-global-193{padding:0;margin:193;}.some-global-192{padding:0;margin:192;}.some-global-191{padding:0;margin:191;}.some-global-190{padding:0;margin:190;}.some-global-189{padding:0;margin:189;}.some-global-188{padding:0;margin:188;}.some-global-187{padding:0;margin:187;}.some-global-186{padding:0;margin:186;}.some-global-185{padding:0;margin:185;}.some-global-184{padding:0;margin:184;}.some-global-183{padding:0;margin:183;}.some-global-182{padding:0;margin:182;}.some-global-181{padding:0;margin:181;}.some-global-180{padding:0;margin:180;}.some-global-179{padding:0;margin:179;}.some-global-178{padding:0;margin:178;}.some-global-177{padding:0;margin:177;}.some-global-176{padding:0;margin:176;}.some-global-175{padding:0;margin:175;}.some-global-174{padding:0;margin:174;}.some-global-173{padding:0;margin:173;}.some-global-172{padding:0;margin:172;}.some-global-171{padding:0;margin:171;}.some-global-170{padding:0;margin:170;}.some-global-169{padding:0;margin:169;}.some-global-168{padding:0;margin:168;}.some-global-167{padding:0;margin:167;}.some-global-166{padding:0;margin:166;}.some-global-165{padding:0;margin:165;}.some-global-164{padding:0;margin:164;}.some-global-163{padding:0;margin:163;}.some-global-162{padding:0;margin:162;}.some-global-161{padding:0;margin:161;}.some-global-160{padding:0;margin:160;}.some-global-159{padding:0;margin:159;}.some-global-158{padding:0;margin:158;}.some-global-157{padding:0;margin:157;}.some-global-156{padding:0;margin:156;}.some-global-155{padding:0;margin:155;}.some-global-154{padding:0;margin:154;}.some-global-153{padding:0;margin:153;}.some-global-152{padding:0;margin:152;}.some-global-151{padding:0;margin:151;}.some-global-150{padding:0;margin:150;}.some-global-149{padding:0;margin:149;}.some-global-148{padding:0;margin:148;}.some-global-147{padding:0;margin:147;}.some-global-146{padding:0;margin:146;}.some-global-145{padding:0;margin:145;}.some-global-144{padding:0;margin:144;}.some-global-143{padding:0;margin:143;}.some-global-142{padding:0;margin:142;}.some-global-141{padding:0;margin:141;}.some-global-140{padding:0;margin:140;}.some-global-139{padding:0;margin:139;}.some-global-138{padding:0;margin:138;}.some-global-137{padding:0;margin:137;}.some-global-136{padding:0;margin:136;}.some-global-135{padding:0;margin:135;}.some-global-134{padding:0;margin:134;}.some-global-133{padding:0;margin:133;}.some-global-132{padding:0;margin:132;}.some-global-131{padding:0;margin:131;}.some-global-130{padding:0;margin:130;}.some-global-129{padding:0;margin:129;}.some-global-128{padding:0;margin:128;}.some-global-127{padding:0;margin:127;}.some-global-126{padding:0;margin:126;}.some-global-125{padding:0;margin:125;}.some-global-124{padding:0;margin:124;}.some-global-123{padding:0;margin:123;}.some-global-122{padding:0;margin:122;}.some-global-121{padding:0;margin:121;}.some-global-120{padding:0;margin:120;}.some-global-119{padding:0;margin:119;}.some-global-118{padding:0;margin:118;}.some-global-117{padding:0;margin:117;}.some-global-116{padding:0;margin:116;}.some-global-115{padding:0;margin:115;}.some-global-114{padding:0;margin:114;}.some-global-113{padding:0;margin:113;}.some-global-112{padding:0;margin:112;}.some-global-111{padding:0;margin:111;}.some-global-110{padding:0;margin:110;}.some-global-109{padding:0;margin:109;}.some-global-108{padding:0;margin:108;}.some-global-107{padding:0;margin:107;}.some-global-106{padding:0;margin:106;}.some-global-105{padding:0;margin:105;}.some-global-104{padding:0;margin:104;}.some-global-103{padding:0;margin:103;}.some-global-102{padding:0;margin:102;}.some-global-101{padding:0;margin:101;}.some-global-100{padding:0;margin:100;}.some-global-99{padding:0;margin:99;}.some-global-98{padding:0;margin:98;}.some-global-97{padding:0;margin:97;}.some-global-96{padding:0;margin:96;}.some-global-95{padding:0;margin:95;}.some-global-94{padding:0;margin:94;}.some-global-93{padding:0;margin:93;}.some-global-92{padding:0;margin:92;}.some-global-91{padding:0;margin:91;}.some-global-90{padding:0;margin:90;}.some-global-89{padding:0;margin:89;}.some-global-88{padding:0;margin:88;}.some-global-87{padding:0;margin:87;}.some-global-86{padding:0;margin:86;}.some-global-85{padding:0;margin:85;}.some-global-84{padding:0;margin:84;}.some-global-83{padding:0;margin:83;}.some-global-82{padding:0;margin:82;}.some-global-81{padding:0;margin:81;}.some-global-80{padding:0;margin:80;}.some-global-79{padding:0;margin:79;}.some-global-78{padding:0;margin:78;}.some-global-77{padding:0;margin:77;}.some-global-76{padding:0;margin:76;}.some-global-75{padding:0;margin:75;}.some-global-74{padding:0;margin:74;}.some-global-73{padding:0;margin:73;}.some-global-72{padding:0;margin:72;}.some-global-71{padding:0;margin:71;}.some-global-70{padding:0;margin:70;}.some-global-69{padding:0;margin:69;}.some-global-68{padding:0;margin:68;}.some-global-67{padding:0;margin:67;}.some-global-66{padding:0;margin:66;}.some-global-65{padding:0;margin:65;}.some-global-64{padding:0;margin:64;}.some-global-63{padding:0;margin:63;}.some-global-62{padding:0;margin:62;}.some-global-61{padding:0;margin:61;}.some-global-60{padding:0;margin:60;}.some-global-59{padding:0;margin:59;}.some-global-58{padding:0;margin:58;}.some-global-57{padding:0;margin:57;}.some-global-56{padding:0;margin:56;}.some-global-55{padding:0;margin:55;}.some-global-54{padding:0;margin:54;}.some-global-53{padding:0;margin:53;}.some-global-52{padding:0;margin:52;}.some-global-51{padding:0;margin:51;}.some-global-50{padding:0;margin:50;}.some-global-49{padding:0;margin:49;}.some-global-48{padding:0;margin:48;}.some-global-47{padding:0;margin:47;}.some-global-46{padding:0;margin:46;}.some-global-45{padding:0;margin:45;}.some-global-44{padding:0;margin:44;}.some-global-43{padding:0;margin:43;}.some-global-42{padding:0;margin:42;}.some-global-41{padding:0;margin:41;}.some-global-40{padding:0;margin:40;}.some-global-39{padding:0;margin:39;}.some-global-38{padding:0;margin:38;}.some-global-37{padding:0;margin:37;}.some-global-36{padding:0;margin:36;}.some-global-35{padding:0;margin:35;}.some-global-34{padding:0;margin:34;}.some-global-33{padding:0;margin:33;}.some-global-32{padding:0;margin:32;}.some-global-31{padding:0;margin:31;}.some-global-30{padding:0;margin:30;}.some-global-29{padding:0;margin:29;}.some-global-28{padding:0;margin:28;}.some-global-27{padding:0;margin:27;}.some-global-26{padding:0;margin:26;}.some-global-25{padding:0;margin:25;}.some-global-24{padding:0;margin:24;}.some-global-23{padding:0;margin:23;}.some-global-22{padding:0;margin:22;}.some-global-21{padding:0;margin:21;}.some-global-20{padding:0;margin:20;}.some-global-19{padding:0;margin:19;}.some-global-18{padding:0;margin:18;}.some-global-17{padding:0;margin:17;}.some-global-16{padding:0;margin:16;}.some-global-15{padding:0;margin:15;}.some-global-14{padding:0;margin:14;}.some-global-13{padding:0;margin:13;}.some-global-12{padding:0;margin:12;}.some-global-11{padding:0;margin:11;}.some-global-10{padding:0;margin:10;}.some-global-9{padding:0;margin:9;}.some-global-8{padding:0;margin:8;}.some-global-7{padding:0;margin:7;}.some-global-6{padding:0;margin:6;}.some-global-5{padding:0;margin:5;}.some-global-4{padding:0;margin:4;}.some-global-3{padding:0;margin:3;}.some-global-2{padding:0;margin:2;}.some-global-1{padding:0;margin:1;}
- .some-key-9rpmvg{color:#014954;} + .some-key-9rpmvg{color:hotpink;}
woah there @@ -260,7 +167,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -270,7 +177,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -280,7 +187,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -290,7 +197,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -300,7 +207,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -310,7 +217,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -320,7 +227,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -330,7 +237,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -340,7 +247,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -350,7 +257,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -360,7 +267,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -370,7 +277,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -380,7 +287,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -390,7 +297,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -400,7 +307,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -410,7 +317,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -420,7 +327,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -430,7 +337,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -440,7 +347,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -450,7 +357,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -460,7 +367,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -470,7 +377,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -480,7 +387,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -490,7 +397,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -500,7 +407,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -510,7 +417,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -520,7 +427,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -530,7 +437,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -540,7 +447,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -550,7 +457,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -560,7 +467,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -570,7 +477,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -580,7 +487,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -590,7 +497,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -600,7 +507,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -610,7 +517,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -620,7 +527,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -630,7 +537,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -640,7 +547,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -650,7 +557,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -660,7 +567,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -670,7 +577,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -680,7 +587,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -690,7 +597,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -700,7 +607,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -710,7 +617,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -720,7 +627,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -730,7 +637,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -740,7 +647,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -750,7 +657,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -760,7 +667,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -770,7 +677,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -780,7 +687,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -790,7 +697,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -800,7 +707,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -810,7 +717,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -820,7 +727,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -830,7 +737,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -840,7 +747,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -850,7 +757,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -860,7 +767,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -870,7 +777,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -880,7 +787,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -890,7 +797,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -900,7 +807,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -910,7 +817,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -920,7 +827,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -930,7 +837,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -940,7 +847,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -950,7 +857,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -960,7 +867,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -970,7 +877,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -980,7 +887,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -990,7 +897,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1000,7 +907,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1010,7 +917,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1020,7 +927,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1030,7 +937,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1040,7 +947,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1050,7 +957,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1060,7 +967,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1070,7 +977,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1080,7 +987,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1090,7 +997,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1100,7 +1007,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1110,7 +1017,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1120,7 +1027,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1130,7 +1037,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1140,7 +1047,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1150,7 +1057,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1160,7 +1067,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1170,7 +1077,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1180,7 +1087,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1190,7 +1097,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1200,7 +1107,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1210,7 +1117,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1220,7 +1127,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1230,7 +1137,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1240,7 +1147,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1250,7 +1157,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1260,7 +1167,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1270,7 +1177,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1280,7 +1187,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1290,7 +1197,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1300,7 +1207,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1310,7 +1217,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1320,7 +1227,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1330,7 +1237,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1340,7 +1247,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1350,7 +1257,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1360,7 +1267,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1370,7 +1277,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1380,7 +1287,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1390,7 +1297,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1400,7 +1307,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1410,7 +1317,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1420,7 +1327,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1430,7 +1337,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1440,7 +1347,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1450,7 +1357,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1460,7 +1367,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1470,7 +1377,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1480,7 +1387,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1490,7 +1397,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1500,7 +1407,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1510,7 +1417,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1520,7 +1427,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1530,7 +1437,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1540,7 +1447,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1550,7 +1457,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1560,7 +1467,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1570,7 +1477,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1580,7 +1487,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1590,7 +1497,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1600,7 +1507,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1610,7 +1517,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1620,7 +1527,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1630,7 +1537,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1640,7 +1547,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1650,7 +1557,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1660,7 +1567,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1670,7 +1577,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1680,7 +1587,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1690,7 +1597,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1700,7 +1607,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1710,7 +1617,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1720,7 +1627,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1730,7 +1637,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1740,7 +1647,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1750,7 +1657,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1760,7 +1667,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1770,7 +1677,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1780,7 +1687,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1790,7 +1697,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1800,7 +1707,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1810,7 +1717,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1820,7 +1727,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1830,7 +1737,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1840,7 +1747,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1850,7 +1757,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1860,7 +1767,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1870,7 +1777,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1880,7 +1787,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1890,7 +1797,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1900,7 +1807,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1910,7 +1817,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1920,7 +1827,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1930,7 +1837,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1940,7 +1847,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1950,7 +1857,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1960,7 +1867,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1970,7 +1877,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1980,7 +1887,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -1990,7 +1897,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2000,7 +1907,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2010,7 +1917,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2020,7 +1927,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2030,7 +1937,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2040,7 +1947,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2050,7 +1957,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2060,7 +1967,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2070,7 +1977,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2080,7 +1987,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2090,7 +1997,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2100,7 +2007,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2110,7 +2017,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2120,7 +2027,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2130,7 +2037,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2140,7 +2047,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2150,7 +2057,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2160,7 +2067,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2170,7 +2077,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2180,7 +2087,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2190,7 +2097,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2200,7 +2107,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2210,7 +2117,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2220,7 +2127,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2230,7 +2137,7 @@ exports[`renderStylesToNodeStream renders large recursive component 1`] = `
woah there @@ -2443,13 +2350,13 @@ exports[`renderStylesToNodeStream renders styles with ids 1`] = `
- @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+1-1eff,U+20a0-20ab,U+20ad-20cf, U+2c60-2c7f,U+A720-A7FF;}@-webkit-keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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-i9f7qw-bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-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:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:white;background-color:lightgray;border-color:aqua;box-shadow:15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;} + @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+1-1eff,U+20a0-20ab,U+20ad-20cf,U+2c60-2c7f,U+A720-A7FF;}@keyframes animation-i9f7qw-bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0);}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0);}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0, -4px, 0);}}.no-prefix{display:flex;justify-content:center;}.some-key-14e1j2p-hoverStyles-Something_Main{color:hotpink;display:flex;}.some-key-14e1j2p-hoverStyles-Something_Main:hover{color:hotpink;background-color:lightgray;border-color:aqua;box-shadow:-15px -15px 0 0 aqua,-30px -30px 0 0 cornflowerblue;}
diff --git a/packages/css/test/instance/emotion-instance.js b/packages/css/test/instance/emotion-instance.js index 95d9fecaba..943d712879 100644 --- a/packages/css/test/instance/emotion-instance.js +++ b/packages/css/test/instance/emotion-instance.js @@ -1,11 +1,10 @@ // @flow import createEmotion from '@emotion/css/create-instance' import createEmotionServer from '@emotion/server/create-instance' -import { transform } from 'cssjanus' -function stylisPlugin(context, content) { - if (context === 2) { - return transform(content) +function stylisPlugin(element) { + if (element.type === 'decl' && element.value.startsWith('color:')) { + element.value = `color:hotpink;` } } @@ -18,13 +17,7 @@ if (typeof document !== 'undefined') { } const emotion = createEmotion({ - stylisPlugins: stylisPlugin, - prefix: (key, value) => { - if (key === 'display' && value === 'flex') { - return false - } - return true - }, + stylisPlugins: [stylisPlugin], nonce: 'some-nonce', key: 'some-key', container diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap index 9155fb853c..59f6fe483c 100644 --- a/packages/css/test/no-babel/__snapshots__/index.test.js.snap +++ b/packages/css/test/no-babel/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`css @supports 1`] = ` -@supports (display:grid) { +@supports (display: grid) { .emotion-0 { display: grid; } @@ -23,8 +23,8 @@ exports[`css composition 1`] = ` display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -40,8 +40,8 @@ exports[`css composition 1`] = ` exports[`css composition stuff 1`] = ` .emotion-0 { -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -53,8 +53,8 @@ exports[`css composition stuff 1`] = ` exports[`css composition stuff 2`] = ` .emotion-0 { -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -72,8 +72,8 @@ exports[`css composition with objects 1`] = ` width: 30px; height: calc(40vw - 50px); -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -86,7 +86,7 @@ exports[`css composition with objects 1`] = ` color: red; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { color: green; } @@ -206,7 +206,7 @@ exports[`css random expression 1`] = ` background: green; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { color: blue; width: 96px; diff --git a/packages/css/test/selectivity.test.js b/packages/css/test/selectivity.test.js index 44865f5145..ddef27e148 100644 --- a/packages/css/test/selectivity.test.js +++ b/packages/css/test/selectivity.test.js @@ -4,6 +4,7 @@ import { css, sheet, flush } from '@emotion/css' describe('css', () => { afterEach(() => flush()) + test('complex nested styles', () => { const mq = [ '@media(min-width: 420px)', @@ -117,3 +118,94 @@ describe('css', () => { expect(sheet).toMatchSnapshot() }) }) + +describe('orphaned pseudos', () => { + afterEach(() => flush()) + + test('single', () => { + css` + :focus { + color: hotpink; + } + ` + + expect(sheet).toMatchSnapshot() + }) + + test('multiple in a group', () => { + css` + :hover div, + :focus { + color: hotpink; + } + ` + + expect(sheet).toMatchSnapshot() + }) + + test('multiple in a group in multiple in a group', () => { + css` + .foo, + .bar div, + .qwe { + :first-child, + div, + span, + :last-child { + color: hotpink; + } + } + ` + + expect(sheet).toMatchSnapshot() + }) + + test('regexp special character', () => { + css` + :nth-child(3) { + color: hotpink; + } + ` + + expect(sheet).toMatchSnapshot() + }) + + test('overlapping', () => { + css` + & :first-child { + :first-child { + color: hotpink; + } + } + ` + + expect(sheet).toMatchSnapshot() + }) + + test('overlapping - reversed', () => { + css` + & :first-child { + :first-child & { + color: hotpink; + } + } + ` + + expect(sheet).toMatchSnapshot() + }) + + test('in nested atrules', () => { + css` + @media (max-width: 400px) { + @supports (display: grid) { + div, + :first-child { + color: hotpink; + } + } + } + ` + + expect(sheet).toMatchSnapshot() + }) +}) diff --git a/packages/css/test/source-map/__snapshots__/source-map.test.js.snap b/packages/css/test/source-map/__snapshots__/source-map.test.js.snap index 02b093aac9..16b82785c5 100644 --- a/packages/css/test/source-map/__snapshots__/source-map.test.js.snap +++ b/packages/css/test/source-map/__snapshots__/source-map.test.js.snap @@ -9,16 +9,16 @@ exports[`css css without newline or semicolon 1`] = ` `; exports[`css source-map nested media queries 1`] = ` -"@media (max-width:600px) { - .css-acogag h1 { +"@media (max-width: 600px) { + .css-1vjvce5 h1 { font-size: 1.4rem; } } /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ08iLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICd0ZXN0LXV0aWxzL2xlZ2FjeS1lbnYnXG5pbXBvcnQgeyBjc3MsIHNoZWV0LCBmbHVzaCB9IGZyb20gJ0BlbW90aW9uL2NzcydcblxuZ2xvYmFsLnNob3VsZEtlZXBTb3VyY2VNYXBzID0gdHJ1ZVxuXG5kZXNjcmliZSgnY3NzJywgKCkgPT4ge1xuICBhZnRlckVhY2goKCkgPT4gZmx1c2goKSlcbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgc3R5bGVzJywgKCkgPT4ge1xuICAgIGNvbnN0IG1xID0gW1xuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDQyMHB4KScsXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNjQwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA5NjBweCknXG4gICAgXVxuXG4gICAgY3NzKHtcbiAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICAnJjpob3Zlcic6IHtcbiAgICAgICAgJyYgLm5hbWUnOiB7XG4gICAgICAgICAgY29sb3I6ICdhbWV0aHlzdCcsXG4gICAgICAgICAgJyY6Zm9jdXMnOiB7XG4gICAgICAgICAgICBjb2xvcjogJ2J1cmx5d29vZCcsXG4gICAgICAgICAgICBbbXFbMF1dOiB7XG4gICAgICAgICAgICAgIGNvbG9yOiAncmViZWNjYXB1cnBsZSdcbiAgICAgICAgICAgIH1cbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nXG4gICAgICB9XG4gICAgfSlcbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG5cbiAgdGVzdCgnc291cmNlLW1hcCBuZXN0ZWQgbWVkaWEgcXVlcmllcycsICgpID0+IHtcbiAgICBjc3NgXG4gICAgICBAbWVkaWEgKG1heC13aWR0aDogNjAwcHgpIHtcbiAgICAgICAgaDEge1xuICAgICAgICAgIGZvbnQtc2l6ZTogMS40cmVtO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA0MDBweCksIChtYXgtaGVpZ2h0OiA0MjBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjFyZW07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICBgXG5cbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG4gIHRlc3QoJ2NzcyB3aXRob3V0IG5ld2xpbmUgb3Igc2VtaWNvbG9uJywgKCkgPT4ge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZVxuICAgIGNvbnN0IGNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGBcbiAgICBleHBlY3Qoc2hlZXQpLnRvTWF0Y2hTbmFwc2hvdCgpXG4gIH0pXG59KVxuIl19 */ -@media (max-width:400px),(max-height:420px) { - .css-acogag h1 { +@media (max-width: 400px),(max-height: 420px) { + .css-1vjvce5 h1 { font-size: 1.1rem; } } @@ -51,7 +51,7 @@ exports[`css source-map nested styles 1`] = ` /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgJ3Rlc3QtdXRpbHMvbGVnYWN5LWVudidcbmltcG9ydCB7IGNzcywgc2hlZXQsIGZsdXNoIH0gZnJvbSAnQGVtb3Rpb24vY3NzJ1xuXG5nbG9iYWwuc2hvdWxkS2VlcFNvdXJjZU1hcHMgPSB0cnVlXG5cbmRlc2NyaWJlKCdjc3MnLCAoKSA9PiB7XG4gIGFmdGVyRWFjaCgoKSA9PiBmbHVzaCgpKVxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBzdHlsZXMnLCAoKSA9PiB7XG4gICAgY29uc3QgbXEgPSBbXG4gICAgICAnQG1lZGlhKG1pbi13aWR0aDogNDIwcHgpJyxcbiAgICAgICdAbWVkaWEobWluLXdpZHRoOiA2NDBweCknLFxuICAgICAgJ0BtZWRpYShtaW4td2lkdGg6IDk2MHB4KSdcbiAgICBdXG5cbiAgICBjc3Moe1xuICAgICAgY29sb3I6ICdibHVlJyxcbiAgICAgICcmOmhvdmVyJzoge1xuICAgICAgICAnJiAubmFtZSc6IHtcbiAgICAgICAgICBjb2xvcjogJ2FtZXRoeXN0JyxcbiAgICAgICAgICAnJjpmb2N1cyc6IHtcbiAgICAgICAgICAgIGNvbG9yOiAnYnVybHl3b29kJyxcbiAgICAgICAgICAgIFttcVswXV06IHtcbiAgICAgICAgICAgICAgY29sb3I6ICdyZWJlY2NhcHVycGxlJ1xuICAgICAgICAgICAgfVxuICAgICAgICAgIH1cbiAgICAgICAgfSxcbiAgICAgICAgY29sb3I6ICdncmVlbidcbiAgICAgIH1cbiAgICB9KVxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcblxuICB0ZXN0KCdzb3VyY2UtbWFwIG5lc3RlZCBtZWRpYSBxdWVyaWVzJywgKCkgPT4ge1xuICAgIGNzc2BcbiAgICAgIEBtZWRpYSAobWF4LXdpZHRoOiA2MDBweCkge1xuICAgICAgICBoMSB7XG4gICAgICAgICAgZm9udC1zaXplOiAxLjRyZW07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDQwMHB4KSwgKG1heC1oZWlnaHQ6IDQyMHB4KSB7XG4gICAgICAgIGgxIHtcbiAgICAgICAgICBmb250LXNpemU6IDEuMXJlbTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIGBcblxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbiAgdGVzdCgnY3NzIHdpdGhvdXQgbmV3bGluZSBvciBzZW1pY29sb24nLCAoKSA9PiB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lXG4gICAgY29uc3QgY2xzID0gY3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYFxuICAgIGV4cGVjdChzaGVldCkudG9NYXRjaFNuYXBzaG90KClcbiAgfSlcbn0pXG4iXX0= */ -@media (min-width:420px) { +@media (min-width: 420px) { .css-s7aswl:hover .name:focus { color: rebeccapurple; } diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js index a25a158402..3994d541e6 100644 --- a/packages/css/test/warnings.test.js +++ b/packages/css/test/warnings.test.js @@ -1,6 +1,7 @@ // @flow import 'test-utils/legacy-env' import { css } from '@emotion/css' +import createCss from '@emotion/css/create-instance' import * as React from 'react' import renderer from 'react-test-renderer' @@ -53,3 +54,21 @@ it('does warn when functions are passed to css calls', () => { "Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`" ) }) + +it('does warn when @import rule is being inserted after order-insensitive rules', () => { + const { injectGlobal } = createCss({ key: 'import-after-regular' }) + + injectGlobal`.thing {display:flex;}` + injectGlobal`@import 'custom.css';` + + expect((console.error: any).mock.calls).toMatchInlineSnapshot(` + Array [ + Array [ + "You're attempting to insert the following rule: + @import 'custom.css'; + + \`@import\` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that \`@import\` rules are before all other rules.", + ], + ] + `) +}) diff --git a/packages/jest/test/__snapshots__/printer.test.js.snap b/packages/jest/test/__snapshots__/printer.test.js.snap index e093a7bf56..683efe4fe4 100644 --- a/packages/jest/test/__snapshots__/printer.test.js.snap +++ b/packages/jest/test/__snapshots__/printer.test.js.snap @@ -83,5 +83,3 @@ exports[`prints speedy styles 1`] = ` className=\\"emotion-0\\" />" `; - -exports[`throws nice error for invalid css 1`] = `"There was an error parsing the following css: \\".css-1kkrnw9-tree{jnnjvh@'jevhevhb;label:tree;}\\""`; diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js index 7679d9beab..645737a40e 100644 --- a/packages/jest/test/printer.test.js +++ b/packages/jest/test/printer.test.js @@ -149,18 +149,6 @@ header .emotion-0 { }) }) -test('throws nice error for invalid css', () => { - const tree = renderer.create(
).toJSON() - - expect(() => { - ignoreConsoleErrors(() => { - prettyFormat(tree, { - plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement] - }) - }) - }).toThrowErrorMatchingSnapshot() -}) - test('prints speedy styles', () => { const speedyCache = createCache({ key: 'speedy-key', diff --git a/packages/react/__tests__/__snapshots__/css.js.snap b/packages/react/__tests__/__snapshots__/css.js.snap index 8518572479..1cf2ff3c35 100644 --- a/packages/react/__tests__/__snapshots__/css.js.snap +++ b/packages/react/__tests__/__snapshots__/css.js.snap @@ -128,12 +128,12 @@ exports[`label in css call 1`] = ` `; exports[`nested at rule 1`] = ` -@media (min-width:980px) { +@media (min-width: 980px) { .emotion-0 { background-color: blue; } -@supports (width:100vw) { +@supports (width: 100vw) { .emotion-0 { background-color: red; } diff --git a/packages/react/__tests__/__snapshots__/global.js.snap b/packages/react/__tests__/__snapshots__/global.js.snap index d68d32261a..de44120a6d 100644 --- a/packages/react/__tests__/__snapshots__/global.js.snap +++ b/packages/react/__tests__/__snapshots__/global.js.snap @@ -18,25 +18,25 @@ exports[`basic 1`] = ` data-emotion="css-global" > - @font-face{font-family:some-name;} + @import url('something.com/file.css'); `; diff --git a/packages/react/__tests__/__snapshots__/server.js.snap b/packages/react/__tests__/__snapshots__/server.js.snap index 3824bd86e5..f697e11d0f 100644 --- a/packages/react/__tests__/__snapshots__/server.js.snap +++ b/packages/react/__tests__/__snapshots__/server.js.snap @@ -1,16 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ssr @import 1`] = ` - -
-
- -`; - exports[`ssr ClassNames 1`] = ` -
-
-`; - -exports[`ssr prefix option false with stylis plugins 1`] = ` - -
-
-`; - -exports[`ssr prefix option func false 1`] = ` - -
-
-`; - -exports[`ssr prefix option func false with stylis plugins 1`] = ` - -
-
-`; - -exports[`ssr prefix option true with stylis plugins 1`] = ` - -
-
-`; - exports[`ssr styled with keyframes 1`] = ` - -
-
-`; - exports[`ssr with old api ClassNames 1`] = ` -
-
-`; - -exports[`ssr with old api prefix option false with stylis plugins 1`] = ` - -
-
-`; - -exports[`ssr with old api prefix option func false 1`] = ` - -
-
-`; - -exports[`ssr with old api prefix option func false with stylis plugins 1`] = ` - -
-
-`; - -exports[`ssr with old api prefix option true with stylis plugins 1`] = ` - -
-
-`; - exports[`ssr with old api styled with keyframes 1`] = `
diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js index 722050eb6f..f4fc80b8ac 100644 --- a/packages/sheet/__tests__/index.js +++ b/packages/sheet/__tests__/index.js @@ -10,6 +10,13 @@ let defaultOptions = { container: safeQuerySelector('head') } +// $FlowFixMe +console.error = jest.fn() + +afterEach(() => { + jest.clearAllMocks() +}) + describe('StyleSheet', () => { it('should be speedy by default in production', () => { process.env.NODE_ENV = 'production' @@ -62,16 +69,11 @@ describe('StyleSheet', () => { it('should throw when inserting a bad rule in speedy mode', () => { const sheet = new StyleSheet({ ...defaultOptions, speedy: true }) - const oldConsoleError = console.error - // $FlowFixMe - console.error = jest.fn() sheet.insert('.asdfasdf4###112121211{') expect(console.error).toHaveBeenCalledTimes(1) expect((console.error: any).mock.calls[0][0]).toBe( 'There was a problem inserting the following rule: ".asdfasdf4###112121211{"' ) - // $FlowFixMe - console.error = oldConsoleError sheet.flush() }) @@ -100,18 +102,6 @@ describe('StyleSheet', () => { document.body.removeChild(container) }) - it('should not throw an error when inserting a @import rule in speedy when a rule has already been inserted', () => { - const sheet = new StyleSheet({ ...defaultOptions, speedy: true }) - sheet.insert('h1 {color:hotpink;}') - let importRule = - "@import url('https://fonts.googleapis.com/css?family=Merriweather');" - sheet.insert(importRule) - expect(sheet.tags).toHaveLength(1) - // $FlowFixMe - expect(sheet.tags[0].sheet.cssRules[0]).toBeInstanceOf(window.CSSImportRule) - sheet.flush() - }) - it('should accept prepend option', () => { const head = safeQuerySelector('head') const otherStyle = document.createElement('style') diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js index 28c6bc6d57..b1f80c5155 100644 --- a/packages/sheet/src/index.js +++ b/packages/sheet/src/index.js @@ -108,27 +108,31 @@ export class StyleSheet { } const tag = this.tags[this.tags.length - 1] + if (process.env.NODE_ENV !== 'production') { + const isImportRule = + rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105 + + if (isImportRule && (this: any)._alreadyInsertedOrderInsensitiveRule) { + // this would only cause problem in speedy mode + // but we don't want enabling speedy to affect the observable behavior + // so we report this error at all times + console.error( + `You're attempting to insert the following rule:\n` + + rule + + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.' + ) + } + + ;(this: any)._alreadyInsertedOrderInsensitiveRule = + (this: any)._alreadyInsertedOrderInsensitiveRule || !isImportRule + } + if (this.isSpeedy) { const sheet = sheetForTag(tag) try { - // this is a really hot path - // we check the second character first because having "i" - // as the second character will happen less often than - // having "@" as the first character - let isImportRule = - rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64 // this is the ultrafast version, works across browsers // the big drawback is that the css won't be editable in devtools - sheet.insertRule( - rule, // technically this means that the @import rules will // otherwise there will be an error // we need to insert @import rules before anything else - // _usually_(not always since there could be multiple style tags) - // be the first ones in prod and generally later in dev - // this shouldn't really matter in the real world though - // @import is generally only used for font faces from google fonts and etc. - // so while this could be technically correct then it would be slower and larger - // for a tiny bit of correctness that won't matter in the real world - isImportRule ? 0 : sheet.cssRules.length - ) + sheet.insertRule(rule, sheet.cssRules.length) } catch (e) { if (process.env.NODE_ENV !== 'production') { console.error( @@ -148,5 +152,8 @@ export class StyleSheet { this.tags.forEach(tag => tag.parentNode.removeChild(tag)) this.tags = [] this.ctr = 0 + if (process.env.NODE_ENV !== 'production') { + ;(this: any)._alreadyInsertedOrderInsensitiveRule = false + } } } diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap index 80b2e6c564..b59005b925 100644 --- a/packages/styled/__tests__/__snapshots__/styled.js.snap +++ b/packages/styled/__tests__/__snapshots__/styled.js.snap @@ -6,7 +6,7 @@ exports[`styled basic render 1`] = ` font-size: 20px; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { color: blue; } @@ -74,8 +74,8 @@ exports[`styled composing components 1`] = ` display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -446,7 +446,6 @@ exports[`styled object composition 1`] = ` .emotion-0 { border-radius: 50%; -webkit-transition: -webkit-transform 400ms ease-in-out; - -webkit-transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out; border: 3px solid currentColor; width: 96px; @@ -457,6 +456,7 @@ exports[`styled object composition 1`] = ` .emotion-0:hover { -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } diff --git a/packages/styled/test/__snapshots__/composition.test.js.snap b/packages/styled/test/__snapshots__/composition.test.js.snap index 4fefdfbd0e..abd0c0b8b2 100644 --- a/packages/styled/test/__snapshots__/composition.test.js.snap +++ b/packages/styled/test/__snapshots__/composition.test.js.snap @@ -9,8 +9,8 @@ exports[`composing components 1`] = ` display: -ms-flexbox; display: flex; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } @@ -93,7 +93,7 @@ exports[`composition with objects 1`] = ` font-size: 32px; } -@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:1.5/1), only screen and (min-resolution:144dpi), only screen and (min-resolution:1.5dppx) { +@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 1.5/1),only screen and (min-resolution: 144dpi),only screen and (min-resolution: 1.5dppx) { .emotion-0 { font-size: 1.25em; } @@ -131,7 +131,6 @@ exports[`object composition 1`] = ` .emotion-0 { border-radius: 50%; -webkit-transition: -webkit-transform 400ms ease-in-out; - -webkit-transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out; border: 3px solid currentColor; width: 96px; @@ -142,6 +141,7 @@ exports[`object composition 1`] = ` .emotion-0:hover { -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap index f89164acfa..28a847204f 100644 --- a/packages/styled/test/__snapshots__/index.test.js.snap +++ b/packages/styled/test/__snapshots__/index.test.js.snap @@ -6,7 +6,7 @@ exports[`styled basic render 1`] = ` font-size: 20px; } -@media (min-width:420px) { +@media (min-width: 420px) { .emotion-0 { color: blue; } diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx index e3f13c99ce..ff080792bf 100644 --- a/packages/styled/types/tests.tsx +++ b/packages/styled/types/tests.tsx @@ -136,3 +136,32 @@ const Input5 = styled.input` console.log(evt.target.value) } /> + +{ + const A = styled('h1')() + const B = styled(A)() + const C = styled(B)() + const D = styled(C)() + const E = styled(D)() + const F = styled(E)() + const G = styled(F)() + const H = styled(G)() + const I = styled(H)() + const J = styled(I)() + const K = styled(J)() + const L = styled(K)() + const M = styled(L)() + const N = styled(M)() + const O = styled(N)() + const P = styled(O)() + const Q = styled(P)() + const R = styled(Q)() + const S = styled(R)() + const T = styled(S)() + const U = styled(T)() + const V = styled(U)() + const X = styled(V)() + const Y = styled(X)() + const Z = styled(Y)() + ;No excessive instantiation +} diff --git a/packages/stylis/CHANGELOG.md b/packages/stylis/CHANGELOG.md deleted file mode 100644 index d6378a3748..0000000000 --- a/packages/stylis/CHANGELOG.md +++ /dev/null @@ -1,13 +0,0 @@ -# @emotion/stylis - -## 0.8.5 - -### Patch Changes - -- [`4c62ae9`](https://github.com/emotion-js/emotion/commit/4c62ae9447959d438928e1a26f76f1487983c968) [#1698](https://github.com/emotion-js/emotion/pull/1698) Thanks [@Andarist](https://github.com/Andarist)! - Add LICENSE file - -## 0.8.4 - -### Patch Changes - -- [c0eb604d](https://github.com/emotion-js/emotion/commit/c0eb604d) [#1419](https://github.com/emotion-js/emotion/pull/1419) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Update build tool diff --git a/packages/stylis/LICENSE b/packages/stylis/LICENSE deleted file mode 100644 index 56e808dea1..0000000000 --- a/packages/stylis/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) Emotion team and other contributors - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/stylis/README.md b/packages/stylis/README.md deleted file mode 100644 index 25a5eaf149..0000000000 --- a/packages/stylis/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# @emotion/stylis - -> A custom build of Stylis - -`@emotion/stylis` is a version of [Stylis](https://github.com/thysultan/stylis.js) that has been modified slightly to make it smaller. The only Stylis option that can be changed is `prefix`, the rest of the options are already set to the values shown below and cannot be changed. This package also only exports the constructer, so you have to do `new Stylis()` and use the result from that rather than directly calling `Stylis`. The result of that function also cannot be used to create a stylis instance unlike stylis. - -```js -type Options = { - global: false, - preserve: false, - keyframe: false, - semicolon: true, - cascade: true, - compress: false, - prefix: boolean | ((key: string, value: string, context: number) => boolean) -} -``` - -```jsx -import Stylis from '@emotion/stylis' - -const stylis = new Stylis() - -stylis('.css-hash', 'display:flex;') // .css-hash{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} -``` - -## Building this package - -To build this package from a newer version of stylis, update the version of stylis that is installed as a devDependency and run `node build.js` in the directory of this package. This will read the source of stylis, transform it slightly, use the [Google Closure Compiler REST API](https://developers.google.com/closure/compiler/docs/gettingstarted_api) to minify it, format it with Prettier and then write it to `src/stylis.min.js`. - -# Thanks - -Stylis was written by [Sultan Tarimo](https://github.com/thysultan). ❤️ diff --git a/packages/stylis/__tests__/__snapshots__/index.js.snap b/packages/stylis/__tests__/__snapshots__/index.js.snap deleted file mode 100644 index 3bcc26dee0..0000000000 --- a/packages/stylis/__tests__/__snapshots__/index.js.snap +++ /dev/null @@ -1,357 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`& 1`] = ` -Array [ - ".css-8{color:blue;}", - ".css-8.css-8.css-8{color:red;}", - ".css-8 + .css-8{color:red;}", - ".wrapper button.css-8{color:red;}", -] -`; - -exports[`&:before 1`] = ` -Array [ - ".css-9:before{color:blue;}", -] -`; - -exports[`:matches(:not()) 1`] = ` -Array [ - ".css-21 h1:matches(.a,.b,:not(.c)){display:none;}", -] -`; - -exports[`@font-face 1`] = ` -Array [ - "@font-face{font-family:Pangolin;src:url('Pangolin-Regular.ttf') format('truetype');}", -] -`; - -exports[`@media specifity 1`] = ` -Array [ - ".css-13 > #box-not-working{background:red;padding-left:8px;width:10px;height:10px;}", - "@media only screen and (min-width:10px){.css-13 > #box-not-working{width:calc(10px + 90px *(100vw - 10px) / 90);}}", - "@media only screen and (min-width:90px){.css-13 > #box-not-working{width:90px;}}", - "@media only screen and (min-width:10px){.css-13 > #box-not-working{height:calc(10px + 90px *(100vw - 10px) / 90);}}", - "@media only screen and (min-width:90px){.css-13 > #box-not-working{height:90px;}}", -] -`; - -exports[`@supports 1`] = ` -Array [ - "@supports (display:block){.css-11{color:red;display:none;}.css-11 h1{color:red;}.css-11 h1 h2{color:blue;}}", - "@supports (-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none){.css-11{color:red;}}", -] -`; - -exports[`[title="a,b"] and :matches(a,b) 1`] = ` -Array [ - ".css-16 .test:matches(a,b,c),.css-16 .test{color:blue;}", - ".css-16 .test[title=\\",\\"]{color:red;}", - ".css-16 [title=\\"a,b,c, something\\"],.css-16 h1,.css-16 [title=\\"a,b,c\\"]{color:red;}", - ".css-16 [title=\\"a\\"],.css-16 [title=\\"b\\"]{color:red;}", -] -`; - -exports[`attribute namespace 1`] = ` -Array [ - ".css-31 h1{-webkit-animation:slide 1s;animation:slide 1s;}", -] -`; - -exports[`calc rules 1`] = ` -Array [ - ".css-0{height:calc( 100vh - 1px );height:calc(100vh -1px);}", -] -`; - -exports[`cascade isolation @at-rules 1`] = ` -Array [ - "@-webkit-keyframes hahaha{from{top:0;}to{top:100;}}", - "@keyframes hahaha{from{top:0;}to{top:100;}}", - "@media (min-width:480px){.css-38 div{color:red;}}", -] -`; - -exports[`cascade isolation complex 1`] = ` -Array [ - ".css-37 .List :global(>) :global(*){margin-top:10px;}", - ".css-37 .List :global(*) :global(+) :global(*){margin-top:10px;}", - ".css-37 .List :global(> *){margin-top:10px;}", - ".css-37 .List :global(* + *){margin-top:10px;}", - ".css-37:global(.foo #bar > baz){color:red;}", - ".css-37 div :global(.react-select .some-child-of-react-select){color:red;}", - ".css-37 .root > :global(*):not(header){color:red;}", - ".css-37 a:matches( a +b foo:hover :global(marquee) a) > :hover{color:red;}", -] -`; - -exports[`cascade isolation nesting 1`] = ` -Array [ - ".css-39{color:red;}", - ".css-39 h1:global(section){color:red;}", - ".css-39 h1 h2{color:red;}", - ".css-39 div h1,.css-39 span h1{color:red;}", - ".css-39 span:hover{color:red;}", - ".css-39 [data-id=foo]:hover{color:red;}", -] -`; - -exports[`cascade isolation simple 1`] = ` -Array [ - ".css-36 [data-id=foo]{color:red;}", - ".css-36 p{color:red;}", - ".css-36 p a{color:red;}", - ".css-36 p:hover{color:red;}", - ".css-36 p::before{color:red;}", - ".css-36:hover{color:red;}", - ".css-36::before{color:red;}", - ".css-36:hover p{color:red;}", - "html.something .css-36{color:red;}", - ".css-36 .class #id{color:red;}", - ".css-36{color:red;}", - ".css-36 .a.b .c{color:red;}", - ".css-36:nth-child(2n),.css-36:nth-last-child(2n),.css-36:nth-of-type(2n){color:red;}", - ".css-36 a:not(:focus):disabled{color:red;}", - ".css-36 a:not(:focus) :disabled{color:red;}", -] -`; - -exports[`class namespace 1`] = ` -Array [ - ".css-29 h1{-webkit-animation:slide 1s;animation:slide 1s;}", -] -`; - -exports[`comments 1`] = ` -Array [ - ".css-7{/*! 1 */color:red;/*! 2 */}", - ".css-7 button{color:blue;}", - ".css-7 button{color:red;}", - ".css-7 h1{/*! 1 */color:red;/*! 2 */color:red;/*! 3 */}", -] -`; - -exports[`complex nested selector 1`] = ` -Array [ - ".css-47{font-size:2rem;padding:16px;}", - ".css-47:hover{color:blue;}", - ".css-47:hover:active{color:red;}", - ".css-47:hover{color:pink;}", - ".css-47:hover:active{color:purple;}", - ".css-47:hover.some-class{color:yellow;}", -] -`; - -exports[`edge cases 1`] = ` -Array [ - "@media (min-width:537px){.css-33{border-bottom:4px solid red;}}", - ".css-33::-webkit-input-placeholder{color:pink;}", - ".css-33::-moz-placeholder{color:pink;}", - ".css-33:-ms-input-placeholder{color:pink;}", - ".css-33::placeholder{color:pink;}", - ".css-33 .a{color:'red';}", - ".css-33 .b{color:\\"red\\";}", - ".css-33 .a{color:red;}", - ".css-33 [role=button]{color:red;}", - ".css-33 .b{padding:30 3;}", -] -`; - -exports[`empty namespace 1`] = ` -Array [ - ".css-32 h1{-webkit-animation:slide 1s;animation:slide 1s;}", - "@-webkit-keyframes name{0:{top:0;}}", - "@keyframes name{0:{top:0;}}", -] -`; - -exports[`escape breaking control characters 1`] = ` -Array [ - ".css-3{content:\\"\\\\f\\\\0\\\\v\\";}", -] -`; - -exports[`flat 1`] = ` -Array [ - ".css-5{color:20px;font-size:20px;-webkit-transition:all;transition:all;}", -] -`; - -exports[`id namespace 1`] = ` -Array [ - ".css-30 h1{-webkit-animation:slide 1s;animation:slide 1s;}", -] -`; - -exports[`isolation edge cases 1`] = ` -Array [ - ".css-40{width:0;}", - "@media(screen){.css-40{color:red;}}", - ".css-40 h1{color:red;}", -] -`; - -exports[`last semicolon omission 1`] = ` -Array [ - ".css-20 .content{display:none;}", - ".css-20 .content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", -] -`; - -exports[`monkey-patch some invalid css patterns 1`] = ` -Array [ - ".css-2{margin:20px;color:red;}", - ".css-2 .b{border:3px solid green;}", - ".css-2 .c{color:red;}", - ".css-2 .d{color:red;}", - "@media(screen){.css-2{width:20%;}}", - "@media(screen){.css-2{width:30%;}}", - ".css-2 h1{color:red;}", - ".css-2 h1{color:red;}", - ".css-2 h1:hover{color:red;}", -] -`; - -exports[`multiline declaration 1`] = ` -Array [ - ".css-44 html{background-image:linear-gradient(0deg,rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url(/static/background.svg);}", -] -`; - -exports[`multiple selectors 1`] = ` -Array [ - ".css-15 span,.css-15 h1{color:red;}", - ".css-15 h1,.css-15:after,.css-15:before{color:red;}", -] -`; - -exports[`namespace 1`] = ` -Array [ - ".css-6{color:blue;}", - ".css-6{color:red;}", -] -`; - -exports[`nested 1`] = ` -Array [ - ".css-28:global(div) h2{color:red;}", - ".css-28:global(div) h2 h3{color:blue;}", - ".foo .css-28{width:1px;}", - ".foo .css-28:hover{color:black;}", - ".foo .css-28 li{color:white;}", - ".css-28 h1,.css-28 div{color:red;color:blue;}", - ".css-28 h1 h2,.css-28 div h2,.css-28 h1:before,.css-28 div:before{color:red;}", - ".css-28 h1 header,.css-28 div header{font-size:12px;}", - "@media{.css-28 h1,.css-28 div{color:red;}}", - "@media{.css-28 h1,.css-28 div{color:blue;}}", - ".css-28.foo.bar{color:orange;}", - ".css-28.foo.bar.barbar{color:orange;}", -] -`; - -exports[`nesting selector multiple levels 1`] = ` -Array [ - ".css-45 a a a a a a a a a a a a{color:red;}", -] -`; - -exports[`no semi-colons I 1`] = ` -Array [ - ".css-42 color:redh2 color:bluewidth:0h3{display:none;}", - ".css-42 div:hover{color:red;}", -] -`; - -exports[`no semi-colons II 1`] = ` -Array [ - ".css-43 color:redcolor:redh1:hover,.css-43 h2:hover,.css-43 h3{color:redwidth:0/2;}", - ".css-43 h1{grid-template-areas:\\"header header header\\"'. main .';}", - ".css-43 h1{width:calc(20px)20px;}", -] -`; - -exports[`quoutes 1`] = ` -Array [ - ".css-17 .foo:before{content:\\".hello {world}\\";content:\\".hello {world} ' \\";content:'.hello {world} \\" ';}", -] -`; - -exports[`remove empty css 1`] = `Array []`; - -exports[`semi-colons 1`] = ` -Array [ - ".css-41 color:redh2 color:bluewidth:0h3{display:none;}", -] -`; - -exports[`universal selector 1`] = ` -Array [ - ".css-4 *{color:red;}", -] -`; - -exports[`urls 1`] = ` -Array [ - ".css-19{background:url(http://url.com/});background:url(http://url.com//1234) '(';}", -] -`; - -exports[`vendor prefixing 1`] = ` -Array [ - ".css-22 html{-webkit-text-size-adjust:none;text-size-adjust:none;}", - ".css-22 input.red::-webkit-input-placeholder{color:red;}", - ".css-22 input.red::-moz-placeholder{color:red;}", - ".css-22 input.red:-ms-input-placeholder{color:red;}", - ".css-22 input.red::placeholder{color:red;}", - ".css-22{width:var(--foo-content);width:var(-content);width:var(--max-content);width:--max-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;width:-webkit-min-content;width:-moz-min-content;width:min-content;display:-webkit-box!important;display:-webkit-flex!important;display:-ms-flexbox!important;display:flex!important;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;display:-webkit-inline-box;display:inline-box;-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-pack:justify;-webkit-justify-content:justify;-ms-flex-pack:justify;justify-content:justify;}", - ".css-22 div{-webkit-align-items:value;-webkit-box-align:value;-ms-flex-align:value;align-items:value;-webkit-align-self:value;-ms-flex-item-align:value;align-self:value;-webkit-align-content:value;-ms-flex-line-pack:value;align-content:value;}", - ".css-22 div{color:papayawhip;-webkit-order:flex;-ms-flex-order:flex;order:flex;}", - ".css-22 div{-webkit-backface-visibility:hidden;backface-visibility:hidden;}", - ".css-22 h1:-moz-read-only{color:red;}", - ".css-22 h1:read-only{color:red;}", - ".css-22{-webkit-transition:-webkit-transform 1s,-webkit-transform all 400ms,text-transform;-webkit-transition:transform 1s,transform all 400ms,text-transform;transition:transform 1s,transform all 400ms,text-transform;}", -] -`; - -exports[`vendor prefixing II 1`] = ` -Array [ - ".css-23 div{-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb;writing-mode:vertical-lr;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr;writing-mode:horizontal-tb;writing-mode:sideways-rl;writing-mode:sideways-lr;}", -] -`; - -exports[`vendor prefixing III 1`] = ` -Array [ - ".css-24{color:red;-webkit-columns:auto;columns:auto;-webkit-column-count:auto;column-count:auto;-webkit-column-fill:auto;column-fill:auto;-webkit-column-gap:auto;column-gap:auto;-webkit-column-rule:auto;column-rule:auto;-webkit-column-rule-color:auto;column-rule-color:auto;-webkit-column-rule-style:auto;column-rule-style:auto;-webkit-column-rule-width:auto;column-rule-width:auto;-webkit-column-span:auto;column-span:auto;-webkit-column-width:auto;column-width:auto;}", -] -`; - -exports[`vendor prefixing IV 1`] = ` -Array [ - ".css-25{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-text-decoration:none;text-decoration:none;-webkit-filter:grayscale(100%);filter:grayscale(100%);fill:red;position:-webkit-sticky;position:sticky;-webkit-mask-image:linear-gradient(#fff);mask-image:linear-gradient(#fff);-webkit-mask-image:none;mask-image:none;}", -] -`; - -exports[`vendor prefixing V 1`] = ` -Array [ - ".css-26{display :-webkit-box!important;display :-webkit-flex!important;display :-ms-flexbox!important;display :flex!important;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}", -] -`; - -exports[`vendor prefixing VI 1`] = ` -Array [ - ".css-27{-webkit-clip-path:none;clip-path:none;-webkit-mask-image:none;mask-image:none;}", -] -`; - -exports[`whitespace cascade false 1`] = ` -Array [ - ".css-35 html{width:0;}", -] -`; - -exports[`whitespace cascade true 1`] = ` -Array [ - ".css-34 html{width:0;}", -] -`; diff --git a/packages/stylis/__tests__/index.js b/packages/stylis/__tests__/index.js deleted file mode 100644 index 6b027fa7e8..0000000000 --- a/packages/stylis/__tests__/index.js +++ /dev/null @@ -1,321 +0,0 @@ -// @flow -import Stylis from '@emotion/stylis' -import stylisRuleSheet from 'stylis-rule-sheet' - -const specs: Array<{ - name: string, - sample: string, - skip?: boolean, - only?: boolean, - expected?: string -}> = [ - { - name: 'calc rules', - sample: 'height:calc( 100vh - 1px );height:calc(100vh -1px);' - }, - { - name: 'at-rules', - sample: - '@page { size:A4 landscape; }@document url(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(mozilla.org),regexp("https:.*") { body { color: red; }}@viewport { min-width:640px; max-width:800px;}@counter-style list { system:fixed; symbols:url(); suffix:" ";}', - skip: true - }, - { - name: 'monkey-patch some invalid css patterns', - sample: - 'margin:20px;.b { border:3px solid green;}}.c {color:red;}color:red;}.d {color red;};@media(screen) { width:20%;};@media(screen) { width:30%;};;;;;h1 {color:red}}};}h1 {color:red}}} ;}h1: hover{color:red;}' - }, - { - name: 'escape breaking control characters', - sample: 'content:"\f\u0000\u000b";' - }, - { - name: 'universal selector', - sample: '* {color:red;}' - }, - { - name: 'flat', - sample: 'color:20px;font-size:20px;transition:all' - }, - { - name: 'namespace', - sample: '{color:blue;}& {color:red;}' - }, - { - name: 'comments', - sample: ` - // line comment - // color: red; - /** - * removes block comments and line comments, - * there's a fire in the house // there is - */ - button /* - // what's - xxx - */ - {color: blue;} - // hello - button /* 1 */ - { - color: red; /* 2 */ - } - /*! 1 */ - color: red; - /*! 2 */ - h1 { - /*! 1 */ - color: red; - /*! 2 */ - color: red; - /*! 3 */ - } - ` - }, - { - name: '&', - sample: - '& {color:blue;}&&& {color:red;}& + & {color:red;}.wrapper button& { color:red;}' - }, - { - name: '&:before', - sample: '&:before{color:blue;}' - }, - { - name: '@import', - sample: "@import url('http://example.com')", - skip: true - }, - { - name: '@supports', - sample: - '@supports (display:block) {color:red;h1 {color:red;h2 {color:blue;}}display:none;}@supports (appearance: none) {color:red;}' - }, - { - name: '@media', - skip: true, - sample: - '@media (max-width:600px) {color:red;h1 {color:red;h2 {color:blue;}}display:none;}@media (min-width:576px) {&.card-deck {.card { &:not(:first-child) { margin-left:15px; }&:not(:last-child) { margin-right:15px;}}}}@supports (display:block) {@media (min-width:10px) { background-color:seagreen;}}@media (max-width:600px) { & { color:red } } &:hover { color:orange }' - }, - { - name: '@media specifity', - sample: - '> #box-not-working { background:red; padding-left:8px; width:10px; @media only screen and (min-width:10px) {width:calc(10px + 90px *(100vw - 10px) / 90); } @media only screen and (min-width:90px) {width:90px; } height: 10px; @media only screen and (min-width:10px) {height:calc(10px + 90px *(100vw - 10px) / 90); } @media only screen and (min-width:90px) { height: 90px; }}' - }, - { - name: '@font-face', - sample: - "@font-face {font-family:Pangolin;src:url('Pangolin-Regular.ttf') format('truetype');}" - }, - { - name: 'multiple selectors', - sample: 'span, h1 {color:red;}h1, &:after, &:before {color:red;}' - }, - { - name: '[title="a,b"] and :matches(a,b)', - sample: - '.test:matches(a,b,c), .test {color:blue;}.test[title=","] {color:red;}[title="a,b,c, something"], h1, [title="a,b,c"] { color:red}[title="a"],[title="b"] {color:red;}' - }, - { - name: 'quoutes', - sample: - '.foo:before { content:".hello {world}"; content:".hello {world} \' "; content:\'.hello {world} " \';}' - }, - { - name: 'remove empty css', - sample: '& {}' - }, - { - name: 'urls', - sample: - 'background:url(http://url.com/});background:url(http://url.com//1234) \'(\'; // sdsdbackground-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAABCAIAAADsEU8HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIklEQVQI12P8//8/Aw4wbdq0rKysAZG1trbGJXv06FH8sgDIJBbBfp+hFAAAAABJRU5ErkJggg==");' - }, - { - name: 'last semicolon omission', - sample: '.content {display:none}.content {display:flex}' - }, - { - name: ':matches(:not())', - sample: 'h1:matches(.a,.b,:not(.c)) {display: none}' - }, - { - name: 'vendor prefixing', - sample: - 'html { text-size-adjust: none;}input.red::placeholder { color:red;}& {width:var(--foo-content);width:var(-content);width:var(--max-content);width:--max-content;width:max-content;width:min-content;display:flex!important;display:inline-flex;display:inline-box; transform:rotate(30deg); cursor:grab; justify-content:flex-end; justify-content:flex-start; justify-content:justify;}div {align-items:value;align-self:value;align-content:value;}div {color:papayawhip;order:flex;}div {backface-visibility:hidden;}h1:read-only { color:red;}& {transition:transform 1s,transform all 400ms,text-transform;}' - }, - { - name: 'vendor prefixing II', - sample: - 'div {writing-mode:vertical-lr;writing-mode:vertical-rl;writing-mode:horizontal-tb;writing-mode:sideways-rl;writing-mode:sideways-lr;}' - }, - { - name: 'vendor prefixing III', - sample: - 'color:red;columns:auto;column-count:auto;column-fill:auto;column-gap:auto;column-rule:auto;column-rule-color:auto;column-rule-style:auto;column-rule-width:auto;column-span:auto;column-width:auto;' - }, - { - name: 'vendor prefixing IV', - sample: - 'text-size-adjust:none;text-decoration:none;filter:grayscale(100%);fill:red;position: sticky;mask-image: linear-gradient(#fff);mask-image: none;' - }, - { - name: 'vendor prefixing V', - sample: - 'display :flex!important;justify-content: space-between;align-self: flex-start;align-self: flex-end;' - }, - { - name: 'vendor prefixing VI', - sample: 'clip-path: none;mask-image: none;' - }, - { - name: 'nested', - sample: - ':global(div) {h2 {color:red;h3 {color:blue;}}}.foo & { width:1px; &:hover { color:black; } li { color:white; }}h1, div {color:red;h2,&:before {color:red;}color:blue;header {font-size:12px;}@media {color:red;}@media {color:blue;}}&.foo {&.bar {color:orange}}&.foo {&.bar {&.barbar {color:orange}}}' - }, - { - name: 'class namespace', - sample: 'h1 {animation:slide 1s;}' - }, - { - name: 'id namespace', - sample: 'h1 {animation: slide 1s;}' - }, - { - name: 'attribute namespace', - sample: 'h1 {animation: slide 1s;}' - }, - { - name: 'empty namespace', - sample: 'h1 {animation:slide 1s;}@keyframes name {0: {top:0}}' - }, - { - name: 'edge cases', - sample: - '@media (min-width:537px) { border-bottom:4px solid red;}&::placeholder { color:pink;}.a {color:\'red\'}.b {color:"red"}.a {color:red;}[role=button]{color:red;}.b {padding:30 3} ' - }, - { - name: 'whitespace cascade true', - sample: 'html {width:0;}' - }, - { - name: 'whitespace cascade false', - sample: 'html{width:0;}' - }, - { - name: 'cascade isolation simple', - sample: - '[data-id=foo] {color:red;}p {color:red;}p a {color:red;}p:hover { color:red;}p::before { color:red;}:hover { color:red;}::before { color:red;}:hover p { color:red;}html.something & {color:red;}.class #id {color:red;}& {color:red}.a.b .c {color:red;}:nth-child(2n),:nth-last-child(2n),:nth-of-type(2n) {color:red;}a:not(:focus):disabled {color:red;}a:not(:focus) :disabled {color:red;}' - }, - { - name: 'cascade isolation complex', - sample: - '.List :global(>) :global(*) { margin-top:10px;}.List :global(*) :global(+) :global(*) { margin-top:10px;}.List :global(> *) { margin-top:10px;}.List :global(* + *) { margin-top:10px;}:global(.foo #bar > baz) {color:red;}div :global(.react-select .some-child-of-react-select) {color:red;}.root > :global(*):not(header) { color:red;}a:matches( a +b foo:hover :global(marquee) a) > :hover { color:red;}' - }, - { - name: 'cascade isolation @at-rules', - sample: - '@keyframes hahaha { from { top:0 } to { top:100 }}span {} @media (min-width:480px) { div { color:red } }' - }, - { - name: 'cascade isolation nesting', - sample: - 'color:red;h1 {:global(section) {color:red}}h1 {h2 {color:red}}div, span {h1 {color:red}}span {&:hover {color:red}}[data-id=foo] {&:hover {color:red}}' - }, - { - name: 'isolation edge cases', - sample: 'width:0;@media(screen) { color:red;}h1 {color:red;}' - }, - { - name: 'semi-colons', - sample: 'color:redh2 {color:bluewidth:0h3 {display:none}}' - }, - { - name: 'no semi-colons I', - sample: - 'color:redh2 {color:bluewidth:0h3 {display:none}}div:hover{color:red}' - }, - { - name: 'no semi-colons II', - sample: - 'color:redcolor:redh1:hover,h2:hover,h3{color:redwidth:0/2}h1 {grid-template-areas:"header header header"\'. main .\';}h1 {width:calc(20px)20px;}' - }, - { - name: 'multiline declaration', - sample: - 'html { background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/static/background.svg);}' - }, - { - name: 'nesting selector multiple levels', - sample: 'a {a {a {a {a {a {a {a {a{a{a{a{color:red;}}}}}}}}}}}}' - }, - { - name: 'nesting @media multiple levels', - sample: 'div {@media {a {color:red;@media {h1 {color:red;}}}}}', - skip: true - }, - { - name: 'complex nested selector', - sample: - '&:hover{color:blue;&:active{color:red;}}font-size:2rem;padding:16px;&:hover{color:pink;&:active{color:purple;}&.some-class{color:yellow;}}' - }, - { - name: 'more comments', - sample: `.a{color:red; /*// */}`, - expected: `.user .a{color:red;}` - }, - { - name: 'comments(context character IV)', - sample: `.a{/**/color:red}`, - expected: `.user .a{color:red;}` - }, - { - name: 'comments(context character V)', - sample: `.a{color:red;/*// - color:blue;*/}`, - expected: `.user .a{color:red;}` - }, - { - name: 'comments(context character VI)', - sample: `background: url("img}.png");.a {background: url("img}.png");}`, - expected: `.user{background:url("img}.png");}.user .a{background:url("img}.png");}` - }, - { - name: 'comments(context character VII)', - sample: `background: url(img}.png);.a {background: url(img}.png);}`, - expected: `.user{background:url(img}.png);}.user .a{background:url(img}.png);}` - }, - { - name: 'comments(context character VIII)', - sample: `background: url[img}.png];.a {background: url[img}.png];}`, - expected: `.user{background:url[img}.png];}.user .a{background:url[img}.png];}` - } -] - -let stylisOptions = { - global: false, - preserve: false, - keyframe: false, - semicolon: true, - cascade: true -} - -let stylis = new Stylis(stylisOptions) -let regularStylis = new Stylis(stylisOptions) - -specs.forEach((spec, i) => { - const newTest = spec.only ? test.only : spec.skip ? test.skip : test - newTest(spec.name, () => { - let out = [] - const plugin = stylisRuleSheet(rule => { - out.push(rule) - }) - let selector = spec.expected ? '.user' : `.css-${i}` - stylis.use(null)(plugin) - stylis(selector, spec.sample) - if (spec.expected) { - expect(out.join('')).toEqual(spec.expected) - } else { - expect(out).toMatchSnapshot() - } - expect(out.join('')).toEqual(regularStylis(selector, spec.sample)) - }) -}) diff --git a/packages/stylis/build.js b/packages/stylis/build.js deleted file mode 100644 index fdd877e140..0000000000 --- a/packages/stylis/build.js +++ /dev/null @@ -1,140 +0,0 @@ -// this whole thing is a really fragile hack -// but it works so ¯\_(ツ)_/¯ - -const stylisPath = require.resolve('stylis') -const { promisify } = require('util') -const j = require('jscodeshift') -const request = require('request-promise-native') -const fs = require('fs') -const prettier = require('prettier') -const recast = require('recast') - -const readFile = promisify(fs.readFile) -const writeFile = promisify(fs.writeFile) - -const simplifySet = src => - j(src) - .find(j.FunctionDeclaration, { id: { name: 'set' } }) - .forEach(path => { - j(path).replaceWith( - recast.parse(`function set(options) { - var prefixOpt = options.prefix - if (prefixOpt!==undefined) { - should = null - - if (!prefixOpt) { - prefix = 0 - } else if (typeof prefixOpt !== 'function') { - prefix = 1 - } else { - prefix = 2 - should = prefixOpt - } - } - return set - }`).program.body[0] - ) - }) - .toSource() - -const removeOptions = src => - j(src) - .find(j.SwitchStatement) - .forEach(thing => { - thing.value.cases = thing.value.cases.filter(node => { - if (!node.test) return true - switch (node.test.value) { - case 'keyframe': - case 'cascade': - case 'preserve': - case 'semicolon': - case 'compress': - case 'global': { - return false - } - default: { - return true - } - } - }) - }) - .toSource() - -const setOptions = src => - j(src) - .find(j.VariableDeclarator) - .forEach(path => { - switch (path.value.id.name) { - case 'escape': - case 'keyed': { - path.value.init.value = 0 - return - } - case 'semicolon': { - path.value.init.value = 1 - } - } - }) - .toSource() - -const removeUMDWrapper = src => { - let code - j(src) - .find(j.FunctionExpression, { id: { name: 'factory' } }) - .forEach(path => { - code = j(path).toSource() - }) - .toSource() - return "'use strict';\nwindow['stylis'] = " + code -} - -async function doThing() { - const stylisSrc = (await readFile(stylisPath)) - .toString() - .replace( - 'cascade + quote + bracket + atrule === 0 && id !== KEYFRAME && code !== SEMICOLON', - 'true === false' - ) - .replace( - 'comment + quote + parentheses + bracket + semicolon === 0', - 'true === false' - ) - .replace('switch (selector.charCodeAt(1))', 'switch (100)') - .replace('(insert === 1)', '(true === false)') - .replace('input.charCodeAt(9)*keyed', '0') - .replace('switch (cascade + level) {', 'switch (2) {') - .replace('compress*code === 0', 'true') - .replace(`typeof(output = result) !== 'string'`, '(output = result)') - // .replace("stylis['set'] = set", '') - // .replace('set(options)', '') - .replace('this !== void 0 && this.constructor === stylis', 'false') - .replace('return factory(selector)', '') - const result = removeUMDWrapper( - simplifySet(setOptions(removeOptions(stylisSrc))) - ) - // await writeFile('./src/stylis.js', result) - console.log('start request') - const data = (await request('https://closure-compiler.appspot.com/compile', { - method: 'POST', - form: { - js_code: result, - compilation_level: 'ADVANCED_OPTIMIZATIONS', - output_format: 'text', - output_info: 'compiled_code' - } - })).toString() - - let finalSrc = data.replace('window.stylis=', 'export default ') - - await writeFile( - './src/stylis.min.js', - prettier.format(finalSrc, { - semi: false, - singleQuote: true - }) - ) - - console.log('done') -} - -doThing() diff --git a/packages/stylis/package.json b/packages/stylis/package.json deleted file mode 100644 index 581dddf9e0..0000000000 --- a/packages/stylis/package.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "@emotion/stylis", - "version": "0.8.5", - "description": "A custom build of Stylis", - "main": "dist/stylis.cjs.js", - "module": "dist/stylis.esm.js", - "types": "types/index.d.ts", - "license": "MIT", - "scripts": { - "test:typescript": "dtslint types" - }, - "repository": "https://github.com/emotion-js/emotion/tree/master/packages/stylis", - "publishConfig": { - "access": "public" - }, - "files": [ - "src", - "dist", - "types/*.d.ts" - ], - "devDependencies": { - "dtslint": "^0.3.0", - "jscodeshift": "^0.5.0", - "request": "^2.85.0", - "request-promise-native": "^1.0.5", - "stylis": "3.5.4" - }, - "browser": { - "./dist/stylis.cjs.js": "./dist/stylis.browser.cjs.js", - "./dist/stylis.esm.js": "./dist/stylis.browser.esm.js" - } -} diff --git a/packages/stylis/src/index.js b/packages/stylis/src/index.js deleted file mode 100644 index 8297b5ac66..0000000000 --- a/packages/stylis/src/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// @flow -export { default } from './stylis.min' diff --git a/packages/stylis/src/stylis.min.js b/packages/stylis/src/stylis.min.js deleted file mode 100644 index c6b56ec795..0000000000 --- a/packages/stylis/src/stylis.min.js +++ /dev/null @@ -1,625 +0,0 @@ -export default function(W) { - function M(d, c, e, h, a) { - for ( - var m = 0, - b = 0, - v = 0, - n = 0, - q, - g, - x = 0, - K = 0, - k, - u = (k = q = 0), - l = 0, - r = 0, - I = 0, - t = 0, - B = e.length, - J = B - 1, - y, - f = '', - p = '', - F = '', - G = '', - C; - l < B; - - ) { - g = e.charCodeAt(l) - l === J && - 0 !== b + n + v + m && - (0 !== b && (g = 47 === b ? 10 : 47), (n = v = m = 0), B++, J++) - if (0 === b + n + v + m) { - if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) { - switch (g) { - case 32: - case 9: - case 59: - case 13: - case 10: - break - default: - f += e.charAt(l) - } - g = 59 - } - switch (g) { - case 123: - f = f.trim() - q = f.charCodeAt(0) - k = 1 - for (t = ++l; l < B; ) { - switch ((g = e.charCodeAt(l))) { - case 123: - k++ - break - case 125: - k-- - break - case 47: - switch ((g = e.charCodeAt(l + 1))) { - case 42: - case 47: - a: { - for (u = l + 1; u < J; ++u) - switch (e.charCodeAt(u)) { - case 47: - if ( - 42 === g && - 42 === e.charCodeAt(u - 1) && - l + 2 !== u - ) { - l = u + 1 - break a - } - break - case 10: - if (47 === g) { - l = u + 1 - break a - } - } - l = u - } - } - break - case 91: - g++ - case 40: - g++ - case 34: - case 39: - for (; l++ < J && e.charCodeAt(l) !== g; ); - } - if (0 === k) break - l++ - } - k = e.substring(t, l) - 0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0)) - switch (q) { - case 64: - 0 < r && (f = f.replace(N, '')) - g = f.charCodeAt(1) - switch (g) { - case 100: - case 109: - case 115: - case 45: - r = c - break - default: - r = O - } - k = M(c, r, k, g, a + 1) - t = k.length - 0 < A && - ((r = X(O, f, I)), - (C = H(3, k, r, c, D, z, t, g, a, h)), - (f = r.join('')), - void 0 !== C && - 0 === (t = (k = C.trim()).length) && - ((g = 0), (k = ''))) - if (0 < t) - switch (g) { - case 115: - f = f.replace(da, ea) - case 100: - case 109: - case 45: - k = f + '{' + k + '}' - break - case 107: - f = f.replace(fa, '$1 $2') - k = f + '{' + k + '}' - k = - 1 === w || (2 === w && L('@' + k, 3)) - ? '@-webkit-' + k + '@' + k - : '@' + k - break - default: - ;(k = f + k), 112 === h && (k = ((p += k), '')) - } - else k = '' - break - default: - k = M(c, X(c, f, I), k, h, a + 1) - } - F += k - k = I = r = u = q = 0 - f = '' - g = e.charCodeAt(++l) - break - case 125: - case 59: - f = (0 < r ? f.replace(N, '') : f).trim() - if (1 < (t = f.length)) - switch ( - (0 === u && - ((q = f.charCodeAt(0)), 45 === q || (96 < q && 123 > q)) && - (t = (f = f.replace(' ', ':')).length), - 0 < A && - void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && - 0 === (t = (f = C.trim()).length) && - (f = '\x00\x00'), - (q = f.charCodeAt(0)), - (g = f.charCodeAt(1)), - q) - ) { - case 0: - break - case 64: - if (105 === g || 99 === g) { - G += f + e.charAt(l) - break - } - default: - 58 !== f.charCodeAt(t - 1) && - (p += P(f, q, g, f.charCodeAt(2))) - } - I = r = u = q = 0 - f = '' - g = e.charCodeAt(++l) - } - } - switch (g) { - case 13: - case 10: - 47 === b - ? (b = 0) - : 0 === 1 + q && - 107 !== h && - 0 < f.length && - ((r = 1), (f += '\x00')) - 0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h) - z = 1 - D++ - break - case 59: - case 125: - if (0 === b + n + v + m) { - z++ - break - } - default: - z++ - y = e.charAt(l) - switch (g) { - case 9: - case 32: - if (0 === n + m + b) - switch (x) { - case 44: - case 58: - case 9: - case 32: - y = '' - break - default: - 32 !== g && (y = ' ') - } - break - case 0: - y = '\\0' - break - case 12: - y = '\\f' - break - case 11: - y = '\\v' - break - case 38: - 0 === n + b + m && ((r = I = 1), (y = '\f' + y)) - break - case 108: - if (0 === n + b + m + E && 0 < u) - switch (l - u) { - case 2: - 112 === x && 58 === e.charCodeAt(l - 3) && (E = x) - case 8: - 111 === K && (E = K) - } - break - case 58: - 0 === n + b + m && (u = l) - break - case 44: - 0 === b + v + n + m && ((r = 1), (y += '\r')) - break - case 34: - case 39: - 0 === b && (n = n === g ? 0 : 0 === n ? g : n) - break - case 91: - 0 === n + b + v && m++ - break - case 93: - 0 === n + b + v && m-- - break - case 41: - 0 === n + b + m && v-- - break - case 40: - if (0 === n + b + m) { - if (0 === q) - switch (2 * x + 3 * K) { - case 533: - break - default: - q = 1 - } - v++ - } - break - case 64: - 0 === b + v + n + m + u + k && (k = 1) - break - case 42: - case 47: - if (!(0 < n + m + v)) - switch (b) { - case 0: - switch (2 * g + 3 * e.charCodeAt(l + 1)) { - case 235: - b = 47 - break - case 220: - ;(t = l), (b = 42) - } - break - case 42: - 47 === g && - 42 === x && - t + 2 !== l && - (33 === e.charCodeAt(t + 2) && - (p += e.substring(t, l + 1)), - (y = ''), - (b = 0)) - } - } - 0 === b && (f += y) - } - K = x - x = g - l++ - } - t = p.length - if (0 < t) { - r = c - if ( - 0 < A && - ((C = H(2, p, r, d, D, z, t, h, a, h)), - void 0 !== C && 0 === (p = C).length) - ) - return G + p + F - p = r.join(',') + '{' + p + '}' - if (0 !== w * E) { - 2 !== w || L(p, 2) || (E = 0) - switch (E) { - case 111: - p = p.replace(ha, ':-moz-$1') + p - break - case 112: - p = - p.replace(Q, '::-webkit-input-$1') + - p.replace(Q, '::-moz-$1') + - p.replace(Q, ':-ms-input-$1') + - p - } - E = 0 - } - } - return G + p + F - } - function X(d, c, e) { - var h = c.trim().split(ia) - c = h - var a = h.length, - m = d.length - switch (m) { - case 0: - case 1: - var b = 0 - for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) - c[b] = Z(d, c[b], e, m).trim() - break - default: - var v = (b = 0) - for (c = []; b < a; ++b) - for (var n = 0; n < m; ++n) c[v++] = Z(d[n] + ' ', h[b], e, m).trim() - } - return c - } - function Z(d, c, e) { - var h = c.charCodeAt(0) - 33 > h && (h = (c = c.trim()).charCodeAt(0)) - switch (h) { - case 38: - return c.replace(F, '$1' + d.trim()) - case 58: - return d.trim() + c.replace(F, '$1' + d.trim()) - default: - if (0 < 1 * e && 0 < c.indexOf('\f')) - return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim()) - } - return d + c - } - function P(d, c, e, h) { - var a = d + ';', - m = 2 * c + 3 * e + 4 * h - if (944 === m) { - d = a.indexOf(':', 9) + 1 - var b = a.substring(d, a.length - 1).trim() - b = a.substring(0, d).trim() + b + ';' - return 1 === w || (2 === w && L(b, 1)) ? '-webkit-' + b + b : b - } - if (0 === w || (2 === w && !L(a, 1))) return a - switch (m) { - case 1015: - return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a - case 951: - return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a - case 963: - return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a - case 1009: - if (100 !== a.charCodeAt(4)) break - case 969: - case 942: - return '-webkit-' + a + a - case 978: - return '-webkit-' + a + '-moz-' + a + a - case 1019: - case 983: - return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a - case 883: - if (45 === a.charCodeAt(8)) return '-webkit-' + a + a - if (0 < a.indexOf('image-set(', 11)) - return a.replace(ja, '$1-webkit-$2') + a - break - case 932: - if (45 === a.charCodeAt(4)) - switch (a.charCodeAt(5)) { - case 103: - return ( - '-webkit-box-' + - a.replace('-grow', '') + - '-webkit-' + - a + - '-ms-' + - a.replace('grow', 'positive') + - a - ) - case 115: - return ( - '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a - ) - case 98: - return ( - '-webkit-' + - a + - '-ms-' + - a.replace('basis', 'preferred-size') + - a - ) - } - return '-webkit-' + a + '-ms-' + a + a - case 964: - return '-webkit-' + a + '-ms-flex-' + a + a - case 1023: - if (99 !== a.charCodeAt(8)) break - b = a - .substring(a.indexOf(':', 15)) - .replace('flex-', '') - .replace('space-between', 'justify') - return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a - case 1005: - return ka.test(a) - ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a - : a - case 1e3: - b = a.substring(13).trim() - c = b.indexOf('-') + 1 - switch (b.charCodeAt(0) + b.charCodeAt(c)) { - case 226: - b = a.replace(G, 'tb') - break - case 232: - b = a.replace(G, 'tb-rl') - break - case 220: - b = a.replace(G, 'lr') - break - default: - return a - } - return '-webkit-' + a + '-ms-' + b + a - case 1017: - if (-1 === a.indexOf('sticky', 9)) break - case 975: - c = (a = d).length - 10 - b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a) - .substring(d.indexOf(':', 7) + 1) - .trim() - switch ((m = b.charCodeAt(0) + (b.charCodeAt(7) | 0))) { - case 203: - if (111 > b.charCodeAt(8)) break - case 115: - a = a.replace(b, '-webkit-' + b) + ';' + a - break - case 207: - case 102: - a = - a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + - ';' + - a.replace(b, '-webkit-' + b) + - ';' + - a.replace(b, '-ms-' + b + 'box') + - ';' + - a - } - return a + ';' - case 938: - if (45 === a.charCodeAt(5)) - switch (a.charCodeAt(6)) { - case 105: - return ( - (b = a.replace('-items', '')), - '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a - ) - case 115: - return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a - default: - return ( - '-webkit-' + - a + - '-ms-flex-line-pack' + - a.replace('align-content', '').replace(ba, '') + - a - ) - } - break - case 973: - case 989: - if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break - case 931: - case 953: - if (!0 === la.test(d)) - return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) - ? P(d.replace('stretch', 'fill-available'), c, e, h).replace( - ':fill-available', - ':stretch' - ) - : a.replace(b, '-webkit-' + b) + - a.replace(b, '-moz-' + b.replace('fill-', '')) + - a - break - case 962: - if ( - ((a = - '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a), - 211 === e + h && - 105 === a.charCodeAt(13) && - 0 < a.indexOf('transform', 10)) - ) - return ( - a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + - a - ) - } - return a - } - function L(d, c) { - var e = d.indexOf(1 === c ? ':' : '{'), - h = d.substring(0, 3 !== c ? e : 10) - e = d.substring(e + 1, d.length - 1) - return R(2 !== c ? h : h.replace(na, '$1'), e, c) - } - function ea(d, c) { - var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2)) - return e !== c + ';' - ? e.replace(oa, ' or ($1)').substring(4) - : '(' + c + ')' - } - function H(d, c, e, h, a, m, b, v, n, q) { - for (var g = 0, x = c, w; g < A; ++g) - switch ((w = S[g].call(B, d, x, e, h, a, m, b, v, n, q))) { - case void 0: - case !1: - case !0: - case null: - break - default: - x = w - } - if (x !== c) return x - } - function T(d) { - switch (d) { - case void 0: - case null: - A = S.length = 0 - break - default: - if ('function' === typeof d) S[A++] = d - else if ('object' === typeof d) - for (var c = 0, e = d.length; c < e; ++c) T(d[c]) - else Y = !!d | 0 - } - return T - } - function U(d) { - d = d.prefix - void 0 !== d && - ((R = null), - d ? ('function' !== typeof d ? (w = 1) : ((w = 2), (R = d))) : (w = 0)) - return U - } - function B(d, c) { - var e = d - 33 > e.charCodeAt(0) && (e = e.trim()) - V = e - e = [V] - if (0 < A) { - var h = H(-1, c, e, e, D, z, 0, 0, 0, 0) - void 0 !== h && 'string' === typeof h && (c = h) - } - var a = M(O, e, c, 0, 0) - 0 < A && - ((h = H(-2, a, e, e, D, z, a.length, 0, 0, 0)), void 0 !== h && (a = h)) - V = '' - E = 0 - z = D = 1 - return a - } - var ca = /^\0+/g, - N = /[\0\r\f]/g, - aa = /: */g, - ka = /zoo|gra/, - ma = /([,: ])(transform)/g, - ia = /,\r+?/g, - F = /([\t\r\n ])*\f?&/g, - fa = /@(k\w+)\s*(\S*)\s*/, - Q = /::(place)/g, - ha = /:(read-only)/g, - G = /[svh]\w+-[tblr]{2}/, - da = /\(\s*(.*)\s*\)/g, - oa = /([\s\S]*?);/g, - ba = /-self|flex-/g, - na = /[^]*?(:[rp][el]a[\w-]+)[^]*/, - la = /stretch|:\s*\w+\-(?:conte|avail)/, - ja = /([^-])(image-set\()/, - z = 1, - D = 1, - E = 0, - w = 1, - O = [], - S = [], - A = 0, - R = null, - Y = 0, - V = '' - B.use = T - B.set = U - void 0 !== W && U(W) - return B -} diff --git a/packages/stylis/types/index.d.ts b/packages/stylis/types/index.d.ts deleted file mode 100644 index 41cda042f5..0000000000 --- a/packages/stylis/types/index.d.ts +++ /dev/null @@ -1,55 +0,0 @@ -// Definitions by: Junyoung Clare Jang -// TypeScript Version: 2.4 - -export enum Context { - POSTS = -2, - PREPS = -1, - UNKWN = 0, - PROPS = 1, - BLCKS = 2, - ATRUL = 3 -} - -export type PrefixContext = Context.PROPS | Context.BLCKS | Context.ATRUL - -export type Plugin = ( - this: Stylis, - context: Context, - content: any, - selector: Array, - parent: Array, - line: number, - column: number, - length: number, - at: number, - depth: number -) => any - -export interface ArrayPlugable extends Array {} -export type Plugable = undefined | null | boolean | Plugin | ArrayPlugable - -export type StylisUse = (plugin?: Plugable) => StylisUse - -export type StylisSet = (options: Options) => StylisSet - -export type Prefix = - | boolean - | ((key: string, value: string, context: PrefixContext) => boolean) - -export interface Options { - prefix?: Prefix -} - -export interface StylisConstructor { - new (options?: Options): Stylis -} - -interface Stylis extends StylisConstructor { - (selector: string, properties: string): any - use: StylisUse - set: StylisSet -} - -declare const Stylis: StylisConstructor - -export default Stylis diff --git a/packages/stylis/types/tests.ts b/packages/stylis/types/tests.ts deleted file mode 100644 index cb49114bc9..0000000000 --- a/packages/stylis/types/tests.ts +++ /dev/null @@ -1,164 +0,0 @@ -import Stylis, { - Context, - PrefixContext, - StylisUse, - StylisSet -} from '@emotion/stylis' - -new Stylis() -// $ExpectError -new Stylis(5) -// $ExpectError -new Stylis('abc') -// $ExpectError -new Stylis([]) -new Stylis({}) -new Stylis({ - // $ExpectError - a: 5 -}) -new Stylis({ - prefix: undefined -}) -new Stylis({ - prefix: true -}) -new Stylis({ - prefix: false -}) -new Stylis({ - prefix() { - return true - } -}) -new Stylis({ - prefix(key: string) { - return key === 'abc' - } -}) -new Stylis({ - prefix(key: string, value: string, context: PrefixContext) { - return value === 'world' - } -}) -// this has been commented out because the error location has moved in typescript@next at the time of writing this comment -// // $ExpectError -// new Stylis({ -// prefix(key: string, value: string, context: PrefixContext) { -// return 'hi' -// } -// }) -// // $ExpectError -// new Stylis({ -// prefix(key: string, value: string, context: PrefixContext, a: any) { -// return true -// } -// }) - -const stylis0 = new Stylis() -const stylis1: Stylis = stylis0 -const stylis2: Stylis = new Stylis() -const stylis3 = new stylis2() -const stylis4: Stylis = stylis3 - -const stylis = new Stylis() - -// $ExpectError -stylis.set() -stylis.set({}) -stylis.set({ - prefix: true -}) -stylis.set({ - prefix(key: string) { - return false - } -}) -stylis.set({ - prefix(key: string, value: string, context: PrefixContext) { - return false - } -}) -// $ExpectError -stylis.set({ prefix: () => 'hi' }) - -stylis.use() -// $ExpectError -stylis.use(5) -// $ExpectError -stylis.use('ac') -stylis.use(true) -stylis.use(false) -stylis.use(null) -stylis.use(undefined) -// $ExpectError -stylis.use({}) -stylis.use([]) -stylis.use(function() {}) -stylis.use(function(context) {}) -stylis.use(function(context: Context) { - return 'abc' -}) -stylis.use(function(context: Context, content, selector, parent) { - const x: StylisUse = this.use -}) -stylis.use(function( - context: Context, - content, - selector, - parent, - line, - column, - length -) { - const x: StylisSet = this.set -}) -stylis.use([ - function( - context: Context, - content, - selector, - parent, - line, - column, - length, - at, - depth - ) { - const x: StylisSet = this.set - } -]) -// $ExpectError -stylis.use(function( - context: Context, - // $ExpectError - content, - // $ExpectError - selector, - // $ExpectError - parent, - // $ExpectError - line, - // $ExpectError - column, - // $ExpectError - length, - // $ExpectError - at, - // $ExpectError - depth, - // $ExpectError - a -) { - return 'test' -}) - -// $ExpectError -stylis() -// $ExpectError -stylis('abc') -// $ExpectError -stylis('abc', 5) -// $ExpectError -stylis([], 'abc') -stylis('abc', 'cde') diff --git a/packages/stylis/types/tsconfig.json b/packages/stylis/types/tsconfig.json deleted file mode 100644 index ea6734342a..0000000000 --- a/packages/stylis/types/tsconfig.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "../", - "forceConsistentCasingInFileNames": true, - "jsx": "react", - "lib": [ - "es6", - "dom" - ], - "module": "commonjs", - "noEmit": true, - "noImplicitAny": true, - "noImplicitThis": true, - "strict": true, - "strictNullChecks": true, - "strictFunctionTypes": true, - "target": "es5", - "typeRoots": [ - "../" - ], - "types": [] - }, - "include": [ - "./*.ts", - "./*.tsx" - ] -} diff --git a/packages/stylis/types/tslint.json b/packages/stylis/types/tslint.json deleted file mode 100644 index c425bd6018..0000000000 --- a/packages/stylis/types/tslint.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "dtslint/dtslint.json", - "rules": { - "only-arrow-functions": false, - - "array-type": [ - true, - "generic" - ], - "semicolon": false, - "space-before-function-paren": false, - "no-null-undefined-union": false, - "callable-types": false - } -} \ No newline at end of file diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js index df507e5170..647f1c8100 100644 --- a/packages/utils/src/index.js +++ b/packages/utils/src/index.js @@ -47,7 +47,7 @@ export const insertStyles = ( let current = serialized do { let maybeStyles = cache.insert( - `.${className}`, + serialized === current ? `.${className}` : '', current, cache.sheet, true diff --git a/yarn.lock b/yarn.lock index 20a082ce63..bba109774a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2503,6 +2503,17 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== +"@emotion/serialize@^0.11.14": + version "0.11.16" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad" + integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg== + dependencies: + "@emotion/hash" "0.8.0" + "@emotion/memoize" "0.7.4" + "@emotion/unitless" "0.7.5" + "@emotion/utils" "0.11.3" + csstype "^2.5.7" + "@gatsbyjs/relay-compiler@2.0.0-printer-fix.2": version "2.0.0-printer-fix.2" resolved "https://registry.npmjs.org/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz#214db0e6072d40ea78ad5fabdb49d56bc95f4e99" @@ -4355,11 +4366,6 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: "@types/color-name" "^1.1.1" color-convert "^2.0.1" -ansi-styles@~1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.0.0.tgz#cb102df1c56f5123eab8b67cd7b98027a0279178" - integrity sha1-yxAt8cVvUSPquLZ817mAJ6AnkXg= - ansi-to-html@^0.6.4: version "0.6.11" resolved "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.11.tgz#5093fc4962186c0e9343dec572a4f71abdc93439" @@ -4707,11 +4713,6 @@ ast-types-flow@0.0.7, ast-types-flow@^0.0.7: resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0= -ast-types@0.11.5: - version "0.11.5" - resolved "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz#9890825d660c03c28339f315e9fa0a360e31ec28" - integrity sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw== - astral-regex@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9" @@ -4973,15 +4974,6 @@ babel-generator@^6.18.0, babel-generator@^6.26.0: source-map "^0.5.7" trim-right "^1.0.1" -babel-helper-bindify-decorators@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz#14c19e5f142d7b47f19a52431e52b1ccbc40a330" - integrity sha1-FMGeXxQte0fxmlJDHlKxzLxAozA= - dependencies: - babel-runtime "^6.22.0" - babel-traverse "^6.24.1" - babel-types "^6.24.1" - babel-helper-builder-binary-assignment-operator-visitor@^6.24.1: version "6.24.1" resolved "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664" @@ -5029,16 +5021,6 @@ babel-helper-explode-assignable-expression@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-helper-explode-class@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz#7dc2a3910dee007056e1e31d640ced3d54eaa9eb" - integrity sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes= - dependencies: - babel-helper-bindify-decorators "^6.24.1" - babel-runtime "^6.22.0" - babel-traverse "^6.24.1" - babel-types "^6.24.1" - babel-helper-function-name@^6.24.1: version "6.24.1" resolved "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9" @@ -5315,26 +5297,11 @@ babel-plugin-syntax-async-functions@^6.8.0: resolved "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" integrity sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU= -babel-plugin-syntax-async-generators@^6.5.0: - version "6.13.0" - resolved "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a" - integrity sha1-a8lj67FuzLrmuStZbrfzXDQqi5o= - -babel-plugin-syntax-class-constructor-call@^6.18.0: - version "6.18.0" - resolved "https://registry.npmjs.org/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416" - integrity sha1-nLnTn+Q8hgC+yBRkVt3L1OGnZBY= - babel-plugin-syntax-class-properties@^6.8.0: version "6.13.0" resolved "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de" integrity sha1-1+sjt5oxf4VDlixQW4J8fWysJ94= -babel-plugin-syntax-decorators@^6.13.0: - version "6.13.0" - resolved "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b" - integrity sha1-MSVjtNvePMgGzuPkFszurd0RrAs= - babel-plugin-syntax-dynamic-import@6.18.0, babel-plugin-syntax-dynamic-import@^6.18.0: version "6.18.0" resolved "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da" @@ -5345,11 +5312,6 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0: resolved "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" integrity sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4= -babel-plugin-syntax-export-extensions@^6.8.0: - version "6.13.0" - resolved "https://registry.npmjs.org/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721" - integrity sha1-cKFITw+QiaToStRLrDU8lbmxJyE= - babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" @@ -5375,16 +5337,7 @@ babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0: resolved "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf" integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ== -babel-plugin-transform-async-generator-functions@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz#f058900145fd3e9907a6ddf28da59f215258a5db" - integrity sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds= - dependencies: - babel-helper-remap-async-to-generator "^6.24.1" - babel-plugin-syntax-async-generators "^6.5.0" - babel-runtime "^6.22.0" - -babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1: +babel-plugin-transform-async-to-generator@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761" integrity sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E= @@ -5393,16 +5346,7 @@ babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async- babel-plugin-syntax-async-functions "^6.8.0" babel-runtime "^6.22.0" -babel-plugin-transform-class-constructor-call@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.24.1.tgz#80dc285505ac067dcb8d6c65e2f6f11ab7765ef9" - integrity sha1-gNwoVQWsBn3LjWxl4vbxGrd2Xvk= - dependencies: - babel-plugin-syntax-class-constructor-call "^6.18.0" - babel-runtime "^6.22.0" - babel-template "^6.24.1" - -babel-plugin-transform-class-properties@6.24.1, babel-plugin-transform-class-properties@^6.24.1: +babel-plugin-transform-class-properties@6.24.1: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac" integrity sha1-anl2PqYdM9NvN7YRqp3vgagbRqw= @@ -5412,17 +5356,6 @@ babel-plugin-transform-class-properties@6.24.1, babel-plugin-transform-class-pro babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-decorators@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d" - integrity sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0= - dependencies: - babel-helper-explode-class "^6.24.1" - babel-plugin-syntax-decorators "^6.13.0" - babel-runtime "^6.22.0" - babel-template "^6.24.1" - babel-types "^6.24.1" - babel-plugin-transform-define@^1.3.0: version "1.3.1" resolved "https://registry.npmjs.org/babel-plugin-transform-define/-/babel-plugin-transform-define-1.3.1.tgz#b21b7bad3b84cf8e3f07cdc8c660b99cbbc01213" @@ -5445,7 +5378,7 @@ babel-plugin-transform-es2015-block-scoped-functions@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1: +babel-plugin-transform-es2015-block-scoping@^6.23.0: version "6.26.0" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f" integrity sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8= @@ -5456,7 +5389,7 @@ babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es20 babel-types "^6.26.0" lodash "^4.17.4" -babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1: +babel-plugin-transform-es2015-classes@^6.23.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db" integrity sha1-WkxYpQyclGHlZLSyo7+ryXolhNs= @@ -5471,7 +5404,7 @@ babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-cla babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1: +babel-plugin-transform-es2015-computed-properties@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3" integrity sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM= @@ -5479,14 +5412,14 @@ babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transfor babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-destructuring@6.23.0, babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0: +babel-plugin-transform-es2015-destructuring@6.23.0, babel-plugin-transform-es2015-destructuring@^6.23.0: version "6.23.0" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d" integrity sha1-mXux8auWf2gtKwh2/jWNYOdlxW0= dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2015-duplicate-keys@^6.24.1: +babel-plugin-transform-es2015-duplicate-keys@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e" integrity sha1-c+s9MQypaePvnskcU3QabxV2Qj4= @@ -5494,14 +5427,14 @@ babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2 babel-runtime "^6.22.0" babel-types "^6.24.1" -babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0: +babel-plugin-transform-es2015-for-of@^6.23.0: version "6.23.0" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691" integrity sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE= dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-function-name@^6.22.0, babel-plugin-transform-es2015-function-name@^6.24.1: +babel-plugin-transform-es2015-function-name@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b" integrity sha1-g0yJhTvDaxrw86TF26qU/Y6sqos= @@ -5536,7 +5469,7 @@ babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-e babel-template "^6.26.0" babel-types "^6.26.0" -babel-plugin-transform-es2015-modules-systemjs@^6.23.0, babel-plugin-transform-es2015-modules-systemjs@^6.24.1: +babel-plugin-transform-es2015-modules-systemjs@^6.23.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23" integrity sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM= @@ -5545,7 +5478,7 @@ babel-plugin-transform-es2015-modules-systemjs@^6.23.0, babel-plugin-transform-e babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015-modules-umd@^6.24.1: +babel-plugin-transform-es2015-modules-umd@^6.23.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468" integrity sha1-rJl+YoXNGO1hdq22B9YCNErThGg= @@ -5554,7 +5487,7 @@ babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015 babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1: +babel-plugin-transform-es2015-object-super@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d" integrity sha1-JM72muIcuDp/hgPa0CH1cusnj40= @@ -5562,7 +5495,7 @@ babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es201 babel-helper-replace-supers "^6.24.1" babel-runtime "^6.22.0" -babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1: +babel-plugin-transform-es2015-parameters@^6.23.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b" integrity sha1-V6w1GrScrxSpfNE7CfZv3wpiXys= @@ -5574,7 +5507,7 @@ babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015- babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-plugin-transform-es2015-shorthand-properties@^6.22.0, babel-plugin-transform-es2015-shorthand-properties@^6.24.1: +babel-plugin-transform-es2015-shorthand-properties@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0" integrity sha1-JPh11nIch2YbvZmkYi5R8U3jiqA= @@ -5589,7 +5522,7 @@ babel-plugin-transform-es2015-spread@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-sticky-regex@^6.22.0, babel-plugin-transform-es2015-sticky-regex@^6.24.1: +babel-plugin-transform-es2015-sticky-regex@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc" integrity sha1-AMHNsaynERLN8M9hJsLta0V8zbw= @@ -5605,14 +5538,14 @@ babel-plugin-transform-es2015-template-literals@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-typeof-symbol@^6.22.0, babel-plugin-transform-es2015-typeof-symbol@^6.23.0: +babel-plugin-transform-es2015-typeof-symbol@^6.23.0: version "6.23.0" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372" integrity sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I= dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-unicode-regex@^6.22.0, babel-plugin-transform-es2015-unicode-regex@^6.24.1: +babel-plugin-transform-es2015-unicode-regex@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9" integrity sha1-04sS9C6nMj9yk4fxinxa4frrNek= @@ -5621,7 +5554,7 @@ babel-plugin-transform-es2015-unicode-regex@^6.22.0, babel-plugin-transform-es20 babel-runtime "^6.22.0" regexpu-core "^2.0.0" -babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-exponentiation-operator@^6.24.1: +babel-plugin-transform-exponentiation-operator@^6.22.0: version "6.24.1" resolved "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e" integrity sha1-KrDJx/MJj6SJB3cruBP+QejeOg4= @@ -5630,15 +5563,7 @@ babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-e babel-plugin-syntax-exponentiation-operator "^6.8.0" babel-runtime "^6.22.0" -babel-plugin-transform-export-extensions@^6.22.0: - version "6.22.0" - resolved "https://registry.npmjs.org/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.22.0.tgz#53738b47e75e8218589eea946cbbd39109bbe653" - integrity sha1-U3OLR+deghhYnuqUbLvTkQm75lM= - dependencies: - babel-plugin-syntax-export-extensions "^6.8.0" - babel-runtime "^6.22.0" - -babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-strip-types@^6.8.0: +babel-plugin-transform-flow-strip-types@^6.22.0: version "6.22.0" resolved "https://registry.npmjs.org/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf" integrity sha1-hMtnKTXUNxT9wyvOhFaNh0Qc988= @@ -5646,7 +5571,7 @@ babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-str babel-plugin-syntax-flow "^6.18.0" babel-runtime "^6.22.0" -babel-plugin-transform-object-rest-spread@6.26.0, babel-plugin-transform-object-rest-spread@^6.22.0: +babel-plugin-transform-object-rest-spread@6.26.0: version "6.26.0" resolved "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06" integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY= @@ -5703,7 +5628,7 @@ babel-plugin-transform-react-remove-prop-types@^0.4.24: resolved "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a" integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA== -babel-plugin-transform-regenerator@6.26.0, babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1: +babel-plugin-transform-regenerator@6.26.0, babel-plugin-transform-regenerator@^6.22.0: version "6.26.0" resolved "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" integrity sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8= @@ -5770,36 +5695,6 @@ babel-preset-env@1.6.1: invariant "^2.2.2" semver "^5.3.0" -babel-preset-es2015@^6.9.0: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939" - integrity sha1-1EBQ1rwsn+6nAqrzjXJ6AhBTiTk= - dependencies: - babel-plugin-check-es2015-constants "^6.22.0" - babel-plugin-transform-es2015-arrow-functions "^6.22.0" - babel-plugin-transform-es2015-block-scoped-functions "^6.22.0" - babel-plugin-transform-es2015-block-scoping "^6.24.1" - babel-plugin-transform-es2015-classes "^6.24.1" - babel-plugin-transform-es2015-computed-properties "^6.24.1" - babel-plugin-transform-es2015-destructuring "^6.22.0" - babel-plugin-transform-es2015-duplicate-keys "^6.24.1" - babel-plugin-transform-es2015-for-of "^6.22.0" - babel-plugin-transform-es2015-function-name "^6.24.1" - babel-plugin-transform-es2015-literals "^6.22.0" - babel-plugin-transform-es2015-modules-amd "^6.24.1" - babel-plugin-transform-es2015-modules-commonjs "^6.24.1" - babel-plugin-transform-es2015-modules-systemjs "^6.24.1" - babel-plugin-transform-es2015-modules-umd "^6.24.1" - babel-plugin-transform-es2015-object-super "^6.24.1" - babel-plugin-transform-es2015-parameters "^6.24.1" - babel-plugin-transform-es2015-shorthand-properties "^6.24.1" - babel-plugin-transform-es2015-spread "^6.22.0" - babel-plugin-transform-es2015-sticky-regex "^6.24.1" - babel-plugin-transform-es2015-template-literals "^6.22.0" - babel-plugin-transform-es2015-typeof-symbol "^6.22.0" - babel-plugin-transform-es2015-unicode-regex "^6.24.1" - babel-plugin-transform-regenerator "^6.24.1" - babel-preset-fbjs@^3.1.2, babel-preset-fbjs@^3.2.0: version "3.2.0" resolved "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-3.2.0.tgz#c0e6347d3e0379ed84b3c2434d3467567aa05297" @@ -5929,37 +5824,7 @@ babel-preset-react@6.24.1: babel-plugin-transform-react-jsx-source "^6.22.0" babel-preset-flow "^6.23.0" -babel-preset-stage-1@^6.5.0: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-preset-stage-1/-/babel-preset-stage-1-6.24.1.tgz#7692cd7dcd6849907e6ae4a0a85589cfb9e2bfb0" - integrity sha1-dpLNfc1oSZB+auSgqFWJz7niv7A= - dependencies: - babel-plugin-transform-class-constructor-call "^6.24.1" - babel-plugin-transform-export-extensions "^6.22.0" - babel-preset-stage-2 "^6.24.1" - -babel-preset-stage-2@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1" - integrity sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE= - dependencies: - babel-plugin-syntax-dynamic-import "^6.18.0" - babel-plugin-transform-class-properties "^6.24.1" - babel-plugin-transform-decorators "^6.24.1" - babel-preset-stage-3 "^6.24.1" - -babel-preset-stage-3@^6.24.1: - version "6.24.1" - resolved "https://registry.npmjs.org/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz#836ada0a9e7a7fa37cb138fb9326f87934a48395" - integrity sha1-g2raCp56f6N8sTj7kyb4eTSkg5U= - dependencies: - babel-plugin-syntax-trailing-function-commas "^6.22.0" - babel-plugin-transform-async-generator-functions "^6.24.1" - babel-plugin-transform-async-to-generator "^6.24.1" - babel-plugin-transform-exponentiation-operator "^6.24.1" - babel-plugin-transform-object-rest-spread "^6.22.0" - -babel-register@^6.26.0, babel-register@^6.9.0: +babel-register@^6.26.0: version "6.26.0" resolved "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071" integrity sha1-btAhFz4vy0htestFxgCahW9kcHE= @@ -6030,11 +5895,6 @@ babylon@^6.17.0, babylon@^6.18.0: resolved "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ== -babylon@^7.0.0-beta.47: - version "7.0.0-beta.47" - resolved "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.47.tgz#6d1fa44f0abec41ab7c780481e62fd9aafbdea80" - integrity sha512-+rq2cr4GDhtToEzKFD6KZZMDBXhjFAr9JjPw9pAppZACeEWqNM294j+NdBzkSHYXwzzBmVjZ3nEVJlOhbR2gOQ== - backo2@1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" @@ -7002,15 +6862,6 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@~0.4.0: - version "0.4.0" - resolved "https://registry.npmjs.org/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f" - integrity sha1-UZmj3c0MHv4jvAjBsCewYXbgxk8= - dependencies: - ansi-styles "~1.0.0" - has-color "~0.1.0" - strip-ansi "~0.1.0" - change-case@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e" @@ -8416,6 +8267,11 @@ csstype@^2.2.0: resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41" integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg== +csstype@^2.5.7: + version "2.6.10" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" + integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== + csstype@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" @@ -10231,7 +10087,7 @@ esprima@^3.1.3: resolved "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633" integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM= -esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0: +esprima@^4.0.0, esprima@^4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== @@ -11209,11 +11065,6 @@ flow-bin@^0.110.0: resolved "https://registry.npmjs.org/flow-bin/-/flow-bin-0.110.0.tgz#c6c140e239f662839d8f61b64b7b911f12d3306c" integrity sha512-mmdEPEMoTuX+mguy/tjRlOlCtPfVdXZQeMgCAsEDVDgWMA5vwWhM2y653OcJiKX38t4gtZ2e/MNVo0qzyYeZDQ== -flow-parser@^0.*: - version "0.104.0" - resolved "https://registry.npmjs.org/flow-parser/-/flow-parser-0.104.0.tgz#4f9cf163a59a20ed583cf4989ff87fb927a6c8d4" - integrity sha512-S2VGfM/qU4g9NUf2hA5qH/QmQsZIflxFO7victnYN1LR5SoOUsn3JtMhXLKHm2QlnZwwJKIdLt/uYyPr4LiQAA== - flush-write-stream@^1.0.0: version "1.1.1" resolved "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -12646,11 +12497,6 @@ has-binary2@~1.0.2: dependencies: isarray "2.0.1" -has-color@~0.1.0: - version "0.1.7" - resolved "https://registry.npmjs.org/has-color/-/has-color-0.1.7.tgz#67144a5260c34fc3cca677d041daf52fe7b78b2f" - integrity sha1-ZxRKUmDDT8PMpnfQQdr1L+e3iy8= - has-cors@1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39" @@ -15765,27 +15611,6 @@ jsc-android@^245459.0.0: resolved "https://registry.yarnpkg.com/jsc-android/-/jsc-android-245459.0.0.tgz#e584258dd0b04c9159a27fb104cd5d491fd202c9" integrity sha512-wkjURqwaB1daNkDi2OYYbsLnIdC/lUM2nPXQKRs5pqEU9chDg435bjvo+LSaHotDENygHQDHe+ntUkkw2gwMtg== -jscodeshift@^0.5.0: - version "0.5.1" - resolved "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.5.1.tgz#4af6a721648be8638ae1464a190342da52960c33" - integrity sha512-sRMollbhbmSDrR79JMAnhEjyZJlQQVozeeY9A6/KNuV26DNcuB3mGSCWXp0hks9dcwRNOELbNOiwraZaXXRk5Q== - dependencies: - babel-plugin-transform-flow-strip-types "^6.8.0" - babel-preset-es2015 "^6.9.0" - babel-preset-stage-1 "^6.5.0" - babel-register "^6.9.0" - babylon "^7.0.0-beta.47" - colors "^1.1.2" - flow-parser "^0.*" - lodash "^4.13.1" - micromatch "^2.3.7" - neo-async "^2.5.0" - node-dir "0.1.8" - nomnom "^1.8.1" - recast "^0.15.0" - temp "^0.8.1" - write-file-atomic "^1.2.0" - jsdom@^11.5.1: version "11.12.0" resolved "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8" @@ -16773,7 +16598,7 @@ lodash.without@~4.4.0: resolved "https://registry.npmjs.org/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac" integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw= -"lodash@>=3.5 <5", lodash@^4.11.1, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: +"lodash@>=3.5 <5", lodash@^4.11.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: version "4.17.15" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== @@ -17523,7 +17348,7 @@ metro@^0.56.0, metro@^0.56.4: xpipe "^1.0.5" yargs "^9.0.0" -micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7: +micromatch@^2.1.5, micromatch@^2.3.11: version "2.3.11" resolved "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565" integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU= @@ -17953,11 +17778,6 @@ node-addon-api@^1.6.0: resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.1.tgz#cf813cd69bb8d9100f6bdca6755fc268f54ac492" integrity sha512-2+DuKodWvwRTrCfKOeR24KIc5unKjOh8mz17NCzVnHWfjAdDqbfbjqh7gUT+BkXBRQM52+xCHciKWonJ3CbJMQ== -node-dir@0.1.8: - version "0.1.8" - resolved "https://registry.npmjs.org/node-dir/-/node-dir-0.1.8.tgz#55fb8deb699070707fb67f91a460f0448294c77d" - integrity sha1-VfuN62mQcHB/tn+RpGDwRIKUx30= - node-emoji@^1.6.1: version "1.10.0" resolved "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da" @@ -18127,14 +17947,6 @@ node-uuid@~1.4.7: resolved "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.8.tgz#b040eb0923968afabf8d32fb1f17f1167fdab907" integrity sha1-sEDrCSOWivq/jTL7HxfxFn/auQc= -nomnom@^1.8.1: - version "1.8.1" - resolved "https://registry.npmjs.org/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7" - integrity sha1-IVH3Ikcrp55Qp2/BJbuMjy5Nwqc= - dependencies: - chalk "~0.4.0" - underscore "~1.6.0" - noms@0.0.0: version "0.0.0" resolved "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859" @@ -20956,7 +20768,7 @@ prismjs@^1.6.0: optionalDependencies: clipboard "^2.0.0" -private@^0.1.6, private@^0.1.7, private@^0.1.8, private@~0.1.5: +private@^0.1.6, private@^0.1.7, private@^0.1.8: version "0.1.8" resolved "https://registry.npmjs.org/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg== @@ -22020,16 +21832,6 @@ realpath-native@^1.0.0, realpath-native@^1.1.0: dependencies: util.promisify "^1.0.0" -recast@^0.15.0: - version "0.15.5" - resolved "https://registry.npmjs.org/recast/-/recast-0.15.5.tgz#6871177ee26720be80d7624e4283d5c855a5cb0b" - integrity sha512-nkAYNqarh73cMWRKFiPQ8I9dOLFvFk6SnG8u/LUlOYfArDOD/EjsVRAs860TlBLrpxqAXHGET/AUAVjdEymL5w== - dependencies: - ast-types "0.11.5" - esprima "~4.0.0" - private "~0.1.5" - source-map "~0.6.1" - recursive-readdir@2.2.1: version "2.2.1" resolved "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.1.tgz#90ef231d0778c5ce093c9a48d74e5c5422d13a99" @@ -22521,7 +22323,7 @@ request@2.77.0: tough-cookie "~2.3.0" tunnel-agent "~0.4.1" -request@^2.65.0, request@^2.79.0, request@^2.81.0, request@^2.83.0, request@^2.85.0, request@^2.87.0, request@^2.88.0: +request@^2.65.0, request@^2.79.0, request@^2.81.0, request@^2.83.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.npmjs.org/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -24268,11 +24070,6 @@ strip-ansi@^6.0.0: dependencies: ansi-regex "^5.0.0" -strip-ansi@~0.1.0: - version "0.1.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.1.1.tgz#39e8a98d044d150660abe4a6808acf70bb7bc991" - integrity sha1-OeipjQRNFQZgq+SmgIrPcLt7yZE= - strip-bom-string@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92" @@ -24388,15 +24185,10 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" -stylis-rule-sheet@^0.0.10: - version "0.0.10" - resolved "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" - integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== - -stylis@3.5.4: - version "3.5.4" - resolved "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" - integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== +stylis@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.0.tgz#475f4e00e3b809ed2a0c2bb6cba83d526e824171" + integrity sha512-kdT29t1M7lMS1hKHvFD28QqT4oxTOIKF5KQD7Dz9UA2Gck9DjDc8IX1sdtHGI3QBRbLKOYhBjuBdcGpH5NibwA== sudo-prompt@^9.0.0: version "9.1.1" @@ -24626,7 +24418,7 @@ temp-dir@^1.0.0: resolved "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d" integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0= -temp@0.8.3, temp@^0.8.1: +temp@0.8.3: version "0.8.3" resolved "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59" integrity sha1-4Ma8TSa5AxJEEOT+2BEDAU38H1k= @@ -25332,11 +25124,6 @@ underscore@^1.7.0, underscore@^1.8.3: resolved "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961" integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg== -underscore@~1.6.0: - version "1.6.0" - resolved "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8" - integrity sha1-izixDKze9jM3uLJOT/htRa6lKag= - unescape@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/unescape/-/unescape-0.2.0.tgz#b78b9b60c86f1629df181bf53eee3bc8d6367ddf"