From 9e998e3755c217027ad1be0af4c64644fe14c6bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 22 Jun 2020 08:57:18 +0200 Subject: [PATCH] Upgrade Stylis to v4 (#1817) * Stylis v4 tryout * Move @import rules in test to be first * Improved compat plugin * Add tests for orphanated pseudos * orphanated -> orphaned * Upgrade stylis and improve compat plugin * Improve compat plugin - avoid double compilation * Shorten compat plugin a little bit * Add guard for global top-level rules in the compat plugin * Fix tagged templates minifier (#1836) * Add TS test to check for excessive instantiation regressions * Fix tagged templates minifier * Use non-forked stylis for minification * Pass missing argument to toInputTree and fix isAutoInsertedRule for parent-less rules * Temporarily add @emotion/stylis as dep of @emotion/babel-plugin * Update snapshots * Make compat plugin be always included * move removeLabel into omnipresentPlugins * Stop special-casing @import insertion * fix getServerStylisCache * Remove outdated docs around stylisPlugins and prefix options * Add changesets * Add note about prefixer being just a plugin to stylisPlugins docs * Actually use officially published Stylis v4 * Improve error message about incorrect @import insertion * Fix flow errors * Reword error messages and changeset content Co-authored-by: Mitchell Hamilton * update snapshots * Remove mention of `@import` not being usable in `css` calls as it wasnt true for @emotion/react+ * Add mention to the changeset about where one can find a prefixer * Update .changeset/warm-ties-drop.md Co-authored-by: Mitchell Hamilton --- .changeset/lovely-wasps-reply.md | 5 + .changeset/tough-fans-do.md | 5 + .changeset/warm-ties-drop.md | 15 + .changeset/witty-dots-return.md | 5 + docs/cache-provider.mdx | 10 - docs/ssr.mdx | 10 - package.json | 2 - .../__tests__/__snapshots__/css.js.snap | 2 +- .../__snapshots__/vanilla-emotion.js.snap | 83 ++- .../css-macro/__snapshots__/index.js.snap | 2 +- .../__fixtures__/nested-orphaned-pseudo.js | 8 + .../__snapshots__/index.js.snap | 83 ++- packages/babel-plugin/package.json | 3 +- packages/babel-plugin/src/utils/index.js | 1 - .../babel-plugin/src/utils/minify-utils.js | 96 --- packages/babel-plugin/src/utils/minify.js | 82 ++- .../utils/transform-expression-with-styles.js | 13 +- packages/cache/README.md | 12 +- packages/cache/package.json | 4 +- packages/cache/src/index.js | 173 ++--- packages/cache/src/stylis-plugins.js | 227 +++++-- packages/cache/src/types.js | 29 +- packages/cache/types/index.d.ts | 31 +- packages/css/package.json | 4 +- .../css/test/__snapshots__/css.test.js.snap | 34 +- .../__snapshots__/inject-global.test.js.snap | 2 +- .../test/__snapshots__/insertion.test.js.snap | 375 ----------- .../test/__snapshots__/keyframes.test.js.snap | 30 +- .../__snapshots__/label-pattern.test.js.snap | 2 +- .../__snapshots__/selectivity.test.js.snap | 103 ++- .../test/__snapshots__/warnings.test.js.snap | 2 +- packages/css/test/insertion.test.js | 253 ------- .../instance/__snapshots__/css.test.js.snap | 52 +- .../__snapshots__/inline.test.js.snap | 619 +++++++---------- .../__snapshots__/stream.test.js.snap | 551 +++++++-------- .../css/test/instance/emotion-instance.js | 15 +- .../no-babel/__snapshots__/index.test.js.snap | 14 +- packages/css/test/selectivity.test.js | 92 +++ .../__snapshots__/source-map.test.js.snap | 10 +- packages/css/test/warnings.test.js | 19 + .../test/__snapshots__/printer.test.js.snap | 2 - packages/jest/test/printer.test.js | 12 - .../react/__tests__/__snapshots__/css.js.snap | 4 +- .../__tests__/__snapshots__/global.js.snap | 8 +- .../__tests__/__snapshots__/server.js.snap | 102 --- .../__tests__/__snapshots__/warnings.js.snap | 2 +- packages/react/__tests__/at-import.js | 18 +- .../__tests__/babel/__snapshots__/css.js.snap | 2 +- packages/react/__tests__/custom-cache.js | 30 +- packages/react/__tests__/global.js | 8 +- packages/react/__tests__/import-prod.js | 8 +- packages/react/__tests__/server.js | 66 -- packages/react/__tests__/warnings.js | 91 ++- .../test/__snapshots__/index.test.js.snap | 258 ++++---- .../test/__snapshots__/inline.test.js.snap | 178 ++--- .../test/__snapshots__/stream.test.js.snap | 178 ++--- packages/sheet/__tests__/index.js | 24 +- packages/sheet/src/index.js | 39 +- .../__tests__/__snapshots__/styled.js.snap | 6 +- .../__snapshots__/composition.test.js.snap | 6 +- .../test/__snapshots__/index.test.js.snap | 2 +- packages/stylis/CHANGELOG.md | 13 - packages/stylis/LICENSE | 21 - packages/stylis/README.md | 33 - .../__tests__/__snapshots__/index.js.snap | 357 ---------- packages/stylis/__tests__/index.js | 321 --------- packages/stylis/build.js | 140 ---- packages/stylis/package.json | 32 - packages/stylis/src/index.js | 2 - packages/stylis/src/stylis.min.js | 625 ------------------ packages/stylis/types/index.d.ts | 55 -- packages/stylis/types/tests.ts | 164 ----- packages/stylis/types/tsconfig.json | 27 - packages/stylis/types/tslint.json | 15 - packages/utils/src/index.js | 2 +- yarn.lock | 309 ++------- 76 files changed, 1765 insertions(+), 4473 deletions(-) create mode 100644 .changeset/lovely-wasps-reply.md create mode 100644 .changeset/tough-fans-do.md create mode 100644 .changeset/warm-ties-drop.md create mode 100644 .changeset/witty-dots-return.md create mode 100644 packages/babel-plugin/__tests__/vanilla-emotion-macro/__fixtures__/nested-orphaned-pseudo.js delete mode 100644 packages/babel-plugin/src/utils/minify-utils.js delete mode 100644 packages/css/test/__snapshots__/insertion.test.js.snap delete mode 100644 packages/css/test/insertion.test.js delete mode 100644 packages/stylis/CHANGELOG.md delete mode 100644 packages/stylis/LICENSE delete mode 100644 packages/stylis/README.md delete mode 100644 packages/stylis/__tests__/__snapshots__/index.js.snap delete mode 100644 packages/stylis/__tests__/index.js delete mode 100644 packages/stylis/build.js delete mode 100644 packages/stylis/package.json delete mode 100644 packages/stylis/src/index.js delete mode 100644 packages/stylis/src/stylis.min.js delete mode 100644 packages/stylis/types/index.d.ts delete mode 100644 packages/stylis/types/tests.ts delete mode 100644 packages/stylis/types/tsconfig.json delete mode 100644 packages/stylis/types/tslint.json diff --git a/.changeset/lovely-wasps-reply.md b/.changeset/lovely-wasps-reply.md new file mode 100644 index 000000000..6fc51dea2 --- /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 000000000..00b9a7885 --- /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 000000000..e2d73d2ea --- /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 000000000..6b729b906 --- /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 7f165dc1c..7fa05e961 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 f4f6d14f7..d08f2ee31 100644 --- a/docs/ssr.mdx +++ b/docs/ssr.mdx @@ -175,16 +175,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 f05743b50..90a24b62e 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 10bd5e6f4..ac845fcc6 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 f466029fe..3221f64bb 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 aac1fe6ad..bbdef3092 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 000000000..891bab3b5 --- /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 b6594c76c..77a95929f 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 f510d8443..20f450e86 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 076e03d3a..733b947dc 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 b90946401..000000000 --- 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 d9f0b64af..d37371274 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 3f8178036..0040a346e 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 3be078eb3..dfdaa7b93 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 7edf6a465..68be3385c 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 2990abdac..82e0d037f 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 c27e1bf90..6a53840c8 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 f71990903..92312fb30 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 9c86d0cc2..1a856d442 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 c79565c6e..8777ad8af 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 60a67e565..4cdfa7376 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 a3340f81e..f0012fdc7 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 f5281e919..be3853661 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 7d262ba82..82cc78140 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 75a76bc67..fef01cd1b 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 347213f5e..000000000 --- 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 8478b4478..ec57cd312 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 95d9fecab..943d71287 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 9155fb853..59f6fe483 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 44865f514..ddef27e14 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 02b093aac..16b82785c 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 a25a15840..3994d541e 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 e093a7bf5..683efe4fe 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 7679d9bea..645737a40 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 851857247..1cf2ff3c3 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 d68d32261..de44120a6 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 3824bd86e..f697e11d0 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 c434d5ad8..2a8c6fc3d 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 91c7bbd44..66f45eef6 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 80b2e6c56..b59005b92 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 4fefdfbd0..abd0c0b8b 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 f89164acf..28a847204 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/stylis/CHANGELOG.md b/packages/stylis/CHANGELOG.md deleted file mode 100644 index d6378a374..000000000 --- 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 56e808dea..000000000 --- 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 25a5eaf14..000000000 --- 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 3bcc26dee..000000000 --- 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 6b027fa7e..000000000 --- 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 fdd877e14..000000000 --- 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 581dddf9e..000000000 --- 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 8297b5ac6..000000000 --- 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 c6b56ec79..000000000 --- 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 41cda042f..000000000 --- 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 cb49114bc..000000000 --- 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 ea6734342..000000000 --- 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 c425bd601..000000000 --- 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 df507e517..647f1c810 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 20a082ce6..bba109774 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"