From 4b313e483d71d5a5e68758829f10f76b9c499622 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Sun, 3 Nov 2019 09:39:03 +1000 Subject: [PATCH 001/176] Enter pre --- .changeset/pre.json | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 000000000..f44ec2d4e --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,43 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "babel-plugin-emotion": "10.0.23", + "@emotion/babel-plugin-jsx-pragmatic": "0.1.4", + "@emotion/babel-preset-css-prop": "10.0.23", + "@emotion/cache": "10.0.19", + "@emotion/core": "10.0.22", + "create-emotion": "10.0.14", + "create-emotion-server": "10.0.14", + "@emotion/css": "10.0.22", + "emotion": "10.0.23", + "emotion-server": "10.0.17", + "emotion-theming": "10.0.19", + "eslint-plugin-emotion": "10.0.14", + "@emotion/hash": "0.7.3", + "@emotion/is-prop-valid": "0.8.5", + "jest-emotion": "10.0.17", + "@emotion/memoize": "0.7.3", + "@emotion/native": "10.0.22", + "@emotion/primitives": "10.0.24", + "@emotion/primitives-core": "10.0.22", + "@emotion/serialize": "0.11.14", + "@emotion/sheet": "0.9.3", + "@emotion/styled": "10.0.23", + "@emotion/styled-base": "10.0.24", + "@emotion/stylis": "0.8.4", + "@emotion/unitless": "0.7.4", + "@emotion/utils": "0.11.2", + "@emotion/weak-memoize": "0.2.4", + "example": "0.6.17", + "my-razzle-app": "0.1.3", + "babel-preset-emotion-dev": "9.2.6", + "babel-tester": "0.4.5", + "benchmarks": "0.8.27", + "old-babel-tester": "0.4.5", + "ssr-benchmarks": "0.8.13", + "test-utils": "0.3.2", + "emotion-site": "9.3.0" + }, + "changesets": [] +} From b0ad4f0c628813a42c4637857be9a969429db6f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Sun, 3 Nov 2019 20:40:32 +0100 Subject: [PATCH 002/176] Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such (#1602) --- .changeset/light-mice-relate.md | 5 ++ .../css-requires-options.js.snap | 67 +++++++++++++++++++ .../__tests__/css-requires-options.js | 34 ++++++++++ .../babel-plugin-emotion/src/emotion-macro.js | 32 +++++++++ 4 files changed, 138 insertions(+) create mode 100644 .changeset/light-mice-relate.md diff --git a/.changeset/light-mice-relate.md b/.changeset/light-mice-relate.md new file mode 100644 index 000000000..34ab07455 --- /dev/null +++ b/.changeset/light-mice-relate.md @@ -0,0 +1,5 @@ +--- +'babel-plugin-emotion': patch +--- + +Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap index 5a776b4aa..53deeed36 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap @@ -1,5 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`babel css inline babel 6 code already transpiled by emotion plugin (avoid double transpilation) 1`] = ` +"import { css as _css2 } from \\"emotion\\"; +import { keyframes as _keyframes2 } from \\"emotion\\"; + + +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).\\"; +} + +let someCls = +/*#__PURE__*/ +_css(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1jwq1yt-someCls\\", + styles: \\"color:hotpink;;label:someCls;\\" +} : { + name: \\"1jwq1yt-someCls\\", + styles: \\"color:hotpink;;label:someCls;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +}); + +let rotate360 = +/*#__PURE__*/ +_keyframes(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1k98dea-rotate360\\", + styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\" +} : { + name: \\"1k98dea-rotate360\\", + styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`babel css inline babel 6 custom instance 1`] = ` "import { css as _css } from 'my-emotion-instance'; @@ -122,6 +156,39 @@ var templateObject_1; const someVar = /*#__PURE__*/_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n;label:someVar;'], ['\\\\n color: hotpink;\\\\n;label:someVar;'])));" `; +exports[`babel css inline babel 7 code already transpiled by emotion plugin (avoid double transpilation) 1`] = ` +"import { css as _css2 } from \\"emotion\\"; +import { keyframes as _keyframes2 } from \\"emotion\\"; + +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).\\"; +} + +let someCls = +/*#__PURE__*/ +_css(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1jwq1yt-someCls\\", + styles: \\"color:hotpink;;label:someCls;\\" +} : { + name: \\"1jwq1yt-someCls\\", + styles: \\"color:hotpink;;label:someCls;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +}); + +let rotate360 = +/*#__PURE__*/ +_keyframes(process.env.NODE_ENV === \\"production\\" ? { + name: \\"1k98dea-rotate360\\", + styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\" +} : { + name: \\"1k98dea-rotate360\\", + styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`babel css inline babel 7 custom instance 1`] = ` "import { css as _css } from \\"my-emotion-instance\\"; diff --git a/packages/babel-plugin-emotion/__tests__/css-requires-options.js b/packages/babel-plugin-emotion/__tests__/css-requires-options.js index 894f4b356..2cc58247c 100644 --- a/packages/babel-plugin-emotion/__tests__/css-requires-options.js +++ b/packages/babel-plugin-emotion/__tests__/css-requires-options.js @@ -74,6 +74,40 @@ const inline = { filename: __filename }, + 'code already transpiled by emotion plugin (avoid double transpilation)': { + code: ` + import { keyframes as _keyframes } from "emotion"; + import { css as _css } from "emotion"; + + 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)."; } + + let someCls = + /*#__PURE__*/ + _css(process.env.NODE_ENV === "production" ? { + name: "1jwq1yt-someCls", + styles: "color:hotpink;;label:someCls;" + } : { + name: "1jwq1yt-someCls", + styles: "color:hotpink;;label:someCls;", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHaUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ + }); + + let rotate360 = + /*#__PURE__*/ + _keyframes(process.env.NODE_ENV === "production" ? { + name: "1k98dea-rotate360", + styles: "from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;" + } : { + name: "1k98dea-rotate360", + styles: "from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LWRvdWJsZS1sYWJlbC1hbHJlYWR5LXRyYW5zcGlsZWQtY29kZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPeUIiLCJmaWxlIjoiZG9lcy1ub3QtZG91YmxlLWxhYmVsLWFscmVhZHktdHJhbnNwaWxlZC1jb2RlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETzogdGhlb3JldGljYWxsdCBgZW1vdGlvbmAgc2hvdWxkIGJlIG1lbnRpb25lZCBpbiB0aGlzIHRlc3QgLSBzbyBwcm9iYWJseSB3ZSdkIGxpa2UgdG8gbW92ZSB0aGlzIHRlc3QgYXJvdW5kXG5pbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2BcbiAgZnJvbSB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG4gIH1cbiAgdG8ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gIH1cbmBcbiJdfQ== */", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ + }); + `, + filename: __filename + }, + 'custom instance': { code: ` import {css as lol} from 'my-emotion-instance' diff --git a/packages/babel-plugin-emotion/src/emotion-macro.js b/packages/babel-plugin-emotion/src/emotion-macro.js index a82c7df90..bb0f3bc74 100644 --- a/packages/babel-plugin-emotion/src/emotion-macro.js +++ b/packages/babel-plugin-emotion/src/emotion-macro.js @@ -3,6 +3,34 @@ import { transformExpressionWithStyles } from './utils' import { addNamed } from '@babel/helper-module-imports' import { createMacro } from 'babel-plugin-macros' +const isAlreadyTranspiled = path => { + if (!path.isCallExpression()) { + return false + } + + const firstArgPath = path.get('arguments.0') + + if (!firstArgPath) { + return false + } + + if (!firstArgPath.isConditionalExpression()) { + return false + } + + const alternatePath = firstArgPath.get('alternate') + + if (!alternatePath.isObjectExpression()) { + return false + } + + const properties = new Set( + alternatePath.get('properties').map(p => p.node.key.name) + ) + + return ['name', 'styles'].every(p => properties.has(p)) +} + export let createEmotionMacro = (instancePath: string) => createMacro(function macro({ references, state, babel, isEmotionCall }) { if (!isEmotionCall) { @@ -24,6 +52,10 @@ export let createEmotionMacro = (instancePath: string) => references[referenceKey].reverse().forEach(reference => { const path = reference.parentPath + if (isAlreadyTranspiled(path)) { + return + } + reference.replaceWith(t.cloneDeep(runtimeNode)) if (isPure) { path.addComment('leading', '#__PURE__') From 302bdba1a6b793484c09edeb668815c5e31ea555 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Mon, 4 Nov 2019 05:43:59 +1000 Subject: [PATCH 003/176] Add a changeset --- .changeset/rare-books-own.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 .changeset/rare-books-own.md diff --git a/.changeset/rare-books-own.md b/.changeset/rare-books-own.md new file mode 100644 index 000000000..a687a7257 --- /dev/null +++ b/.changeset/rare-books-own.md @@ -0,0 +1,18 @@ +--- +'babel-plugin-emotion': major +'@emotion/cache': major +'@emotion/core': major +'create-emotion': major +'create-emotion-server': major +'@emotion/css': major +'emotion': major +'emotion-server': major +'emotion-theming': major +'jest-emotion': major +'@emotion/native': major +'@emotion/primitives': major +'@emotion/primitives-core': major +'@emotion/styled': major +--- + +Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number From 720eb0654bd5f41411a5451872ec1fd5c2246d6f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 4 Nov 2019 05:53:25 +1000 Subject: [PATCH 004/176] Version Packages (#1603) --- .changeset/pre.json | 5 ++++- packages/babel-plugin-emotion/CHANGELOG.md | 10 ++++++++++ packages/babel-plugin-emotion/package.json | 2 +- packages/babel-preset-css-prop/CHANGELOG.md | 7 +++++++ packages/babel-preset-css-prop/package.json | 4 ++-- packages/cache/CHANGELOG.md | 6 ++++++ packages/cache/package.json | 4 ++-- packages/core/CHANGELOG.md | 16 ++++++++++++++++ packages/core/package.json | 14 +++++++------- packages/create-emotion-server/CHANGELOG.md | 6 ++++++ packages/create-emotion-server/package.json | 4 ++-- packages/create-emotion/CHANGELOG.md | 12 ++++++++++++ packages/create-emotion/package.json | 8 ++++---- packages/css/CHANGELOG.md | 11 +++++++++++ packages/css/package.json | 4 ++-- packages/emotion-server/CHANGELOG.md | 13 +++++++++++++ packages/emotion-server/package.json | 12 ++++++------ packages/emotion-theming/CHANGELOG.md | 12 ++++++++++++ packages/emotion-theming/package.json | 10 +++++----- packages/emotion/CHANGELOG.md | 12 ++++++++++++ packages/emotion/package.json | 6 +++--- packages/jest-emotion/CHANGELOG.md | 12 ++++++++++++ packages/jest-emotion/package.json | 8 ++++---- packages/native/CHANGELOG.md | 12 ++++++++++++ packages/native/package.json | 6 +++--- packages/primitives-core/CHANGELOG.md | 11 +++++++++++ packages/primitives-core/package.json | 6 +++--- packages/primitives/CHANGELOG.md | 13 +++++++++++++ packages/primitives/package.json | 8 ++++---- packages/styled-base/CHANGELOG.md | 7 +++++++ packages/styled-base/package.json | 6 +++--- packages/styled/CHANGELOG.md | 13 +++++++++++++ packages/styled/package.json | 10 +++++----- scripts/benchmarks/CHANGELOG.md | 8 ++++++++ scripts/benchmarks/package.json | 4 ++-- 35 files changed, 243 insertions(+), 59 deletions(-) create mode 100644 scripts/benchmarks/CHANGELOG.md diff --git a/.changeset/pre.json b/.changeset/pre.json index f44ec2d4e..ae56314be 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -39,5 +39,8 @@ "test-utils": "0.3.2", "emotion-site": "9.3.0" }, - "changesets": [] + "changesets": [ + "light-mice-relate", + "rare-books-own" + ] } diff --git a/packages/babel-plugin-emotion/CHANGELOG.md b/packages/babel-plugin-emotion/CHANGELOG.md index 34c06dbf0..cb6d329d5 100644 --- a/packages/babel-plugin-emotion/CHANGELOG.md +++ b/packages/babel-plugin-emotion/CHANGELOG.md @@ -1,5 +1,15 @@ # babel-plugin-emotion +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- [`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@Andarist](https://github.com/Andarist)! - Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such + ## 10.0.23 ### Patch Changes diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index 4f0534f7b..50c2c9ae5 100644 --- a/packages/babel-plugin-emotion/package.json +++ b/packages/babel-plugin-emotion/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-emotion", - "version": "10.0.23", + "version": "11.0.0-next.0", "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.", "main": "dist/babel-plugin-emotion.cjs.js", "module": "dist/babel-plugin-emotion.esm.js", diff --git a/packages/babel-preset-css-prop/CHANGELOG.md b/packages/babel-preset-css-prop/CHANGELOG.md index faa2afa2c..baf050084 100644 --- a/packages/babel-preset-css-prop/CHANGELOG.md +++ b/packages/babel-preset-css-prop/CHANGELOG.md @@ -1,5 +1,12 @@ # @emotion/babel-preset-css-prop +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 + ## 10.0.23 ### Patch Changes diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json index d25fd3332..18e1a8903 100644 --- a/packages/babel-preset-css-prop/package.json +++ b/packages/babel-preset-css-prop/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/babel-preset-css-prop", - "version": "10.0.23", + "version": "11.0.0-next.0", "description": "A babel preset to automatically enable emotion's css prop", "main": "dist/babel-preset-css-prop.cjs.js", "module": "dist/babel-preset-css-prop.esm.js", @@ -10,7 +10,7 @@ "@babel/plugin-transform-react-jsx": "^7.3.0", "@babel/runtime": "^7.5.5", "@emotion/babel-plugin-jsx-pragmatic": "^0.1.4", - "babel-plugin-emotion": "^10.0.23" + "babel-plugin-emotion": "^11.0.0-next.0" }, "peerDependencies": { "@babel/core": "^7.0.0" diff --git a/packages/cache/CHANGELOG.md b/packages/cache/CHANGELOG.md index 87c599f0a..56d49c0ec 100644 --- a/packages/cache/CHANGELOG.md +++ b/packages/cache/CHANGELOG.md @@ -1,5 +1,11 @@ # @emotion/cache +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + ## 10.0.19 - Updated dependencies [c81c0033]: diff --git a/packages/cache/package.json b/packages/cache/package.json index aecaf4f37..4449a2794 100644 --- a/packages/cache/package.json +++ b/packages/cache/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/cache", - "version": "10.0.19", + "version": "11.0.0-next.0", "description": "emotion's cache", "main": "dist/cache.cjs.js", "module": "dist/cache.esm.js", @@ -32,4 +32,4 @@ "dist", "types" ] -} \ No newline at end of file +} diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 102c20a53..8c94fb001 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,21 @@ # @emotion/core +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - @emotion/cache@11.0.0-next.0 + - @emotion/css@11.0.0-next.0 + - emotion@11.0.0-next.0 + - emotion-server@11.0.0-next.0 + - emotion-theming@11.0.0-next.0 + - @emotion/styled@11.0.0-next.0 + ## 10.0.22 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 5458b202f..ec96cfbf1 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/core", - "version": "10.0.22", + "version": "11.0.0-next.0", "main": "dist/core.cjs.js", "module": "dist/core.esm.js", "browser": { @@ -20,8 +20,8 @@ }, "dependencies": { "@babel/runtime": "^7.5.5", - "@emotion/cache": "^10.0.17", - "@emotion/css": "^10.0.22", + "@emotion/cache": "^11.0.0-next.0", + "@emotion/css": "^11.0.0-next.0", "@emotion/serialize": "^0.11.12", "@emotion/sheet": "0.9.3", "@emotion/utils": "0.11.2" @@ -30,12 +30,12 @@ "react": ">=16.3.0" }, "devDependencies": { - "@emotion/styled": "^10.0.22", + "@emotion/styled": "^11.0.0-next.0", "@types/react": "^16.8.20", "dtslint": "^0.3.0", - "emotion": "^10.0.17", - "emotion-server": "^10.0.17", - "emotion-theming": "^10.0.17", + "emotion": "^11.0.0-next.0", + "emotion-server": "^11.0.0-next.0", + "emotion-theming": "^11.0.0-next.0", "html-tag-names": "^1.1.2", "react": "^16.5.2", "svg-tag-names": "^1.1.1" diff --git a/packages/create-emotion-server/CHANGELOG.md b/packages/create-emotion-server/CHANGELOG.md index 782deccfc..62e8ec1f0 100644 --- a/packages/create-emotion-server/CHANGELOG.md +++ b/packages/create-emotion-server/CHANGELOG.md @@ -1,5 +1,11 @@ # create-emotion-server +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + ## 10.0.14 ### Patch Changes diff --git a/packages/create-emotion-server/package.json b/packages/create-emotion-server/package.json index f44bee0d3..2d78a5b8d 100644 --- a/packages/create-emotion-server/package.json +++ b/packages/create-emotion-server/package.json @@ -1,6 +1,6 @@ { "name": "create-emotion-server", - "version": "10.0.14", + "version": "11.0.0-next.0", "description": "SSR and style extraction tooling for emotion, The Next Generation of CSS-in-JS.", "main": "dist/create-emotion-server.cjs.js", "types": "types/index.d.ts", @@ -41,4 +41,4 @@ "browser": { "./dist/create-emotion-server.cjs.js": "./dist/create-emotion-server.browser.cjs.js" } -} \ No newline at end of file +} diff --git a/packages/create-emotion/CHANGELOG.md b/packages/create-emotion/CHANGELOG.md index 73623aa77..22d7be368 100644 --- a/packages/create-emotion/CHANGELOG.md +++ b/packages/create-emotion/CHANGELOG.md @@ -1,5 +1,17 @@ # create-emotion +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - @emotion/cache@11.0.0-next.0 + - create-emotion-server@11.0.0-next.0 + ## 10.0.14 ### Patch Changes diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json index 1b25316dc..450959308 100644 --- a/packages/create-emotion/package.json +++ b/packages/create-emotion/package.json @@ -1,6 +1,6 @@ { "name": "create-emotion", - "version": "10.0.14", + "version": "11.0.0-next.0", "description": "The Next Generation of CSS-in-JS.", "main": "dist/create-emotion.cjs.js", "module": "dist/create-emotion.esm.js", @@ -14,14 +14,14 @@ "test:typescript": "dtslint types" }, "dependencies": { - "@emotion/cache": "^10.0.14", + "@emotion/cache": "^11.0.0-next.0", "@emotion/serialize": "^0.11.8", "@emotion/sheet": "0.9.3", "@emotion/utils": "0.11.2" }, "devDependencies": { "babel-plugin-transform-define": "^1.3.0", - "create-emotion-server": "10.0.14", + "create-emotion-server": "11.0.0-next.0", "dtslint": "^0.3.0" }, "author": "Kye Hohenberger", @@ -42,4 +42,4 @@ "./dist/create-emotion.cjs.js": "./dist/create-emotion.browser.cjs.js", "./dist/create-emotion.esm.js": "./dist/create-emotion.browser.esm.js" } -} \ No newline at end of file +} diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index 1ce7a8715..c6b33edc5 100644 --- a/packages/css/CHANGELOG.md +++ b/packages/css/CHANGELOG.md @@ -1,5 +1,16 @@ # @emotion/css +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 + ## 10.0.22 ### Patch Changes diff --git a/packages/css/package.json b/packages/css/package.json index fd40159e4..c4e3fda13 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/css", - "version": "10.0.22", + "version": "11.0.0-next.0", "description": "a function to serialize css and object styless", "main": "dist/css.cjs.js", "module": "dist/css.esm.js", @@ -13,7 +13,7 @@ "dependencies": { "@emotion/serialize": "^0.11.12", "@emotion/utils": "0.11.2", - "babel-plugin-emotion": "^10.0.22" + "babel-plugin-emotion": "^11.0.0-next.0" }, "devDependencies": { "dtslint": "^0.3.0" diff --git a/packages/emotion-server/CHANGELOG.md b/packages/emotion-server/CHANGELOG.md index fdd7ee7f4..9ad78952f 100644 --- a/packages/emotion-server/CHANGELOG.md +++ b/packages/emotion-server/CHANGELOG.md @@ -1,5 +1,18 @@ # emotion-server +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 + - create-emotion-server@11.0.0-next.0 + - emotion@11.0.0-next.0 + ## 10.0.17 ### Patch Changes diff --git a/packages/emotion-server/package.json b/packages/emotion-server/package.json index 10000e3b2..b5d52a885 100644 --- a/packages/emotion-server/package.json +++ b/packages/emotion-server/package.json @@ -1,6 +1,6 @@ { "name": "emotion-server", - "version": "10.0.17", + "version": "11.0.0-next.0", "description": "Extract and inline critical css with emotion for server side rendering.", "main": "dist/emotion-server.cjs.js", "types": "types/index.d.ts", @@ -13,16 +13,16 @@ "test:typescript": "dtslint types" }, "dependencies": { - "create-emotion-server": "10.0.14" + "create-emotion-server": "11.0.0-next.0" }, "peerDependencies": { - "emotion": "^10.0.17" + "emotion": "^11.0.0-next.0" }, "devDependencies": { "@types/node": "^10.11.4", - "babel-plugin-emotion": "^10.0.17", + "babel-plugin-emotion": "^11.0.0-next.0", "dtslint": "^0.3.0", - "emotion": "^10.0.17" + "emotion": "^11.0.0-next.0" }, "author": "Kye Hohenberger", "homepage": "https://emotion.sh", @@ -43,4 +43,4 @@ "browser": { "./dist/emotion-server.cjs.js": "./dist/emotion-server.browser.cjs.js" } -} \ No newline at end of file +} diff --git a/packages/emotion-theming/CHANGELOG.md b/packages/emotion-theming/CHANGELOG.md index d1fc01163..a2230192d 100644 --- a/packages/emotion-theming/CHANGELOG.md +++ b/packages/emotion-theming/CHANGELOG.md @@ -1,5 +1,17 @@ # emotion-theming +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - @emotion/core@11.0.0-next.0 + - @emotion/styled@11.0.0-next.0 + ## 10.0.19 ### Patch Changes diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json index 0b30d18a0..f6eeb142c 100644 --- a/packages/emotion-theming/package.json +++ b/packages/emotion-theming/package.json @@ -1,6 +1,6 @@ { "name": "emotion-theming", - "version": "10.0.19", + "version": "11.0.0-next.0", "description": "A CSS-in-JS theming solution, inspired by styled-components", "main": "dist/emotion-theming.cjs.js", "module": "dist/emotion-theming.esm.js", @@ -32,8 +32,8 @@ }, "homepage": "https://emotion.sh", "devDependencies": { - "@emotion/core": "^10.0.17", - "@emotion/styled": "^10.0.17", + "@emotion/core": "^11.0.0-next.0", + "@emotion/styled": "^11.0.0-next.0", "@types/react": "^16.8.20", "dtslint": "^0.3.0", "react": "^16.5.2" @@ -44,7 +44,7 @@ "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { - "@emotion/core": "^10.0.17", + "@emotion/core": "^11.0.0-next.0", "react": ">=16.3.0" }, "umd:main": "dist/emotion-theming.umd.min.js", @@ -55,4 +55,4 @@ "preconstruct": { "umdName": "emotionTheming" } -} \ No newline at end of file +} diff --git a/packages/emotion/CHANGELOG.md b/packages/emotion/CHANGELOG.md index 35c98268e..e90151354 100644 --- a/packages/emotion/CHANGELOG.md +++ b/packages/emotion/CHANGELOG.md @@ -1,5 +1,17 @@ # emotion +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 + - create-emotion@11.0.0-next.0 + ## 10.0.23 ### Patch Changes diff --git a/packages/emotion/package.json b/packages/emotion/package.json index 7929029ae..719aa8ed3 100644 --- a/packages/emotion/package.json +++ b/packages/emotion/package.json @@ -1,6 +1,6 @@ { "name": "emotion", - "version": "10.0.23", + "version": "11.0.0-next.0", "description": "The Next Generation of CSS-in-JS.", "main": "dist/emotion.cjs.js", "module": "dist/emotion.esm.js", @@ -17,8 +17,8 @@ "test:typescript": "dtslint types" }, "dependencies": { - "babel-plugin-emotion": "^10.0.23", - "create-emotion": "^10.0.14" + "babel-plugin-emotion": "^11.0.0-next.0", + "create-emotion": "^11.0.0-next.0" }, "devDependencies": { "@emotion/stylis": "0.8.4", diff --git a/packages/jest-emotion/CHANGELOG.md b/packages/jest-emotion/CHANGELOG.md index 19c2acfe1..a752d9b7e 100644 --- a/packages/jest-emotion/CHANGELOG.md +++ b/packages/jest-emotion/CHANGELOG.md @@ -1,5 +1,17 @@ # jest-emotion +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - @emotion/core@11.0.0-next.0 + - emotion@11.0.0-next.0 + ## 10.0.17 ### Patch Changes diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json index 35fb6a3c1..d886f29de 100644 --- a/packages/jest-emotion/package.json +++ b/packages/jest-emotion/package.json @@ -1,6 +1,6 @@ { "name": "jest-emotion", - "version": "10.0.17", + "version": "11.0.0-next.0", "description": "Jest utilities for emotion", "main": "dist/jest-emotion.cjs.js", "types": "types/index.d.ts", @@ -20,9 +20,9 @@ "css": "^2.2.1" }, "devDependencies": { - "@emotion/core": "^10.0.17", + "@emotion/core": "^11.0.0-next.0", "dtslint": "^0.3.0", - "emotion": "^10.0.17", + "emotion": "^11.0.0-next.0", "enzyme-to-json": "^3.2.1", "preact": "^8.2.9", "preact-render-to-json": "^3.6.6", @@ -49,4 +49,4 @@ "browser": { "./dist/jest-emotion.cjs.js": "./dist/jest-emotion.browser.cjs.js" } -} \ No newline at end of file +} diff --git a/packages/native/CHANGELOG.md b/packages/native/CHANGELOG.md index 75b1407e1..12d34ee32 100644 --- a/packages/native/CHANGELOG.md +++ b/packages/native/CHANGELOG.md @@ -1,5 +1,17 @@ # @emotion/native +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - emotion-theming@11.0.0-next.0 + - @emotion/primitives-core@11.0.0-next.0 + ## 10.0.22 ### Patch Changes diff --git a/packages/native/package.json b/packages/native/package.json index 4d156deda..809222def 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/native", - "version": "10.0.22", + "version": "11.0.0-next.0", "description": "Style and render React Native components using emotion", "main": "dist/native.cjs.js", "module": "dist/native.esm.js", @@ -9,12 +9,12 @@ "dist" ], "devDependencies": { - "emotion-theming": "^10.0.14", + "emotion-theming": "^11.0.0-next.0", "react": "^16.5.2", "react-native": "^0.57.0" }, "dependencies": { - "@emotion/primitives-core": "10.0.22" + "@emotion/primitives-core": "11.0.0-next.0" }, "peerDependencies": { "react-native": ">=0.14.0 <1" diff --git a/packages/primitives-core/CHANGELOG.md b/packages/primitives-core/CHANGELOG.md index eab7efa73..366165e32 100644 --- a/packages/primitives-core/CHANGELOG.md +++ b/packages/primitives-core/CHANGELOG.md @@ -1,5 +1,16 @@ # @emotion/primitives-core +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - @emotion/core@11.0.0-next.0 + ## 10.0.22 ### Patch Changes diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json index b793cdbb2..b77515232 100644 --- a/packages/primitives-core/package.json +++ b/packages/primitives-core/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/primitives-core", - "version": "10.0.22", + "version": "11.0.0-next.0", "description": "Shared utilities for emotion primitives and native", "main": "dist/primitives-core.cjs.js", "module": "dist/primitives-core.esm.js", @@ -13,11 +13,11 @@ "css-to-react-native": "^2.2.1" }, "peerDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/core": "^11.0.0-next.0", "react": ">=16.3.0" }, "devDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/core": "^11.0.0-next.0", "react": "^16.5.2" }, "homepage": "https://emotion.sh", diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md index 6b4a2b990..eda03279c 100644 --- a/packages/primitives/CHANGELOG.md +++ b/packages/primitives/CHANGELOG.md @@ -1,5 +1,18 @@ # @emotion/primitives +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 + - emotion-theming@11.0.0-next.0 + - @emotion/primitives-core@11.0.0-next.0 + ## 10.0.24 ### Patch Changes diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 262a067ce..2ade17872 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/primitives", - "version": "10.0.24", + "version": "11.0.0-next.0", "main": "dist/primitives.cjs.js", "module": "dist/primitives.esm.js", "files": [ @@ -9,15 +9,15 @@ ], "dependencies": { "@emotion/is-prop-valid": "0.8.5", - "@emotion/primitives-core": "10.0.22", - "babel-plugin-emotion": "^10.0.23" + "@emotion/primitives-core": "11.0.0-next.0", + "babel-plugin-emotion": "^11.0.0-next.0" }, "peerDependencies": { "react": ">=16.3.0", "react-primitives": "^0.7.0" }, "devDependencies": { - "emotion-theming": "^10.0.19", + "emotion-theming": "^11.0.0-next.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "react": "^16.5.2", diff --git a/packages/styled-base/CHANGELOG.md b/packages/styled-base/CHANGELOG.md index 5aaaa0908..1faebdd4e 100644 --- a/packages/styled-base/CHANGELOG.md +++ b/packages/styled-base/CHANGELOG.md @@ -1,5 +1,12 @@ # @emotion/styled-base +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - @emotion/core@11.0.0-next.0 + ## 10.0.24 ### Patch Changes diff --git a/packages/styled-base/package.json b/packages/styled-base/package.json index b1f663a9f..cef474b8d 100644 --- a/packages/styled-base/package.json +++ b/packages/styled-base/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/styled-base", - "version": "10.0.24", + "version": "11.0.0-next.0", "description": "base styled API for emotion", "main": "dist/styled-base.cjs.js", "module": "dist/styled-base.esm.js", @@ -21,13 +21,13 @@ "@emotion/utils": "0.11.2" }, "devDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/core": "^11.0.0-next.0", "@types/react": "^16.8.20", "dtslint": "^0.3.0", "react": "^16.5.2" }, "peerDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/core": "^11.0.0-next.0", "react": ">=16.3.0" }, "publishConfig": { diff --git a/packages/styled/CHANGELOG.md b/packages/styled/CHANGELOG.md index 158ae2e40..411101789 100644 --- a/packages/styled/CHANGELOG.md +++ b/packages/styled/CHANGELOG.md @@ -1,5 +1,18 @@ # @emotion/styled +## 11.0.0-next.0 + +### Major Changes + +- [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - Ensure packages are major bumped so that pre-release versions of the linked packages are consistent in the major number + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 + - @emotion/core@11.0.0-next.0 + - @emotion/styled-base@11.0.0-next.0 + ## 10.0.23 ### Patch Changes diff --git a/packages/styled/package.json b/packages/styled/package.json index 9cc55c9a7..733489c16 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/styled", - "version": "10.0.23", + "version": "11.0.0-next.0", "description": "styled API for emotion", "main": "dist/styled.cjs.js", "module": "dist/styled.esm.js", @@ -11,16 +11,16 @@ "test:typescript": "dtslint types" }, "dependencies": { - "@emotion/styled-base": "^10.0.23", - "babel-plugin-emotion": "^10.0.23" + "@emotion/styled-base": "^11.0.0-next.0", + "babel-plugin-emotion": "^11.0.0-next.0" }, "devDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/core": "^11.0.0-next.0", "dtslint": "^0.3.0", "react": "^16.5.2" }, "peerDependencies": { - "@emotion/core": "^10.0.22", + "@emotion/core": "^11.0.0-next.0", "react": ">=16.3.0" }, "publishConfig": { diff --git a/scripts/benchmarks/CHANGELOG.md b/scripts/benchmarks/CHANGELOG.md new file mode 100644 index 000000000..2a1e5d4c6 --- /dev/null +++ b/scripts/benchmarks/CHANGELOG.md @@ -0,0 +1,8 @@ +# benchmarks + +## 0.8.28-next.0 + +### Patch Changes + +- Updated dependencies [[`b0ad4f0c`](https://github.com/emotion-js/emotion/commit/b0ad4f0c628813a42c4637857be9a969429db6f0), [`302bdba1`](https://github.com/emotion-js/emotion/commit/302bdba1a6b793484c09edeb668815c5e31ea555)]: + - babel-plugin-emotion@11.0.0-next.0 diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json index 5b14318a9..dcb62a22b 100644 --- a/scripts/benchmarks/package.json +++ b/scripts/benchmarks/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "benchmarks", - "version": "0.8.27", + "version": "0.8.28-next.0", "scripts": { "start": "parcel src/index.html", "build": "parcel build src/index.html --public-url .", @@ -10,7 +10,7 @@ "dependencies": { "@babel/core": "^7.5.5", "babel-core": "^6.26.3", - "babel-plugin-emotion": "^10.0.9", + "babel-plugin-emotion": "^11.0.0-next.0", "babel-plugin-react-native-web": "^0.9.6", "d3-scale-chromatic": "^1.3.0", "http-server": "^0.11.1", From e67a5be9bffaa12f9ae0e366983dced4c3716f84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 4 Nov 2019 21:42:40 +0100 Subject: [PATCH 005/176] Jest emotion/improvements (#1604) * Match rules in declarations with component used as a selector * Take specificity into account when matching styles * add changesets * fix flow errors --- .changeset/flat-adults-add.md | 5 +++ .changeset/rare-toes-grow.md | 5 +++ packages/jest-emotion/package.json | 3 +- packages/jest-emotion/src/matchers.js | 27 +++++++++++-- packages/jest-emotion/src/utils.js | 29 +++++++++++-- packages/jest-emotion/test/matchers.test.js | 45 +++++++++++++++++++++ yarn.lock | 45 +++++++++++++++++++-- 7 files changed, 147 insertions(+), 12 deletions(-) create mode 100644 .changeset/flat-adults-add.md create mode 100644 .changeset/rare-toes-grow.md diff --git a/.changeset/flat-adults-add.md b/.changeset/flat-adults-add.md new file mode 100644 index 000000000..a837f6a63 --- /dev/null +++ b/.changeset/flat-adults-add.md @@ -0,0 +1,5 @@ +--- +'jest-emotion': patch +--- + +Take specificity into account when matching styles diff --git a/.changeset/rare-toes-grow.md b/.changeset/rare-toes-grow.md new file mode 100644 index 000000000..c5f1d891e --- /dev/null +++ b/.changeset/rare-toes-grow.md @@ -0,0 +1,5 @@ +--- +'jest-emotion': patch +--- + +Match rules in declarations with component used as a selector diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json index d886f29de..d1641e7a3 100644 --- a/packages/jest-emotion/package.json +++ b/packages/jest-emotion/package.json @@ -17,7 +17,8 @@ "@babel/runtime": "^7.5.5", "@types/jest": "^23.0.2", "chalk": "^2.4.1", - "css": "^2.2.1" + "css": "^2.2.1", + "specificity": "^0.4.1" }, "devDependencies": { "@emotion/core": "^11.0.0-next.0", diff --git a/packages/jest-emotion/src/matchers.js b/packages/jest-emotion/src/matchers.js index b51e87c49..2d9dfae7b 100644 --- a/packages/jest-emotion/src/matchers.js +++ b/packages/jest-emotion/src/matchers.js @@ -1,12 +1,14 @@ // @flow import chalk from 'chalk' import * as css from 'css' +import * as specificity from 'specificity' import { getClassNamesFromNodes, getStylesFromClassNames, getStyleElements, hasClassNames, getMediaRules, + findLast, RULE_TYPES } from './utils' @@ -53,23 +55,40 @@ function toHaveStyleRule( if (media) { preparedRules = getMediaRules(preparedRules, media) } - const declaration = preparedRules + const result = preparedRules .filter( rule => rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target) ) - .reduce((decs, rule) => decs.concat(rule.declarations), []) - .filter(dec => dec.type === 'declaration' && dec.property === property) + .reduce((acc, rule) => { + const lastMatchingDeclaration = findLast( + rule.declarations, + dec => dec.type === 'declaration' && dec.property === property + ) + if (!lastMatchingDeclaration) { + return acc + } + return acc.concat( + rule.selectors.map(selector => ({ + selector, + declaration: lastMatchingDeclaration + })) + ) + }, []) + .sort(({ selector: selectorA }, { selector: selectorB }) => + specificity.compare(selectorA, selectorB) + ) .pop() - if (!declaration) { + if (!result) { return { pass: false, message: () => `Property not found: ${property}` } } + const { declaration } = result const pass = valueMatches(declaration, value) const message = () => diff --git a/packages/jest-emotion/src/utils.js b/packages/jest-emotion/src/utils.js index 37ec2be08..a40e34e25 100644 --- a/packages/jest-emotion/src/utils.js +++ b/packages/jest-emotion/src/utils.js @@ -1,9 +1,21 @@ // @flow +function last(arr) { + return arr.length > 0 ? arr[arr.length - 1] : undefined +} + function flatMap(arr, iteratee) { return [].concat(...arr.map(iteratee)) } +export function findLast(arr: T[], predicate: T => boolean) { + for (let i = arr.length - 1; i >= 0; i--) { + if (predicate(arr[i])) { + return arr[i] + } + } +} + export const RULE_TYPES = { media: 'media', rule: 'rule' @@ -122,10 +134,17 @@ export function getStylesFromClassNames( return '' } - let keyPatten = new RegExp(`^(${keys.join('|')})-`) + let targetClassName = classNames.find(className => + /^e[a-z0-9]+$/.test(className) + ) + let keyPattern = `(${keys.join('|')})-` + let classNamesRegExp = new RegExp( + targetClassName ? `^(${keyPattern}|${targetClassName})` : `^${keyPattern}` + ) let filteredClassNames = classNames.filter(className => - keyPatten.test(className) + classNamesRegExp.test(className) ) + if (!filteredClassNames.length) { return '' } @@ -200,7 +219,11 @@ export function hasClassNames( // in the list of received node classNames to make sure this css rule // applied for root element if (!target) { - return classNames.includes(selector.slice(1)) + const lastCls = last(selector.split(' ')) + if (!lastCls) { + return false + } + return classNames.includes(lastCls.slice(1)) } // check if selector (className) of specific css rule match target return target instanceof RegExp diff --git a/packages/jest-emotion/test/matchers.test.js b/packages/jest-emotion/test/matchers.test.js index e888fc58f..67f093e4f 100644 --- a/packages/jest-emotion/test/matchers.test.js +++ b/packages/jest-emotion/test/matchers.test.js @@ -296,4 +296,49 @@ describe('toHaveStyleRule', () => { expect(result.pass).toBe(false) expect(result.message()).toBe('Property not found: font-size') }) + + it('matches styles for a component used as selector', () => { + const Bar = styled.div`` + + const Foo = styled.div` + color: red; + + ${Bar} { + color: hotpink; + } + ` + const tree = renderer + .create( + + + + ) + .toJSON() + + expect(tree.children[0]).toHaveStyleRule('color', 'hotpink') + }) + + it('takes specificity into account when matching styles (basic)', () => { + const Bar = styled.div` + color: yellow; + ` + + const Foo = styled.div` + color: red; + + ${Bar} { + color: hotpink; + } + ` + + const tree = renderer + .create( + + + + ) + .toJSON() + + expect(tree.children[0]).toHaveStyleRule('color', 'hotpink') + }) }) diff --git a/yarn.lock b/yarn.lock index a0a7cc55f..3de8cd0d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1282,6 +1282,16 @@ exec-sh "^0.3.2" minimist "^1.2.0" +"@emotion/babel-preset-css-prop@^10.0.5": + version "10.0.23" + resolved "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.23.tgz#7c21a36c97c3ce9e96f5896b56f68b9bbac800bd" + integrity sha512-XG1s1SQF8twf/ufh+j3EdVjQW7SjcAPOdPZDxEsVVahoR1mF2/nWl4adc5ROppSr/P84QJEdquA6lmyZWcnaBQ== + dependencies: + "@babel/plugin-transform-react-jsx" "^7.3.0" + "@babel/runtime" "^7.5.5" + "@emotion/babel-plugin-jsx-pragmatic" "^0.1.4" + babel-plugin-emotion "^10.0.23" + "@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" @@ -3669,6 +3679,22 @@ babel-plugin-dynamic-import-node@^2.3.0: dependencies: object.assign "^4.1.0" +babel-plugin-emotion@^10.0.23: + version "10.0.23" + resolved "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b" + integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/hash" "0.7.3" + "@emotion/memoize" "0.7.3" + "@emotion/serialize" "^0.11.14" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + escape-string-regexp "^1.0.5" + find-root "^1.1.0" + source-map "^0.5.7" + babel-plugin-fix-dce-for-classes-with-statics@^0.1.0: version "0.1.0" resolved "https://registry.npmjs.org/babel-plugin-fix-dce-for-classes-with-statics/-/babel-plugin-fix-dce-for-classes-with-statics-0.1.0.tgz#9cac930cfb50a879d66cd5dc3bd4af731c1ecb90" @@ -5016,7 +5042,7 @@ browserify-zlib@^0.2.0: browserslist@3.2.8, browserslist@4.1.1, browserslist@^1.3.6, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.6, browserslist@^2.1.2, browserslist@^2.1.3, browserslist@^2.5.1, browserslist@^3.2.8, browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.3.4, browserslist@^4.6.0, browserslist@^4.6.2, browserslist@^4.6.3: version "3.2.8" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6" integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ== dependencies: caniuse-lite "^1.0.30000844" @@ -10504,6 +10530,12 @@ global-prefix@^1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe" integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4= + dependencies: + expand-tilde "^2.0.2" + homedir-polyfill "^1.0.1" + ini "^1.3.4" + is-windows "^1.0.1" + which "^1.2.14" global@^4.3.0: version "4.4.0" @@ -10751,7 +10783,7 @@ graphql-request@^1.5.0: graphql-type-json@0.2.4, graphql-type-json@^0.2.4: version "0.2.4" - resolved "https://registry.yarnpkg.com/graphql-type-json/-/graphql-type-json-0.2.4.tgz#545af27903e40c061edd30840a272ea0a49992f9" + resolved "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.2.4.tgz#545af27903e40c061edd30840a272ea0a49992f9" integrity sha512-/tq02ayMQjrG4oDFDRLLrPk0KvJXue0nVXoItBe7uAdbNXjQUu+HYCBdAmPLQoseVzUKKMzrhq2P/sfI76ON6w== graphql@^14.1.1: @@ -19248,7 +19280,7 @@ react-devtools-core@^3.4.2: react-dom@16.8.1, "react-dom@^15 || ^16", react-dom@^16.5.2: version "16.8.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4" integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg== dependencies: loose-envify "^1.1.0" @@ -19560,7 +19592,7 @@ react-transform-hmr@^1.0.4: react@16.8.1, "react@^15 || ^16", react@^16.5.2, react@^16.8.4: version "16.8.1" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a" + resolved "https://registry.npmjs.org/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a" integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ== dependencies: loose-envify "^1.1.0" @@ -21495,6 +21527,11 @@ spdy@^4.0.0: select-hose "^2.0.0" spdy-transport "^3.0.0" +specificity@^0.4.1: + version "0.4.1" + resolved "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019" + integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg== + split-on-first@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f" From a72e6dc0f326b7d3d6067698d433018ee8c4cbf1 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Tue, 5 Nov 2019 06:37:13 +0800 Subject: [PATCH 006/176] Restructured types to greatly reduce number of types created during compilation (#1501) * Restructured types to greatly reduce number of types created during compilation BREAKING CHANGE: There are a few breaking changes, see below * withTheme now infers types properly and may require removing the manually specified generic parameter * The Theme generic parameter has been removed from a number of types exported from `@emotion/styled` and `@emotion/styled-base`. * Introduced new CreateThemedStyled type which is exported from emotion-theming, use type to create your own themed `styled` export. See updated docs * WithTheme should be imported from emotion-theming * CreateStyledComponentExtrinsic, CreateStyledComponentIntrinsic and CreateStyledComponentBase all have been replaced with CreateStyledComponent * Fixing tests * Fixed a bunch of tests and improved TypeScript docs * Updated a bunch of the TypeScript docs * Removed WithTheme type, not sure it's usage and there is no tests * Few small cleanups around styled-base * Fixed tests in a few more packages * Fixed serialise tests after changes in https://github.com/emotion-js/emotion/pull/1236 * Removed failing redundant test in sheet typescript tests. It is failing with the same compilation error as the previous line, but formatting is causing the test failure * Removed line with expected error, I am not sure the reason it should be failing. * Need to bump the typescript version for styled-base for the union type test * TypeScript tests passing * Upgrade build image version to get newer version of yarn * fix: styled component with static API * Added changes in https://github.com/JakeGinnivan/emotion/pull/1/files to other functions with similar signatures * fix: type issue where styled component passed in * Add some additional tests around theming and fix them * Restrict css function to css interpolation * Fixed emotion-theming linting issue * Reversed some incorrect type changes, withComponent has to include the previous components props otherwise styles on the original component may fail at runtime * Fixed some accidently formatted package.json files * Allowed theming of CreateStyled and StyledTags * Restructured generic type params to make it explicit about what component props should transfer with withComponent and which shouldn't Added tests * Cleaned up some tests and added additional assertions * Default the type of SpecificComponentProps in StyledComponent * Reverted changes around ThemeProvider and added tests * Added changeset * Fixed ThemeProvider after revert * Update tslint rules to fix error * Fixed linting issues * Fixed import path for css and clarified docs * Added comment about fragment shorthand without babel being a typescript limitation * Removed breaking change around some of the internal types It's implementation detail user doesn't need to know * Reverted changes around removing function interpolation from the return types of function interpolation * Renamed Omit to DistributiveOmit To make it clear it's different to the inbuilt Omit * Removed duplicate intersected type * Renamed all usages of SFC to FC * Fixed poor grammar * Ignore lint rule rather than exporting type * Updated generic constraints * Reverted TypeScript version bump in create-emotion types * Sync docs and test code * Constrained Theme to extend {} * Add tests for broken examples in #1298 * Fix typo * Add test which verifies #1226 is fixed by type changes --- .changeset/long-apes-admire/changes.json | 31 +++ .changeset/long-apes-admire/changes.md | 31 +++ .circleci/config.yml | 9 +- docs/typescript.mdx | 117 +++++++----- packages/babel-plugin-emotion/package.json | 3 + .../babel-plugin-jsx-pragmatic/package.json | 3 + packages/babel-preset-css-prop/package.json | 3 + packages/core/types/index.d.ts | 10 +- packages/core/types/tests.tsx | 2 - packages/create-emotion/types/tests.ts | 2 +- packages/create-emotion/types/tslint.json | 5 +- packages/css/types/index.d.ts | 10 +- packages/css/types/tests.ts | 1 + packages/emotion-theming/types/helper.d.ts | 9 - packages/emotion-theming/types/index.d.ts | 45 +++-- packages/emotion-theming/types/tests.tsx | 74 ++++++-- packages/emotion-theming/types/tslint.json | 39 ++-- packages/eslint-plugin-emotion/package.json | 3 + packages/jest-emotion/types/tsconfig.json | 3 - packages/memoize/types/tslint.json | 5 +- packages/native/package.json | 3 + packages/primitives-core/package.json | 3 + packages/primitives/package.json | 3 + packages/serialize/types/helper.d.ts | 1 - packages/serialize/types/index.d.ts | 15 +- packages/serialize/types/tests.ts | 23 +-- packages/serialize/types/tslint.json | 6 +- packages/sheet/types/tests.ts | 7 +- packages/styled-base/types/helper.d.ts | 8 +- packages/styled-base/types/index.d.ts | 164 ++++++---------- packages/styled-base/types/tests.tsx | 177 ++++++++++++++---- packages/styled/types/index.d.ts | 165 +--------------- packages/styled/types/tests.tsx | 60 +++--- packages/styled/types/tslint.json | 15 +- packages/stylis/types/tslint.json | 6 +- packages/unitless/package.json | 3 + packages/weak-memoize/types/index.d.ts | 2 + packages/weak-memoize/types/tests.ts | 10 +- packages/weak-memoize/types/tslint.json | 5 +- playgrounds/cra/package.json | 3 +- playgrounds/razzle/package.json | 3 +- scripts/babel-preset-emotion-dev/package.json | 3 + scripts/babel-tester/package.json | 5 +- scripts/benchmarks/package.json | 3 +- scripts/old-babel-tester/package.json | 3 + scripts/ssr-benchmarks/package.json | 3 +- scripts/test-utils/package.json | 5 +- site/package.json | 5 +- 48 files changed, 616 insertions(+), 498 deletions(-) create mode 100644 .changeset/long-apes-admire/changes.json create mode 100644 .changeset/long-apes-admire/changes.md delete mode 100644 packages/emotion-theming/types/helper.d.ts delete mode 100644 packages/serialize/types/helper.d.ts diff --git a/.changeset/long-apes-admire/changes.json b/.changeset/long-apes-admire/changes.json new file mode 100644 index 000000000..c11ee7450 --- /dev/null +++ b/.changeset/long-apes-admire/changes.json @@ -0,0 +1,31 @@ +{ + "releases": [ + { "name": "@emotion/css", "type": "minor" }, + { "name": "emotion-theming", "type": "minor" }, + { "name": "@emotion/serialize", "type": "minor" }, + { "name": "@emotion/styled-base", "type": "minor" }, + { "name": "@emotion/styled", "type": "minor" } + ], + "dependents": [ + { + "name": "babel-plugin-emotion", + "type": "patch", + "dependencies": ["@emotion/serialize"] + }, + { + "name": "@emotion/core", + "type": "patch", + "dependencies": [ + "@emotion/css", + "emotion-theming", + "@emotion/serialize", + "@emotion/styled" + ] + }, + { + "name": "create-emotion", + "type": "patch", + "dependencies": ["@emotion/serialize"] + } + ] +} diff --git a/.changeset/long-apes-admire/changes.md b/.changeset/long-apes-admire/changes.md new file mode 100644 index 000000000..b94aae8c4 --- /dev/null +++ b/.changeset/long-apes-admire/changes.md @@ -0,0 +1,31 @@ +TypeScript types have been restructured. These changes: + +- Reduce build times when using emotion +- In many cases remove the need for manually specifying generic parameters for your emotion components. + +If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. + +## Improvements + +- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. +- Union types as props are better supported and should be inferred properly +- Build times should be reduced significantly in larger projects. + +## Breaking changes + +- withTheme can now have the Theme type specified when calling it. For example `withTheme(MyComponent)` + + **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section + +- `css` function has been restricted to prevent passing of invalid types +- `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example + + `styled(MyComponent)({})` + to + `styled(MyComponent)({})` + +- `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: + + `StyledComponent` + to + `StyledComponent` diff --git a/.circleci/config.yml b/.circleci/config.yml index 7212aaf19..7730d3b32 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,7 +2,7 @@ version: 2 jobs: flow: docker: - - image: circleci/node:10.6.0-browsers + - image: circleci/node:10.16.3-browsers working_directory: ~/repo steps: - checkout @@ -25,7 +25,7 @@ jobs: test: docker: - - image: circleci/node:10.6.0 + - image: circleci/node:10.16.3 working_directory: ~/repo steps: - checkout @@ -48,7 +48,7 @@ jobs: test_dist: docker: - - image: circleci/node:10.6.0 + - image: circleci/node:10.16.3 working_directory: ~/repo steps: - checkout @@ -66,7 +66,7 @@ jobs: lint_and_typescript: docker: - - image: circleci/node:10.6.0 + - image: circleci/node:10.16.3 working_directory: ~/repo steps: - checkout @@ -77,6 +77,7 @@ jobs: - v4-dependencies- - run: yarn install --pure-lockfile - run: yarn lint:check + - run: yarn test:typescript workflows: version: 2 diff --git a/docs/typescript.mdx b/docs/typescript.mdx index 91232cd68..7ea0c8a93 100644 --- a/docs/typescript.mdx +++ b/docs/typescript.mdx @@ -39,10 +39,21 @@ To make the css prop work with pure TypeScript (without babel plugin) you need t ```tsx /** @jsx jsx */ -import { css, jsx } from '@emotion/core' +import { jsx } from '@emotion/core' + +
``` As a result you may be not able to use react fragment shorthand syntax - `<>`, but still you can use ``. +This is a limitation of the TypeScript compiler not being able to independently specify jsx pragma and jsxFrag pragma. + +You can still use the css helper and pass the className yourself (ensure you are importing from the `@emotion` package, not `@emotion/core`). + +```tsx +import { css } from '@emotion' + +
+``` ## @emotion/styled @@ -103,28 +114,20 @@ type ImageProps = { width: number } -const Image0 = styled('div')` - width: ${(props: ImageProps) => props.width}; - background: url(${(props: ImageProps) => props.src}) - center center; +// Using a css block +const Image0 = styled.div` + width: ${props => props.width}; + background: url(${props => props.src}) center center; + background-size: contain; +` +const Image0 = styled('div')` + width: ${props => props.width}; + background: url(${props => props.src}) center center; background-size: contain; ` // Or with object styles - -const Image1 = styled('div')( - { - backgroundSize: 'contain' - }, - (props: ImageProps) => ({ - width: props.width, - background: `url(${props.src}) center center` - }) -) - -// Or with a generic type - -const Image2 = styled('div')( +const Image1 = styled('div')( { backgroundSize: 'contain' }, @@ -133,36 +136,28 @@ const Image2 = styled('div')( background: `url(${props.src}) center center` }) ) - -// TS 2.9+ only -const Image3 = styled.div` - width: ${(props: ImageProps) => props.width}; - background: url(${(props: ImageProps) => props.src}) - center center; - background-size: contain; -` ``` -- For TypeScript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947. - ### React Components +Emotion can also style React components and will infer component props as expected. + ```tsx -import React, { SFC } from 'react' +import React, { FC } from 'react' import styled from '@emotion/styled' -type ComponentProps = { +interface ComponentProps { className?: string label: string } -const Component: SFC = ({ +const Component: FC = ({ label, className }) =>
{label}
const StyledComponent0 = styled(Component)` - color: red; + color: ${props => label === 'Important' ? 'red' : 'green'}; ` const StyledComponent1 = styled(Component)({ @@ -171,7 +166,7 @@ const StyledComponent1 = styled(Component)({ const App = () => (
- +
) @@ -180,37 +175,32 @@ const App = () => ( ### Passing props when styling a React component ```tsx -import React, { SFC } from 'react' +import React, { FC } from 'react' import styled from '@emotion/styled' -type ComponentProps = { +interface ComponentProps { className?: string label: string } -const Component: SFC = ({ +const Component: FC = ({ label, className }) =>
{label}
-type StyledComponentProps = { +interface StyledComponentProps { bgColor: string } -const StyledComponent0 = styled(Component)` +const StyledComponent0 = styled(Component)` color: red; - background: ${(props: StyledComponentProps) => - props.bgColor}; + background: ${props => props.label ? props.bgColor : 'white'}; ` - -const StyledComponent1 = styled(Component)< - StyledComponentProps ->( - { - color: 'red' - }, +// or +const StyledComponent1 = styled(Component)( props => ({ - background: props.bgColor + color: 'red' + background: props.label ? props.bgColor : 'white' }) ) @@ -237,6 +227,7 @@ _styled.tsx_ ```tsx import styled, { CreateStyled } from '@emotion/styled' +import * as emotionTheming from 'emotion-theming' type Theme = { color: { @@ -248,6 +239,10 @@ type Theme = { } export default styled as CreateStyled + +// You can also create themed versions of all the other theme helpers and hooks +const { ThemeProvider, withTheme, useTheme } = emotionTheming as emotionTheming.EmotionTheming +export { ThemeProvider, withTheme, useTheme } ``` _Button.tsx_ @@ -263,3 +258,27 @@ const Button = styled('button')` export default Button ``` + +### TypeScript < 2.9 + +For Typescript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947. + +You can work around this by specifying the prop types in your style callback: + +``` ts +const StyledComponent0 = styled(Component)` + color: red; + background: ${(props: StyledComponentProps) => + props.bgColor}; +` +``` + +NOTE: This approach you will have to perform the intersection with the component props yourself to get at the component props + +``` ts +const StyledComponent0 = styled(Component)` + color: red; + background: ${(props: StyledComponentProps & ComponentProps) => + props.bgColor}; +` +``` \ No newline at end of file diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index 50c2c9ae5..473f75d1a 100644 --- a/packages/babel-plugin-emotion/package.json +++ b/packages/babel-plugin-emotion/package.json @@ -9,6 +9,9 @@ "lib", "dist" ], + "scripts": { + "test:typescript": "exit 0" + }, "dependencies": { "@babel/helper-module-imports": "^7.0.0", "@emotion/hash": "0.7.3", diff --git a/packages/babel-plugin-jsx-pragmatic/package.json b/packages/babel-plugin-jsx-pragmatic/package.json index 3bb682079..987feae86 100644 --- a/packages/babel-plugin-jsx-pragmatic/package.json +++ b/packages/babel-plugin-jsx-pragmatic/package.json @@ -6,6 +6,9 @@ "module": "dist/babel-plugin-jsx-pragmatic.esm.js", "license": "MIT", "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-jsx-pragmatic", + "scripts": { + "test:typescript": "exit 0" + }, "dependencies": { "@babel/plugin-syntax-jsx": "^7.2.0" }, diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json index 18e1a8903..985b85568 100644 --- a/packages/babel-preset-css-prop/package.json +++ b/packages/babel-preset-css-prop/package.json @@ -6,6 +6,9 @@ "module": "dist/babel-preset-css-prop.esm.js", "license": "MIT", "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop", + "scripts": { + "test:typescript": "exit 0" + }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.3.0", "@babel/runtime": "^7.5.5", diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index 9395e0133..a6149acbb 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -9,7 +9,7 @@ import { ComponentClass, Context, Provider, - SFC, + FC, ReactElement, ReactNode, Ref, @@ -30,7 +30,7 @@ export const ThemeContext: Context export const CacheProvider: Provider export function withEmotionCache( func: (props: Props, context: EmotionCache, ref: Ref) => ReactNode -): SFC> +): FC> export const jsx: typeof createElement @@ -45,7 +45,9 @@ export interface GlobalProps { * @desc * JSX generic are supported only after TS@2.9 */ -export function Global(props: GlobalProps): ReactElement +export function Global( + props: GlobalProps +): ReactElement export function keyframes( template: TemplateStringsArray, @@ -75,7 +77,7 @@ export interface ClassNamesProps { * @desc * JSX generic are supported only after TS@2.9 */ -export function ClassNames( +export function ClassNames( props: ClassNamesProps ): ReactElement diff --git a/packages/core/types/tests.tsx b/packages/core/types/tests.tsx index d880d41e6..fc9a6a565 100644 --- a/packages/core/types/tests.tsx +++ b/packages/core/types/tests.tsx @@ -4,8 +4,6 @@ import { ClassNames, ClassNamesContent, Global, - Interpolation, - CacheProvider, css, jsx, keyframes, diff --git a/packages/create-emotion/types/tests.ts b/packages/create-emotion/types/tests.ts index 4023bb04b..a6002a171 100644 --- a/packages/create-emotion/types/tests.ts +++ b/packages/create-emotion/types/tests.ts @@ -4,7 +4,7 @@ import createEmotion from 'create-emotion' const emotion0 = createEmotion() // $ExpectType Emotion const emotion1 = createEmotion({ - container: document.head !== null ? document.head : undefined, + container: document.head, nonce: 'fasefw' }) diff --git a/packages/create-emotion/types/tslint.json b/packages/create-emotion/types/tslint.json index 5bf1b9014..bf69b48bd 100644 --- a/packages/create-emotion/types/tslint.json +++ b/packages/create-emotion/types/tslint.json @@ -15,6 +15,7 @@ "check-typecast", "check-type-operator", "check-preblock" - ] + ], + "no-null-undefined-union": false } -} +} \ No newline at end of file diff --git a/packages/css/types/index.d.ts b/packages/css/types/index.d.ts index ca4d02766..b965c0beb 100644 --- a/packages/css/types/index.d.ts +++ b/packages/css/types/index.d.ts @@ -1,6 +1,10 @@ // Definitions by: Junyoung Clare Jang // TypeScript Version: 2.8 -import { Interpolation, SerializedStyles } from '@emotion/serialize' +import { + Interpolation, + SerializedStyles, + CSSInterpolation +} from '@emotion/serialize' export { ArrayInterpolation, @@ -14,6 +18,6 @@ export { Interpolation, SerializedStyles } export default function css( template: TemplateStringsArray, - ...args: Array + ...args: Array ): SerializedStyles -export default function css(...args: Array): SerializedStyles +export default function css(...args: Array): SerializedStyles diff --git a/packages/css/types/tests.ts b/packages/css/types/tests.ts index 0db207267..c8927b5be 100644 --- a/packages/css/types/tests.ts +++ b/packages/css/types/tests.ts @@ -31,6 +31,7 @@ css` // $ExpectError css(() => 'height: 300px;') + // $ExpectError css` position: relative; diff --git a/packages/emotion-theming/types/helper.d.ts b/packages/emotion-theming/types/helper.d.ts deleted file mode 100644 index faf29011d..000000000 --- a/packages/emotion-theming/types/helper.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as React from 'react' - -export type PropsOf< - C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor -> = JSX.LibraryManagedAttributes> - -export type Omit = T extends any ? Pick> : never -export type AddOptionalTo = Omit & - Partial>> diff --git a/packages/emotion-theming/types/index.d.ts b/packages/emotion-theming/types/index.d.ts index 4080d83c9..32f0a4632 100644 --- a/packages/emotion-theming/types/index.d.ts +++ b/packages/emotion-theming/types/index.d.ts @@ -3,30 +3,43 @@ import * as React from 'react' -import { AddOptionalTo, PropsOf } from './helper' +import { + StyledComponent, + StyledOptions, + CreateStyledComponent, + StyledTags +} from '@emotion/styled' +import { PropsOf, DistributiveOmit } from '@emotion/styled-base' export interface ThemeProviderProps { theme: Partial | ((outerTheme: Theme) => Theme) children?: React.ReactNode } -export function ThemeProvider( - props: ThemeProviderProps -): React.ReactElement - -export function useTheme(): Theme +export interface ThemeProvider { + (props: ThemeProviderProps): React.ReactElement +} -/** - * @todo Add more constraint to C so that - * this function only accepts components with theme props. - */ -export function withTheme>( +export type withTheme = < + C extends React.ComponentType> +>( component: C -): React.SFC, 'theme'>> +) => React.FC, 'theme'> & { theme?: Theme }> + +export type useTheme = () => T + +export const ThemeProvider: ThemeProvider + +export const withTheme: withTheme + +export const useTheme: useTheme export interface EmotionTheming { - ThemeProvider(props: ThemeProviderProps): React.ReactElement - withTheme>( - component: C - ): React.SFC, 'theme'>> + ThemeProvider: ThemeProvider + withTheme: withTheme + useTheme: useTheme } + +export type WithTheme = P extends { theme: infer Theme } + ? P & { theme: Exclude } + : P & { theme: T } diff --git a/packages/emotion-theming/types/tests.tsx b/packages/emotion-theming/types/tests.tsx index d62277d72..70f212304 100644 --- a/packages/emotion-theming/types/tests.tsx +++ b/packages/emotion-theming/types/tests.tsx @@ -1,5 +1,7 @@ import * as emotionTheming from 'emotion-theming' import * as React from 'react' +import styled, { CreateStyled } from '@emotion/styled' +import { Interpolation, ObjectInterpolation } from '@emotion/styled-base' const { ThemeProvider, withTheme, useTheme } = emotionTheming @@ -11,26 +13,25 @@ declare const theme: Theme interface Props { prop: boolean - theme: Theme } -declare const CompSFC: React.SFC -declare class CompC extends React.Component {} +declare const CompFC: React.FC +declare class CompC extends React.Component {} -const WrappedCompC = withTheme(CompC) +const WrappedCompC = withTheme(CompC) ;{WrappedCompC} ; theme} /> ; ({ ...outerTheme, ...theme })} /> -const ThemedSFC = withTheme(CompSFC) -; -; +const ThemedFC = withTheme(CompFC) +; +; const ThemedComp = withTheme(CompC) ; ; -const CompSFCWithDefault = ({ prop }: Props) => (prop ? :
) -CompSFCWithDefault.defaultProps = { prop: false } +const CompFCWithDefault = ({ prop }: Props) => (prop ? :
) +CompFCWithDefault.defaultProps = { prop: false } class CompCWithDefault extends React.Component { static defaultProps = { prop: false } render() { @@ -39,13 +40,14 @@ class CompCWithDefault extends React.Component { } { - const theme: Theme = useTheme() + const theme: Theme = useTheme() + const themeFail: Theme = useTheme() // $ExpectError } -const ThemedSFCWithDefault = withTheme(CompSFCWithDefault) -; -; +const ThemedFCWithDefault = withTheme(CompFCWithDefault) +; +; const ThemedCompWithDefault = withTheme(CompCWithDefault) ; @@ -59,7 +61,8 @@ const { // $ExpectError ; -typedWithTheme(CompSFC) +typedWithTheme(CompFC) + /** * @todo * Following line should report an error. @@ -79,7 +82,7 @@ typedWithTheme((props: { value: number }) => null) type SomethingToRead = (Book | Magazine) & { theme?: any } - const Readable: React.SFC = props => { + const Readable: React.FC = props => { if (props.kind === 'magazine') { return
magazine #{props.issue}
} @@ -93,3 +96,44 @@ typedWithTheme((props: { value: number }) => null) ; // $ExpectError ; // $ExpectError } + +const themedStyled = styled as CreateStyled + +const StyledCompC = themedStyled(WrappedCompC)({}) +const AdditionallyStyledCompC = themedStyled(StyledCompC)({}) +; +; + +const StyledDiv = themedStyled('div')({}) +; +// $ExpectError +; +const AdditionallyStyledDiv = themedStyled(StyledDiv)({}) +; +// $ExpectError +; + +const StyledDiv2 = themedStyled.div({}) +; +// $ExpectError +; + +export type StyleDefinition = Interpolation< + emotionTheming.WithTheme +> +export type ObjectStyleDefinition = ObjectInterpolation< + emotionTheming.WithTheme +> + +const style: StyleDefinition = ({ theme }) => ({ + color: theme.primary +}) +const style2: ObjectStyleDefinition = { + width: 100 +} + +// Can use ThemeProvider +; +; +// $ExpectError +; diff --git a/packages/emotion-theming/types/tslint.json b/packages/emotion-theming/types/tslint.json index e094153f1..a7a8dedbe 100644 --- a/packages/emotion-theming/types/tslint.json +++ b/packages/emotion-theming/types/tslint.json @@ -1,21 +1,22 @@ { - "extends": "dtslint/dtslint.json", - "rules": { - "array-type": [true, "generic"], - "semicolon": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-module", - "check-rest-spread", - "check-type", - "check-typecast", - "check-type-operator", - "check-preblock" - ], - "no-null-undefined-union": false, - "no-unnecessary-generics": false - } + "extends": "dtslint/dtslint.json", + "rules": { + "array-type": [true, "generic"], + "semicolon": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-module", + "check-rest-spread", + "check-type", + "check-typecast", + "check-type-operator", + "check-preblock" + ], + "no-null-undefined-union": false, + "no-unnecessary-generics": false, + "callable-types": false + } } diff --git a/packages/eslint-plugin-emotion/package.json b/packages/eslint-plugin-emotion/package.json index ca1407349..51357d3a3 100644 --- a/packages/eslint-plugin-emotion/package.json +++ b/packages/eslint-plugin-emotion/package.json @@ -2,6 +2,9 @@ "name": "eslint-plugin-emotion", "version": "10.0.14", "description": "ESLint rules for emotion", + "scripts": { + "test:typescript": "exit 0" + }, "keywords": [ "eslint", "eslintplugin", diff --git a/packages/jest-emotion/types/tsconfig.json b/packages/jest-emotion/types/tsconfig.json index ea6734342..e60ab31a3 100644 --- a/packages/jest-emotion/types/tsconfig.json +++ b/packages/jest-emotion/types/tsconfig.json @@ -15,9 +15,6 @@ "strictNullChecks": true, "strictFunctionTypes": true, "target": "es5", - "typeRoots": [ - "../" - ], "types": [] }, "include": [ diff --git a/packages/memoize/types/tslint.json b/packages/memoize/types/tslint.json index b9706ef70..5da4cfaab 100644 --- a/packages/memoize/types/tslint.json +++ b/packages/memoize/types/tslint.json @@ -20,6 +20,7 @@ "check-preblock" ], - "no-unnecessary-generics": false + "no-unnecessary-generics": false, + "strict-export-declare-modifiers": false } -} +} \ No newline at end of file diff --git a/packages/native/package.json b/packages/native/package.json index 809222def..4d67e613e 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -4,6 +4,9 @@ "description": "Style and render React Native components using emotion", "main": "dist/native.cjs.js", "module": "dist/native.esm.js", + "scripts": { + "test:typescript": "exit 0" + }, "files": [ "src", "dist" diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json index b77515232..5fe72b713 100644 --- a/packages/primitives-core/package.json +++ b/packages/primitives-core/package.json @@ -4,6 +4,9 @@ "description": "Shared utilities for emotion primitives and native", "main": "dist/primitives-core.cjs.js", "module": "dist/primitives-core.esm.js", + "scripts": { + "test:typescript": "exit 0" + }, "files": [ "src", "dist" diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 2ade17872..18d30f4b7 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -3,6 +3,9 @@ "version": "11.0.0-next.0", "main": "dist/primitives.cjs.js", "module": "dist/primitives.esm.js", + "scripts": { + "test:typescript": "exit 0" + }, "files": [ "src", "dist" diff --git a/packages/serialize/types/helper.d.ts b/packages/serialize/types/helper.d.ts deleted file mode 100644 index ef9c8246a..000000000 --- a/packages/serialize/types/helper.d.ts +++ /dev/null @@ -1 +0,0 @@ -export type Equal = A extends B ? (B extends A ? T : F) : F diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts index e4f58419f..606bb7545 100644 --- a/packages/serialize/types/index.d.ts +++ b/packages/serialize/types/index.d.ts @@ -4,8 +4,6 @@ import { RegisteredCache, SerializedStyles } from '@emotion/utils' import * as CSS from 'csstype' -import { Equal } from './helper' - export { RegisteredCache, SerializedStyles } export type CSSProperties = CSS.PropertiesFallback @@ -63,9 +61,12 @@ export interface ObjectInterpolation extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {} -export type FunctionInterpolation = (mergedProps: MP) => Interpolation -export type Interpolation = +export interface FunctionInterpolation { + (mergedProps: MergedProps): Interpolation +} + +export type Interpolation = | null | undefined | boolean @@ -74,9 +75,9 @@ export type Interpolation = | ComponentSelector | Keyframes | SerializedStyles - | ArrayInterpolation - | ObjectInterpolation - | Equal> + | ArrayInterpolation + | ObjectInterpolation + | FunctionInterpolation export function serializeStyles( args: Array>, diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts index 729d5d026..bb4df5872 100644 --- a/packages/serialize/types/tests.ts +++ b/packages/serialize/types/tests.ts @@ -16,25 +16,21 @@ const testObjectInterpolation1: ObjectInterpolation = { } // $ExpectType SerializedStyles -serializeStyles({}, []) +serializeStyles([], {}) // $ExpectType SerializedStyles -serializeStyles( - { - 'emotion-cache': 'width: 200px' - }, - [] -) +serializeStyles([], { + 'emotion-cache': 'width: 200px' +}) // $ExpectType SerializedStyles -serializeStyles({}, [], {}) +serializeStyles([], {}, {}) // $ExpectType SerializedStyles -serializeStyles({}, ['abc'], {}) +serializeStyles(['abc'], {}, {}) // $ExpectType SerializedStyles -serializeStyles({}, ['width: 200px;'], {}) +serializeStyles(['width: 200px;'], {}, {}) // $ExpectType SerializedStyles -serializeStyles({}, [() => 'height: 300px;'], {}) +serializeStyles([() => 'height: 300px;'], {}, {}) // $ExpectType SerializedStyles serializeStyles( - {}, [ 'display: block;', { @@ -42,10 +38,11 @@ serializeStyles( backgroundColor: 'red' } ], + {}, {} ) // $ExpectType SerializedStyles -serializeStyles({}, [testTemplateStringsArray, 5, '4px'], {}) +serializeStyles([testTemplateStringsArray, 5, '4px'], {}, {}) // $ExpectError serializeStyles() diff --git a/packages/serialize/types/tslint.json b/packages/serialize/types/tslint.json index eec7af5ea..4ffac3c17 100644 --- a/packages/serialize/types/tslint.json +++ b/packages/serialize/types/tslint.json @@ -5,6 +5,8 @@ true, "generic" ], - "semicolon": false + "semicolon": false, + "no-null-undefined-union": false, + "callable-types": false } -} +} \ No newline at end of file diff --git a/packages/sheet/types/tests.ts b/packages/sheet/types/tests.ts index cd9066cd0..de636a96f 100644 --- a/packages/sheet/types/tests.ts +++ b/packages/sheet/types/tests.ts @@ -1,4 +1,4 @@ -import { Options, StyleSheet } from '@emotion/sheet' +import { StyleSheet } from '@emotion/sheet' new StyleSheet({ key: 'abc', @@ -44,11 +44,6 @@ styleSheet.insert('.cl{ width: 200px; height: 200px; }') styleSheet.insert() // $ExpectError styleSheet.insert('.name{ color: black; }', undefined as any) -// $ExpectError -styleSheet.insert( - '.name{ color: black; }', - ...((undefined as any) as Array) -) styleSheet.flush() // $ExpectError diff --git a/packages/styled-base/types/helper.d.ts b/packages/styled-base/types/helper.d.ts index 50bd0e77c..040c40c1d 100644 --- a/packages/styled-base/types/helper.d.ts +++ b/packages/styled-base/types/helper.d.ts @@ -5,7 +5,9 @@ import * as React from 'react' */ export type PropsOf< C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor -> = JSX.LibraryManagedAttributes> +> = JSX.LibraryManagedAttributes> -export type Omit = T extends any ? Pick> : never -export type Overwrapped = Pick> +// We need to use this version of Omit as it's distributive (Will preserve unions) +export type DistributiveOmit = T extends any + ? Pick> + : never diff --git a/packages/styled-base/types/index.d.ts b/packages/styled-base/types/index.d.ts index 52dfe2fb3..240394bb5 100644 --- a/packages/styled-base/types/index.d.ts +++ b/packages/styled-base/types/index.d.ts @@ -1,5 +1,5 @@ // Definitions by: Junyoung Clare Jang -// TypeScript Version: 3.1 +// TypeScript Version: 3.2 /** * @desc @@ -12,10 +12,9 @@ * a style of that component. */ -import { ComponentSelector, Interpolation } from '@emotion/serialize' import * as React from 'react' - -import { Omit, Overwrapped, PropsOf } from './helper' +import { ComponentSelector, Interpolation } from '@emotion/serialize' +import { PropsOf, DistributiveOmit } from './helper' export { ArrayInterpolation, @@ -24,13 +23,7 @@ export { ObjectInterpolation } from '@emotion/serialize' -export { ComponentSelector, Interpolation } - -type JSXInEl = JSX.IntrinsicElements - -export type WithTheme = P extends { theme: infer Theme } - ? P & { theme: Exclude } - : P & { theme: T } +export { ComponentSelector, Interpolation, PropsOf, DistributiveOmit } export interface StyledOptions { label?: string @@ -38,113 +31,76 @@ export interface StyledOptions { target?: string } -export interface StyledComponent - extends React.SFC, - ComponentSelector { - /** - * @desc this method is type-unsafe - */ - withComponent( - tag: NewTag - ): StyledComponent - withComponent>( +/** + * @typeparam ComponentProps Props which will be included when withComponent is called + * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called + */ +export interface StyledComponent< + ComponentProps extends {}, + SpecificComponentProps extends {} = {} +> extends React.FC, ComponentSelector { + withComponent>>( + component: C + ): StyledComponent> + withComponent( tag: Tag - ): StyledComponent, StyleProps, Theme> -} - -type ReactClassPropKeys = keyof React.ClassAttributes - -interface CreateStyledComponentBaseThemeless { - < - StyleProps extends Omit< - Overwrapped, - ReactClassPropKeys - > = Omit, - Theme extends object = object - >( - ...styles: Array>> - ): StyledComponent - < - StyleProps extends Omit< - Overwrapped, - ReactClassPropKeys - > = Omit, - Theme extends object = object - >( - template: TemplateStringsArray, - ...styles: Array>> - ): StyledComponent + ): StyledComponent } -interface CreateStyledComponentBaseThemed< - InnerProps, - ExtraProps, - StyledInstanceTheme extends object +/** + * @typeparam ComponentProps Props which will be included when withComponent is called + * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called + * @typeparam StyleProps Params passed to styles but not exposed as React props. These are normally library provided props + */ +export interface CreateStyledComponent< + ComponentProps extends {}, + SpecificComponentProps extends {} = {}, + StyleProps extends {} = {} > { - < - StyleProps extends Omit< - Overwrapped, - ReactClassPropKeys - > = Omit - >( - ...styles: Array>> - ): StyledComponent - < - StyleProps extends Omit< - Overwrapped, - ReactClassPropKeys - > = Omit - >( + /** + * @typeparam AdditionalProps Additional props to add to your styled component + */ + ( + ...styles: Array< + Interpolation< + ComponentProps & SpecificComponentProps & StyleProps & AdditionalProps + > + > + ): StyledComponent + /** + * @typeparam AdditionalProps Additional props to add to your styled component + */ + ( template: TemplateStringsArray, - ...styles: Array>> - ): StyledComponent + ...styles: Array< + Interpolation + > + ): StyledComponent } -export type CreateStyledComponentBase< - InnerProps, - ExtraProps, - StyledInstanceTheme extends object -> = - // this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled - object extends StyledInstanceTheme - ? CreateStyledComponentBaseThemeless - : CreateStyledComponentBaseThemed< - InnerProps, - ExtraProps, - StyledInstanceTheme - > - -export type CreateStyledComponentIntrinsic< - Tag extends keyof JSXInEl, - ExtraProps, - Theme extends object -> = CreateStyledComponentBase -export type CreateStyledComponentExtrinsic< - Tag extends React.ComponentType, - ExtraProps, - Theme extends object -> = CreateStyledComponentBase, ExtraProps, Theme> - /** * @desc - * This function accepts `InnerProps`/`Tag` to infer the type of `tag`, - * and accepts `ExtraProps` for user who use string style - * to be able to declare extra props without using - * `` styled('button')`...` ``, which does not supported in - * styled-component VSCode extension. - * If your tool support syntax highlighting for `` styled('button')`...` `` - * it could be more efficient. + * This function accepts a React component or tag ('div', 'a' etc). + * + * @example styled(MyComponent)({ width: 100 }) + * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width }) + * @example styled('div')({ width: 100 }) + * @example styled('div')(props => ({ width: props.width }) */ -export interface CreateStyled { - , ExtraProps = {}>( - tag: Tag, +export interface CreateStyled { + >>( + component: C, options?: StyledOptions - ): CreateStyledComponentExtrinsic + ): CreateStyledComponent & { theme?: Theme }, {}, { theme: Theme }> - ( + ( tag: Tag, options?: StyledOptions - ): CreateStyledComponentIntrinsic + ): CreateStyledComponent< + { theme?: Theme }, + JSX.IntrinsicElements[Tag], + { theme: Theme } + > } declare const styled: CreateStyled diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx index 864d4050c..ace46c4af 100644 --- a/packages/styled-base/types/tests.tsx +++ b/packages/styled-base/types/tests.tsx @@ -5,7 +5,7 @@ import styled from '@emotion/styled-base' type ReactClassProps0 = { readonly column: boolean } -declare class ReactClassComponent0 extends React.Component {} +class ReactClassComponent0 extends React.Component {} interface ReactClassProps1 { readonly value: string @@ -18,20 +18,20 @@ interface ReactClassProps2 { declare class ReactClassComponent2 extends React.Component {} // tslint:disable-next-line: interface-over-type-literal -type ReactSFCProps0 = { +type ReactFCProps0 = { readonly column: boolean } -declare const ReactSFC0: React.SFC +declare const ReactFC0: React.FC -interface ReactSFCProps1 { +interface ReactFCProps1 { readonly value: string } -declare const ReactSFC1: React.SFC +declare const ReactFC1: React.FC -interface ReactSFCProps2 { +interface ReactFCProps2 { readonly value: number } -declare const ReactSFC2: React.SFC +declare const ReactFC2: React.FC const Button0 = styled('button')` color: blue; @@ -62,6 +62,23 @@ const Input1 = styled('input', { ; const Input2 = Button0.withComponent('input') +const View = styled('div')({ + display: 'flex', + position: 'relative', + boxSizing: 'border-box', + flexDirection: 'column' +}) + +const Input3 = styled(View.withComponent('input'))({ + color: 'red' +}) +; { + // $ExpectType ChangeEvent + e + }} +/> + const Canvas0 = styled('canvas', { shouldForwardProp(propName) { return propName === 'width' || propName === 'height' @@ -82,22 +99,15 @@ const Canvas1 = styled('canvas', { interface PrimaryProps { readonly primary: string } -/** - * @desc - * This function accepts `InnerProps`/`Tag` to infer the type of `tag`, - * and accepts `ExtraProps` for user who use string style - * to be able to declare extra props without using - * `` styled('button')`...` ``, which does not supported in - * styled-component VSCode extension. - * If your tool support syntax highlighting for `` styled('button')`...` `` - * it could be more efficient. - */ -const Button2 = styled<'button', PrimaryProps>('button')` - fontsize: ${5}px; + +const Button2 = styled('button')` + font-size: ${5}px; color: ${props => props.primary}; ` -const Button3 = styled<'button', PrimaryProps>('button')(props => ({ - color: props.primary +const Button3 = styled('button')(props => ({ + color: props.primary, + // Verify we get access to intrinsic props + display: props.hidden ? 'none' : undefined })) ;
@@ -116,15 +126,13 @@ const Button3 = styled<'button', PrimaryProps>('button')(props => ({ // $ExpectError ; -const Button4 = styled( - ReactClassComponent0 -)` - backgroundColor: ${props => props.theme.backColor} +const Button4 = styled(ReactClassComponent0)` + background-color: ${props => props.theme.backColor}; - fontSize: ${5}px; - color: ${props => props.primary} + font-size: ${5}px; + color: ${props => props.primary}; ` -const Button5 = styled(ReactSFC0)(props => ({ +const Button5 = styled(ReactFC0)(props => ({ color: props.primary })) ;
@@ -146,19 +154,24 @@ const Button5 = styled(ReactSFC0)(props => ({ const Container0 = styled(ReactClassComponent0)` display: flex; - flexdirection: ${props => props.column && 'column'}; + flex-direction: ${props => props.column && 'column'}; ` ; // $ExpectError ; +// When we change component, the original props still need to be available +// as the original styles may be using those props const Container1 = Container0.withComponent('span') ; ; + +// $ExpectError +; // $ExpectError ; -const Container2 = Container0.withComponent(ReactSFC0) +const Container2 = Container0.withComponent(ReactFC0) ; // $ExpectError ; @@ -173,7 +186,7 @@ const Container3 = Container0.withComponent(ReactClassComponent1) interface ContainerProps { extraWidth: string } -const Container4 = styled(ReactSFC2)(props => ({ +const Container4 = styled(ReactFC2)(props => ({ borderColor: 'black', borderWidth: props.extraWidth, borderStyle: 'solid' @@ -184,7 +197,8 @@ const Container4 = styled(ReactSFC2)(props => ({ // $ExpectError ; -const Container5 = Container3.withComponent(ReactSFC2) +const Container5 = Container3.withComponent(ReactFC2) +// $ExpectError ; // $ExpectError ; @@ -193,20 +207,35 @@ const Container5 = Container3.withComponent(ReactSFC2) // $ExpectError ; -// $ExpectError -styled(ReactSFC2)() - /** * @todo * I wish we could raise errors for following two `withComponent`s. + * The prduces a component type which is invalid (intersection of number & string is never), but you need to consume the component + * to see the error. */ -Container0.withComponent(ReactClassComponent2) -Container3.withComponent(ReactClassComponent2) +const C02 = Container0.withComponent(ReactClassComponent2) +// $ExpectError +; +const C03 = Container3.withComponent(ReactClassComponent2) +// $ExpectError +; + +const ForwardRefCheckStyled = styled( + React.forwardRef( + (props: ReactClassProps0, ref: React.Ref) => { + return
+ } + ) +)({}) + +// Expose ref only when inner component is forwarding refs +;()} /> const StyledClass0 = styled(ReactClassComponent0)({}) declare const ref0_0: (element: ReactClassComponent0 | null) => void declare const ref0_1: (element: ReactClassComponent1 | null) => void declare const ref0_2: (element: HTMLDivElement | null) => void +// $ExpectError ; // $ExpectError ; @@ -217,6 +246,7 @@ const StyledClass1 = StyledClass0.withComponent(ReactClassComponent1) declare const ref1_0: (element: ReactClassComponent1 | null) => void declare const ref1_1: (element: ReactClassComponent0 | null) => void declare const ref1_2: (element: HTMLDivElement | null) => void +// $ExpectError ; // $ExpectError ; @@ -237,6 +267,7 @@ const StyledClass3 = StyledClass1.withComponent('label') declare const ref3_0: (element: HTMLLabelElement | null) => void declare const ref3_1: (element: ReactClassComponent0 | null) => void declare const ref3_2: (element: HTMLDivElement | null) => void +// $ExpectError ; // $ExpectError ; @@ -256,7 +287,7 @@ declare const ref3_2: (element: HTMLDivElement | null) => void type SomethingToRead = Book | Magazine - const Readable: React.SFC = props => { + const Readable: React.FC = props => { if (props.kind === 'magazine') { return
magazine #{props.issue}
} @@ -296,3 +327,73 @@ const StyledFCWithDefaultProps = styled(FCWithDefaultProps)` background-color: red; ` const fcInstance = + +interface PropsA { + title: string +} +interface PropsB { + content: string +} + +type PropsAB = PropsA | PropsB +class A extends React.Component { + static getDerivedStateFromProps(props: PropsAB) { + return null + } + + render() { + return null + } +} + +const B = styled(A)` + color: red; +` +; +; +// Because these are not tagged unions, they are not mutually exclusive, we can do both +; + +interface TaggedPropsA { + tag: 'a' + title: string +} +interface TaggedPropsB { + tag: 'b' + content: string +} +type TaggedPropsAB = TaggedPropsA | TaggedPropsB +class C extends React.Component { + render() { + return null + } +} + +const D = styled(C)` + color: red; +` +; +; +// $ExpectError +; + +// Ensure refs are available on intrinsic components and they are correct types +const StyledDiv = styled('div')({}) +declare const ref4_0: (element: ReactClassComponent1 | null) => void +declare const ref4_1: (element: ReactClassComponent0 | null) => void +declare const ref4_2: (element: HTMLDivElement | null) => void +// $ExpectError +; +// $ExpectError +; +; +; + +// test it should drop intrinsic props from first component when withComponent is called +const StyledButton = StyledDiv.withComponent('button') +; { + // $ExpectType MouseEvent + e + }} +/> diff --git a/packages/styled/types/index.d.ts b/packages/styled/types/index.d.ts index 14347014f..02d171ea7 100644 --- a/packages/styled/types/index.d.ts +++ b/packages/styled/types/index.d.ts @@ -1,177 +1,32 @@ // Definitions by: Junyoung Clare Jang -// TypeScript Version: 2.8 +// TypeScript Version: 2.9 import { CreateStyled as BaseCreateStyled, - CreateStyledComponentIntrinsic + CreateStyledComponent } from '@emotion/styled-base' export { ArrayInterpolation, ComponentSelector, - CreateStyledComponentBase, - CreateStyledComponentExtrinsic, - CreateStyledComponentIntrinsic, CSSObject, FunctionInterpolation, Interpolation, ObjectInterpolation, StyledComponent, StyledOptions, - WithTheme + CreateStyledComponent } from '@emotion/styled-base' -export interface StyledTags { - /** - * @desc - * HTML tags - */ - a: CreateStyledComponentIntrinsic<'a', {}, Theme> - abbr: CreateStyledComponentIntrinsic<'abbr', {}, Theme> - address: CreateStyledComponentIntrinsic<'address', {}, Theme> - area: CreateStyledComponentIntrinsic<'area', {}, Theme> - article: CreateStyledComponentIntrinsic<'article', {}, Theme> - aside: CreateStyledComponentIntrinsic<'aside', {}, Theme> - audio: CreateStyledComponentIntrinsic<'audio', {}, Theme> - b: CreateStyledComponentIntrinsic<'b', {}, Theme> - base: CreateStyledComponentIntrinsic<'base', {}, Theme> - bdi: CreateStyledComponentIntrinsic<'bdi', {}, Theme> - bdo: CreateStyledComponentIntrinsic<'bdo', {}, Theme> - big: CreateStyledComponentIntrinsic<'big', {}, Theme> - blockquote: CreateStyledComponentIntrinsic<'blockquote', {}, Theme> - body: CreateStyledComponentIntrinsic<'body', {}, Theme> - br: CreateStyledComponentIntrinsic<'br', {}, Theme> - button: CreateStyledComponentIntrinsic<'button', {}, Theme> - canvas: CreateStyledComponentIntrinsic<'canvas', {}, Theme> - caption: CreateStyledComponentIntrinsic<'caption', {}, Theme> - cite: CreateStyledComponentIntrinsic<'cite', {}, Theme> - code: CreateStyledComponentIntrinsic<'code', {}, Theme> - col: CreateStyledComponentIntrinsic<'col', {}, Theme> - colgroup: CreateStyledComponentIntrinsic<'colgroup', {}, Theme> - data: CreateStyledComponentIntrinsic<'data', {}, Theme> - datalist: CreateStyledComponentIntrinsic<'datalist', {}, Theme> - dd: CreateStyledComponentIntrinsic<'dd', {}, Theme> - del: CreateStyledComponentIntrinsic<'del', {}, Theme> - details: CreateStyledComponentIntrinsic<'details', {}, Theme> - dfn: CreateStyledComponentIntrinsic<'dfn', {}, Theme> - dialog: CreateStyledComponentIntrinsic<'dialog', {}, Theme> - div: CreateStyledComponentIntrinsic<'div', {}, Theme> - dl: CreateStyledComponentIntrinsic<'dl', {}, Theme> - dt: CreateStyledComponentIntrinsic<'dt', {}, Theme> - em: CreateStyledComponentIntrinsic<'em', {}, Theme> - embed: CreateStyledComponentIntrinsic<'embed', {}, Theme> - fieldset: CreateStyledComponentIntrinsic<'fieldset', {}, Theme> - figcaption: CreateStyledComponentIntrinsic<'figcaption', {}, Theme> - figure: CreateStyledComponentIntrinsic<'figure', {}, Theme> - footer: CreateStyledComponentIntrinsic<'footer', {}, Theme> - form: CreateStyledComponentIntrinsic<'form', {}, Theme> - h1: CreateStyledComponentIntrinsic<'h1', {}, Theme> - h2: CreateStyledComponentIntrinsic<'h2', {}, Theme> - h3: CreateStyledComponentIntrinsic<'h3', {}, Theme> - h4: CreateStyledComponentIntrinsic<'h4', {}, Theme> - h5: CreateStyledComponentIntrinsic<'h5', {}, Theme> - h6: CreateStyledComponentIntrinsic<'h6', {}, Theme> - head: CreateStyledComponentIntrinsic<'head', {}, Theme> - header: CreateStyledComponentIntrinsic<'header', {}, Theme> - hgroup: CreateStyledComponentIntrinsic<'hgroup', {}, Theme> - hr: CreateStyledComponentIntrinsic<'hr', {}, Theme> - html: CreateStyledComponentIntrinsic<'html', {}, Theme> - i: CreateStyledComponentIntrinsic<'i', {}, Theme> - iframe: CreateStyledComponentIntrinsic<'iframe', {}, Theme> - img: CreateStyledComponentIntrinsic<'img', {}, Theme> - input: CreateStyledComponentIntrinsic<'input', {}, Theme> - ins: CreateStyledComponentIntrinsic<'ins', {}, Theme> - kbd: CreateStyledComponentIntrinsic<'kbd', {}, Theme> - keygen: CreateStyledComponentIntrinsic<'keygen', {}, Theme> - label: CreateStyledComponentIntrinsic<'label', {}, Theme> - legend: CreateStyledComponentIntrinsic<'legend', {}, Theme> - li: CreateStyledComponentIntrinsic<'li', {}, Theme> - link: CreateStyledComponentIntrinsic<'link', {}, Theme> - main: CreateStyledComponentIntrinsic<'main', {}, Theme> - map: CreateStyledComponentIntrinsic<'map', {}, Theme> - mark: CreateStyledComponentIntrinsic<'mark', {}, Theme> - /** - * @desc - * marquee tag is not supported by @types/react - */ - // 'marquee': CreateStyledComponentIntrinsic<'marquee', {}, Theme>; - menu: CreateStyledComponentIntrinsic<'menu', {}, Theme> - menuitem: CreateStyledComponentIntrinsic<'menuitem', {}, Theme> - meta: CreateStyledComponentIntrinsic<'meta', {}, Theme> - meter: CreateStyledComponentIntrinsic<'meter', {}, Theme> - nav: CreateStyledComponentIntrinsic<'nav', {}, Theme> - noscript: CreateStyledComponentIntrinsic<'noscript', {}, Theme> - object: CreateStyledComponentIntrinsic<'object', {}, Theme> - ol: CreateStyledComponentIntrinsic<'ol', {}, Theme> - optgroup: CreateStyledComponentIntrinsic<'optgroup', {}, Theme> - option: CreateStyledComponentIntrinsic<'option', {}, Theme> - output: CreateStyledComponentIntrinsic<'output', {}, Theme> - p: CreateStyledComponentIntrinsic<'p', {}, Theme> - param: CreateStyledComponentIntrinsic<'param', {}, Theme> - picture: CreateStyledComponentIntrinsic<'picture', {}, Theme> - pre: CreateStyledComponentIntrinsic<'pre', {}, Theme> - progress: CreateStyledComponentIntrinsic<'progress', {}, Theme> - q: CreateStyledComponentIntrinsic<'q', {}, Theme> - rp: CreateStyledComponentIntrinsic<'rp', {}, Theme> - rt: CreateStyledComponentIntrinsic<'rt', {}, Theme> - ruby: CreateStyledComponentIntrinsic<'ruby', {}, Theme> - s: CreateStyledComponentIntrinsic<'s', {}, Theme> - samp: CreateStyledComponentIntrinsic<'samp', {}, Theme> - script: CreateStyledComponentIntrinsic<'script', {}, Theme> - section: CreateStyledComponentIntrinsic<'section', {}, Theme> - select: CreateStyledComponentIntrinsic<'select', {}, Theme> - small: CreateStyledComponentIntrinsic<'small', {}, Theme> - source: CreateStyledComponentIntrinsic<'source', {}, Theme> - span: CreateStyledComponentIntrinsic<'span', {}, Theme> - strong: CreateStyledComponentIntrinsic<'strong', {}, Theme> - style: CreateStyledComponentIntrinsic<'style', {}, Theme> - sub: CreateStyledComponentIntrinsic<'sub', {}, Theme> - summary: CreateStyledComponentIntrinsic<'summary', {}, Theme> - sup: CreateStyledComponentIntrinsic<'sup', {}, Theme> - table: CreateStyledComponentIntrinsic<'table', {}, Theme> - tbody: CreateStyledComponentIntrinsic<'tbody', {}, Theme> - td: CreateStyledComponentIntrinsic<'td', {}, Theme> - textarea: CreateStyledComponentIntrinsic<'textarea', {}, Theme> - tfoot: CreateStyledComponentIntrinsic<'tfoot', {}, Theme> - th: CreateStyledComponentIntrinsic<'th', {}, Theme> - thead: CreateStyledComponentIntrinsic<'thead', {}, Theme> - time: CreateStyledComponentIntrinsic<'time', {}, Theme> - title: CreateStyledComponentIntrinsic<'title', {}, Theme> - tr: CreateStyledComponentIntrinsic<'tr', {}, Theme> - track: CreateStyledComponentIntrinsic<'track', {}, Theme> - u: CreateStyledComponentIntrinsic<'u', {}, Theme> - ul: CreateStyledComponentIntrinsic<'ul', {}, Theme> - var: CreateStyledComponentIntrinsic<'var', {}, Theme> - video: CreateStyledComponentIntrinsic<'video', {}, Theme> - wbr: CreateStyledComponentIntrinsic<'wbr', {}, Theme> - - /** - * @desc - * SVG tags - */ - circle: CreateStyledComponentIntrinsic<'circle', {}, Theme> - clipPath: CreateStyledComponentIntrinsic<'clipPath', {}, Theme> - defs: CreateStyledComponentIntrinsic<'defs', {}, Theme> - ellipse: CreateStyledComponentIntrinsic<'ellipse', {}, Theme> - foreignObject: CreateStyledComponentIntrinsic<'foreignObject', {}, Theme> - g: CreateStyledComponentIntrinsic<'g', {}, Theme> - image: CreateStyledComponentIntrinsic<'image', {}, Theme> - line: CreateStyledComponentIntrinsic<'line', {}, Theme> - linearGradient: CreateStyledComponentIntrinsic<'linearGradient', {}, Theme> - mask: CreateStyledComponentIntrinsic<'mask', {}, Theme> - path: CreateStyledComponentIntrinsic<'path', {}, Theme> - pattern: CreateStyledComponentIntrinsic<'pattern', {}, Theme> - polygon: CreateStyledComponentIntrinsic<'polygon', {}, Theme> - polyline: CreateStyledComponentIntrinsic<'polyline', {}, Theme> - radialGradient: CreateStyledComponentIntrinsic<'radialGradient', {}, Theme> - rect: CreateStyledComponentIntrinsic<'rect', {}, Theme> - stop: CreateStyledComponentIntrinsic<'stop', {}, Theme> - svg: CreateStyledComponentIntrinsic<'svg', {}, Theme> - text: CreateStyledComponentIntrinsic<'text', {}, Theme> - tspan: CreateStyledComponentIntrinsic<'tspan', {}, Theme> +export type StyledTags = { + [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent< + { theme?: Theme }, + JSX.IntrinsicElements[Tag], + { theme: Theme } + > } -export interface CreateStyled +export interface CreateStyled extends BaseCreateStyled, StyledTags {} diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx index 8bb0ba594..bc7d5e4ad 100644 --- a/packages/styled/types/tests.tsx +++ b/packages/styled/types/tests.tsx @@ -1,35 +1,53 @@ +import * as React from 'react' import styled, { CreateStyled } from '@emotion/styled' -// $ExpectType CreateStyledComponentIntrinsic<"a", {}, any> +// $ExpectType CreateStyledComponent<{ theme?: any; }, DetailedHTMLProps, HTMLAnchorElement>, { theme: any; }> styled.a -// $ExpectType CreateStyledComponentIntrinsic<"body", {}, any> +// $ExpectType CreateStyledComponent<{ theme?: any; }, DetailedHTMLProps, HTMLBodyElement>, { theme: any; }> styled.body -// $ExpectType CreateStyledComponentIntrinsic<"div", {}, any> +// $ExpectType CreateStyledComponent<{ theme?: any; }, DetailedHTMLProps, HTMLDivElement>, { theme: any; }> styled.div -// $ExpectType CreateStyledComponentIntrinsic<"svg", {}, any> +// $ExpectType CreateStyledComponent<{ theme?: any; }, SVGProps, { theme: any; }> styled.svg { - // $ExpectType CreateStyledComponentIntrinsic<"svg", { bar: string }, { themed: "black" }> - styled.div<{ bar: string }, { themed: 'black' }>` + styled.div<{ bar: string }>` color: ${props => { - // $ExpectType { themed: "black" } - const { theme } = props - return theme.themed + // $ExpectType { theme?: any; } & ClassAttributes & HTMLAttributes & { bar: string; } + props + + return {} }}; ` } -{ - const myStyled: CreateStyled<{ themed: 'black' }> = styled - // $ExpectError - created styled shouldn't allow for parametrizing with Theme type - myStyled.div<{ bar: string }, { themed: 'orange' }>`` +const StyledDiv = styled.div({}) +; - myStyled.div<{ bar: string }>` - color: ${props => { - // $ExpectType { themed: "black" } - const { theme } = props - return theme.themed - }}; - ` -} +// can specify theme for StyledTags +const themedStyled = styled as CreateStyled<{ themeProp: string }> +const StyledDiv2 = themedStyled.div(props => { + // $ExpectType { themeProp: string; } + props.theme + + return {} +}) +; + +// Can override theme optionally on prop +; + +// $ExpectError +; + +const Container = styled.div((props: { test: number }) => ({ + width: props.test +})) + +const Container2 = styled.div<{ test: number }>(props => ({ + width: props.test +})) + +const Container3 = styled.div(({ theme }) => ({ + width: theme.width +})) diff --git a/packages/styled/types/tslint.json b/packages/styled/types/tslint.json index 58fc09cd9..265066d41 100644 --- a/packages/styled/types/tslint.json +++ b/packages/styled/types/tslint.json @@ -6,7 +6,18 @@ "generic" ], "semicolon": false, - + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-module", + "check-rest-spread", + "check-type", + "check-typecast", + "check-type-operator", + "check-preblock" + ], "no-unnecessary-generics": false } -} +} \ No newline at end of file diff --git a/packages/stylis/types/tslint.json b/packages/stylis/types/tslint.json index ad5ca2366..c425bd601 100644 --- a/packages/stylis/types/tslint.json +++ b/packages/stylis/types/tslint.json @@ -8,6 +8,8 @@ "generic" ], "semicolon": false, - "space-before-function-paren": false + "space-before-function-paren": false, + "no-null-undefined-union": false, + "callable-types": false } -} +} \ No newline at end of file diff --git a/packages/unitless/package.json b/packages/unitless/package.json index c1ff72015..250f31212 100644 --- a/packages/unitless/package.json +++ b/packages/unitless/package.json @@ -6,6 +6,9 @@ "module": "dist/unitless.esm.js", "license": "MIT", "repository": "https://github.com/emotion-js/emotion/tree/master/packages/unitless", + "scripts": { + "test:typescript": "exit 0" + }, "publishConfig": { "access": "public" }, diff --git a/packages/weak-memoize/types/index.d.ts b/packages/weak-memoize/types/index.d.ts index a2b9f0654..b5344615a 100644 --- a/packages/weak-memoize/types/index.d.ts +++ b/packages/weak-memoize/types/index.d.ts @@ -1,3 +1,5 @@ +// TypeScript Version: 2.2 + type UnaryFn = (arg: Arg) => Return export default function weakMemoize( diff --git a/packages/weak-memoize/types/tests.ts b/packages/weak-memoize/types/tests.ts index 72a869db9..8daa3243d 100644 --- a/packages/weak-memoize/types/tests.ts +++ b/packages/weak-memoize/types/tests.ts @@ -1,15 +1,17 @@ import weakMemoize from '@emotion/weak-memoize' -type Foo = { bar: 'xyz' } +interface Foo { + bar: 'xyz' +} declare class Qwe { answer: number } -// $ExpectType Array +// $ExpectType Foo[] weakMemoize((arg: Foo) => [arg])({ bar: 'xyz' }) -// $ExpectType string[] +// $ExpectError weakMemoize((arg: string) => [arg])('foo') // $ExpectError @@ -24,8 +26,6 @@ weakMemoize((arg: boolean) => [arg]) // $ExpectError weakMemoize((arg: symbol) => [arg]) // $ExpectError -weakMemoize((arg: void) => [arg]) -// $ExpectError weakMemoize((arg: null) => [arg]) // $ExpectError weakMemoize((arg: undefined) => [arg]) diff --git a/packages/weak-memoize/types/tslint.json b/packages/weak-memoize/types/tslint.json index b9706ef70..5da4cfaab 100644 --- a/packages/weak-memoize/types/tslint.json +++ b/packages/weak-memoize/types/tslint.json @@ -20,6 +20,7 @@ "check-preblock" ], - "no-unnecessary-generics": false + "no-unnecessary-generics": false, + "strict-export-declare-modifiers": false } -} +} \ No newline at end of file diff --git a/playgrounds/cra/package.json b/playgrounds/cra/package.json index a5494a2de..01c8e1127 100644 --- a/playgrounds/cra/package.json +++ b/playgrounds/cra/package.json @@ -11,6 +11,7 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "test:typescript": "exit 0" } } \ No newline at end of file diff --git a/playgrounds/razzle/package.json b/playgrounds/razzle/package.json index bbaf5e7f6..2f9d9b45a 100644 --- a/playgrounds/razzle/package.json +++ b/playgrounds/razzle/package.json @@ -7,7 +7,8 @@ "start": "razzle start", "build": "razzle build", "test": "razzle test --env=jsdom", - "start:prod": "NODE_ENV=production node build/server.js" + "start:prod": "NODE_ENV=production node build/server.js", + "test:typescript": "exit 0" }, "dependencies": { "express": "^4.16.3", diff --git a/scripts/babel-preset-emotion-dev/package.json b/scripts/babel-preset-emotion-dev/package.json index 1ffb991f7..445e456c8 100644 --- a/scripts/babel-preset-emotion-dev/package.json +++ b/scripts/babel-preset-emotion-dev/package.json @@ -3,6 +3,9 @@ "main": "src/index", "version": "9.2.6", "private": true, + "scripts": { + "test:typescript": "exit 0" + }, "dependencies": { "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-transform-flow-strip-types": "^7.4.4", diff --git a/scripts/babel-tester/package.json b/scripts/babel-tester/package.json index 0fab954a0..cc2226215 100644 --- a/scripts/babel-tester/package.json +++ b/scripts/babel-tester/package.json @@ -2,5 +2,8 @@ "name": "babel-tester", "main": "src/index.js", "version": "0.4.5", - "private": true + "private": true, + "scripts": { + "test:typescript": "exit 0" + } } diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json index dcb62a22b..c1ed77ae2 100644 --- a/scripts/benchmarks/package.json +++ b/scripts/benchmarks/package.json @@ -5,7 +5,8 @@ "scripts": { "start": "parcel src/index.html", "build": "parcel build src/index.html --public-url .", - "run-benchmark": "node run.js" + "run-benchmark": "node run.js", + "test:typescript": "exit 0" }, "dependencies": { "@babel/core": "^7.5.5", diff --git a/scripts/old-babel-tester/package.json b/scripts/old-babel-tester/package.json index 7187b3a1d..0f5cd0a19 100644 --- a/scripts/old-babel-tester/package.json +++ b/scripts/old-babel-tester/package.json @@ -5,5 +5,8 @@ "private": true, "dependencies": { "babel-core": "^6.26.3" + }, + "scripts": { + "test:typescript": "exit 0" } } diff --git a/scripts/ssr-benchmarks/package.json b/scripts/ssr-benchmarks/package.json index c5158bfe8..33bf701e4 100644 --- a/scripts/ssr-benchmarks/package.json +++ b/scripts/ssr-benchmarks/package.json @@ -3,7 +3,8 @@ "name": "ssr-benchmarks", "version": "0.8.13", "scripts": { - "start": "NODE_ENV=production node bench.js" + "start": "NODE_ENV=production node bench.js", + "test:typescript": "exit 0" }, "dependencies": { "benchmark": "^2.1.4" diff --git a/scripts/test-utils/package.json b/scripts/test-utils/package.json index 9c92b8177..9b4f9c1fd 100644 --- a/scripts/test-utils/package.json +++ b/scripts/test-utils/package.json @@ -2,5 +2,8 @@ "name": "test-utils", "main": "src/index", "version": "0.3.2", - "private": true + "private": true, + "scripts": { + "test:typescript": "exit 0" + } } diff --git a/site/package.json b/site/package.json index 08a4275cb..1d36ffb52 100644 --- a/site/package.json +++ b/site/package.json @@ -51,6 +51,7 @@ "license": "MIT", "scripts": { "build:site": "gatsby build", - "start:site": "gatsby develop" + "start:site": "gatsby develop", + "test:typescript": "exit 0" } -} +} \ No newline at end of file From 2293547000ce78d044d054d17564f6c2aa670687 Mon Sep 17 00:00:00 2001 From: Federico Zivolo Date: Tue, 5 Nov 2019 20:59:26 +0100 Subject: [PATCH 007/176] Make StyledComponent polymorphic (#1588) * chore: tell Prettier we are using Flow this gets rid of a lot of warnings and wrong auto formatting * fix: make CreateStyled callable function polymorphic This makes it possible to type styled functional components and enables a workaround for lack of tagged templates support of Flow * chore: update type annotation to use new style * fix: wrong formatting * style: fix prettier issues * chore: changeset * fix: just import the @emotion/sheet type * style: make prettier happy * docs: added Flow types documentation page * Update flow.mdx * refactor: rename P to Props # Conflicts: # packages/styled-base/src/utils.js --- .changeset/strange-pumas-suffer.md | 6 ++ .prettierrc.yaml | 3 + docs/docs.yaml | 1 + docs/flow.mdx | 115 ++++++++++++++++++++++++ package.json | 2 +- packages/styled-base/flow-tests/flow.js | 27 ++++-- packages/styled-base/src/index.js | 4 +- packages/styled-base/src/utils.js | 22 ++--- packages/styled/flow-tests/flow.js | 11 ++- packages/styled/src/index.js | 1 + packages/utils/src/types.js | 5 +- playgrounds/razzle/src/index.js | 4 +- site/src/components/Title.js | 2 +- site/src/pages/404.js | 1 - 14 files changed, 172 insertions(+), 32 deletions(-) create mode 100644 .changeset/strange-pumas-suffer.md create mode 100644 docs/flow.mdx diff --git a/.changeset/strange-pumas-suffer.md b/.changeset/strange-pumas-suffer.md new file mode 100644 index 000000000..e84c3ad0d --- /dev/null +++ b/.changeset/strange-pumas-suffer.md @@ -0,0 +1,6 @@ +--- +'@emotion/styled-base': patch +'@emotion/styled': patch +--- + +StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety. diff --git a/.prettierrc.yaml b/.prettierrc.yaml index c00fa2d41..afa0c8ad2 100644 --- a/.prettierrc.yaml +++ b/.prettierrc.yaml @@ -4,3 +4,6 @@ overrides: - files: "docs/*.md" options: printWidth: 60 +- files: "*.js" + options: + parser: flow diff --git a/docs/docs.yaml b/docs/docs.yaml index b25bd6cdc..615c10b4e 100644 --- a/docs/docs.yaml +++ b/docs/docs.yaml @@ -29,6 +29,7 @@ - source-maps - testing - typescript + - flow # This loads the READMEs instead of files in docs/ - title: Packages diff --git a/docs/flow.mdx b/docs/flow.mdx new file mode 100644 index 000000000..60ccc5579 --- /dev/null +++ b/docs/flow.mdx @@ -0,0 +1,115 @@ +--- +title: 'Flow' +--- + +Emotion is built with Flow, so it exports type definitions for most of its packages, +including `@emotion/styled`. + +## @emotion/styled + +The styled package can be used to define styled components in two ways, by calling `styled()`, +or by using the `styled.*` shortcuts. + +Unfortunately, Flow doesn't currently support generic types on tagged templates, this means if +you'd like to explictly type a styled component props, you will have to use one of the following +alternatives: + +```jsx +import styled from '@emotion/styled' + +// Option A +const A = styled('div')` + color: red; +` + +// Option B +const B = styled.div({ + color: 'red', +}) +``` + +Styled components are annotated the same way normal React components are: + +```jsx +import styled from '@emotion/styled' + +type Props = { a: string } +const Link = styled('a')` + color: red; +` + +const App = () => Click me +``` + +Just like for normal React components, you don't need to provide type annotations +for your styled components if you don't plan to export them from your module: + +```jsx +import styled from '@emotion/styled' + +const Internal = styled.div` + color: red; +` +``` + +Be aware, Flow infers the return type of your components by referencing their return type, +this means you will need to annotate the properties of the root component in the case below: + +```jsx + +const Container = styled.div` + ^^^^^^^^^^^ Missing type annotation for P. P is a type parameter declared in function type [1] and was implicitly instantiated at +encaps tag [2]. + color: red; +` + +export const App = () => +``` + +You can use `React$ElementConfig` to obtain the props type of a HTML tag, or of +any existing React component: + +```jsx +import type { ElementConfig } from 'react' + +type Props = ElementConfig<'div'> +const Container = styled('div')` + color: red; +` + +export const App = () => +``` + + +```jsx +import type { ElementConfig } from 'react' +import styled from '@emotion/styled' + +const Container = styled>('div')` + background-color: yellow; +` + +const App = () => ( + {() => 10} + ^^^^^^^^^^ Cannot create Container element because in property children: + • Either inexact function [1] is incompatible with exact React.Element [2]. + • Or function [1] is incompatible with React.Portal [3]. + • Or property @@iterator is missing in function [1] but exists in $Iterable [4]. +) +``` + +Alternatively, you can define the return type of your component, so that +Flow doesn't need to infer it reading the props type of the internal component: + +```jsx +import type { Node } from 'react' + +const Container = styled.div` + color: red; +` + +export const App = (): Node => +``` + + + diff --git a/package.json b/package.json index a6f0a0fc7..4516471b9 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ ], "parser": "babel-eslint", "rules": { - "prettier/prettier": "error", + "prettier/prettier": ["error", {"parser": "flow"}], "react/prop-types": 0, "react/no-unused-prop-types": 0, "standard/computed-property-even-spacing": 0, diff --git a/packages/styled-base/flow-tests/flow.js b/packages/styled-base/flow-tests/flow.js index 110dd2b49..12b670f4d 100644 --- a/packages/styled-base/flow-tests/flow.js +++ b/packages/styled-base/flow-tests/flow.js @@ -2,17 +2,23 @@ // @flow import * as React from 'react' import createStyled from '../src' -import type { CreateStyledComponent, StyledComponent } from '../src/utils' +import type { + CreateStyledComponent, + StyledComponent, + Interpolations +} from '../src/utils' -export const valid: CreateStyledComponent = createStyled('div') +type Props = { color: string } + +// It returns the expected type +export const valid: ( + ...args: Interpolations +) => StyledComponent = createStyled('div') // $FlowExpectError: we can't cast a StyledComponent to string export const invalid: string = createStyled('div') -const styled = createStyled('div') -type Props = { color: string } -// prettier-ignore -const Div = styled({ color: props => props.color }) +const Div = createStyled.div({ color: props => props.color }) const validProp =
@@ -20,8 +26,13 @@ const validProp =
const invalidProp =
// $FlowExpectError: we don't expose the private StyledComponent properties -const invalidPropAccess = styled().__emotion_base +const invalidPropAccess = createStyled().__emotion_base // We allow styled components not to specify their props types // NOTE: this is allowed only if you don't attempt to export it! -const untyped: StyledComponent = styled({}) +const untyped: StyledComponent = createStyled.div({}) + +// Style a functional component +const styledFn = createStyled(props =>
)` + color: red; +` diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js index ca79488e3..568649278 100644 --- a/packages/styled-base/src/index.js +++ b/packages/styled-base/src/index.js @@ -50,7 +50,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => { shouldForwardProp || getDefaultShouldForwardProp(baseTag) const shouldUseAs = !defaultShouldForwardProp('as') - return function

(): PrivateStyledComponent

{ + return function(): PrivateStyledComponent { let args = arguments let styles = isReal && tag.__emotion_styles !== undefined @@ -78,7 +78,7 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => { } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class - const Styled: PrivateStyledComponent

= withEmotionCache( + const Styled: PrivateStyledComponent = withEmotionCache( (props, context, ref) => { return ( diff --git a/packages/styled-base/src/utils.js b/packages/styled-base/src/utils.js index 6e4ac85fd..c06191fd0 100644 --- a/packages/styled-base/src/utils.js +++ b/packages/styled-base/src/utils.js @@ -1,6 +1,5 @@ // @flow -import * as React from 'react' -import type { ElementType } from 'react' +import type { ElementType, StatelessFunctionalComponent } from 'react' import isPropValid from '@emotion/is-prop-valid' export type Interpolations = Array @@ -11,17 +10,17 @@ export type StyledOptions = { target?: string } -export type StyledComponent

= React.StatelessFunctionalComponent

& { +export type StyledComponent = StatelessFunctionalComponent & { defaultProps: any, toString: () => string, withComponent: ( nextTag: ElementType, nextOptions?: StyledOptions - ) => StyledComponent

+ ) => StyledComponent } -export type PrivateStyledComponent

= StyledComponent

& { - __emotion_real: StyledComponent

, +export type PrivateStyledComponent = StyledComponent & { + __emotion_real: StyledComponent, __emotion_base: any, __emotion_styles: any, __emotion_forwardProp: any @@ -31,7 +30,7 @@ const testOmitPropsOnStringTag = isPropValid const testOmitPropsOnComponent = (key: string) => key !== 'theme' && key !== 'innerRef' -export const getDefaultShouldForwardProp = (tag: React.ElementType) => +export const getDefaultShouldForwardProp = (tag: ElementType) => typeof tag === 'string' && // 96 is one less than the char code // for "a" so this is checking that @@ -40,12 +39,15 @@ export const getDefaultShouldForwardProp = (tag: React.ElementType) => ? testOmitPropsOnStringTag : testOmitPropsOnComponent -export type CreateStyledComponent =

( +export type CreateStyledComponent = ( ...args: Interpolations -) => StyledComponent

+) => StyledComponent export type CreateStyled = { - (tag: React.ElementType, options?: StyledOptions): CreateStyledComponent, + ( + tag: ElementType, + options?: StyledOptions + ): (...args: Interpolations) => StyledComponent, [key: string]: CreateStyledComponent, bind: () => CreateStyled } diff --git a/packages/styled/flow-tests/flow.js b/packages/styled/flow-tests/flow.js index 0754fdc58..c0fdee630 100644 --- a/packages/styled/flow-tests/flow.js +++ b/packages/styled/flow-tests/flow.js @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars */ // @flow import * as React from 'react' import styled from '../src' @@ -7,7 +8,13 @@ const Foo = styled.div({ color: 'red' }) -export const valid = +const valid = // $FlowExpectError: color must be string -export const invalid = +const invalid = + +// components defined using the root method should be identical +// to the ones generated using the shortcuts +const root: typeof Foo = styled('div')` + colors: red; +` diff --git a/packages/styled/src/index.js b/packages/styled/src/index.js index eea895068..3916bef12 100644 --- a/packages/styled/src/index.js +++ b/packages/styled/src/index.js @@ -6,6 +6,7 @@ import { tags } from './tags' const newStyled = styled.bind() tags.forEach(tagName => { + // $FlowFixMe: we can ignore this because its exposed type is defined by the CreateStyled type newStyled[tagName] = newStyled(tagName) }) diff --git a/packages/utils/src/types.js b/packages/utils/src/types.js index 903dca8cf..173b5063e 100644 --- a/packages/utils/src/types.js +++ b/packages/utils/src/types.js @@ -1,8 +1,5 @@ // @flow -/*:: -import { StyleSheet } from '@emotion/sheet' - -*/ +import type { StyleSheet } from '@emotion/sheet' export type RegisteredCache = { [string]: string } diff --git a/playgrounds/razzle/src/index.js b/playgrounds/razzle/src/index.js index f4b87635e..5f0c00988 100644 --- a/playgrounds/razzle/src/index.js +++ b/playgrounds/razzle/src/index.js @@ -12,9 +12,7 @@ server.listen(process.env.PORT || 3000, error => { } console.log('🚀 started') -}) - -// $FlowFixMe +}) // $FlowFixMe if (module.hot) { console.log('✅ Server-side HMR Enabled!') // $FlowFixMe diff --git a/site/src/components/Title.js b/site/src/components/Title.js index 03d5e3fb1..a6197aad5 100644 --- a/site/src/components/Title.js +++ b/site/src/components/Title.js @@ -6,7 +6,7 @@ import * as markdownComponents from '../utils/markdown-styles' type Props = { children: React$Node } -export default styled(markdownComponents.h1)( +export default styled(markdownComponents.h1)( mq({ paddingTop: 0, marginTop: 0, diff --git a/site/src/pages/404.js b/site/src/pages/404.js index 86f092961..84df26030 100644 --- a/site/src/pages/404.js +++ b/site/src/pages/404.js @@ -11,5 +11,4 @@ const NotFoundPage = () => { ) } - export default NotFoundPage From 1eaa3a389876d4a623ce66735dc6db093cb2a8e6 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Wed, 6 Nov 2019 06:03:15 +1000 Subject: [PATCH 008/176] Update changes.json --- .changeset/long-apes-admire/changes.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.changeset/long-apes-admire/changes.json b/.changeset/long-apes-admire/changes.json index c11ee7450..a07e1e459 100644 --- a/.changeset/long-apes-admire/changes.json +++ b/.changeset/long-apes-admire/changes.json @@ -1,10 +1,10 @@ { "releases": [ - { "name": "@emotion/css", "type": "minor" }, - { "name": "emotion-theming", "type": "minor" }, - { "name": "@emotion/serialize", "type": "minor" }, - { "name": "@emotion/styled-base", "type": "minor" }, - { "name": "@emotion/styled", "type": "minor" } + { "name": "@emotion/css", "type": "major" }, + { "name": "emotion-theming", "type": "major" }, + { "name": "@emotion/serialize", "type": "major" }, + { "name": "@emotion/styled-base", "type": "major" }, + { "name": "@emotion/styled", "type": "major" } ], "dependents": [ { From 40beaadd65e760ce6057e89b1bc78e5315b2bf54 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 6 Nov 2019 06:22:56 +1000 Subject: [PATCH 009/176] Version Packages (#1605) --- .changeset/pre.json | 6 ++- packages/babel-plugin-emotion/CHANGELOG.md | 7 ++++ packages/babel-plugin-emotion/package.json | 4 +- packages/core/CHANGELOG.md | 10 +++++ packages/core/package.json | 10 ++--- packages/create-emotion/CHANGELOG.md | 7 ++++ packages/create-emotion/package.json | 4 +- packages/css/CHANGELOG.md | 42 +++++++++++++++++++++ packages/css/package.json | 6 +-- packages/emotion-theming/CHANGELOG.md | 42 +++++++++++++++++++++ packages/emotion-theming/package.json | 8 ++-- packages/jest-emotion/CHANGELOG.md | 10 +++++ packages/jest-emotion/package.json | 4 +- packages/native/CHANGELOG.md | 8 ++++ packages/native/package.json | 6 +-- packages/primitives-core/CHANGELOG.md | 7 ++++ packages/primitives-core/package.json | 6 +-- packages/primitives/CHANGELOG.md | 9 +++++ packages/primitives/package.json | 8 ++-- packages/serialize/CHANGELOG.md | 36 ++++++++++++++++++ packages/serialize/package.json | 2 +- packages/styled-base/CHANGELOG.md | 43 +++++++++++++++++++++ packages/styled-base/package.json | 8 ++-- packages/styled/CHANGELOG.md | 44 ++++++++++++++++++++++ packages/styled/package.json | 10 ++--- 25 files changed, 308 insertions(+), 39 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index ae56314be..b01ac6eb7 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -40,7 +40,11 @@ "emotion-site": "9.3.0" }, "changesets": [ + "long-apes-admire", + "flat-adults-add", "light-mice-relate", - "rare-books-own" + "rare-books-own", + "rare-toes-grow", + "strange-pumas-suffer" ] } diff --git a/packages/babel-plugin-emotion/CHANGELOG.md b/packages/babel-plugin-emotion/CHANGELOG.md index cb6d329d5..048af9c68 100644 --- a/packages/babel-plugin-emotion/CHANGELOG.md +++ b/packages/babel-plugin-emotion/CHANGELOG.md @@ -1,5 +1,12 @@ # babel-plugin-emotion +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: + - @emotion/serialize@1.0.0-next.0 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index 473f75d1a..3f11498a1 100644 --- a/packages/babel-plugin-emotion/package.json +++ b/packages/babel-plugin-emotion/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-emotion", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.", "main": "dist/babel-plugin-emotion.cjs.js", "module": "dist/babel-plugin-emotion.esm.js", @@ -16,7 +16,7 @@ "@babel/helper-module-imports": "^7.0.0", "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", - "@emotion/serialize": "^0.11.14", + "@emotion/serialize": "^1.0.0-next.0", "babel-plugin-macros": "^2.0.0", "babel-plugin-syntax-jsx": "^6.18.0", "convert-source-map": "^1.5.0", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 8c94fb001..0b98b1649 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,15 @@ # @emotion/core +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6), [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687)]: + - @emotion/css@11.0.0-next.1 + - emotion-theming@11.0.0-next.1 + - @emotion/serialize@1.0.0-next.0 + - @emotion/styled@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/core/package.json b/packages/core/package.json index ec96cfbf1..95978bd8c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/core", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "main": "dist/core.cjs.js", "module": "dist/core.esm.js", "browser": { @@ -21,8 +21,8 @@ "dependencies": { "@babel/runtime": "^7.5.5", "@emotion/cache": "^11.0.0-next.0", - "@emotion/css": "^11.0.0-next.0", - "@emotion/serialize": "^0.11.12", + "@emotion/css": "^11.0.0-next.1", + "@emotion/serialize": "^1.0.0-next.0", "@emotion/sheet": "0.9.3", "@emotion/utils": "0.11.2" }, @@ -30,12 +30,12 @@ "react": ">=16.3.0" }, "devDependencies": { - "@emotion/styled": "^11.0.0-next.0", + "@emotion/styled": "^11.0.0-next.1", "@types/react": "^16.8.20", "dtslint": "^0.3.0", "emotion": "^11.0.0-next.0", "emotion-server": "^11.0.0-next.0", - "emotion-theming": "^11.0.0-next.0", + "emotion-theming": "^11.0.0-next.1", "html-tag-names": "^1.1.2", "react": "^16.5.2", "svg-tag-names": "^1.1.1" diff --git a/packages/create-emotion/CHANGELOG.md b/packages/create-emotion/CHANGELOG.md index 22d7be368..f716f951c 100644 --- a/packages/create-emotion/CHANGELOG.md +++ b/packages/create-emotion/CHANGELOG.md @@ -1,5 +1,12 @@ # create-emotion +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: + - @emotion/serialize@1.0.0-next.0 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json index 450959308..460332826 100644 --- a/packages/create-emotion/package.json +++ b/packages/create-emotion/package.json @@ -1,6 +1,6 @@ { "name": "create-emotion", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "The Next Generation of CSS-in-JS.", "main": "dist/create-emotion.cjs.js", "module": "dist/create-emotion.esm.js", @@ -15,7 +15,7 @@ }, "dependencies": { "@emotion/cache": "^11.0.0-next.0", - "@emotion/serialize": "^0.11.8", + "@emotion/serialize": "^1.0.0-next.0", "@emotion/sheet": "0.9.3", "@emotion/utils": "0.11.2" }, diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index c6b33edc5..3d2fe7fab 100644 --- a/packages/css/CHANGELOG.md +++ b/packages/css/CHANGELOG.md @@ -1,5 +1,47 @@ # @emotion/css +## 11.0.0-next.1 + +### Major Changes + +- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes: + + - Reduce build times when using emotion + - In many cases remove the need for manually specifying generic parameters for your emotion components. + + If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. + + ## Improvements + + - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. + - Union types as props are better supported and should be inferred properly + - Build times should be reduced significantly in larger projects. + + ## Breaking changes + + - withTheme can now have the Theme type specified when calling it. For example `withTheme(MyComponent)` + + **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section + + - `css` function has been restricted to prevent passing of invalid types + - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example + + `styled(MyComponent)({})` + to + `styled(MyComponent)({})` + + - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: + + `StyledComponent` + to + `StyledComponent` + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: + - @emotion/serialize@1.0.0-next.0 + - babel-plugin-emotion@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/css/package.json b/packages/css/package.json index c4e3fda13..258b5e3cc 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/css", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "a function to serialize css and object styless", "main": "dist/css.cjs.js", "module": "dist/css.esm.js", @@ -11,9 +11,9 @@ "test:typescript": "dtslint types" }, "dependencies": { - "@emotion/serialize": "^0.11.12", + "@emotion/serialize": "^1.0.0-next.0", "@emotion/utils": "0.11.2", - "babel-plugin-emotion": "^11.0.0-next.0" + "babel-plugin-emotion": "^11.0.0-next.1" }, "devDependencies": { "dtslint": "^0.3.0" diff --git a/packages/emotion-theming/CHANGELOG.md b/packages/emotion-theming/CHANGELOG.md index a2230192d..23f2937dc 100644 --- a/packages/emotion-theming/CHANGELOG.md +++ b/packages/emotion-theming/CHANGELOG.md @@ -1,5 +1,47 @@ # emotion-theming +## 11.0.0-next.1 + +### Major Changes + +- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes: + + - Reduce build times when using emotion + - In many cases remove the need for manually specifying generic parameters for your emotion components. + + If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. + + ## Improvements + + - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. + - Union types as props are better supported and should be inferred properly + - Build times should be reduced significantly in larger projects. + + ## Breaking changes + + - withTheme can now have the Theme type specified when calling it. For example `withTheme(MyComponent)` + + **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section + + - `css` function has been restricted to prevent passing of invalid types + - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example + + `styled(MyComponent)({})` + to + `styled(MyComponent)({})` + + - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: + + `StyledComponent` + to + `StyledComponent` + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6), [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687)]: + - @emotion/styled@11.0.0-next.1 + - @emotion/core@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json index f6eeb142c..6ffabb433 100644 --- a/packages/emotion-theming/package.json +++ b/packages/emotion-theming/package.json @@ -1,6 +1,6 @@ { "name": "emotion-theming", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "A CSS-in-JS theming solution, inspired by styled-components", "main": "dist/emotion-theming.cjs.js", "module": "dist/emotion-theming.esm.js", @@ -32,8 +32,8 @@ }, "homepage": "https://emotion.sh", "devDependencies": { - "@emotion/core": "^11.0.0-next.0", - "@emotion/styled": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", + "@emotion/styled": "^11.0.0-next.1", "@types/react": "^16.8.20", "dtslint": "^0.3.0", "react": "^16.5.2" @@ -44,7 +44,7 @@ "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "react": ">=16.3.0" }, "umd:main": "dist/emotion-theming.umd.min.js", diff --git a/packages/jest-emotion/CHANGELOG.md b/packages/jest-emotion/CHANGELOG.md index a752d9b7e..6ed941a59 100644 --- a/packages/jest-emotion/CHANGELOG.md +++ b/packages/jest-emotion/CHANGELOG.md @@ -1,5 +1,15 @@ # jest-emotion +## 11.0.0-next.1 + +### Patch Changes + +- [`e67a5be9`](https://github.com/emotion-js/emotion/commit/e67a5be9bffaa12f9ae0e366983dced4c3716f84) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@Andarist](https://github.com/Andarist)! - Take specificity into account when matching styles + +* [`e67a5be9`](https://github.com/emotion-js/emotion/commit/e67a5be9bffaa12f9ae0e366983dced4c3716f84) [#967](https://github.com/emotion-js/emotion/pull/967) Thanks [@Andarist](https://github.com/Andarist)! - Match rules in declarations with component used as a selector +* Updated dependencies []: + - @emotion/core@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json index d1641e7a3..8d2c0e5bf 100644 --- a/packages/jest-emotion/package.json +++ b/packages/jest-emotion/package.json @@ -1,6 +1,6 @@ { "name": "jest-emotion", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "Jest utilities for emotion", "main": "dist/jest-emotion.cjs.js", "types": "types/index.d.ts", @@ -21,7 +21,7 @@ "specificity": "^0.4.1" }, "devDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "dtslint": "^0.3.0", "emotion": "^11.0.0-next.0", "enzyme-to-json": "^3.2.1", diff --git a/packages/native/CHANGELOG.md b/packages/native/CHANGELOG.md index 12d34ee32..7ff5a5652 100644 --- a/packages/native/CHANGELOG.md +++ b/packages/native/CHANGELOG.md @@ -1,5 +1,13 @@ # @emotion/native +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: + - emotion-theming@11.0.0-next.1 + - @emotion/primitives-core@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/native/package.json b/packages/native/package.json index 4d67e613e..51a035417 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/native", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "Style and render React Native components using emotion", "main": "dist/native.cjs.js", "module": "dist/native.esm.js", @@ -12,12 +12,12 @@ "dist" ], "devDependencies": { - "emotion-theming": "^11.0.0-next.0", + "emotion-theming": "^11.0.0-next.1", "react": "^16.5.2", "react-native": "^0.57.0" }, "dependencies": { - "@emotion/primitives-core": "11.0.0-next.0" + "@emotion/primitives-core": "11.0.0-next.1" }, "peerDependencies": { "react-native": ">=0.14.0 <1" diff --git a/packages/primitives-core/CHANGELOG.md b/packages/primitives-core/CHANGELOG.md index 366165e32..0a68f4618 100644 --- a/packages/primitives-core/CHANGELOG.md +++ b/packages/primitives-core/CHANGELOG.md @@ -1,5 +1,12 @@ # @emotion/primitives-core +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies []: + - @emotion/core@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json index 5fe72b713..523e18a8f 100644 --- a/packages/primitives-core/package.json +++ b/packages/primitives-core/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/primitives-core", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "Shared utilities for emotion primitives and native", "main": "dist/primitives-core.cjs.js", "module": "dist/primitives-core.esm.js", @@ -16,11 +16,11 @@ "css-to-react-native": "^2.2.1" }, "peerDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "react": ">=16.3.0" }, "devDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "react": "^16.5.2" }, "homepage": "https://emotion.sh", diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md index eda03279c..85c560e80 100644 --- a/packages/primitives/CHANGELOG.md +++ b/packages/primitives/CHANGELOG.md @@ -1,5 +1,14 @@ # @emotion/primitives +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: + - emotion-theming@11.0.0-next.1 + - babel-plugin-emotion@11.0.0-next.1 + - @emotion/primitives-core@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 18d30f4b7..966c27c8c 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/primitives", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "main": "dist/primitives.cjs.js", "module": "dist/primitives.esm.js", "scripts": { @@ -12,15 +12,15 @@ ], "dependencies": { "@emotion/is-prop-valid": "0.8.5", - "@emotion/primitives-core": "11.0.0-next.0", - "babel-plugin-emotion": "^11.0.0-next.0" + "@emotion/primitives-core": "11.0.0-next.1", + "babel-plugin-emotion": "^11.0.0-next.1" }, "peerDependencies": { "react": ">=16.3.0", "react-primitives": "^0.7.0" }, "devDependencies": { - "emotion-theming": "^11.0.0-next.0", + "emotion-theming": "^11.0.0-next.1", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "react": "^16.5.2", diff --git a/packages/serialize/CHANGELOG.md b/packages/serialize/CHANGELOG.md index e8687f0e1..6d9434d2b 100644 --- a/packages/serialize/CHANGELOG.md +++ b/packages/serialize/CHANGELOG.md @@ -1,5 +1,41 @@ # @emotion/serialize +## 1.0.0-next.0 + +### Major Changes + +- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes: + + - Reduce build times when using emotion + - In many cases remove the need for manually specifying generic parameters for your emotion components. + + If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. + + ## Improvements + + - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. + - Union types as props are better supported and should be inferred properly + - Build times should be reduced significantly in larger projects. + + ## Breaking changes + + - withTheme can now have the Theme type specified when calling it. For example `withTheme(MyComponent)` + + **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section + + - `css` function has been restricted to prevent passing of invalid types + - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example + + `styled(MyComponent)({})` + to + `styled(MyComponent)({})` + + - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: + + `StyledComponent` + to + `StyledComponent` + ## 0.11.14 ### Patch Changes diff --git a/packages/serialize/package.json b/packages/serialize/package.json index 79caebecc..8613505c5 100644 --- a/packages/serialize/package.json +++ b/packages/serialize/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/serialize", - "version": "0.11.14", + "version": "1.0.0-next.0", "description": "serialization utils for emotion", "main": "dist/serialize.cjs.js", "module": "dist/serialize.esm.js", diff --git a/packages/styled-base/CHANGELOG.md b/packages/styled-base/CHANGELOG.md index 1faebdd4e..99098b445 100644 --- a/packages/styled-base/CHANGELOG.md +++ b/packages/styled-base/CHANGELOG.md @@ -1,5 +1,48 @@ # @emotion/styled-base +## 11.0.0-next.1 + +### Major Changes + +- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes: + + - Reduce build times when using emotion + - In many cases remove the need for manually specifying generic parameters for your emotion components. + + If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. + + ## Improvements + + - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. + - Union types as props are better supported and should be inferred properly + - Build times should be reduced significantly in larger projects. + + ## Breaking changes + + - withTheme can now have the Theme type specified when calling it. For example `withTheme(MyComponent)` + + **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section + + - `css` function has been restricted to prevent passing of invalid types + - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example + + `styled(MyComponent)({})` + to + `styled(MyComponent)({})` + + - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: + + `StyledComponent` + to + `StyledComponent` + +### Patch Changes + +- [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687) [#1588](https://github.com/emotion-js/emotion/pull/1588) Thanks [@FezVrasta](https://github.com/FezVrasta)! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety. +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6)]: + - @emotion/serialize@1.0.0-next.0 + - @emotion/core@11.0.0-next.1 + ## 11.0.0-next.0 ### Patch Changes diff --git a/packages/styled-base/package.json b/packages/styled-base/package.json index cef474b8d..a114e7ce2 100644 --- a/packages/styled-base/package.json +++ b/packages/styled-base/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/styled-base", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "base styled API for emotion", "main": "dist/styled-base.cjs.js", "module": "dist/styled-base.esm.js", @@ -17,17 +17,17 @@ "dependencies": { "@babel/runtime": "^7.5.5", "@emotion/is-prop-valid": "0.8.5", - "@emotion/serialize": "^0.11.14", + "@emotion/serialize": "^1.0.0-next.0", "@emotion/utils": "0.11.2" }, "devDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "@types/react": "^16.8.20", "dtslint": "^0.3.0", "react": "^16.5.2" }, "peerDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "react": ">=16.3.0" }, "publishConfig": { diff --git a/packages/styled/CHANGELOG.md b/packages/styled/CHANGELOG.md index 411101789..597a771f0 100644 --- a/packages/styled/CHANGELOG.md +++ b/packages/styled/CHANGELOG.md @@ -1,5 +1,49 @@ # @emotion/styled +## 11.0.0-next.1 + +### Major Changes + +- [`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - TypeScript types have been restructured. These changes: + + - Reduce build times when using emotion + - In many cases remove the need for manually specifying generic parameters for your emotion components. + + If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below. + + ## Improvements + + - useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section. + - Union types as props are better supported and should be inferred properly + - Build times should be reduced significantly in larger projects. + + ## Breaking changes + + - withTheme can now have the Theme type specified when calling it. For example `withTheme(MyComponent)` + + **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section + + - `css` function has been restricted to prevent passing of invalid types + - `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example + + `styled(MyComponent)({})` + to + `styled(MyComponent)({})` + + - `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example: + + `StyledComponent` + to + `StyledComponent` + +### Patch Changes + +- [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687) [#1588](https://github.com/emotion-js/emotion/pull/1588) Thanks [@FezVrasta](https://github.com/FezVrasta)! - StyledComponent Flow type is now polymorphic, that means you can now define the component prop types to get better type safety. +- Updated dependencies [[`1eaa3a38`](https://github.com/emotion-js/emotion/commit/1eaa3a389876d4a623ce66735dc6db093cb2a8e6), [`22935470`](https://github.com/emotion-js/emotion/commit/2293547000ce78d044d054d17564f6c2aa670687)]: + - @emotion/styled-base@11.0.0-next.1 + - babel-plugin-emotion@11.0.0-next.1 + - @emotion/core@11.0.0-next.1 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/styled/package.json b/packages/styled/package.json index 733489c16..6aab544b1 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/styled", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "styled API for emotion", "main": "dist/styled.cjs.js", "module": "dist/styled.esm.js", @@ -11,16 +11,16 @@ "test:typescript": "dtslint types" }, "dependencies": { - "@emotion/styled-base": "^11.0.0-next.0", - "babel-plugin-emotion": "^11.0.0-next.0" + "@emotion/styled-base": "^11.0.0-next.1", + "babel-plugin-emotion": "^11.0.0-next.1" }, "devDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "dtslint": "^0.3.0", "react": "^16.5.2" }, "peerDependencies": { - "@emotion/core": "^11.0.0-next.0", + "@emotion/core": "^11.0.0-next.1", "react": ">=16.3.0" }, "publishConfig": { From 70bc4ef81e78cec259fb06a8826669228140fd1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Tue, 5 Nov 2019 21:44:20 +0100 Subject: [PATCH 010/176] Add CodeSandbox CI Config (#1608) --- .codesandbox/ci.json | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 .codesandbox/ci.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json new file mode 100644 index 000000000..d07aa5f4a --- /dev/null +++ b/.codesandbox/ci.json @@ -0,0 +1,14 @@ +{ + "packages": [ + "packages/cache", + "packages/core", + "packages/create-emotion", + "packages/css", + "packages/emotion", + "packages/emotion-theming", + "packages/serialize", + "packages/styled", + "packages/styled-base" + ], + "sandboxes": ["pk1qjqpw67"] +} From 79036056808eefc81a77225254f7c25c2ff9d967 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Wed, 6 Nov 2019 08:32:24 +1000 Subject: [PATCH 011/176] Use Hooks (#967) * Tests are broken :( but it works * Add displayName * Use ref * Remove stuff * Update react-test-renderer * Use useContext in more places * Fix a Global insertion order bug * Add a test * Fix typo * Remove passing the theme to the css prop, Global and ClassNames * stuff * stuff * changes * Add a test back * Fix a thing * Update stuff * Update things * Drop support for innerRef entirely * Set correct peerDeps on react + upgrade react-related devDeps * Fix tests * Fix linting error * Remove custom useContext flow types * Fix flow error * Fix layour effect input array to include serialized.name instead of whole serialized * Add a changeset * Add another changeset --- .changeset/curvy-timers-decide.md | 6 + .changeset/two-baboons-mate.md | 11 + .../ISSUE_TEMPLATE/--documentation-issue.md | 2 +- .github/ISSUE_TEMPLATE/--feature-request.md | 1 - .github/PULL_REQUEST_TEMPLATE.md | 7 +- docs/css-prop.mdx | 6 +- package.json | 14 +- packages/core/__tests__/class-names.js | 1 - packages/core/__tests__/css.js | 1 - .../global-insertion-after-others.js | 33 +++ packages/core/package.json | 6 +- packages/core/src/class-names.js | 109 +++++----- packages/core/src/context.js | 75 +++---- packages/core/src/global.js | 194 ++++++++---------- packages/core/src/jsx.js | 20 +- packages/core/types/tests.tsx | 4 +- packages/create-emotion/test/inline.test.js | 36 ++-- packages/create-emotion/test/stream.test.js | 69 +++---- packages/emotion-server/test/inline.test.js | 58 +++--- packages/emotion-server/test/stream.test.js | 69 +++---- packages/emotion-theming/README.md | 9 +- packages/emotion-theming/package.json | 6 +- .../emotion-theming/src/theme-provider.js | 20 +- packages/emotion-theming/src/with-theme.js | 11 +- .../docs/rules/syntax-preference.md | 5 +- packages/jest-emotion/package.json | 4 +- packages/native/package.json | 2 +- packages/primitives-core/package.json | 4 +- packages/primitives-core/src/styled.js | 42 ++-- packages/primitives/package.json | 4 +- packages/primitives/src/test-props.js | 2 +- packages/styled-base/package.json | 6 +- packages/styled-base/src/index.js | 177 ++++++++-------- packages/styled-base/src/utils.js | 3 +- packages/styled/__tests__/styled-dom.js | 82 -------- packages/styled/package.json | 4 +- playgrounds/cra/package.json | 6 +- playgrounds/razzle/package.json | 6 +- scripts/benchmarks/package.json | 4 +- site/package.json | 6 +- yarn.lock | 139 ++++++++++--- 41 files changed, 605 insertions(+), 659 deletions(-) create mode 100644 .changeset/curvy-timers-decide.md create mode 100644 .changeset/two-baboons-mate.md create mode 100644 packages/core/__tests__/global-insertion-after-others.js diff --git a/.changeset/curvy-timers-decide.md b/.changeset/curvy-timers-decide.md new file mode 100644 index 000000000..c0049b9b2 --- /dev/null +++ b/.changeset/curvy-timers-decide.md @@ -0,0 +1,6 @@ +--- +'@emotion/styled-base': major +'@emotion/styled': major +--- + +Remove support for deprecated `innerRef` prop diff --git a/.changeset/two-baboons-mate.md b/.changeset/two-baboons-mate.md new file mode 100644 index 000000000..87ff37858 --- /dev/null +++ b/.changeset/two-baboons-mate.md @@ -0,0 +1,11 @@ +--- +'@emotion/core': major +'emotion-theming': major +'@emotion/native': major +'@emotion/primitives-core': major +'@emotion/primitives': major +'@emotion/styled-base': major +'@emotion/styled': major +--- + +Use hooks internally for improved bundle size and a better tree in React DevTools diff --git a/.github/ISSUE_TEMPLATE/--documentation-issue.md b/.github/ISSUE_TEMPLATE/--documentation-issue.md index f6287ec84..18b401494 100644 --- a/.github/ISSUE_TEMPLATE/--documentation-issue.md +++ b/.github/ISSUE_TEMPLATE/--documentation-issue.md @@ -24,6 +24,6 @@ assignees: '' diff --git a/.github/ISSUE_TEMPLATE/--feature-request.md b/.github/ISSUE_TEMPLATE/--feature-request.md index a7369d6b7..1e5662df3 100644 --- a/.github/ISSUE_TEMPLATE/--feature-request.md +++ b/.github/ISSUE_TEMPLATE/--feature-request.md @@ -6,7 +6,6 @@ labels: feature request, needs triage assignees: '' --- - **The problem** diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index eeb8e591b..9c0e1e1d9 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -15,22 +15,27 @@ merge of your pull request! --> + **What**: + **Why**: + **How**: + **Checklist**: + + - [ ] Documentation - [ ] Tests - [ ] Code complete - [ ] Changeset - diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx index d3abce3ed..a1ebe2504 100644 --- a/docs/css-prop.mdx +++ b/docs/css-prop.mdx @@ -13,11 +13,11 @@ There are 2 ways to get started with the `css` prop. Both methods result in the same compiled code. After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`. - -| | Input | Output | + +| | Input | Output | | ------ | -------------------------- | --------------------------------------------------- | | Before | `` | `React.createElement('img', { src: 'avatar.png' })` | -| After | `` | `jsx('img', { src: 'avatar.png' })` | +| After | `` | `jsx('img', { src: 'avatar.png' })` | #### Babel Preset diff --git a/package.json b/package.json index 4516471b9..e50824d27 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "release": "yarn build && changeset publish" }, "resolutions": { - "**/react": "16.8.1", - "**/react-dom": "16.8.1", + "**/react": "16.11.0", + "**/react-dom": "16.11.0", "**/browserslist": "^3.2.8", "**/graphql-type-json": "0.2.4" }, @@ -174,10 +174,10 @@ "@manypkg/cli": "^0.5.2", "@mdx-js/mdx": "^1.1.0", "@mdx-js/react": "^1.0.27", - "@testing-library/react": "^8.0.2", + "@testing-library/react": "^9.3.2", "@types/jest": "^23.0.2", "@types/node": "^10.11.4", - "@types/react": "^16.8.20", + "@types/react": "^16.9.11", "babel-check-duplicated-nodes": "^1.0.0", "babel-core": "^6.26.3", "babel-eslint": "^8.2.3", @@ -236,9 +236,9 @@ "puppeteer": "^1.6.0", "raf": "^3.4.0", "razzle": "^2.4.0", - "react": "^16.5.2", + "react": "^16.11.0", "react-art": "^16.5.2", - "react-dom": "^16.5.2", + "react-dom": "^16.11.0", "react-helmet": "^5.2.0", "react-icons": "^2.2.7", "react-live": "1.10.0", @@ -247,7 +247,7 @@ "react-primitives": "^0.7.0", "react-router-dom": "^4.2.2", "react-scripts": "1.1.5", - "react-test-renderer": "^16.3.2", + "react-test-renderer": "16.8.6", "stylis": "3.5.4", "stylis-rule-sheet": "^0.0.10", "svg-tag-names": "^1.1.1", diff --git a/packages/core/__tests__/class-names.js b/packages/core/__tests__/class-names.js index 09da3122c..ef9ca1c9c 100644 --- a/packages/core/__tests__/class-names.js +++ b/packages/core/__tests__/class-names.js @@ -35,7 +35,6 @@ it('should get the theme', () => { ) - expect(tree.toJSON()).toMatchSnapshot() }) diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js index 467bf3fba..37986765b 100644 --- a/packages/core/__tests__/css.js +++ b/packages/core/__tests__/css.js @@ -50,7 +50,6 @@ test('theming with the css prop', () => {

({ color: theme.primary })} /> ) - expect(tree.toJSON()).toMatchSnapshot() }) diff --git a/packages/core/__tests__/global-insertion-after-others.js b/packages/core/__tests__/global-insertion-after-others.js new file mode 100644 index 000000000..b87819d6d --- /dev/null +++ b/packages/core/__tests__/global-insertion-after-others.js @@ -0,0 +1,33 @@ +/** @jsx jsx */ +import { jsx, Global } from '@emotion/core' +import { render } from '@testing-library/react' + +let getDataAttributes = () => + Array.from(document.querySelectorAll('style[data-emotion]'), x => + x.getAttribute('data-emotion') + ) + +test('Global style element insertion after insertion of other styles', () => { + let Comp = ({ second }) => ( +
+
+ {second && ( + + )} +
+ ) + let { rerender } = render() + expect(getDataAttributes()).toEqual(['css']) + rerender() + expect(getDataAttributes()).toEqual(['css-global', 'css']) +}) diff --git a/packages/core/package.json b/packages/core/package.json index 95978bd8c..aac085d56 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -27,17 +27,17 @@ "@emotion/utils": "0.11.2" }, "peerDependencies": { - "react": ">=16.3.0" + "react": ">=16.8.0" }, "devDependencies": { "@emotion/styled": "^11.0.0-next.1", - "@types/react": "^16.8.20", + "@types/react": "^16.9.11", "dtslint": "^0.3.0", "emotion": "^11.0.0-next.0", "emotion-server": "^11.0.0-next.0", "emotion-theming": "^11.0.0-next.1", "html-tag-names": "^1.1.2", - "react": "^16.5.2", + "react": "^16.11.0", "svg-tag-names": "^1.1.1" }, "repository": "https://github.com/emotion-js/emotion/tree/master/packages/core", diff --git a/packages/core/src/class-names.js b/packages/core/src/class-names.js index e99313b4d..5e66a2cd3 100644 --- a/packages/core/src/class-names.js +++ b/packages/core/src/class-names.js @@ -1,5 +1,6 @@ // @flow import * as React from 'react' +import { useContext } from 'react' import { getRegisteredStyles, insertStyles } from '@emotion/utils' import { serializeStyles } from '@emotion/serialize' import { withEmotionCache, ThemeContext } from './context' @@ -71,65 +72,63 @@ function merge( type Props = { children: ({ - css: (...args: Array) => string, + css: (...args: any) => string, cx: (...args: Array) => string, theme: Object }) => React.Node } -export const ClassNames = withEmotionCache((props, context) => { - return ( - - {theme => { - let rules = '' - let serializedHashes = '' - let hasRendered = false +export const ClassNames: React.AbstractComponent = withEmotionCache( + (props, cache) => { + let rules = '' + let serializedHashes = '' + let hasRendered = false - let css = (...args: Array) => { - if (hasRendered && process.env.NODE_ENV !== 'production') { - throw new Error('css can only be used during render') - } - let serialized = serializeStyles(args, context.registered) - if (isBrowser) { - insertStyles(context, serialized, false) - } else { - let res = insertStyles(context, serialized, false) - if (res !== undefined) { - rules += res - } - } - if (!isBrowser) { - serializedHashes += ` ${serialized.name}` - } - return `${context.key}-${serialized.name}` - } - let cx = (...args: Array) => { - if (hasRendered && process.env.NODE_ENV !== 'production') { - throw new Error('cx can only be used during render') - } - return merge(context.registered, css, classnames(args)) - } - let content = { css, cx, theme } - let ele = props.children(content) - hasRendered = true - if (!isBrowser && rules.length !== 0) { - return ( - - + + + + + +
+ + +`; + +exports[`array 2`] = ` + + + +
+ + +`; + exports[`basic 1`] = ` diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js index 1fdc38184..3fa73a2f6 100644 --- a/packages/core/__tests__/css.js +++ b/packages/core/__tests__/css.js @@ -52,6 +52,16 @@ test('theming with the css prop', () => { expect(tree.toJSON()).toMatchSnapshot() }) +test('theming with the array css prop', () => { + const tree = renderer.create( + +
({ color: theme.primary }), { display: 'flex' }]} /> + + ) + + expect(tree.toJSON()).toMatchSnapshot() +}) + test('object with false', () => { const tree = renderer.create(
diff --git a/packages/core/__tests__/global-with-theme.js b/packages/core/__tests__/global-with-theme.js index 812ec0a91..62cc5d874 100644 --- a/packages/core/__tests__/global-with-theme.js +++ b/packages/core/__tests__/global-with-theme.js @@ -29,3 +29,20 @@ test('basic', () => { unmountComponentAtNode(document.getElementById('root')) expect(document.documentElement).toMatchSnapshot() }) + +test('array', () => { + render( + + ({ html: { backgroundColor: theme.color } }), + theme => ({ html: { fontSize: theme.fontSize } }) + ]} + /> + , // $FlowFixMe + document.getElementById('root') + ) + expect(document.documentElement).toMatchSnapshot() + unmountComponentAtNode(document.getElementById('root')) + expect(document.documentElement).toMatchSnapshot() +}) diff --git a/packages/core/src/global.js b/packages/core/src/global.js index 7d907ef14..0ab8bf125 100644 --- a/packages/core/src/global.js +++ b/packages/core/src/global.js @@ -38,11 +38,13 @@ export let Global: React.AbstractComponent< } let styles = props.styles - let serialized = serializeStyles([ - typeof styles === 'function' - ? styles(React.useContext(ThemeContext)) - : styles - ]) + let serialized = serializeStyles( + [styles], + undefined, + typeof styles === 'function' || Array.isArray(styles) + ? React.useContext(ThemeContext) + : undefined + ) if (!isBrowser) { let serializedNames = serialized.name diff --git a/packages/core/src/jsx.js b/packages/core/src/jsx.js index 2fda56cf0..53fa03a68 100644 --- a/packages/core/src/jsx.js +++ b/packages/core/src/jsx.js @@ -20,10 +20,6 @@ let hasOwnProperty = Object.prototype.hasOwnProperty let Emotion = withEmotionCache((props, cache, ref) => { let cssProp = props.css - if (typeof cssProp === 'function') { - cssProp = cssProp(React.useContext(ThemeContext)) - } - // so that using `css` from `emotion` and passing the result to the css prop works // not passing the registered cache to serializeStyles because it would // make certain babel optimisations not possible @@ -45,7 +41,13 @@ let Emotion = withEmotionCache((props, cache, ref) => { className = `${props.className} ` } - let serialized = serializeStyles(registeredStyles) + let serialized = serializeStyles( + registeredStyles, + undefined, + typeof cssProp === 'function' || Array.isArray(cssProp) + ? React.useContext(ThemeContext) + : undefined + ) if ( process.env.NODE_ENV !== 'production' && From c6431074cf52a4bb64587c86ce5d42fe2d49230b Mon Sep 17 00:00:00 2001 From: Tom Date: Sat, 7 Dec 2019 23:03:20 +0200 Subject: [PATCH 048/176] Refactor TS types to use builtin Theme interface which can be augmented by consumers (#1609) * Updated types to support global Theme definition * Updated documentation to reflect new theme typings * Simplified MuiTheme import syntax in docs * Use previous theme declaration in docs - [side-effect] Updated back to 2 space indentation * Update Button.tsx import declaration for styled * Updated type definitions to default to any if not defined * Quick pass at removing theme generic param * Fixed issue with Global * Fixed most of the test issues - Added TODO for one possible issue * Updated global Theme type declaration to module specific * Removed exports from test files * Use the incomplete theme prop testcase - Add test case for fully overriding theme * Added note about where styled tests get their theme declaration from * tweak docs * Remove InterpolationWithTheme type * Move adding Theme to Styled interpolations inline (and not as part of StyleProps) * Cleanup Interpolation-related types * Add changeset --- .changeset/four-cars-tell.md | 15 ++++++ .changeset/tricky-bears-hope.md | 5 ++ docs/typescript.mdx | 49 ++++++++++------- packages/core/types/index.d.ts | 40 ++++++-------- packages/core/types/tests-theming.tsx | 69 +++--------------------- packages/core/types/tests.tsx | 28 +++++----- packages/core/types/theming.d.ts | 29 +++++----- packages/create-emotion/types/index.d.ts | 22 ++++---- packages/emotion/types/index.d.ts | 7 ++- packages/serialize/types/index.d.ts | 54 +++++++------------ packages/serialize/types/tests.ts | 11 ++-- packages/styled/types/base.d.ts | 34 ++++++------ packages/styled/types/index.d.ts | 11 ++-- packages/styled/types/tests-base.tsx | 11 ++++ packages/styled/types/tests.tsx | 40 ++++++-------- 15 files changed, 185 insertions(+), 240 deletions(-) create mode 100644 .changeset/four-cars-tell.md create mode 100644 .changeset/tricky-bears-hope.md diff --git a/.changeset/four-cars-tell.md b/.changeset/four-cars-tell.md new file mode 100644 index 000000000..bd1a203ce --- /dev/null +++ b/.changeset/four-cars-tell.md @@ -0,0 +1,15 @@ +--- +'@emotion/core': major +'@emotion/styled': major +--- + +Reworked TypeScript definitions so it's easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment builtin Theme interface like this: + +```ts +declare module '@emotion/core' { + export interface Theme { + primaryColor: string + secondaryColor: string + } +} +``` diff --git a/.changeset/tricky-bears-hope.md b/.changeset/tricky-bears-hope.md new file mode 100644 index 000000000..3f296af40 --- /dev/null +++ b/.changeset/tricky-bears-hope.md @@ -0,0 +1,5 @@ +--- +'@emotion/serialize': minor +--- + +Reworked Interpolation-related types. Correct types should now be provided to all flavours of emotion. diff --git a/docs/typescript.mdx b/docs/typescript.mdx index 03042a6c9..7332791cf 100644 --- a/docs/typescript.mdx +++ b/docs/typescript.mdx @@ -247,35 +247,34 @@ const App = () => ( ### Define a Theme -By default, `props.theme` has an `any` type annotation and works without any errors. -However, you can define a theme type by creating another `styled` instance. - -_styled.tsx_ - -```tsx -import styled, { CreateStyled } from '@emotion/styled' -import { useTheme, ThemeProvider, EmotionTheming } from '@emotion/core' - -type Theme = { - color: { - primary: string - positive: string - negative: string +By default, `props.theme` is an empty object because it's the only thing that is type-safe as a default. +You can define a theme type by extending our type declarations via your own declarations file. + +_emotion.d.ts_ + +```typescript +declare module '@emotion/core' { + export interface Theme { + color: { + primary: string + positive: string + negative: string + } } - // ... } -export default styled as CreateStyled +// You are also able to use a 3rd party theme this way: +import { MuiTheme } from 'material-ui' -// You can also create themed versions of all the other theme helpers and hooks -const { ThemeProvider, useTheme } = { ThemeProvider, useTheme } as EmotionTheming -export { ThemeProvider, useTheme } +declare module '@emotion/core' { + export interface Theme extends MuiTheme {} +} ``` _Button.tsx_ ```tsx -import styled from '../path/to/styled' +import styled from '@emotion/styled' const Button = styled('button')` padding: 20px; @@ -286,6 +285,16 @@ const Button = styled('button')` export default Button ``` +If you were previously relying on `theme` being an `any` type, you have to restore compatibility with: + +_emotion.d.ts_ + +```ts +declare module '@emotion/core' { + export interface Theme extends Record {} +} +``` + ### TypeScript < 2.9 For Typescript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947. diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index bb821e8d2..904075f36 100644 --- a/packages/core/types/index.d.ts +++ b/packages/core/types/index.d.ts @@ -10,7 +10,6 @@ import { FunctionInterpolation, Interpolation, Keyframes, - ObjectInterpolation, SerializedStyles } from '@emotion/serialize' import { @@ -32,13 +31,15 @@ export { EmotionCache, FunctionInterpolation, Interpolation, - ObjectInterpolation, SerializedStyles } export * from './theming' export * from './helper' +// tslint:disable-next-line: no-empty-interface +export interface Theme {} + export const ThemeContext: Context export const CacheProvider: Provider export function withEmotionCache( @@ -53,26 +54,21 @@ export function css( ): SerializedStyles export function css(...args: Array): SerializedStyles -export type InterpolationWithTheme = - | Interpolation - | ((theme: Theme) => Interpolation) - -export interface GlobalProps { - styles: InterpolationWithTheme +export interface GlobalProps { + styles: Interpolation } + /** * @desc * JSX generic are supported only after TS@2.9 */ -export function Global( - props: GlobalProps -): ReactElement +export function Global(props: GlobalProps): ReactElement export function keyframes( template: TemplateStringsArray, - ...args: Array + ...args: Array ): Keyframes -export function keyframes(...args: Array): Keyframes +export function keyframes(...args: Array): Keyframes export interface ArrayClassNamesArg extends Array {} export type ClassNamesArg = @@ -83,26 +79,24 @@ export type ClassNamesArg = | { [className: string]: boolean | null | undefined } | ArrayClassNamesArg -export interface ClassNamesContent { - css(template: TemplateStringsArray, ...args: Array): string - css(...args: Array): string +export interface ClassNamesContent { + css(template: TemplateStringsArray, ...args: Array): string + css(...args: Array): string cx(...args: Array): string theme: Theme } -export interface ClassNamesProps { - children(content: ClassNamesContent): ReactNode +export interface ClassNamesProps { + children(content: ClassNamesContent): ReactNode } /** * @desc * JSX generic are supported only after TS@2.9 */ -export function ClassNames( - props: ClassNamesProps -): ReactElement +export function ClassNames(props: ClassNamesProps): ReactElement declare module 'react' { interface DOMAttributes { - css?: InterpolationWithTheme + css?: Interpolation } } @@ -114,7 +108,7 @@ declare global { */ interface IntrinsicAttributes { - css?: InterpolationWithTheme + css?: Interpolation } } } diff --git a/packages/core/types/tests-theming.tsx b/packages/core/types/tests-theming.tsx index d43588cef..84ae7f167 100644 --- a/packages/core/types/tests-theming.tsx +++ b/packages/core/types/tests-theming.tsx @@ -2,20 +2,9 @@ // TypeScript Version: 3.1 import * as React from 'react' -import { - useTheme, - ThemeProvider, - withTheme, - EmotionTheming, - WithTheme -} from '@emotion/core' -import styled, { CreateStyled } from '@emotion/styled' -import { Interpolation, ObjectInterpolation } from '@emotion/styled/base' - -interface Theme { - primary: string - secondary: string -} +import { useTheme, ThemeProvider, withTheme, Theme } from '@emotion/core' +import { Interpolation, CSSObject } from '@emotion/styled/base' + declare const theme: Theme interface Props { @@ -48,8 +37,6 @@ class CompCWithDefault extends React.Component { { const theme: Theme = useTheme() - - const themeFail: Theme = useTheme() // $ExpectError } const ThemedFCWithDefault = withTheme(CompFCWithDefault) @@ -60,23 +47,6 @@ const ThemedCompWithDefault = withTheme(CompCWithDefault) ; ; -const { ThemeProvider: TypedThemeProvider, withTheme: typedWithTheme } = { - ThemeProvider, - withTheme -} as EmotionTheming -; -// $ExpectError -; - -typedWithTheme(CompFC) - -/** - * @todo - * Following line should report an error. - */ - -typedWithTheme((props: { value: number }) => null) - { interface Book { kind: 'book' @@ -102,34 +72,10 @@ typedWithTheme((props: { value: number }) => null) ; ; ; // $ExpectError - ; // $ExpectError } -const themedStyled = styled as CreateStyled - -const StyledCompC = themedStyled(WrappedCompC)({}) -const AdditionallyStyledCompC = themedStyled(StyledCompC)({}) -; -; - -const StyledDiv = themedStyled('div')({}) -; -// $ExpectError -; -const AdditionallyStyledDiv = themedStyled(StyledDiv)({}) -; -// $ExpectError -; - -const StyledDiv2 = themedStyled.div({}) -; -// $ExpectError -; - -export type StyleDefinition = Interpolation> -export type ObjectStyleDefinition = ObjectInterpolation< - WithTheme -> +type StyleDefinition = Interpolation<{ theme: Theme }> +type ObjectStyleDefinition = CSSObject const style: StyleDefinition = ({ theme }) => ({ color: theme.primary @@ -139,7 +85,4 @@ const style2: ObjectStyleDefinition = { } // Can use ThemeProvider -; -; -// $ExpectError -; +; diff --git a/packages/core/types/tests.tsx b/packages/core/types/tests.tsx index da5543284..0c178666c 100644 --- a/packages/core/types/tests.tsx +++ b/packages/core/types/tests.tsx @@ -2,20 +2,25 @@ import { ComponentClass } from 'react' import { ClassNames, - ClassNamesContent, Global, css, jsx, keyframes, withEmotionCache } from '@emotion/core' -; -interface TestTheme0 { - resetStyle: any +declare module '@emotion/core' { + // tslint:disable-next-line: strict-export-declare-modifiers + export interface Theme { + primary: string + secondary: string + primaryColor: string + secondaryColor: string + } } -; [theme.resetStyle]} /> +; +; [theme.primaryColor]} /> declare const getRandomColor: () => string @@ -92,14 +97,8 @@ const anim1 = keyframes` }} world="of-world" /> - -interface TestTheme1 { - primaryColor: string - secondaryColor: string -} - ; - {({ css, cx, theme }: ClassNamesContent) => { + {({ css, cx, theme }) => { return (
@@ -121,3 +120,8 @@ interface TestTheme1 { ) }} +;
css` + color: ${theme.secondaryColor}; + `} +/> diff --git a/packages/core/types/theming.d.ts b/packages/core/types/theming.d.ts index 87766f642..b3529781d 100644 --- a/packages/core/types/theming.d.ts +++ b/packages/core/types/theming.d.ts @@ -2,37 +2,36 @@ // TypeScript Version: 3.1 import * as React from 'react' +import { Theme } from '@emotion/core' import { DistributiveOmit, PropsOf } from './helper' - -export interface ThemeProviderProps { +import { + StyledComponent, + StyledOptions, + CreateStyledComponent, + StyledTags +} from '@emotion/styled' + +export interface ThemeProviderProps { theme: Partial | ((outerTheme: Theme) => Theme) children?: React.ReactNode } -export interface ThemeProvider { - (props: ThemeProviderProps): React.ReactElement +export interface ThemeProvider { + (props: ThemeProviderProps): React.ReactElement } -export type useTheme = () => T - -export type withTheme = < +export type withTheme = < C extends React.ComponentType> >( component: C ) => React.FC, 'theme'> & { theme?: Theme }> -export const ThemeProvider: ThemeProvider +export function useTheme(): Theme -export const useTheme: useTheme +export const ThemeProvider: ThemeProvider export const withTheme: withTheme -export interface EmotionTheming { - ThemeProvider: ThemeProvider - useTheme: useTheme - withTheme: withTheme -} - export type WithTheme = P extends { theme: infer Theme } ? P & { theme: Exclude } : P & { theme: T } diff --git a/packages/create-emotion/types/index.d.ts b/packages/create-emotion/types/index.d.ts index 9b29f7b16..a2031ebc1 100644 --- a/packages/create-emotion/types/index.d.ts +++ b/packages/create-emotion/types/index.d.ts @@ -2,17 +2,17 @@ // TypeScript Version: 2.8 import { EmotionCache, Options } from '@emotion/cache' -import { Interpolation } from '@emotion/serialize' +import { CSSInterpolation } from '@emotion/serialize' import { StyleSheet } from '@emotion/sheet' export { - ArrayInterpolation, + CSSInterpolation, + ArrayCSSInterpolation, ComponentSelector, - FunctionInterpolation, - ObjectInterpolation + CSSObject } from '@emotion/serialize' -export { EmotionCache, Interpolation, Options, StyleSheet } +export { EmotionCache, Options, StyleSheet } export interface ArrayClassNamesArg extends Array {} export type ClassNamesArg = @@ -24,21 +24,21 @@ export type ClassNamesArg = | ArrayClassNamesArg export interface Emotion { - css(template: TemplateStringsArray, ...args: Array): string - css(...args: Array): string + css(template: TemplateStringsArray, ...args: Array): string + css(...args: Array): string cx(...classNames: Array): string flush(): void hydrate(ids: Array): void injectGlobal( template: TemplateStringsArray, - ...args: Array + ...args: Array ): void - injectGlobal(...args: Array): void + injectGlobal(...args: Array): void keyframes( template: TemplateStringsArray, - ...args: Array + ...args: Array ): string - keyframes(...args: Array): string + keyframes(...args: Array): string sheet: StyleSheet cache: EmotionCache merge(className: string): string diff --git a/packages/emotion/types/index.d.ts b/packages/emotion/types/index.d.ts index 862779e2b..348736c6a 100644 --- a/packages/emotion/types/index.d.ts +++ b/packages/emotion/types/index.d.ts @@ -5,13 +5,12 @@ import { Emotion } from 'create-emotion' export { ArrayClassNamesArg, - ArrayInterpolation, + ArrayCSSInterpolation, ClassNamesArg, ComponentSelector, EmotionCache, - FunctionInterpolation, - Interpolation, - ObjectInterpolation, + CSSInterpolation, + CSSObject, StyleSheet } from 'create-emotion' diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts index 606bb7545..d849db387 100644 --- a/packages/serialize/types/index.d.ts +++ b/packages/serialize/types/index.d.ts @@ -1,6 +1,7 @@ // Definitions by: Junyoung Clare Jang // TypeScript Version: 2.8 +import { Theme } from '@emotion/core' import { RegisteredCache, SerializedStyles } from '@emotion/utils' import * as CSS from 'csstype' @@ -12,19 +13,12 @@ export type CSSPropertiesWithMultiValues = { | CSSProperties[K] | Array> } -/** - * @desc Following type exists for autocompletion of key. - */ -export type CSSPseudos = { [K in CSS.Pseudos]?: ObjectInterpolation } -export interface CSSOthersObject { - [propertiesName: string]: Interpolation -} -export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject } +export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject } export interface ArrayCSSInterpolation extends Array {} -export type CSSInterpolation = +export type InterpolationPrimitive = | null | undefined | boolean @@ -34,16 +28,17 @@ export type CSSInterpolation = | Keyframes | SerializedStyles | CSSObject - | ArrayCSSInterpolation -export interface CSSOthersObjectForCSSObject { +export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation + +export interface CSSOthersObject { [propertiesName: string]: CSSInterpolation } export interface CSSObject extends CSSPropertiesWithMultiValues, - CSSPseudosForCSSObject, - CSSOthersObjectForCSSObject {} + CSSPseudos, + CSSOthersObject {} export interface ComponentSelector { __emotion_styles: any @@ -56,31 +51,20 @@ export type Keyframes = { toString: () => string } & string -export interface ArrayInterpolation extends Array> {} -export interface ObjectInterpolation - extends CSSPropertiesWithMultiValues, - CSSPseudos, - CSSOthersObject {} +export interface ArrayInterpolation + extends Array> {} -export interface FunctionInterpolation { - (mergedProps: MergedProps): Interpolation +export interface FunctionInterpolation { + (props: Props): Interpolation } -export type Interpolation = - | null - | undefined - | boolean - | number - | string - | ComponentSelector - | Keyframes - | SerializedStyles - | ArrayInterpolation - | ObjectInterpolation - | FunctionInterpolation +export type Interpolation = + | InterpolationPrimitive + | ArrayInterpolation + | FunctionInterpolation -export function serializeStyles( - args: Array>, +export function serializeStyles( + args: Array>, registered: RegisteredCache, - mergedProps?: MP + props?: Props ): SerializedStyles diff --git a/packages/serialize/types/tests.ts b/packages/serialize/types/tests.ts index bb4df5872..cffb64451 100644 --- a/packages/serialize/types/tests.ts +++ b/packages/serialize/types/tests.ts @@ -1,17 +1,12 @@ -import { - CSSObject, - ObjectInterpolation, - Keyframes, - serializeStyles -} from '@emotion/serialize' +import { CSSObject, Keyframes, serializeStyles } from '@emotion/serialize' declare const testTemplateStringsArray: TemplateStringsArray declare const testKeyframes: Keyframes -const testObjectInterpolation0: ObjectInterpolation = { +const testCSSObject0: CSSObject = { animation: testKeyframes } -const testObjectInterpolation1: ObjectInterpolation = { +const testCSSObject1: CSSObject = { animationName: testKeyframes } diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts index 92fe808fb..7c8d423fd 100644 --- a/packages/styled/types/base.d.ts +++ b/packages/styled/types/base.d.ts @@ -14,13 +14,12 @@ import * as React from 'react' import { ComponentSelector, Interpolation } from '@emotion/serialize' -import { PropsOf, DistributiveOmit } from '@emotion/core' +import { PropsOf, DistributiveOmit, Theme } from '@emotion/core' export { ArrayInterpolation, CSSObject, - FunctionInterpolation, - ObjectInterpolation + FunctionInterpolation } from '@emotion/serialize' export { ComponentSelector, Interpolation } @@ -73,7 +72,10 @@ export interface CreateStyledComponent< ( ...styles: Array< Interpolation< - ComponentProps & SpecificComponentProps & StyleProps & AdditionalProps + ComponentProps & + SpecificComponentProps & + StyleProps & + AdditionalProps & { theme: Theme } > > ): StyledComponent @@ -84,7 +86,10 @@ export interface CreateStyledComponent< template: TemplateStringsArray, ...styles: Array< Interpolation< - ComponentProps & SpecificComponentProps & AdditionalProps & StyleProps + ComponentProps & + SpecificComponentProps & + StyleProps & + AdditionalProps & { theme: Theme } > > ): StyledComponent @@ -99,7 +104,7 @@ export interface CreateStyledComponent< * @example styled('div')({ width: 100 }) * @example styled('div')(props => ({ width: props.width }) */ -export interface CreateStyled { +export interface CreateStyled { < C extends React.ComponentType>, ForwardedProps extends keyof React.ComponentProps< @@ -108,16 +113,12 @@ export interface CreateStyled { >( component: C, options: FilteringStyledOptions, ForwardedProps> - ): CreateStyledComponent< - Pick, ForwardedProps> & { theme?: Theme }, - {}, - { theme: Theme } - > + ): CreateStyledComponent, ForwardedProps> & { theme?: Theme }> >>( component: C, options?: StyledOptions> - ): CreateStyledComponent & { theme?: Theme }, {}, { theme: Theme }> + ): CreateStyledComponent & { theme?: Theme }> < Tag extends keyof JSX.IntrinsicElements, @@ -127,18 +128,13 @@ export interface CreateStyled { options: FilteringStyledOptions ): CreateStyledComponent< { theme?: Theme }, - Pick, - { theme: Theme } + Pick > ( tag: Tag, options?: StyledOptions - ): CreateStyledComponent< - { theme?: Theme }, - JSX.IntrinsicElements[Tag], - { theme: Theme } - > + ): CreateStyledComponent<{ theme?: Theme }, JSX.IntrinsicElements[Tag]> } declare const styled: CreateStyled diff --git a/packages/styled/types/index.d.ts b/packages/styled/types/index.d.ts index 6e3cf4842..eb35d2570 100644 --- a/packages/styled/types/index.d.ts +++ b/packages/styled/types/index.d.ts @@ -1,6 +1,7 @@ // Definitions by: Junyoung Clare Jang // TypeScript Version: 3.2 +import { Theme } from '@emotion/core' import { CreateStyled as BaseCreateStyled, CreateStyledComponent } from './base' export { @@ -9,23 +10,19 @@ export { CSSObject, FunctionInterpolation, Interpolation, - ObjectInterpolation, StyledComponent, StyledOptions, CreateStyledComponent } from './base' -export type StyledTags = { +export type StyledTags = { [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent< { theme?: Theme }, - JSX.IntrinsicElements[Tag], - { theme: Theme } + JSX.IntrinsicElements[Tag] > } -export interface CreateStyled - extends BaseCreateStyled, - StyledTags {} +export interface CreateStyled extends BaseCreateStyled, StyledTags {} declare const styled: CreateStyled export default styled diff --git a/packages/styled/types/tests-base.tsx b/packages/styled/types/tests-base.tsx index 1f7ec293d..5df973ce3 100644 --- a/packages/styled/types/tests-base.tsx +++ b/packages/styled/types/tests-base.tsx @@ -2,6 +2,17 @@ import * as React from 'react' import styled from '@emotion/styled/base' import isPropValid from '@emotion/is-prop-valid' +declare module '@emotion/core' { + // tslint:disable-next-line: strict-export-declare-modifiers + export interface Theme { + primary: string + secondary: string + width: number + colors: { [key: string]: any } + backColor: string + } +} + // tslint:disable-next-line: interface-over-type-literal type ReactClassProps0 = { readonly column: boolean diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx index 54c71f792..7c084bdd7 100644 --- a/packages/styled/types/tests.tsx +++ b/packages/styled/types/tests.tsx @@ -1,19 +1,21 @@ import * as React from 'react' -import styled, { CreateStyled } from '@emotion/styled' +import styled from '@emotion/styled' -// $ExpectType CreateStyledComponent<{ theme?: any; }, DetailedHTMLProps, HTMLAnchorElement>, { theme: any; }> +// This file uses the same Theme declaration from tests-base.tsx + +// $ExpectType CreateStyledComponent<{ theme?: Theme | undefined; }, DetailedHTMLProps, HTMLAnchorElement>, {}> styled.a -// $ExpectType CreateStyledComponent<{ theme?: any; }, DetailedHTMLProps, HTMLBodyElement>, { theme: any; }> +// $ExpectType CreateStyledComponent<{ theme?: Theme | undefined; }, DetailedHTMLProps, HTMLBodyElement>, {}> styled.body -// $ExpectType CreateStyledComponent<{ theme?: any; }, DetailedHTMLProps, HTMLDivElement>, { theme: any; }> +// $ExpectType CreateStyledComponent<{ theme?: Theme | undefined; }, DetailedHTMLProps, HTMLDivElement>, {}> styled.div -// $ExpectType CreateStyledComponent<{ theme?: any; }, SVGProps, { theme: any; }> +// $ExpectType CreateStyledComponent<{ theme?: Theme | undefined; }, SVGProps, {}> styled.svg { styled.div<{ bar: string }>` color: ${props => { - // $ExpectType { theme?: any; } & ClassAttributes & HTMLAttributes & { bar: string; } & { theme: any; } + // $ExpectType { theme?: Theme | undefined; } & ClassAttributes & HTMLAttributes & { bar: string; } & { theme: Theme; } props return {} @@ -24,25 +26,17 @@ styled.svg const StyledDiv = styled.div({}) ; -// can specify theme for StyledTags -const themedStyled = styled as CreateStyled<{ themeProp: string }> -const StyledDiv3 = themedStyled.div` - color: ${props => props.theme.themeProp} -` -; -const StyledDiv2 = themedStyled.div(props => { - // $ExpectType { themeProp: string; } - props.theme - - return {} -}) -; - // Can override theme optionally on prop -; +; + +// Cannot override with incomplete theme on prop +// $ExpectError +; // $ExpectError -; +; const Container = styled.div((props: { test: number }) => ({ width: props.test @@ -60,7 +54,7 @@ const Container3 = styled.div(({ theme }) => ({ // who's type clashes with an intrinsic prop. // It makes use of a custom type guard on shouldForwardProp to exclude color -export const Box = styled('div', { +const Box = styled('div', { shouldForwardProp: ( propName ): propName is Exclude => From 0362fd2dc691e9084cf8b7b59df15377cc60dfdd Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 7 Dec 2019 22:13:36 +0100 Subject: [PATCH 049/176] Version Packages (#1663) --- .changeset/pre.json | 4 +++ packages/babel-plugin-emotion/CHANGELOG.md | 11 +++++++++ packages/babel-plugin-emotion/package.json | 4 +-- packages/babel-preset-css-prop/CHANGELOG.md | 11 +++++++++ packages/babel-preset-css-prop/package.json | 4 +-- packages/core/CHANGELOG.md | 27 +++++++++++++++++++++ packages/core/package.json | 10 ++++---- packages/create-emotion/CHANGELOG.md | 7 ++++++ packages/create-emotion/package.json | 4 +-- packages/emotion-server/CHANGELOG.md | 8 ++++++ packages/emotion-server/package.json | 8 +++--- packages/emotion/CHANGELOG.md | 8 ++++++ packages/emotion/package.json | 6 ++--- packages/native/CHANGELOG.md | 7 ++++++ packages/native/package.json | 4 +-- packages/primitives-core/CHANGELOG.md | 7 ++++++ packages/primitives-core/package.json | 6 ++--- packages/primitives/CHANGELOG.md | 8 ++++++ packages/primitives/package.json | 6 ++--- packages/serialize/CHANGELOG.md | 6 +++++ packages/serialize/package.json | 2 +- packages/styled/CHANGELOG.md | 22 +++++++++++++++++ packages/styled/package.json | 10 ++++---- scripts/benchmarks/CHANGELOG.md | 7 ++++++ scripts/benchmarks/package.json | 4 +-- 25 files changed, 167 insertions(+), 34 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 0216d09dc..2d749cc9b 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -42,17 +42,20 @@ "changesets": [ "long-apes-admire", "polite-tips-attend", + "clever-emus-watch", "cool-candles-lie", "curvy-timers-decide", "dull-carrots-enjoy", "five-paws-try", "five-spoons-roll", "flat-adults-add", + "four-cars-tell", "giant-oranges-impress", "gorgeous-steaks-report", "large-snakes-ring", "lazy-elephants-stare", "light-mice-relate", + "lovely-owls-remember", "mean-deers-confess", "modern-grapes-obey", "moody-stingrays-sort", @@ -66,6 +69,7 @@ "strange-pumas-suffer", "stupid-radios-draw", "tender-steaks-melt", + "tricky-bears-hope", "tricky-cameras-notice", "two-baboons-mate", "two-kiwis-give", diff --git a/packages/babel-plugin-emotion/CHANGELOG.md b/packages/babel-plugin-emotion/CHANGELOG.md index dc0b2d74c..274dd135e 100644 --- a/packages/babel-plugin-emotion/CHANGELOG.md +++ b/packages/babel-plugin-emotion/CHANGELOG.md @@ -1,5 +1,16 @@ # babel-plugin-emotion +## 11.0.0-next.8 + +### Minor Changes + +- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime. + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - @emotion/serialize@0.12.0-next.3 + ## 11.0.0-next.6 ### Major Changes diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index 57470d6e7..6e378d554 100644 --- a/packages/babel-plugin-emotion/package.json +++ b/packages/babel-plugin-emotion/package.json @@ -1,6 +1,6 @@ { "name": "babel-plugin-emotion", - "version": "11.0.0-next.6", + "version": "11.0.0-next.8", "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.", "main": "dist/babel-plugin-emotion.cjs.js", "module": "dist/babel-plugin-emotion.esm.js", @@ -18,7 +18,7 @@ "@babel/runtime": "^7.7.2", "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", - "@emotion/serialize": "^0.11.15-next.1", + "@emotion/serialize": "^0.12.0-next.3", "babel-plugin-macros": "^2.6.1", "convert-source-map": "^1.5.0", "escape-string-regexp": "^1.0.5", diff --git a/packages/babel-preset-css-prop/CHANGELOG.md b/packages/babel-preset-css-prop/CHANGELOG.md index 7639a1509..21932b20c 100644 --- a/packages/babel-preset-css-prop/CHANGELOG.md +++ b/packages/babel-preset-css-prop/CHANGELOG.md @@ -1,5 +1,16 @@ # @emotion/babel-preset-css-prop +## 11.0.0-next.8 + +### Minor Changes + +- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Adjust how arrays passed to css prop are transformed so function elements can be resolved at runtime. + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - babel-plugin-emotion@11.0.0-next.8 + ## 11.0.0-next.6 ### Minor Changes diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json index 1d350843d..5c116caea 100644 --- a/packages/babel-preset-css-prop/package.json +++ b/packages/babel-preset-css-prop/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/babel-preset-css-prop", - "version": "11.0.0-next.6", + "version": "11.0.0-next.8", "description": "A babel preset to automatically enable emotion's css prop", "main": "dist/babel-preset-css-prop.cjs.js", "module": "dist/babel-preset-css-prop.esm.js", @@ -13,7 +13,7 @@ "@babel/plugin-transform-react-jsx": "^7.7.0", "@babel/runtime": "^7.7.2", "@emotion/babel-plugin-jsx-pragmatic": "^0.1.4", - "babel-plugin-emotion": "^11.0.0-next.6" + "babel-plugin-emotion": "^11.0.0-next.8" }, "peerDependencies": { "@babel/core": "^7.0.0" diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 9cbc9cb1e..e3ef29bbd 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,32 @@ # @emotion/core +## 11.0.0-next.8 + +### Major Changes + +- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Reworked TypeScript definitions so it's easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment builtin Theme interface like this: + + ```ts + declare module '@emotion/core' { + export interface Theme { + primaryColor: string + secondaryColor: string + } + } + ``` + +### Minor Changes + +- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Support functions in arrays passed to css prop and Global's styles prop. This allows for composition of theme-accepting functions. + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - @emotion/styled@11.0.0-next.8 + - @emotion/serialize@0.12.0-next.3 + - emotion@11.0.0-next.8 + - emotion-server@11.0.0-next.8 + ## 11.0.0-next.7 ### Patch Changes diff --git a/packages/core/package.json b/packages/core/package.json index 43ee1db35..67c89b80e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/core", - "version": "11.0.0-next.7", + "version": "11.0.0-next.8", "main": "dist/core.cjs.js", "module": "dist/core.esm.js", "browser": { @@ -25,7 +25,7 @@ "@babel/runtime": "^7.7.2", "@emotion/cache": "^11.0.0-next.6", "@emotion/css": "^11.0.0-next.6", - "@emotion/serialize": "^0.11.15-next.2", + "@emotion/serialize": "^0.12.0-next.3", "@emotion/sheet": "0.10.0-next.0", "@emotion/utils": "0.11.2", "@emotion/weak-memoize": "0.2.4", @@ -42,11 +42,11 @@ }, "devDependencies": { "@babel/core": "^7.7.2", - "@emotion/styled": "^11.0.0-next.7", + "@emotion/styled": "^11.0.0-next.8", "@types/react": "^16.9.11", "dtslint": "^0.3.0", - "emotion": "^11.0.0-next.0", - "emotion-server": "^11.0.0-next.0", + "emotion": "^11.0.0-next.8", + "emotion-server": "^11.0.0-next.8", "html-tag-names": "^1.1.2", "react": "^16.11.0", "svg-tag-names": "^1.1.1" diff --git a/packages/create-emotion/CHANGELOG.md b/packages/create-emotion/CHANGELOG.md index 9c4cdbe84..48e4b7fc8 100644 --- a/packages/create-emotion/CHANGELOG.md +++ b/packages/create-emotion/CHANGELOG.md @@ -1,5 +1,12 @@ # create-emotion +## 11.0.0-next.8 + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - @emotion/serialize@0.12.0-next.3 + ## 11.0.0-next.6 ### Patch Changes diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json index a29ff2e68..fad5bc82f 100644 --- a/packages/create-emotion/package.json +++ b/packages/create-emotion/package.json @@ -1,6 +1,6 @@ { "name": "create-emotion", - "version": "11.0.0-next.6", + "version": "11.0.0-next.8", "description": "The Next Generation of CSS-in-JS.", "main": "dist/create-emotion.cjs.js", "module": "dist/create-emotion.esm.js", @@ -15,7 +15,7 @@ }, "dependencies": { "@emotion/cache": "^11.0.0-next.6", - "@emotion/serialize": "^0.11.15-next.1", + "@emotion/serialize": "^0.12.0-next.3", "@emotion/sheet": "0.10.0-next.0", "@emotion/utils": "0.11.2" }, diff --git a/packages/emotion-server/CHANGELOG.md b/packages/emotion-server/CHANGELOG.md index 9ad78952f..9c993f72c 100644 --- a/packages/emotion-server/CHANGELOG.md +++ b/packages/emotion-server/CHANGELOG.md @@ -1,5 +1,13 @@ # emotion-server +## 11.0.0-next.8 + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - babel-plugin-emotion@11.0.0-next.8 + - emotion@11.0.0-next.8 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/emotion-server/package.json b/packages/emotion-server/package.json index b5d52a885..28d0b2c48 100644 --- a/packages/emotion-server/package.json +++ b/packages/emotion-server/package.json @@ -1,6 +1,6 @@ { "name": "emotion-server", - "version": "11.0.0-next.0", + "version": "11.0.0-next.8", "description": "Extract and inline critical css with emotion for server side rendering.", "main": "dist/emotion-server.cjs.js", "types": "types/index.d.ts", @@ -16,13 +16,13 @@ "create-emotion-server": "11.0.0-next.0" }, "peerDependencies": { - "emotion": "^11.0.0-next.0" + "emotion": "^11.0.0-next.8" }, "devDependencies": { "@types/node": "^10.11.4", - "babel-plugin-emotion": "^11.0.0-next.0", + "babel-plugin-emotion": "^11.0.0-next.8", "dtslint": "^0.3.0", - "emotion": "^11.0.0-next.0" + "emotion": "^11.0.0-next.8" }, "author": "Kye Hohenberger", "homepage": "https://emotion.sh", diff --git a/packages/emotion/CHANGELOG.md b/packages/emotion/CHANGELOG.md index e90151354..5d24d676c 100644 --- a/packages/emotion/CHANGELOG.md +++ b/packages/emotion/CHANGELOG.md @@ -1,5 +1,13 @@ # emotion +## 11.0.0-next.8 + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - babel-plugin-emotion@11.0.0-next.8 + - create-emotion@11.0.0-next.8 + ## 11.0.0-next.0 ### Major Changes diff --git a/packages/emotion/package.json b/packages/emotion/package.json index 8768a770a..e0c1c15f9 100644 --- a/packages/emotion/package.json +++ b/packages/emotion/package.json @@ -1,6 +1,6 @@ { "name": "emotion", - "version": "11.0.0-next.0", + "version": "11.0.0-next.8", "description": "The Next Generation of CSS-in-JS.", "main": "dist/emotion.cjs.js", "module": "dist/emotion.esm.js", @@ -17,8 +17,8 @@ "test:typescript": "dtslint types" }, "dependencies": { - "babel-plugin-emotion": "^11.0.0-next.0", - "create-emotion": "^11.0.0-next.0" + "babel-plugin-emotion": "^11.0.0-next.8", + "create-emotion": "^11.0.0-next.8" }, "peerDependencies": { "@babel/core": "^7.0.0" diff --git a/packages/native/CHANGELOG.md b/packages/native/CHANGELOG.md index 2491d93b0..a53f23895 100644 --- a/packages/native/CHANGELOG.md +++ b/packages/native/CHANGELOG.md @@ -1,5 +1,12 @@ # @emotion/native +## 11.0.0-next.8 + +### Patch Changes + +- Updated dependencies []: + - @emotion/primitives-core@11.0.0-next.8 + ## 11.0.0-next.7 ### Patch Changes diff --git a/packages/native/package.json b/packages/native/package.json index efe946cfa..42c41d047 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/native", - "version": "11.0.0-next.7", + "version": "11.0.0-next.8", "description": "Style and render React Native components using emotion", "main": "dist/native.cjs.js", "module": "dist/native.esm.js", @@ -18,7 +18,7 @@ "react-native": "^0.57.0" }, "dependencies": { - "@emotion/primitives-core": "11.0.0-next.7" + "@emotion/primitives-core": "11.0.0-next.8" }, "peerDependencies": { "@babel/core": "^7.0.0", diff --git a/packages/primitives-core/CHANGELOG.md b/packages/primitives-core/CHANGELOG.md index 89d379f2f..797a40ca0 100644 --- a/packages/primitives-core/CHANGELOG.md +++ b/packages/primitives-core/CHANGELOG.md @@ -1,5 +1,12 @@ # @emotion/primitives-core +## 11.0.0-next.8 + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - @emotion/core@11.0.0-next.8 + ## 11.0.0-next.7 ### Patch Changes diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json index bd54908f1..ad8b2f473 100644 --- a/packages/primitives-core/package.json +++ b/packages/primitives-core/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/primitives-core", - "version": "11.0.0-next.7", + "version": "11.0.0-next.8", "description": "Shared utilities for emotion primitives and native", "main": "dist/primitives-core.cjs.js", "module": "dist/primitives-core.esm.js", @@ -16,11 +16,11 @@ "css-to-react-native": "^2.2.1" }, "peerDependencies": { - "@emotion/core": "^11.0.0-next.7", + "@emotion/core": "^11.0.0-next.8", "react": ">=16.8.0" }, "devDependencies": { - "@emotion/core": "^11.0.0-next.7", + "@emotion/core": "^11.0.0-next.8", "react": "^16.11.0" }, "homepage": "https://emotion.sh", diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md index 6823ef591..92f6829a7 100644 --- a/packages/primitives/CHANGELOG.md +++ b/packages/primitives/CHANGELOG.md @@ -1,5 +1,13 @@ # @emotion/primitives +## 11.0.0-next.8 + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - babel-plugin-emotion@11.0.0-next.8 + - @emotion/primitives-core@11.0.0-next.8 + ## 11.0.0-next.7 ### Patch Changes diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 94e0273e7..f65511bfc 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/primitives", - "version": "11.0.0-next.7", + "version": "11.0.0-next.8", "main": "dist/primitives.cjs.js", "module": "dist/primitives.esm.js", "scripts": { @@ -13,8 +13,8 @@ ], "dependencies": { "@emotion/is-prop-valid": "0.9.0-next.1", - "@emotion/primitives-core": "11.0.0-next.7", - "babel-plugin-emotion": "^11.0.0-next.6" + "@emotion/primitives-core": "11.0.0-next.8", + "babel-plugin-emotion": "^11.0.0-next.8" }, "peerDependencies": { "@babel/core": "^7.0.0", diff --git a/packages/serialize/CHANGELOG.md b/packages/serialize/CHANGELOG.md index 7300d0c54..fa81c45b3 100644 --- a/packages/serialize/CHANGELOG.md +++ b/packages/serialize/CHANGELOG.md @@ -1,5 +1,11 @@ # @emotion/serialize +## 0.12.0-next.3 + +### Minor Changes + +- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Reworked Interpolation-related types. Correct types should now be provided to all flavours of emotion. + ## 0.11.15-next.2 ### Patch Changes diff --git a/packages/serialize/package.json b/packages/serialize/package.json index 946af088b..ead3d208b 100644 --- a/packages/serialize/package.json +++ b/packages/serialize/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/serialize", - "version": "0.11.15-next.2", + "version": "0.12.0-next.3", "description": "serialization utils for emotion", "main": "dist/serialize.cjs.js", "module": "dist/serialize.esm.js", diff --git a/packages/styled/CHANGELOG.md b/packages/styled/CHANGELOG.md index 03b2705fb..0448b6c92 100644 --- a/packages/styled/CHANGELOG.md +++ b/packages/styled/CHANGELOG.md @@ -1,5 +1,27 @@ # @emotion/styled +## 11.0.0-next.8 + +### Major Changes + +- [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b) [#1600](https://github.com/emotion-js/emotion/pull/1600) Thanks [@joltmode](https://github.com/joltmode)! - Reworked TypeScript definitions so it's easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment builtin Theme interface like this: + + ```ts + declare module '@emotion/core' { + export interface Theme { + primaryColor: string + secondaryColor: string + } + } + ``` + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b), [`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - babel-plugin-emotion@11.0.0-next.8 + - @emotion/core@11.0.0-next.8 + - @emotion/serialize@0.12.0-next.3 + ## 11.0.0-next.7 ### Patch Changes diff --git a/packages/styled/package.json b/packages/styled/package.json index 0be18aece..225559443 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -1,6 +1,6 @@ { "name": "@emotion/styled", - "version": "11.0.0-next.7", + "version": "11.0.0-next.8", "description": "styled API for emotion", "main": "dist/styled.cjs.js", "module": "dist/styled.esm.js", @@ -13,13 +13,13 @@ "dependencies": { "@babel/runtime": "^7.7.2", "@emotion/is-prop-valid": "0.9.0-next.1", - "@emotion/serialize": "^0.11.15-next.2", + "@emotion/serialize": "^0.12.0-next.3", "@emotion/utils": "0.11.2", - "babel-plugin-emotion": "^11.0.0-next.6" + "babel-plugin-emotion": "^11.0.0-next.8" }, "peerDependencies": { "@babel/core": "^7.0.0", - "@emotion/core": "^11.0.0-next.7", + "@emotion/core": "^11.0.0-next.8", "react": ">=16.8.0" }, "peerDependenciesMeta": { @@ -29,7 +29,7 @@ }, "devDependencies": { "@babel/core": "^7.7.2", - "@emotion/core": "^11.0.0-next.7", + "@emotion/core": "^11.0.0-next.8", "dtslint": "^0.3.0", "react": "^16.11.0" }, diff --git a/scripts/benchmarks/CHANGELOG.md b/scripts/benchmarks/CHANGELOG.md index 2a1e5d4c6..8756500ed 100644 --- a/scripts/benchmarks/CHANGELOG.md +++ b/scripts/benchmarks/CHANGELOG.md @@ -1,5 +1,12 @@ # benchmarks +## 0.8.28-next.1 + +### Patch Changes + +- Updated dependencies [[`c643107`](https://github.com/emotion-js/emotion/commit/c6431074cf52a4bb64587c86ce5d42fe2d49230b)]: + - babel-plugin-emotion@11.0.0-next.8 + ## 0.8.28-next.0 ### Patch Changes diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json index 6ee3cf808..66fe047f4 100644 --- a/scripts/benchmarks/package.json +++ b/scripts/benchmarks/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "benchmarks", - "version": "0.8.28-next.0", + "version": "0.8.28-next.1", "scripts": { "start": "parcel src/index.html", "build": "parcel build src/index.html --public-url .", @@ -10,7 +10,7 @@ }, "dependencies": { "@babel/core": "^7.7.2", - "babel-plugin-emotion": "^11.0.0-next.0", + "babel-plugin-emotion": "^11.0.0-next.8", "babel-plugin-react-native-web": "^0.9.6", "d3-scale-chromatic": "^1.3.0", "http-server": "^0.11.1", From 0f3a2d340269c5b446fdc8dcf2b0a4e45d998ad2 Mon Sep 17 00:00:00 2001 From: Jake Ginnivan Date: Sun, 8 Dec 2019 17:53:54 +0800 Subject: [PATCH 050/176] =?UTF-8?q?Created=20additional=20overload=20to=20?= =?UTF-8?q?prevent=20AdditionalProps=20getting=20inferr=E2=80=A6=20(#1664)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Created additional overload to prevent AdditionalProps getting inferred as the composed component type Fixes #1655 * Added additional test showing additional props * Update .changeset/lucky-swans-kneel.md Co-Authored-By: Mateusz Burzyński --- .changeset/lucky-swans-kneel.md | 5 ++++ packages/styled/types/base.d.ts | 10 ++++++- packages/styled/types/tests.tsx | 53 +++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 .changeset/lucky-swans-kneel.md diff --git a/.changeset/lucky-swans-kneel.md b/.changeset/lucky-swans-kneel.md new file mode 100644 index 000000000..d458b0754 --- /dev/null +++ b/.changeset/lucky-swans-kneel.md @@ -0,0 +1,5 @@ +--- +'@emotion/styled': patch +--- + +Fixed issue when using "component as selector" in styled interpolations which caused the wrong type to be inferred. diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts index 7c8d423fd..64574bdd9 100644 --- a/packages/styled/types/base.d.ts +++ b/packages/styled/types/base.d.ts @@ -79,10 +79,18 @@ export interface CreateStyledComponent< > > ): StyledComponent + + ( + template: TemplateStringsArray, + ...styles: Array< + Interpolation + > + ): StyledComponent + /** * @typeparam AdditionalProps Additional props to add to your styled component */ - ( + ( template: TemplateStringsArray, ...styles: Array< Interpolation< diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx index 7c084bdd7..398f61531 100644 --- a/packages/styled/types/tests.tsx +++ b/packages/styled/types/tests.tsx @@ -80,3 +80,56 @@ const StyledOriginal = styled(Original, { // No more type conflict error ; + +const Label = styled.label`` +const Button = styled.button`` +const Input = styled.input` + & + ${Label}: { + margin-left: 3px; + } +` + +const Input2 = styled.input` + & + ${Label}: { + margin-left: 3px; + } + & + ${Button}: { + margin-left: 3px; + } +` + +const Input3 = styled.input({ + [`& + ${Label}`]: { + marginLeft: '3px' + } +}) + +interface AdditionalTest { + left: string +} +const Input4 = styled.input` + & + ${Label}: ${props => ({ + marginLeft: props.left +})} +` +;) => + console.log(evt.target.value) + } +/> +;) => + console.log(evt.target.value) + } +/> +;) => + console.log(evt.target.value) + } +/> +;) => + console.log(evt.target.value) + } +/> From 8b59959f0929799f050089b05cafb39ca2c57d2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Sun, 8 Dec 2019 11:02:01 +0100 Subject: [PATCH 051/176] Add handling of the css prop in syntax-preference rule (#1659) * Add handling of the css prop in syntax-preference rule * add changeset --- .changeset/silver-bulldogs-beg.md | 5 + package.json | 41 +- .../__tests__/__snapshots__/styled.js.snap | 9 +- .../styled-macro/__fixtures__/label.js | 1 + .../styled-macro/__snapshots__/index.js.snap | 9 +- packages/core/__tests__/css.js | 9 +- packages/core/src/class-names.js | 4 +- packages/core/src/jsx.js | 4 +- packages/create-emotion-server/src/inline.js | 1 + packages/eslint-plugin-emotion/.eslintrc | 5 - packages/eslint-plugin-emotion/package.json | 10 +- .../src/rules/syntax-preference.js | 219 +- .../test/rules/import-from-emotion.test.js | 10 +- .../test/rules/jsx-import.test.js | 6 +- .../test/rules/no-vanilla.test.js | 6 +- .../test/rules/styled-import.test.js | 6 +- .../test/rules/syntax-preference.test.js | 112 +- packages/sheet/src/index.js | 2 + packages/styled/src/base.js | 4 +- playgrounds/razzle/package.json | 2 +- playgrounds/razzle/src/App.js | 4 +- playgrounds/razzle/src/Home.js | 3 +- scripts/benchmarks/src/app/App.js | 8 +- scripts/benchmarks/src/app/Icons.js | 12 +- scripts/benchmarks/src/app/ReportCard.js | 10 +- .../src/cases/SierpinskiTriangle.js | 8 +- site/package.json | 1 - .../gatsby-ssr.js | 1 + .../gatsby-plugin-favicon-fork/gatsby-ssr.js | 24 +- site/src/components/DocWrapper.js | 20 +- site/src/components/SiteHeader.js | 8 +- site/src/components/live/compiler.js | 1 + site/src/components/live/index.js | 2 + site/src/pages/community.js | 4 +- yarn.lock | 2322 +++++++++++------ 35 files changed, 1941 insertions(+), 952 deletions(-) create mode 100644 .changeset/silver-bulldogs-beg.md delete mode 100644 packages/eslint-plugin-emotion/.eslintrc diff --git a/.changeset/silver-bulldogs-beg.md b/.changeset/silver-bulldogs-beg.md new file mode 100644 index 000000000..06889d664 --- /dev/null +++ b/.changeset/silver-bulldogs-beg.md @@ -0,0 +1,5 @@ +--- +'eslint-plugin-emotion': minor +--- + +Respect `syntax-preference` rule when using css prop. diff --git a/package.json b/package.json index 5818b92b4..78c2438de 100644 --- a/package.json +++ b/package.json @@ -62,19 +62,23 @@ ], "parser": "babel-eslint", "rules": { + "camelcase": 0, + "no-template-curly-in-string": 0, + "prefer-const": 0, + "no-unused-vars": 0, + "flowtype/define-flow-type": 2, + "import/no-duplicates": 0, "prettier/prettier": [ "error", { "parser": "flow" } ], - "react/prop-types": 0, + "react/jsx-curly-brace-presence": 0, + "react/jsx-handler-names": 0, "react/no-unused-prop-types": 0, - "standard/computed-property-even-spacing": 0, - "no-template-curly-in-string": 0, - "camelcase": 0, - "import/no-duplicates": 0, - "flowtype/define-flow-type": 2 + "react/prop-types": 0, + "standard/computed-property-even-spacing": 0 }, "env": { "browser": true @@ -204,19 +208,19 @@ "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.6.0", "enzyme-to-json": "^3.2.1", - "eslint": "^4.5.0", - "eslint-config-prettier": "^2.3.0", + "eslint": "^6.7.1", + "eslint-config-prettier": "^6.7.0", "eslint-config-react": "^1.1.7", - "eslint-config-standard": "^10.2.1", - "eslint-config-standard-react": "^5.0.0", - "eslint-plugin-flowtype": "^2.50.0", - "eslint-plugin-import": "^2.7.0", - "eslint-plugin-node": "^5.1.1", - "eslint-plugin-prettier": "^2.2.0", - "eslint-plugin-promise": "^3.5.0", - "eslint-plugin-react": "^7.3.0", - "eslint-plugin-react-hooks": "^1.0.1", - "eslint-plugin-standard": "^3.0.1", + "eslint-config-standard": "^14.1.0", + "eslint-config-standard-react": "^9.2.0", + "eslint-plugin-flowtype": "^4.5.2", + "eslint-plugin-import": "^2.18.2", + "eslint-plugin-node": "^10.0.0", + "eslint-plugin-prettier": "^3.1.1", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-react": "^7.16.0", + "eslint-plugin-react-hooks": "^2.3.0", + "eslint-plugin-standard": "^4.0.1", "flow-bin": "^0.110.0", "html-tag-names": "^1.1.2", "husky": "^3.0.9", @@ -237,7 +241,6 @@ "prettier": "1.14.3", "puppeteer": "^1.6.0", "raf": "^3.4.0", - "razzle": "^2.4.0", "react": "^16.11.0", "react-art": "^16.5.2", "react-dom": "^16.11.0", diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap index b7b664d27..6048579e2 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap @@ -265,6 +265,7 @@ let Avatar = _styled(\\"img\\", { exports[`emotion-babel-plugin styled label 1`] = ` "/** @jsx jsx */ +/* eslint-disable react/jsx-pascal-case */ import styled from '@emotion/styled' import { jsx } from '@emotion/core' @@ -293,6 +294,8 @@ import _styled from \\"@emotion/styled/base\\"; 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).\\"; } /** @jsx jsx */ + +/* eslint-disable react/jsx-pascal-case */ import { jsx } from '@emotion/core'; class Thing { @@ -305,7 +308,7 @@ class Thing { } : { name: \\"1lrxbo5\\", styles: \\"color:hotpink;\\", - map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUttQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); BadIdeaComponent = _styled(\\"div\\", { @@ -317,7 +320,7 @@ class Thing { } : { name: \\"d1m7sn\\", styles: \\"background:hotpink;\\", - map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVErQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMrQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); } @@ -333,7 +336,7 @@ class Thing { } : { name: \\"tokvmb\\", styles: \\"color:red;\\", - map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVpQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js b/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js index d6fbd2bb2..4def051ec 100644 --- a/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js +++ b/packages/babel-plugin-emotion/__tests__/styled-macro/__fixtures__/label.js @@ -1,4 +1,5 @@ /** @jsx jsx */ +/* eslint-disable react/jsx-pascal-case */ import styled from '@emotion/styled/macro' import { jsx } from '@emotion/core' diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap index 0770d6344..307e0e0ed 100644 --- a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap @@ -265,6 +265,7 @@ let Avatar = _styled(\\"img\\", { exports[`@emotion/styled.macro label 1`] = ` "/** @jsx jsx */ +/* eslint-disable react/jsx-pascal-case */ import styled from '@emotion/styled/macro' import { jsx } from '@emotion/core' @@ -293,6 +294,8 @@ import _styled from \\"@emotion/styled/base\\"; 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).\\"; } /** @jsx jsx */ + +/* eslint-disable react/jsx-pascal-case */ import { jsx } from '@emotion/core'; class Thing { @@ -305,7 +308,7 @@ class Thing { } : { name: \\"1lrxbo5\\", styles: \\"color:hotpink;\\", - map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUttQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); BadIdeaComponent = _styled(\\"div\\", { @@ -317,7 +320,7 @@ class Thing { } : { name: \\"d1m7sn\\", styles: \\"background:hotpink;\\", - map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVErQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMrQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); } @@ -333,7 +336,7 @@ class Thing { } : { name: \\"tokvmb\\", styles: \\"color:red;\\", - map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVpQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js index 3fa73a2f6..9b5a2ce92 100644 --- a/packages/core/__tests__/css.js +++ b/packages/core/__tests__/css.js @@ -194,16 +194,13 @@ test('autoLabel without babel', () => { test('autoLabel without babel (sanitized)', () => { let SomeComp$ = props => { return ( -
+
something
) } + + // eslint-disable-next-line react/jsx-pascal-case const tree = renderer.create() expect(tree.toJSON().props.className.endsWith('-SomeComp-')).toBe(true) diff --git a/packages/core/src/class-names.js b/packages/core/src/class-names.js index d488d9685..c1620befd 100644 --- a/packages/core/src/class-names.js +++ b/packages/core/src/class-names.js @@ -118,7 +118,7 @@ export const ClassNames: React.AbstractComponent< hasRendered = true if (!isBrowser && rules.length !== 0) { return ( - + <> + + + +`; + +exports[`StyleSheet should be able to rehydrate styles 2`] = ` + + + + + + + +`; + +exports[`StyleSheet should correctly position rehydrated styles when used with \`prepend\` option 1`] = ` + + + + + + + + + + + +`; + +exports[`StyleSheet should flush rehydrated styles 2`] = ` + + + + +`; + exports[`StyleSheet should insert a rule into the DOM when not in speedy 1`] = ` diff --git a/packages/sheet/__tests__/index.js b/packages/sheet/__tests__/index.js index 1caf083f1..4fb4ee925 100644 --- a/packages/sheet/__tests__/index.js +++ b/packages/sheet/__tests__/index.js @@ -126,4 +126,69 @@ describe('StyleSheet', () => { sheet.flush() head.removeChild(otherStyle) }) + + it('should be able to rehydrate styles', () => { + const fooStyle = document.createElement('style') + fooStyle.textContent = '.foo { color: hotpink; }' + const barStyle = document.createElement('style') + barStyle.textContent = '.bar { background-color: green; }' + const body = safeQuerySelector('body') + body.appendChild(fooStyle) + body.appendChild(barStyle) + + const sheet = new StyleSheet(defaultOptions) + expect(document.documentElement).toMatchSnapshot() + + sheet.rehydrate([fooStyle, barStyle]) + expect(document.documentElement).toMatchSnapshot() + + sheet.flush() + }) + + it('should flush rehydrated styles', () => { + const fooStyle = document.createElement('style') + fooStyle.textContent = '.foo { color: hotpink; }' + const barStyle = document.createElement('style') + barStyle.textContent = '.bar { background-color: green; }' + const body = safeQuerySelector('body') + body.appendChild(fooStyle) + body.appendChild(barStyle) + + const sheet = new StyleSheet(defaultOptions) + + sheet.rehydrate([fooStyle, barStyle]) + + sheet.insert(rule) + sheet.insert(rule2) + expect(document.documentElement).toMatchSnapshot() + + sheet.flush() + expect(document.documentElement).toMatchSnapshot() + }) + + it('should correctly position rehydrated styles when used with `prepend` option', () => { + const head = safeQuerySelector('head') + const otherStyle = document.createElement('style') + otherStyle.setAttribute('id', 'other') + head.appendChild(otherStyle) + + const fooStyle = document.createElement('style') + fooStyle.textContent = '.foo { color: hotpink; }' + const barStyle = document.createElement('style') + barStyle.textContent = '.bar { background-color: green; }' + const body = safeQuerySelector('body') + body.appendChild(fooStyle) + body.appendChild(barStyle) + + const sheet = new StyleSheet({ + ...defaultOptions, + prepend: true + }) + + sheet.rehydrate([fooStyle, barStyle]) + expect(document.documentElement).toMatchSnapshot() + + sheet.flush() + head.removeChild(otherStyle) + }) }) diff --git a/packages/sheet/src/index.js b/packages/sheet/src/index.js index 7d1059fce..1827bc5cc 100644 --- a/packages/sheet/src/index.js +++ b/packages/sheet/src/index.js @@ -84,20 +84,27 @@ export class StyleSheet { this.before = null } + _insertTag = (tag: HTMLStyleElement) => { + let before + if (this.tags.length === 0) { + before = this.prepend ? this.container.firstChild : this.before + } else { + before = this.tags[this.tags.length - 1].nextSibling + } + this.container.insertBefore(tag, before) + this.tags.push(tag) + } + + rehydrate(nodes: HTMLStyleElement[]) { + nodes.forEach(this._insertTag) + } + insert(rule: string) { // the max length is how many rules we have per style tag, it's 65000 in speedy mode // it's 1 in dev because we insert source maps that map a single rule to a location // and you can only have one source map per style tag if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { - let tag = createStyleElement(this) - let before - if (this.tags.length === 0) { - before = this.prepend ? this.container.firstChild : this.before - } else { - before = this.tags[this.tags.length - 1].nextSibling - } - this.container.insertBefore(tag, before) - this.tags.push(tag) + this._insertTag(createStyleElement(this)) } const tag = this.tags[this.tags.length - 1] @@ -113,10 +120,7 @@ export class StyleSheet { // this is the ultrafast version, works across browsers // the big drawback is that the css won't be editable in devtools sheet.insertRule( - rule, - // we need to insert @import rules before anything else - // otherwise there will be an error - // technically this means that the @import rules will + 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 diff --git a/packages/sheet/types/index.d.ts b/packages/sheet/types/index.d.ts index 3eac35b53..b956d9127 100644 --- a/packages/sheet/types/index.d.ts +++ b/packages/sheet/types/index.d.ts @@ -21,4 +21,5 @@ export class StyleSheet { constructor(options?: Options) insert(rule: string): void flush(): void + rehydrate(nodes: Array): void } From 1e4a741de6424d3d9c1f3ca9695e1953bed3a194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 20 Dec 2019 03:08:07 +0100 Subject: [PATCH 056/176] Removed mentions of `maxLength` option (#1697) --- .changeset/healthy-peaches-speak.md | 5 +++++ packages/sheet/README.md | 9 ++++----- packages/sheet/types/index.d.ts | 1 - 3 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 .changeset/healthy-peaches-speak.md diff --git a/.changeset/healthy-peaches-speak.md b/.changeset/healthy-peaches-speak.md new file mode 100644 index 000000000..574bb2579 --- /dev/null +++ b/.changeset/healthy-peaches-speak.md @@ -0,0 +1,5 @@ +--- +'@emotion/sheet': patch +--- + +Removed mentions of `maxLength` option in types & docs as it has been removed some time ago. diff --git a/packages/sheet/README.md b/packages/sheet/README.md index 0521832e9..5e37b465d 100644 --- a/packages/sheet/README.md +++ b/packages/sheet/README.md @@ -27,7 +27,7 @@ type Options = { key: string container: HTMLElement speedy?: boolean - maxLength?: number + prepend?: boolean } ``` @@ -47,9 +47,9 @@ This will be set as the value of the `data-emotion` attribute on the style tags This defines how rules are inserted. If it is true, rules will be inserted with [`insertRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) which is very fast but doesn't allow rules to be edited in DevTools. If it is false, rules will be inserted by appending text nodes to style elements which is much slower than insertRule but allows rules to be edited in DevTools. By default, speedy is enabled in production and disabled in development. -#### maxLength +#### prepend -This defines the number of rules that are inserted into each style tag. This generally shouldn't be modified. +This defines where rules are inserted into the `container`. By default they are appended but this can be changed by using `prepend: true` option. ### Methods @@ -77,8 +77,7 @@ document.head.appendChild(container) const sheet = new StyleSheet({ nonce: 'some-nonce', key: 'some-key', - container, - maxLength: 20 + container }) sheet.insert('html { color: hotpink; }') diff --git a/packages/sheet/types/index.d.ts b/packages/sheet/types/index.d.ts index b956d9127..5bc6b1b3a 100644 --- a/packages/sheet/types/index.d.ts +++ b/packages/sheet/types/index.d.ts @@ -14,7 +14,6 @@ export class StyleSheet { ctr: number tags: Array container: HTMLElement - maxLength: number key: string nonce?: string before?: Element | null From 4a89042993e3d2b6dce0f446b1b5df9ee70984e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Mon, 23 Dec 2019 00:08:52 +0100 Subject: [PATCH 057/176] Fix issue with sheet hydration in cache creation (#1699) --- .../__tests__/__snapshots__/hydration.js.snap | 20 +++++++++++++++++ packages/cache/__tests__/hydration.js | 22 +++++++++++++++++++ packages/cache/src/index.js | 4 +--- 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/packages/cache/__tests__/__snapshots__/hydration.js.snap b/packages/cache/__tests__/__snapshots__/hydration.js.snap index ef0840185..df0c6daac 100644 --- a/packages/cache/__tests__/__snapshots__/hydration.js.snap +++ b/packages/cache/__tests__/__snapshots__/hydration.js.snap @@ -12,3 +12,23 @@ exports[`it works 1`] = ` `; + +exports[`rehydrated styles to head can be flushed 1`] = ` + + + + + + +`; + +exports[`rehydrated styles to head can be flushed 2`] = ` + + + + +`; diff --git a/packages/cache/__tests__/hydration.js b/packages/cache/__tests__/hydration.js index 80900b5a6..b21ac9a03 100644 --- a/packages/cache/__tests__/hydration.js +++ b/packages/cache/__tests__/hydration.js @@ -3,6 +3,11 @@ import { safeQuerySelector } from 'test-utils' import hashString from '@emotion/hash' import createCache from '@emotion/cache' +beforeEach(() => { + safeQuerySelector('head').innerHTML = '' + safeQuerySelector('body').innerHTML = '' +}) + test('it works', () => { let css = `color:hotpink;` let hash = hashString(css) @@ -13,3 +18,20 @@ test('it works', () => { expect(cache.inserted).toEqual({ [hash]: true }) expect(document.documentElement).toMatchSnapshot() }) + +test('rehydrated styles to head can be flushed', () => { + let css = `color:hotpink;` + let hash = hashString(css) + safeQuerySelector( + 'head' + ).innerHTML = `` + + // this moves emotion style tags at initialization time + jest.resetModules() + require('@emotion/core') + + let cache = createCache({ key: 'emo' }) + expect(document.documentElement).toMatchSnapshot() + cache.sheet.flush() + expect(document.documentElement).toMatchSnapshot() +}) diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js index 7bcdb10cb..e5647e93a 100644 --- a/packages/cache/src/index.js +++ b/packages/cache/src/index.js @@ -78,9 +78,7 @@ let createCache = (options?: Options): EmotionCache => { attrib.split(' ').forEach(id => { inserted[id] = true }) - if (node.parentNode !== container) { - nodesToRehydrate.push(node) - } + nodesToRehydrate.push(node) }) } From d62d9101bc75e6bc9644ae588d2a6e4bf4d69285 Mon Sep 17 00:00:00 2001 From: ajs139 Date: Mon, 23 Dec 2019 21:31:22 -0500 Subject: [PATCH 058/176] Add warning if multiple versions are running (addresses #1470) (#1677) * Add warning if multiple versions are running (addresses #1470) * Add changeset --- .changeset/sour-poets-move.md | 5 +++++ packages/core/src/index.js | 15 +++++++++++++++ packages/utils/src/index.js | 2 +- 3 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 .changeset/sour-poets-move.md diff --git a/.changeset/sour-poets-move.md b/.changeset/sour-poets-move.md new file mode 100644 index 000000000..e11178983 --- /dev/null +++ b/.changeset/sour-poets-move.md @@ -0,0 +1,5 @@ +--- +'@emotion/core': patch +--- + +Warn if @emotion/core is initialized more than once in the same development environment. diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 820125be7..977a89cf5 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -6,3 +6,18 @@ export { keyframes } from './keyframes' export { ClassNames } from './class-names' export { ThemeContext, useTheme, ThemeProvider, withTheme } from './theming' export { default as css } from './css' + +if (process.env.NODE_ENV !== 'production') { + const isBrowser = typeof document !== 'undefined' + const globalKey = '__EMOTION_CORE__' + const globalContext = isBrowser ? window : global + if (globalContext[globalKey]) { + console.warn( + 'You are loading @emotion/core when it is already loaded. Running ' + + 'multiple instances may cause problems. This can happen if multiple ' + + 'versions are used, or if multiple builds of the same version are ' + + 'used.' + ) + } + globalContext[globalKey] = true +} diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js index 2347bbd33..62a86f817 100644 --- a/packages/utils/src/index.js +++ b/packages/utils/src/index.js @@ -1,7 +1,7 @@ // @flow import type { RegisteredCache, EmotionCache, SerializedStyles } from './types' -let isBrowser = typeof document !== 'undefined' +const isBrowser = typeof document !== 'undefined' export function getRegisteredStyles( registered: RegisteredCache, From affed3ddf03671835356632f26a064f59811852f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Sat, 28 Dec 2019 10:45:33 +0100 Subject: [PATCH 059/176] Fix issue with published TypeScript test files augmenting Theme interface (#1702) --- .changeset/rich-hotels-sing.md | 5 +++++ packages/cache/package.json | 2 +- packages/core/package.json | 2 +- packages/create-emotion-server/package.json | 2 +- packages/create-emotion/package.json | 2 +- packages/emotion-server/package.json | 2 +- packages/emotion/package.json | 2 +- packages/hash/package.json | 4 ++-- packages/is-prop-valid/package.json | 2 +- packages/jest-emotion/package.json | 2 +- packages/memoize/package.json | 4 ++-- packages/serialize/package.json | 2 +- packages/sheet/package.json | 2 +- packages/styled/package.json | 2 +- packages/stylis/package.json | 4 ++-- packages/utils/package.json | 2 +- packages/weak-memoize/package.json | 4 ++-- 17 files changed, 25 insertions(+), 20 deletions(-) create mode 100644 .changeset/rich-hotels-sing.md diff --git a/.changeset/rich-hotels-sing.md b/.changeset/rich-hotels-sing.md new file mode 100644 index 000000000..092c446ef --- /dev/null +++ b/.changeset/rich-hotels-sing.md @@ -0,0 +1,5 @@ +--- +'@emotion/core': patch +--- + +Fix issue with published TypeScript test files augmenting Theme interface. diff --git a/packages/cache/package.json b/packages/cache/package.json index 154faff89..302e0b13b 100644 --- a/packages/cache/package.json +++ b/packages/cache/package.json @@ -30,6 +30,6 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ] } diff --git a/packages/core/package.json b/packages/core/package.json index ba7de279f..d975347ca 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -11,7 +11,7 @@ "files": [ "src", "dist", - "types", + "types/*.d.ts", "macro.js", "macro.d.ts", "macro.js.flow" diff --git a/packages/create-emotion-server/package.json b/packages/create-emotion-server/package.json index 2d78a5b8d..f06d8166a 100644 --- a/packages/create-emotion-server/package.json +++ b/packages/create-emotion-server/package.json @@ -7,7 +7,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "scripts": { "test:typescript": "dtslint types" diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json index fad5bc82f..e436e6377 100644 --- a/packages/create-emotion/package.json +++ b/packages/create-emotion/package.json @@ -8,7 +8,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "scripts": { "test:typescript": "dtslint types" diff --git a/packages/emotion-server/package.json b/packages/emotion-server/package.json index 28d0b2c48..34d853294 100644 --- a/packages/emotion-server/package.json +++ b/packages/emotion-server/package.json @@ -7,7 +7,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "scripts": { "test:typescript": "dtslint types" diff --git a/packages/emotion/package.json b/packages/emotion/package.json index e0c1c15f9..4983be060 100644 --- a/packages/emotion/package.json +++ b/packages/emotion/package.json @@ -8,7 +8,7 @@ "files": [ "src", "dist", - "types", + "types/*.d.ts", "macro.js", "macro.d.ts", "macro.js.flow" diff --git a/packages/hash/package.json b/packages/hash/package.json index 1402a0b15..dcdfb16bc 100644 --- a/packages/hash/package.json +++ b/packages/hash/package.json @@ -13,7 +13,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "scripts": { "test:typescript": "dtslint types" @@ -25,4 +25,4 @@ "./dist/hash.cjs.js": "./dist/hash.browser.cjs.js", "./dist/hash.esm.js": "./dist/hash.browser.esm.js" } -} \ No newline at end of file +} diff --git a/packages/is-prop-valid/package.json b/packages/is-prop-valid/package.json index 0398a1d95..99c9940e4 100644 --- a/packages/is-prop-valid/package.json +++ b/packages/is-prop-valid/package.json @@ -22,7 +22,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "browser": { "./dist/is-prop-valid.cjs.js": "./dist/is-prop-valid.browser.cjs.js", diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json index 5c5e97ccb..edae2c246 100644 --- a/packages/jest-emotion/package.json +++ b/packages/jest-emotion/package.json @@ -7,7 +7,7 @@ "files": [ "src", "dist", - "types", + "types/*.d.ts", "serializer.js" ], "scripts": { diff --git a/packages/memoize/package.json b/packages/memoize/package.json index 46708f0e5..59a6e9945 100644 --- a/packages/memoize/package.json +++ b/packages/memoize/package.json @@ -19,10 +19,10 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "browser": { "./dist/memoize.cjs.js": "./dist/memoize.browser.cjs.js", "./dist/memoize.esm.js": "./dist/memoize.browser.esm.js" } -} \ No newline at end of file +} diff --git a/packages/serialize/package.json b/packages/serialize/package.json index ead3d208b..ff2c916ca 100644 --- a/packages/serialize/package.json +++ b/packages/serialize/package.json @@ -26,7 +26,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "browser": { "./dist/serialize.cjs.js": "./dist/serialize.browser.cjs.js", diff --git a/packages/sheet/package.json b/packages/sheet/package.json index ce5fcf8e8..626236c96 100644 --- a/packages/sheet/package.json +++ b/packages/sheet/package.json @@ -20,7 +20,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "devDependencies": { "dtslint": "^0.3.0" diff --git a/packages/styled/package.json b/packages/styled/package.json index e4bbf1888..8bbc7772e 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -40,7 +40,7 @@ "src", "dist", "base", - "types", + "types/*.d.ts", "macro.d.ts", "macro.js", "macro.js.flow" diff --git a/packages/stylis/package.json b/packages/stylis/package.json index 76a059655..cf3ab5d47 100644 --- a/packages/stylis/package.json +++ b/packages/stylis/package.json @@ -16,7 +16,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "devDependencies": { "dtslint": "^0.3.0", @@ -29,4 +29,4 @@ "./dist/stylis.cjs.js": "./dist/stylis.browser.cjs.js", "./dist/stylis.esm.js": "./dist/stylis.browser.esm.js" } -} \ No newline at end of file +} diff --git a/packages/utils/package.json b/packages/utils/package.json index 3e972b494..4b54b2886 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -20,7 +20,7 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "devDependencies": { "dtslint": "^0.3.0" diff --git a/packages/weak-memoize/package.json b/packages/weak-memoize/package.json index b3f4bdeea..d532da2ca 100644 --- a/packages/weak-memoize/package.json +++ b/packages/weak-memoize/package.json @@ -19,10 +19,10 @@ "files": [ "src", "dist", - "types" + "types/*.d.ts" ], "browser": { "./dist/weak-memoize.cjs.js": "./dist/weak-memoize.browser.cjs.js", "./dist/weak-memoize.esm.js": "./dist/weak-memoize.browser.esm.js" } -} \ No newline at end of file +} From c7850e61211d6aa26a3388399889a6072ee2f1fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Sun, 5 Jan 2020 01:22:50 +0100 Subject: [PATCH 060/176] Optimize Babel output a little bit (#1656) * Optimize Babel output a little bit * Fix label regression in dev nodes * Add `autoLabel` validation * Update more snapshots * Fix flow error * Rename auto to dev-only as autoLabel value * appendExpressionToArguments -> appendStringReturningExpressionToArguments * Add simple tests for new autoLabel values * Merge appendStringToArguments logic into appendStringReturningExpressionToArguments * Adjust docs about new autoLabel values * Add changeset --- .changeset/polite-impalas-doubt.md | 12 ++ packages/babel-plugin-emotion/README.md | 14 +- .../css-requires-options.js.snap | 138 ++++++++++++--- .../__tests__/__snapshots__/css.js.snap | 162 +++++++++--------- .../global-requires-options.js.snap | 4 +- .../__tests__/__snapshots__/global.js.snap | 32 ++-- .../__tests__/__snapshots__/index.js.snap | 50 +++--- .../styled-requires-options.js.snap | 35 +++- .../__tests__/__snapshots__/styled.js.snap | 96 +++++------ .../__snapshots__/vanilla-emotion.js.snap | 122 ++++++------- .../css-macro/__snapshots__/index.js.snap | 154 ++++++++--------- .../__tests__/css-requires-options.js | 59 +++++-- .../__snapshots__/index.js.snap | 12 +- .../global-macro/__snapshots__/index.js.snap | 32 ++-- .../__snapshots__/import-mapping.js.snap | 34 ++-- .../source-maps/__snapshots__/index.js.snap | 50 +++--- .../styled-macro/__snapshots__/index.js.snap | 96 +++++------ .../__tests__/styled-requires-options.js | 13 +- .../__snapshots__/index.js.snap | 122 ++++++------- packages/babel-plugin-emotion/src/index.js | 15 +- .../babel-plugin-emotion/src/utils/checks.js | 27 --- .../src/utils/get-styled-options.js | 3 +- .../babel-plugin-emotion/src/utils/index.js | 5 +- .../babel-plugin-emotion/src/utils/label.js | 6 +- .../babel-plugin-emotion/src/utils/strings.js | 60 +++++-- .../utils/transform-expression-with-styles.js | 87 +++++----- packages/babel-preset-css-prop/README.md | 6 +- .../__tests__/__snapshots__/index.js.snap | 16 +- .../__snapshots__/options-are-used.js.snap | 8 +- .../__tests__/__snapshots__/server.js.snap | 12 +- .../test/__snapshots__/css.test.js.snap | 4 +- .../__snapshots__/inject-global.test.js.snap | 2 +- .../__snapshots__/source-map.test.js.snap | 2 +- .../test/__snapshots__/printer.test.js.snap | 4 +- .../__snapshots__/source-map.test.js.snap | 2 +- packages/utils/src/index.js | 2 +- 36 files changed, 858 insertions(+), 640 deletions(-) create mode 100644 .changeset/polite-impalas-doubt.md delete mode 100644 packages/babel-plugin-emotion/src/utils/checks.js diff --git a/.changeset/polite-impalas-doubt.md b/.changeset/polite-impalas-doubt.md new file mode 100644 index 000000000..5f665d514 --- /dev/null +++ b/.changeset/polite-impalas-doubt.md @@ -0,0 +1,12 @@ +--- +'babel-plugin-emotion': major +'@emotion/babel-preset-css-prop': major +--- + +`autoLabel` option no longer is a simple boolean. Instead we accept now 3 values: `dev-only` (the default), `always` and `never`. + +Each possible value for this option produces different output code: + +- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments, +- with `always` we always add labels when possible, +- with `never` we disable this entirely and no labels are added. diff --git a/packages/babel-plugin-emotion/README.md b/packages/babel-plugin-emotion/README.md index 8fac9170d..7fef05cbb 100644 --- a/packages/babel-plugin-emotion/README.md +++ b/packages/babel-plugin-emotion/README.md @@ -132,7 +132,7 @@ _Defaults Shown_ { // sourceMap is on by default but source maps are dead code eliminated in production "sourceMap": true, - "autoLabel": process.env.NODE_ENV !== 'production', + "autoLabel": "dev-only", "labelFormat": "[local]", "cssPropOptimization": true } @@ -183,7 +183,7 @@ This option enables the following: ### `autoLabel` -`boolean`, defaults to `process.env.NODE_ENV !== 'production'`. +`'dev-only' | 'always' | 'never'`, , defaults to `dev-only`. This option enables the following: @@ -194,6 +194,12 @@ This option enables the following: (Eg. `iconStyles$1` will become `iconStyles1`) because `$` is not valid [CSS ClassName Selector](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors#449000) +Each possible value for this option produces different output code: + +- with `dev-only` we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments, +- with `always` we always add labels when possible, +- with `never` we disable this entirely and no labels are added. + #### css **In** @@ -214,7 +220,7 @@ const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;') `string`, defaults to `"[local]"`. -This option only works when `autoLabel` is set to `true`. It allows you to +This option only works when `autoLabel` is set to `'dev-only'` or `'always'`. It allows you to define the format of the resulting `label`. The format is defined via string where variable parts are enclosed in square brackets `[]`. For example `labelFormat: "my-classname--[local]"`, where `[local]` will be replaced @@ -235,7 +241,7 @@ be prepended automatically. ```javascript // BrownView.js -// autoLabel: true +// autoLabel: 'dev-only' // labelFormat: '[filename]--[local]' const brownStyles = css({ color: 'brown' }) ``` diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap index 41812a6f0..36bd9e6db 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap @@ -1,5 +1,101 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`babel css inline autoLabel set to always - complex expression 1`] = ` +" + import { css } from 'emotion' + import fooStyles from './foo' + let cls = css(fooStyles) + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { css } from 'emotion'; +import fooStyles from './foo'; +let cls = +/*#__PURE__*/ +css(fooStyles, \\";label:cls\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBpbXBvcnQgZm9vU3R5bGVzIGZyb20gJy4vZm9vJ1xuICAgIGxldCBjbHMgPSBjc3MoZm9vU3R5bGVzKVxuICAgICJdfQ== */\\"));" +`; + +exports[`babel css inline autoLabel set to always - complex expression, last arg string 1`] = ` +" + import { css } from 'emotion' + import fooStyles from './foo' + let cls = css(fooStyles, 'color: hotpink;') + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { css } from 'emotion'; +import fooStyles from './foo'; +let cls = +/*#__PURE__*/ +css(fooStyles, \\"color: hotpink;;label:cls\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBpbXBvcnQgZm9vU3R5bGVzIGZyb20gJy4vZm9vJ1xuICAgIGxldCBjbHMgPSBjc3MoZm9vU3R5bGVzLCAnY29sb3I6IGhvdHBpbms7JylcbiAgICAiXX0= */\\"));" +`; + +exports[`babel css inline autoLabel set to always 1`] = ` +" + import { css } from 'emotion' + let cls = css({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'; +let cls = +/*#__PURE__*/ +css(process.env.NODE_ENV === \\"production\\" ? { + name: \\"6kh100-cls\\", + styles: \\"color:hotpink;label:cls;\\" +} : { + name: \\"6kh100-cls\\", + styles: \\"color:hotpink;label:cls;\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + +exports[`babel css inline autoLabel set to never - complex expression 1`] = ` +" + import { css } from 'emotion' + import fooStyles from './foo' + let cls = css(fooStyles) + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import { css } from 'emotion'; +import fooStyles from './foo'; +let cls = +/*#__PURE__*/ +css(fooStyles, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBpbXBvcnQgZm9vU3R5bGVzIGZyb20gJy4vZm9vJ1xuICAgIGxldCBjbHMgPSBjc3MoZm9vU3R5bGVzKVxuICAgICJdfQ== */\\");" +`; + +exports[`babel css inline autoLabel set to never 1`] = ` +" + import { css } from 'emotion' + let cls = css({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'; +let cls = +/*#__PURE__*/ +css(process.env.NODE_ENV === \\"production\\" ? { + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" +} : { + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`babel css inline code already transpiled by emotion plugin (avoid double transpilation) 1`] = ` " import { keyframes as _keyframes } from \\"emotion\\"; @@ -80,11 +176,11 @@ import { css } from 'emotion'; let cls = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1rm02zb-CLS_CSS-REQUIRES-OPTIONS\\", - styles: \\"color:hotpink;;label:CLS_CSS-REQUIRES-OPTIONS;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1rm02zb-CLS_CSS-REQUIRES-OPTIONS\\", - styles: \\"color:hotpink;;label:CLS_CSS-REQUIRES-OPTIONS;\\", + name: \\"wiafqk-CLS_CSS-REQUIRES-OPTIONS\\", + styles: \\"color:hotpink;label:CLS_CSS-REQUIRES-OPTIONS;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -104,11 +200,11 @@ import { css } from 'emotion'; let cls = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\", - styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"mn0r3a-my-css-__tests__-css-requires-options-cls\\", - styles: \\"color:hotpink;;label:my-css-__tests__-css-requires-options-cls;\\", + name: \\"1azqn5t-my-css-__tests__-css-requires-options-cls\\", + styles: \\"color:hotpink;label:my-css-__tests__-css-requires-options-cls;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -128,11 +224,11 @@ import { css } from 'emotion'; let cls = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"jnyc7-my-css-css-requires-options-cls\\", - styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"jnyc7-my-css-css-requires-options-cls\\", - styles: \\"color:hotpink;;label:my-css-css-requires-options-cls;\\", + name: \\"12j84ju-my-css-css-requires-options-cls\\", + styles: \\"color:hotpink;label:my-css-css-requires-options-cls;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -152,11 +248,11 @@ import { css } from 'emotion'; let cls = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"v8qj0c-my-css-some-directory-cls\\", - styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"v8qj0c-my-css-some-directory-cls\\", - styles: \\"color:hotpink;;label:my-css-some-directory-cls;\\", + name: \\"1uf5d32-my-css-some-directory-cls\\", + styles: \\"color:hotpink;label:my-css-some-directory-cls;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -176,11 +272,11 @@ import { css } from 'emotion'; let cls = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"ryhvpw-my-css-cls\\", - styles: \\"color:hotpink;;label:my-css-cls;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"ryhvpw-my-css-cls\\", - styles: \\"color:hotpink;;label:my-css-cls;\\", + name: \\"1xiywpm-my-css-cls\\", + styles: \\"color:hotpink;label:my-css-cls;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVjIiwiZmlsZSI6ImNzcy1yZXF1aXJlcy1vcHRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcbiAgICBsZXQgY2xzID0gY3NzKHtjb2xvcjonaG90cGluayd9KVxuICAgICJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -210,5 +306,5 @@ import { css } from '@emotion/core'; var templateObject_1; const someVar = /*#__PURE__*/ -css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\"])));" +css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\")])));" `; diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap index 0a59dedc4..c45061893 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap @@ -21,11 +21,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx, css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjdHVhbC1leHBlY3RlZC11c2FnZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJhY3R1YWwtZXhwZWN0ZWQtdXNhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY29uc3QgU29tZUNvbXBvbmVudCA9ICgpID0+IChcbiAgPGRpdlxuICAgIGNzcz17Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH1cbiAgLz5cbilcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -50,11 +50,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"k008qs\\", - styles: \\"display:flex;\\" + name: \\"zjik7\\", + styles: \\"display:flex\\" } : { - name: \\"k008qs\\", - styles: \\"display:flex;\\", + name: \\"zjik7\\", + styles: \\"display:flex\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICBgXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -79,11 +79,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -114,14 +114,14 @@ import { css } from '@emotion/core'; const thing = /*#__PURE__*/ css(\\"display:flex;&:hover{\\", process.env.NODE_ENV === \\"production\\" ? { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\", + name: \\"1hi0qos-thing\\", + styles: \\"color:hotpink;label:thing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1MiLCJmaWxlIjoiY2FsbC1pbnNpZGUtY2FsbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IHRoaW5nID0gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICAmOmhvdmVyIHtcbiAgICAke2Nzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGB9O1xuICB9XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ -}, \\";};label:thing;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\"));" +}, \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:thing\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\");" `; exports[`emotion-babel-plugin css comment-with-interpolation 1`] = ` @@ -154,20 +154,20 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKlxuXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG5cbiAgKi9cbiAgY29sb3I6ICR7J2hvdHBpbmsnfTtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKlxuXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG5cbiAgKi9cbiAgY29sb3I6ICR7J2hvdHBpbmsnfTtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -216,11 +216,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmV4cG9ydCBkZWZhdWx0ICgpID0+IHtcbiAgY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -247,11 +247,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmV4cG9ydCBkZWZhdWx0ICgpID0+IHtcbiAgY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -288,11 +288,11 @@ import { Component } from 'react'; import { jsx, css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRZ0IiLCJmaWxlIjoiaW5zaWRlLWNsYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY2xhc3MgU29tZUNvbXBvbmVudCBleHRlbmRzIENvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -322,11 +322,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmxldCBzb21ldGhpbmcgPSAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -350,11 +350,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; const thing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\", + name: \\"1hi0qos-thing\\", + styles: \\"color:hotpink;label:thing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -376,8 +376,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; // prettier-ignore const thing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1hi0qos-thing\\", - styles: \\"color:hotpink;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { name: \\"1hi0qos-thing\\", styles: \\"color:hotpink;label:thing;\\", @@ -407,21 +407,21 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; const thing = { thisShouldBeTheLabel: process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lsaf1d-thisShouldBeTheLabel\\", - styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lsaf1d-thisShouldBeTheLabel\\", - styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\", + name: \\"xjpive-thisShouldBeTheLabel\\", + styles: \\"color:hotpink;label:thisShouldBeTheLabel;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMkIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY29uc3QgdGhpbmcgPSB7XG4gIHRoaXNTaG91bGRCZVRoZUxhYmVsOiBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGAsXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICAnc2hvdWxkQmVBbm90aGVyTGFiZWwnOmNzc2BcbiAgICBjb2xvcjpncmVlbjtcbiAgYFxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }, // prettier-ignore 'shouldBeAnotherLabel': process.env.NODE_ENV === \\"production\\" ? { - name: \\"7xoeh4-shouldBeAnotherLabel\\", - styles: \\"color:green;;label:shouldBeAnotherLabel;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"7xoeh4-shouldBeAnotherLabel\\", - styles: \\"color:green;;label:shouldBeAnotherLabel;\\", + name: \\"lgalrw-shouldBeAnotherLabel\\", + styles: \\"color:green;label:shouldBeAnotherLabel;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY29uc3QgdGhpbmcgPSB7XG4gIHRoaXNTaG91bGRCZVRoZUxhYmVsOiBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGAsXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICAnc2hvdWxkQmVBbm90aGVyTGFiZWwnOmNzc2BcbiAgICBjb2xvcjpncmVlbjtcbiAgYFxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ } @@ -450,7 +450,7 @@ import { __makeTemplateObject } from 'tslib'; var templateObject_1; const someVar = /*#__PURE__*/ -css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")])));" +css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")])));" `; exports[`emotion-babel-plugin css multiple-calls 1`] = ` @@ -471,20 +471,20 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; const thing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\", + name: \\"1hi0qos-thing\\", + styles: \\"color:hotpink;label:thing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IHRoaW5nID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxuY29uc3Qgb3RoZXJUaGluZyA9IGNzc2BcbiAgY29sb3I6IGdyZWVuO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; const otherThing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"vrj4vp-otherThing\\", - styles: \\"color:green;;label:otherThing;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"vrj4vp-otherThing\\", - styles: \\"color:green;;label:otherThing;\\", + name: \\"onvdw0-otherThing\\", + styles: \\"color:green;label:otherThing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IHRoaW5nID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxuY29uc3Qgb3RoZXJUaGluZyA9IGNzc2BcbiAgY29sb3I6IGdyZWVuO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -516,11 +516,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIHtcbiAgICBbY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KV06ICdjb2xkYmx1ZSdcbiAgfVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -560,11 +560,11 @@ import { renderToString } from 'react-dom/server'; const { css: styles } = extractCritical(renderToString(
));" @@ -599,11 +599,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1ibG9jay1jb21tZW50cy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJyZW1vdmUtYmxvY2stY29tbWVudHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jc3NgXG4gIC8qIGNvbG9yOmdyZWVuO1xuZGRqZndqa25nXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -624,11 +624,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6InJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuY3NzYFxuICAvLyBjb2xvcjogZ3JlZW47XG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -665,5 +665,5 @@ function media(...args) { const test = /*#__PURE__*/ -css(media\`color: red;\`, \\";;label:test;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"));" +css(media\`color: red;\`, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:test\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\");" `; diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/global-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/global-requires-options.js.snap index 6789885a1..c0fcf5905 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/global-requires-options.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/global-requires-options.js.snap @@ -13,8 +13,8 @@ export default () => import * as React from 'react'; import { Global } from '@emotion/core'; var _ref = { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" }; export default (() => );" `; diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/global.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/global.js.snap index 9aa524e1e..1ee3f9fb4 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/global.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/global.js.snap @@ -17,11 +17,11 @@ import * as React from 'react'; import { Global } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"9n87fw\\", - styles: \\"color:hotpink;background-color:#fff;\\" + name: \\"9aoaei\\", + styles: \\"color:hotpink;background-color:#fff\\" } : { - name: \\"9n87fw\\", - styles: \\"color:hotpink;background-color:#fff;\\", + name: \\"9aoaei\\", + styles: \\"color:hotpink;background-color:#fff\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -44,11 +44,11 @@ import * as React from 'react'; import { Global } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnIH19IC8+XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -120,11 +120,11 @@ import * as React from 'react'; import { Global, css } from '@emotion/core'; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG4vLyB0aGlzIGdldHMgaWdub3JlZCBieSBHbG9iYWwgbWFjcm8sIGJ1dCBpdCB0ZXN0cyB0aGF0IHRoaXMgY29tYmluYXRpb24gZG9lc24ndCBjcmFzaCBvciBzb21ldGhpbmdcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXtjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pfSAvPlxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -194,11 +194,11 @@ import * as React from 'react'; import { Global } from '@emotion/core'; // prettier-ignore var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbi8vIHByZXR0aWVyLWlnbm9yZVxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fT48L0dsb2JhbD5cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap index 81cb2725d..9b197ca5f 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap @@ -22,11 +22,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx, css } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jc3MtaW1wb3J0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtZIiwiZmlsZSI6ImNvcmUtd2l0aC1jc3MtaW1wb3J0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3gsIGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -55,7 +55,7 @@ import { jsx, css } from '@emotion/core'; const SomeComponent = props =>
;" +css(\\"color:\\", window, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:SomeComponent\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvcmUtd2l0aC1jc3MtaW1wb3J0LWR5bmFtaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1kiLCJmaWxlIjoiY29yZS13aXRoLWNzcy1pbXBvcnQtZHluYW1pYy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsganN4LCBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXtjc3NgXG4gICAgICBjb2xvcjogJHt3aW5kb3d9O1xuICAgIGB9XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\")} {...props} />;" `; exports[`babel-plugin-emotion css-prop-complex-array 1`] = ` @@ -84,7 +84,7 @@ const css2 = theme => ({ }); function SomeComponent(props) { - return
{'Emotion'}
; + return
{'Emotion'}
; }" `; @@ -122,7 +122,7 @@ const SomeComponent = props =>
;" +}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:SomeComponent\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImR5bmFtaWMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR29DIiwiZmlsZSI6ImR5bmFtaWMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17eyBjb2xvcjogd2luZG93IH19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\")} {...props} />;" `; exports[`babel-plugin-emotion function-declaration 1`] = ` @@ -150,11 +150,11 @@ import * as React from 'react'; import { jsx } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1f6ttp4-Logo\\", - styles: \\"display:block;;label:Logo;\\" + name: \\"4zleql\\", + styles: \\"display:block\\" } : { - name: \\"1f6ttp4-Logo\\", - styles: \\"display:block;;label:Logo;\\", + name: \\"jgxhdf-Logo\\", + styles: \\"display:block;label:Logo;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZ1bmN0aW9uLWRlY2xhcmF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9NIiwiZmlsZSI6ImZ1bmN0aW9uLWRlY2xhcmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQGZsb3dcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSdcblxuZnVuY3Rpb24gTG9nbyhwcm9wcykge1xuICByZXR1cm4gKFxuICAgIDxhXG4gICAgICBjc3M9e3tcbiAgICAgICAgZGlzcGxheTogJ2Jsb2NrJ1xuICAgICAgfX1cbiAgICAvPlxuICApXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -196,11 +196,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImpzeC1ob2lzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLSSIsImZpbGUiOiJqc3gtaG9pc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGNvbG9yOiAnaG90cGluaydcbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbilcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -237,11 +237,11 @@ const MyObject = { target: \\"e1mmqgwa0\\", label: \\"MyProperty\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNYyIsImZpbGUiOiJvYmplY3QtcHJvcGVydHkuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IE15T2JqZWN0ID0ge1xuICBNeVByb3BlcnR5OiBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuXG5mdW5jdGlvbiBMb2dvKHByb3BzKSB7XG4gIHJldHVybiA8TXlPYmplY3QuTXlQcm9wZXJ0eSAvPlxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }) @@ -275,11 +275,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"dwt66v-SomeComponent\\", - styles: \\"color:hotpink;background-color:green;;label:SomeComponent;\\" + name: \\"qmoypw\\", + styles: \\"color:hotpink;background-color:green\\" } : { - name: \\"dwt66v-SomeComponent\\", - styles: \\"color:hotpink;background-color:green;;label:SomeComponent;\\", + name: \\"lcrht-SomeComponent\\", + styles: \\"color:hotpink;background-color:green;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YXRpYy1vYmplY3Qtd2l0aC1jYW1lbC1jYXNlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtJIiwiZmlsZSI6InN0YXRpYy1vYmplY3Qtd2l0aC1jYW1lbC1jYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gKFxuICA8ZGl2XG4gICAgY3NzPXt7XG4gICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiAnZ3JlZW4nXG4gICAgfX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -315,8 +315,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1vvht02-SomeComponent\\", - styles: \\"color:green;:hover{color:hotpink;};label:SomeComponent;\\" + name: \\"1t2q7lq\\", + styles: \\"color:green;:hover{color:hotpink;}\\" } : { name: \\"1vvht02-SomeComponent\\", styles: \\"color:green;:hover{color:hotpink;};label:SomeComponent;\\", diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap index 8929ef76d..6c3f9c2a6 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled-requires-options.js.snap @@ -1,17 +1,44 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`styled inline autoLabel set to never 1`] = ` +" +import styled from '@emotion/styled' +const Foo = styled.h1\`color:hotpink;\` + + + ↓ ↓ ↓ ↓ ↓ ↓ + +import _styled from \\"@emotion/styled/base\\"; + +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).\\"; } + +const Foo = _styled(\\"h1\\", { + target: \\"e15efa6o0\\" +})(process.env.NODE_ENV === \\"production\\" ? { + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" +} : { + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", + map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC1yZXF1aXJlcy1vcHRpb25zLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVxQiIsImZpbGUiOiJzdHlsZWQtcmVxdWlyZXMtb3B0aW9ucy5qcyIsInNvdXJjZXNDb250ZW50IjpbIlxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5jb25zdCBGb28gPSBzdHlsZWQuaDFgY29sb3I6aG90cGluaztgXG4gICAgIl19 */\\", + toString: _EMOTION_STRINGIFIED_CSS_ERROR__ +});" +`; + exports[`styled inline hash generation no file system 1`] = ` -"import styled from \\"@emotion/styled\\"; +" +import styled from '@emotion/styled' styled.h1\`color:blue;\` + ↓ ↓ ↓ ↓ ↓ ↓ import _styled from \\"@emotion/styled/base\\"; _styled(\\"h1\\", { - target: \\"e1vqloan0\\" + target: \\"e9nrk6s0\\" })({ - name: \\"14ksm7b\\", - styles: \\"color:blue;\\" + name: \\"117wnve\\", + styles: \\"color:blue\\" });" `; diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap index 6048579e2..619ae5e50 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/styled.js.snap @@ -18,11 +18,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"e1c0oh1z0\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJiYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -48,11 +48,11 @@ _styled('div', { target: \\"eyt0cf80\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFbUMiLCJmaWxlIjoiY2FsbC1leHByZXNzaW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQoJ2RpdicpYFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -81,11 +81,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string _styled(\\"div\\", { target: \\"e1vv9dlm0\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVVIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbnN0eWxlZC5kaXZgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YgKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -129,11 +129,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"e4byx853\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -142,11 +142,11 @@ let SomeOtherComponent = _styled(\\"div\\", { target: \\"e4byx852\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNeUIiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -303,11 +303,11 @@ class Thing { target: \\"egllku92\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -315,11 +315,11 @@ class Thing { target: \\"egllku91\\", label: \\"BadIdeaComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"d1m7sn\\", - styles: \\"background:hotpink;\\" + name: \\"1nzpx79\\", + styles: \\"background:hotpink\\" } : { - name: \\"d1m7sn\\", - styles: \\"background:hotpink;\\", + name: \\"1nzpx79\\", + styles: \\"background:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMrQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -331,11 +331,11 @@ class Thing { target: \\"egllku90\\", label: \\"MiniCalWrap-\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"tokvmb\\", - styles: \\"color:red;\\" + name: \\"hwfcu5\\", + styles: \\"color:red\\" } : { - name: \\"tokvmb\\", - styles: \\"color:red;\\", + name: \\"hwfcu5\\", + styles: \\"color:red\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -397,11 +397,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"eqvttbz1\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -410,11 +410,11 @@ const SomeOtherComponent = _styled(\\"button\\", { target: \\"eqvttbz0\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"bjcoli\\", - styles: \\"color:green;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"bjcoli\\", - styles: \\"color:green;\\", + name: \\"v98kxt\\", + styles: \\"color:green\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU13QyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -483,11 +483,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"e1gch6x40\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoib2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -511,11 +511,11 @@ _styled('div', { target: \\"eavmgrz0\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXNCIiwiZmlsZSI6Im9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHN0eWxlZCgnZGl2JykoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" diff --git a/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap b/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap index d9f3dac34..432b44a56 100644 --- a/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap +++ b/packages/babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap @@ -70,22 +70,22 @@ import { css } from 'emotion'; /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"njzoxi\\", - styles: \\"/* @noflip */ left:1px;\\" + name: \\"1q5yx8v\\", + styles: \\"/* @noflip */ left:1px\\" } : { - name: \\"njzoxi\\", - styles: \\"/* @noflip */ left:1px;\\", + name: \\"1q5yx8v\\", + styles: \\"/* @noflip */ left:1px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -103,11 +103,11 @@ css(process.env.NODE_ENV === \\"production\\" ? { /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"197xj9y\\", - styles: \\"/* @whatever */ left:4px;\\" + name: \\"bfdx0c\\", + styles: \\"/* @whatever */ left:4px\\" } : { - name: \\"197xj9y\\", - styles: \\"/* @whatever */ left:4px;\\", + name: \\"bfdx0c\\", + styles: \\"/* @whatever */ left:4px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -125,22 +125,22 @@ css(process.env.NODE_ENV === \\"production\\" ? { /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"luqhsn\\", - styles: \\"left:7px;\\" + name: \\"o10ag4\\", + styles: \\"left:7px\\" } : { - name: \\"luqhsn\\", - styles: \\"left:7px;\\", + name: \\"o10ag4\\", + styles: \\"left:7px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1v35xj1\\", - styles: \\"left:8px;\\" + name: \\"zrl602\\", + styles: \\"left:8px\\" } : { - name: \\"1v35xj1\\", - styles: \\"left:8px;\\", + name: \\"zrl602\\", + styles: \\"left:8px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -185,7 +185,7 @@ let someCls = /*#__PURE__*/ css({ color: window.whatever -}, \\";label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzKHtcbiAgY29sb3I6IHdpbmRvdy53aGF0ZXZlclxufSlcbiJdfQ== */\\"));" +}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmxldCBzb21lQ2xzID0gY3NzKHtcbiAgY29sb3I6IHdpbmRvdy53aGF0ZXZlclxufSlcbiJdfQ== */\\");" `; exports[`vanilla emotion does-not-minify-inside-content-property 1`] = ` @@ -208,11 +208,11 @@ import { css } from 'emotion'; const cls1 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"hn2j47-cls1\\", - styles: \\"content:' { } ';;label:cls1;\\" + name: \\"1bpoqk7\\", + styles: \\"content:' { } '\\" } : { - name: \\"hn2j47-cls1\\", - styles: \\"content:' { } ';;label:cls1;\\", + name: \\"19tqhve-cls1\\", + styles: \\"content:' { } ';label:cls1;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); // prettier-ignore @@ -220,11 +220,11 @@ css(process.env.NODE_ENV === \\"production\\" ? { const cls2 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"nh732h-cls2\\", - styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\" + name: \\"9pd1g7\\", + styles: \\"content:\\\\\\" { } \\\\\\"\\" } : { - name: \\"nh732h-cls2\\", - styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\", + name: \\"16r822g-cls2\\", + styles: \\"content:\\\\\\" { } \\\\\\";label:cls2;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -292,30 +292,30 @@ function test() { css(\\"font-size:20px;@media (min-width:420px){color:blue;\\", /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"ekayrg-cls1\\", - styles: \\"width:96px;height:96px;;label:cls1;\\" + name: \\"14ht2kb\\", + styles: \\"width:96px;height:96px\\" } : { - name: \\"ekayrg-cls1\\", - styles: \\"width:96px;height:96px;;label:cls1;\\", + name: \\"1ylk12k-cls1\\", + styles: \\"width:96px;height:96px;label:cls1;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6ImhvaXN0aW5nLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ - }), \\";line-height:26px;}background:green;background-color:hotpink;;;label:cls1;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\")); + }), \\";line-height:26px;}background:green;background-color:hotpink;;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls1\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\"); const cls2 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1tbvdns-cls2\\", - styles: \\"color:blue;;;label:cls2;\\" + name: \\"14ksm7b\\", + styles: \\"color:blue;\\" } : { - name: \\"1tbvdns-cls2\\", - styles: \\"color:blue;;;label:cls2;\\", + name: \\"ca17a1-cls2\\", + styles: \\"color:blue;;label:cls2;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); const cls3 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1m06t0b-cls3\\", - styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\" + name: \\"a21n9o\\", + styles: \\"display:flex;&:hover{color:hotpink;}\\" } : { name: \\"1m06t0b-cls3\\", styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\", @@ -335,10 +335,10 @@ function test() { color }, \\";\\", /*#__PURE__*/ - css(\\"height:420px;width:\\", styles, \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\")), \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\")); + css(\\"height:420px;width:\\", styles, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\"), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"); let someCls = /*#__PURE__*/ - css(\\"color:\\", outerVar, \\";;label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\")); + css(\\"color:\\", outerVar, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"); } }" `; @@ -518,8 +518,8 @@ import { keyframes } from 'emotion'; const rotate360 = /*#__PURE__*/ keyframes(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1k98dea-rotate360\\", - styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\" + name: \\"1q8eu9e\\", + styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);}\\" } : { name: \\"1k98dea-rotate360\\", styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\", @@ -549,7 +549,7 @@ import { keyframes } from 'emotion'; let endingRotation = window.whatever; const rotate360 = /*#__PURE__*/ -keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");};label:rotate360;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgZW5kaW5nUm90YXRpb24gPSB3aW5kb3cud2hhdGV2ZXJcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoJHtlbmRpbmdSb3RhdGlvbn0pO1xuICB9XG5gXG4iXX0= */\\"));" +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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgZW5kaW5nUm90YXRpb24gPSB3aW5kb3cud2hhdGV2ZXJcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoJHtlbmRpbmdSb3RhdGlvbn0pO1xuICB9XG5gXG4iXX0= */\\");" `; exports[`vanilla emotion object-label 1`] = ` @@ -574,22 +574,22 @@ let obj = { someProp: /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"16vqze6-someProp\\", - styles: \\"color:green;;label:someProp;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"16vqze6-someProp\\", - styles: \\"color:green;;label:someProp;\\", + name: \\"cw3a48-someProp\\", + styles: \\"color:green;label:someProp;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }), anotherProp: /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"r0tjkz-anotherProp\\", - styles: \\"color:hotpink;;label:anotherProp;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"r0tjkz-anotherProp\\", - styles: \\"color:hotpink;;label:anotherProp;\\", + name: \\"1oocabw-anotherProp\\", + styles: \\"color:hotpink;label:anotherProp;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }) @@ -599,22 +599,22 @@ class Thing { static Prop = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1q8lxwm-Prop\\", - styles: \\"color:yellow;;label:Prop;\\" + name: \\"1bcsghv\\", + styles: \\"color:yellow\\" } : { - name: \\"1q8lxwm-Prop\\", - styles: \\"color:yellow;;label:Prop;\\", + name: \\"1p4vs6c-Prop\\", + styles: \\"color:yellow;label:Prop;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoib2JqZWN0LWxhYmVsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbidcblxubGV0IG9iaiA9IHtcbiAgc29tZVByb3A6IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pLFxuICBhbm90aGVyUHJvcDogY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgUHJvcCA9IGNzcyh7IGNvbG9yOiAneWVsbG93JyB9KVxuICBCYWRJZGVhID0gY3NzKHsgY29sb3I6ICdyZWQnIH0pXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); BadIdea = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"15lhxip-BadIdea\\", - styles: \\"color:red;;label:BadIdea;\\" + name: \\"hwfcu5\\", + styles: \\"color:red\\" } : { - name: \\"15lhxip-BadIdea\\", - styles: \\"color:red;;label:BadIdea;\\", + name: \\"1htwp0n-BadIdea\\", + styles: \\"color:red;label:BadIdea;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); diff --git a/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap index 881360c0f..e62872d93 100644 --- a/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap @@ -21,11 +21,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx, css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFjdHVhbC1leHBlY3RlZC11c2FnZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLWSIsImZpbGUiOiJhY3R1YWwtZXhwZWN0ZWQtdXNhZ2UuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY29uc3QgU29tZUNvbXBvbmVudCA9ICgpID0+IChcbiAgPGRpdlxuICAgIGNzcz17Y3NzYFxuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgYH1cbiAgLz5cbilcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -50,11 +50,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"k008qs\\", - styles: \\"display:flex;\\" + name: \\"zjik7\\", + styles: \\"display:flex\\" } : { - name: \\"k008qs\\", - styles: \\"display:flex;\\", + name: \\"zjik7\\", + styles: \\"display:flex\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdZIiwiZmlsZSI6ImJhc2ljLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICBgXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -79,11 +79,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHUyIsImZpbGUiOiJjYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5mdW5jdGlvbiBkb1RoaW5nKCkge1xuICByZXR1cm4gY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -114,14 +114,14 @@ import { css } from \\"@emotion/core\\"; const thing = /*#__PURE__*/ css(\\"display:flex;&:hover{\\", process.env.NODE_ENV === \\"production\\" ? { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\", + name: \\"1hi0qos-thing\\", + styles: \\"color:hotpink;label:thing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1MiLCJmaWxlIjoiY2FsbC1pbnNpZGUtY2FsbC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICAmOmhvdmVyIHtcbiAgICAke2Nzc2BcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIGB9O1xuICB9XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ -}, \\";};label:thing;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\"));" +}, \\";}\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:thing\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtaW5zaWRlLWNhbGwuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImNhbGwtaW5zaWRlLWNhbGwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgJjpob3ZlciB7XG4gICAgJHtjc3NgXG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICBgfTtcbiAgfVxuYFxuIl19 */\\");" `; exports[`@emotion/core - css macro comment-with-interpolation 1`] = ` @@ -154,20 +154,20 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKlxuXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG5cbiAgKi9cbiAgY29sb3I6ICR7J2hvdHBpbmsnfTtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnQtd2l0aC1pbnRlcnBvbGF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY3NzYFxuICAvLyBjb2xvcjogJHsnZ3JlZW4nfTtcbiAgLypcblxuICBzb21ldGhpbmc6ICR7J3NvbWV0aGluZyd9O1xuXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8vIGNvbG9yOiAkeydncmVlbid9O1xuICAvKlxuXG4gIHNvbWV0aGluZzogJHsnc29tZXRoaW5nJ307XG5cbiAgKi9cbiAgY29sb3I6ICR7J2hvdHBpbmsnfTtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -216,11 +216,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmV4cG9ydCBkZWZhdWx0ICgpID0+IHtcbiAgY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -247,11 +247,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1hbm9ueW1vdXMtZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLWFub255bW91cy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmV4cG9ydCBkZWZhdWx0ICgpID0+IHtcbiAgY3NzYFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -288,11 +288,11 @@ import { Component } from 'react'; import { jsx, css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1jbGFzcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRZ0IiLCJmaWxlIjoiaW5zaWRlLWNsYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGpzeCwgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY2xhc3MgU29tZUNvbXBvbmVudCBleHRlbmRzIENvbXBvbmVudCB7XG4gIHJlbmRlcigpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBjb2xvcjogaG90cGluaztcbiAgICAgICAgYH1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -322,11 +322,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2lkZS1ub24tcGFzY2FsLWNhc2UtYXJyb3ctZnVuY3Rpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0siLCJmaWxlIjoiaW5zaWRlLW5vbi1wYXNjYWwtY2FzZS1hcnJvdy1mdW5jdGlvbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmxldCBzb21ldGhpbmcgPSAoKSA9PiB7XG4gIGNzc2BcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -350,11 +350,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; const thing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\", + name: \\"1hi0qos-thing\\", + styles: \\"color:hotpink;label:thing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLTEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWlCIiwiZmlsZSI6ImxhYmVsLTEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5jb25zdCB0aGluZyA9IGNzc2BcbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -376,8 +376,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; // prettier-ignore const thing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1hi0qos-thing\\", - styles: \\"color:hotpink;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { name: \\"1hi0qos-thing\\", styles: \\"color:hotpink;label:thing;\\", @@ -407,21 +407,21 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; const thing = { thisShouldBeTheLabel: process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lsaf1d-thisShouldBeTheLabel\\", - styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lsaf1d-thisShouldBeTheLabel\\", - styles: \\"color:hotpink;;label:thisShouldBeTheLabel;\\", + name: \\"xjpive-thisShouldBeTheLabel\\", + styles: \\"color:hotpink;label:thisShouldBeTheLabel;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMkIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY29uc3QgdGhpbmcgPSB7XG4gIHRoaXNTaG91bGRCZVRoZUxhYmVsOiBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGAsXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICAnc2hvdWxkQmVBbm90aGVyTGFiZWwnOmNzc2BcbiAgICBjb2xvcjpncmVlbjtcbiAgYFxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }, // prettier-ignore 'shouldBeAnotherLabel': process.env.NODE_ENV === \\"production\\" ? { - name: \\"7xoeh4-shouldBeAnotherLabel\\", - styles: \\"color:green;;label:shouldBeAnotherLabel;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"7xoeh4-shouldBeAnotherLabel\\", - styles: \\"color:green;;label:shouldBeAnotherLabel;\\", + name: \\"lgalrw-shouldBeAnotherLabel\\", + styles: \\"color:green;label:shouldBeAnotherLabel;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLW9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoibGFiZWwtb2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY29uc3QgdGhpbmcgPSB7XG4gIHRoaXNTaG91bGRCZVRoZUxhYmVsOiBjc3NgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGAsXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICAnc2hvdWxkQmVBbm90aGVyTGFiZWwnOmNzc2BcbiAgICBjb2xvcjpncmVlbjtcbiAgYFxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ } @@ -450,7 +450,7 @@ import { __makeTemplateObject } from 'tslib'; var templateObject_1; const someVar = /*#__PURE__*/ -css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")], [\\"\\\\n color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")])));" +css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")], ['\\\\n color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someVar\\") + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\")])));" `; exports[`@emotion/core - css macro multiple-calls 1`] = ` @@ -471,20 +471,20 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; const thing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1yq4vdx-thing\\", - styles: \\"color:hotpink;;label:thing;\\", + name: \\"1hi0qos-thing\\", + styles: \\"color:hotpink;label:thing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVpQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxuY29uc3Qgb3RoZXJUaGluZyA9IGNzc2BcbiAgY29sb3I6IGdyZWVuO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; const otherThing = process.env.NODE_ENV === \\"production\\" ? { - name: \\"vrj4vp-otherThing\\", - styles: \\"color:green;;label:otherThing;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"vrj4vp-otherThing\\", - styles: \\"color:green;;label:otherThing;\\", + name: \\"onvdw0-otherThing\\", + styles: \\"color:green;label:otherThing;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1zQiIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbmNvbnN0IHRoaW5nID0gY3NzYFxuICBjb2xvcjogaG90cGluaztcbmBcblxuY29uc3Qgb3RoZXJUaGluZyA9IGNzc2BcbiAgY29sb3I6IGdyZWVuO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -516,11 +516,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlLIiwiZmlsZSI6Im9iamVjdC1keW5hbWljLXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuZnVuY3Rpb24gZG9UaGluZygpIHtcbiAgcmV0dXJuIHtcbiAgICBbY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KV06ICdjb2xkYmx1ZSdcbiAgfVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -591,11 +591,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1ibG9jay1jb21tZW50cy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJyZW1vdmUtYmxvY2stY29tbWVudHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5jc3NgXG4gIC8qIGNvbG9yOmdyZWVuO1xuZGRqZndqa25nXG4gICovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -616,11 +616,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from \\"@emotion/core\\"; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6InJlbW92ZS1saW5lLWNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuY3NzYFxuICAvLyBjb2xvcjogZ3JlZW47XG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -657,5 +657,5 @@ function media(...args) { const test = /*#__PURE__*/ -css(media\`color: red;\`, \\";;label:test;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\"));" +css(media\`color: red;\`, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:test\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZ2dlZC10ZW1wbGF0ZS1hcmdzLWZvcndhcmRlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVZ0IiLCJmaWxlIjoidGFnZ2VkLXRlbXBsYXRlLWFyZ3MtZm9yd2FyZGVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZS9tYWNybydcblxuZnVuY3Rpb24gbWVkaWEoLi4uYXJncykge1xuICByZXR1cm4gY3NzYFxuICAgIEBtZWRpYSAobWluLXdpZHRoOiAxMDBweCkge1xuICAgICAgJHtjc3MoLi4uYXJncyl9O1xuICAgIH1cbiAgYFxufVxuXG5jb25zdCB0ZXN0ID0gY3NzYFxuICAke21lZGlhYGNvbG9yOiByZWQ7YH07XG5gXG4iXX0= */\\");" `; diff --git a/packages/babel-plugin-emotion/__tests__/css-requires-options.js b/packages/babel-plugin-emotion/__tests__/css-requires-options.js index c64b0ebc5..9a393d7ad 100644 --- a/packages/babel-plugin-emotion/__tests__/css-requires-options.js +++ b/packages/babel-plugin-emotion/__tests__/css-requires-options.js @@ -14,8 +14,7 @@ const cases = { [ plugin, { - labelFormat: 'my-css-[local]', - autoLabel: true + labelFormat: 'my-css-[local]' } ] ], @@ -30,8 +29,7 @@ const cases = { [ plugin, { - labelFormat: 'my-css-[filename]-[local]', - autoLabel: true + labelFormat: 'my-css-[filename]-[local]' } ] ], @@ -47,8 +45,7 @@ const cases = { [ plugin, { - labelFormat: 'my-css-[filename]-[local]', - autoLabel: true + labelFormat: 'my-css-[filename]-[local]' } ] ], @@ -64,8 +61,7 @@ const cases = { [ plugin, { - labelFormat: 'my-css-[dirname]-[filename]-[local]', - autoLabel: true + labelFormat: 'my-css-[dirname]-[filename]-[local]' } ] ], @@ -84,8 +80,7 @@ const cases = { labelFormat: ({ name, path }) => `${name.toUpperCase()}_${last( path.replace(/\..+$/, '').split('/') - ).toUpperCase()}`, - autoLabel: true + ).toUpperCase()}` } ] ], @@ -113,7 +108,6 @@ const cases = { [ plugin, { - autoLabel: true, sourceMap: false } ] @@ -154,6 +148,49 @@ const cases = { `, plugins: [plugin], babelFileName: __filename + }, + 'autoLabel set to always': { + code: ` + import { css } from 'emotion' + let cls = css({color:'hotpink'}) + `, + plugins: [[plugin, { autoLabel: 'always' }]], + babelFileName: __filename + }, + 'autoLabel set to always - complex expression': { + code: ` + import { css } from 'emotion' + import fooStyles from './foo' + let cls = css(fooStyles) + `, + plugins: [[plugin, { autoLabel: 'always' }]], + babelFileName: __filename + }, + 'autoLabel set to always - complex expression, last arg string': { + code: ` + import { css } from 'emotion' + import fooStyles from './foo' + let cls = css(fooStyles, 'color: hotpink;') + `, + plugins: [[plugin, { autoLabel: 'always' }]], + babelFileName: __filename + }, + 'autoLabel set to never': { + code: ` + import { css } from 'emotion' + let cls = css({color:'hotpink'}) + `, + plugins: [[plugin, { autoLabel: 'never' }]], + babelFileName: __filename + }, + 'autoLabel set to never - complex expression': { + code: ` + import { css } from 'emotion' + import fooStyles from './foo' + let cls = css(fooStyles) + `, + plugins: [[plugin, { autoLabel: 'never' }]], + babelFileName: __filename } } babelTester('babel css inline', cases) diff --git a/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap index 200e33d06..67fed93ca 100644 --- a/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/disable-source-map/__snapshots__/index.js.snap @@ -10,8 +10,8 @@ let style = css({ color: 'hotpink' }) import { css } from '@emotion/core'; let style = { - name: \\"hpn981-style\\", - styles: \\"color:hotpink;;label:style;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" };" `; @@ -29,8 +29,8 @@ let Comp = _styled(\\"div\\", { target: \\"e4zcdjx0\\", label: \\"Comp\\" })({ - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" });" `; @@ -46,7 +46,7 @@ import { css } from 'emotion'; let cls = /*#__PURE__*/ css({ - name: \\"8dy5on-cls\\", - styles: \\"color:hotpink;;label:cls;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" });" `; diff --git a/packages/babel-plugin-emotion/__tests__/global-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/global-macro/__snapshots__/index.js.snap index 5a77d8124..2d736ea37 100644 --- a/packages/babel-plugin-emotion/__tests__/global-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/global-macro/__snapshots__/index.js.snap @@ -17,11 +17,11 @@ import * as React from 'react'; import { Global } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"9n87fw\\", - styles: \\"color:hotpink;background-color:#fff;\\" + name: \\"9aoaei\\", + styles: \\"color:hotpink;background-color:#fff\\" } : { - name: \\"9n87fw\\", - styles: \\"color:hotpink;background-color:#fff;\\", + name: \\"9aoaei\\", + styles: \\"color:hotpink;background-color:#fff\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLWFycmF5LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlVIiwiZmlsZSI6ImJhc2ljLWFycmF5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiAoXG4gIDxHbG9iYWwgc3R5bGVzPXtbeyBjb2xvcjogJ2hvdHBpbmsnIH0sIHsgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicgfV19IC8+XG4pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -44,11 +44,11 @@ import * as React from 'react'; import { Global } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLW9iai5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoiYmFzaWMtb2JqLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnIH19IC8+XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -120,11 +120,11 @@ import * as React from 'react'; import { Global, css } from \\"@emotion/core\\"; // this gets ignored by Global macro, but it tests that this combination doesn't crash or something var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy11c2VkLWFzLXZhbHVlLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlxQyIsImZpbGUiOiJjc3MtdXNlZC1hcy12YWx1ZS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgR2xvYmFsLCBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlL21hY3JvJ1xuXG4vLyB0aGlzIGdldHMgaWdub3JlZCBieSBHbG9iYWwgbWFjcm8sIGJ1dCBpdCB0ZXN0cyB0aGF0IHRoaXMgY29tYmluYXRpb24gZG9lc24ndCBjcmFzaCBvciBzb21ldGhpbmdcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxHbG9iYWwgc3R5bGVzPXtjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pfSAvPlxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -194,11 +194,11 @@ import * as React from 'react'; import { Global } from \\"@emotion/core\\"; // prettier-ignore var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndpdGgtY2xvc2luZy1lbGVtZW50LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiJ3aXRoLWNsb3NpbmctZWxlbWVudC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlICovXG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL2NvcmUvbWFjcm8nXG5cbi8vIHByZXR0aWVyLWlnbm9yZVxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPEdsb2JhbCBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fT48L0dsb2JhbD5cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; diff --git a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap index 0b4d70409..a1d835e75 100644 --- a/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap +++ b/packages/babel-plugin-emotion/__tests__/import-mapping/__snapshots__/import-mapping.js.snap @@ -15,11 +15,11 @@ import * as React from 'react'; import { SomeGlobalFromCore } from 'package-two'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdsb2JhbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHeUMiLCJmaWxlIjoiZ2xvYmFsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBTb21lR2xvYmFsRnJvbUNvcmUgfSBmcm9tICdwYWNrYWdlLXR3bydcblxuZXhwb3J0IGRlZmF1bHQgKCkgPT4gPFNvbWVHbG9iYWxGcm9tQ29yZSBzdHlsZXM9e3sgY29sb3I6ICdob3RwaW5rJyB9fSAvPlxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -74,7 +74,7 @@ const SomeComponent = props =>
;" +}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:SomeComponent\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImpzeC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0MiLCJmaWxlIjoianN4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3ggc29tZUpzeCAqL1xuaW1wb3J0IHsgc29tZUpzeCB9IGZyb20gJ3BhY2thZ2UtdHdvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gPGRpdiBjc3M9e3sgY29sb3I6IHdpbmRvdyB9fSB7Li4ucHJvcHN9IC8+XG4iXX0= */\\")} {...props} />;" `; exports[`import mapping non-default-styled 1`] = ` @@ -92,11 +92,11 @@ let SomeComp = nonDefaultStyled(\\"div\\", { target: \\"e1nqcgbi0\\", label: \\"SomeComp\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vbi1kZWZhdWx0LXN0eWxlZC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZSIsImZpbGUiOiJub24tZGVmYXVsdC1zdHlsZWQuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBub25EZWZhdWx0U3R5bGVkIH0gZnJvbSAncGFja2FnZS1vbmUnXG5cbmxldCBTb21lQ29tcCA9IG5vbkRlZmF1bHRTdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -118,11 +118,11 @@ let SomeComp = _styled(\\"div\\", { target: \\"eccz39l0\\", label: \\"SomeComp\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC13aXRoLWJhc2Utc3BlY2lmaWVkLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVlIiwiZmlsZSI6InN0eWxlZC13aXRoLWJhc2Utc3BlY2lmaWVkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbm9uRGVmYXVsdFN0eWxlZCB9IGZyb20gJ3BhY2thZ2UtZm91cidcblxubGV0IFNvbWVDb21wID0gbm9uRGVmYXVsdFN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -142,11 +142,11 @@ import { something } from 'package-three'; /*#__PURE__*/ something(process.env.NODE_ENV === \\"production\\" ? { - name: \\"bjcoli\\", - styles: \\"color:green;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"bjcoli\\", - styles: \\"color:green;\\", + name: \\"v98kxt\\", + styles: \\"color:green\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInZhbmlsbGEuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEiLCJmaWxlIjoidmFuaWxsYS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHNvbWV0aGluZyB9IGZyb20gJ3BhY2thZ2UtdGhyZWUnXG5cbnNvbWV0aGluZyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" diff --git a/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap index 7240d3245..0e2c75c0a 100644 --- a/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap @@ -12,11 +12,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -37,11 +37,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { jsx } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"zszx19-SomeComponent\\", - styles: \\"color:hotpink;;label:SomeComponent;\\", + name: \\"1wl9j1m-SomeComponent\\", + styles: \\"color:hotpink;label:SomeComponent;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0MiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gcHJvcHMgPT4gPGRpdiBjc3M9e3sgY29sb3I6ICdob3RwaW5rJyB9fSB7Li4ucHJvcHN9IC8+XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -74,7 +74,7 @@ const SomeComponent = props =>
;" +}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:SomeComponent\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLSSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBwcm9wcyA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGJhY2tncm91bmRDb2xvcjogd2luZG93LnNvbWV0aGluZ1xuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKVxuIl19 */\\")} {...props} />;" `; exports[`source maps css-string 1`] = ` @@ -91,11 +91,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string import { css } from '@emotion/core'; process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFRyIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jc3NgXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ };" @@ -142,11 +142,11 @@ import * as React from 'react'; import { Global } from '@emotion/core'; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNkIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBHbG9iYWwgfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5leHBvcnQgZGVmYXVsdCAoKSA9PiA8R2xvYmFsIHN0eWxlcz17eyBjb2xvcjogJ2hvdHBpbmsnIH19IC8+XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -172,11 +172,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"eb28ebz0\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgY29sb3I6ICdob3RwaW5rJ1xufSlcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -200,11 +200,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"eb28ebz0\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" diff --git a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap index 307e0e0ed..f16afd63d 100644 --- a/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/styled-macro/__snapshots__/index.js.snap @@ -18,11 +18,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"e1c0oh1z0\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhc2ljLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJiYXNpYy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -48,11 +48,11 @@ _styled('div', { target: \\"eyt0cf80\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGwtZXhwcmVzc2lvbi5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFbUMiLCJmaWxlIjoiY2FsbC1leHByZXNzaW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQoJ2RpdicpYFxuICBjb2xvcjogaG90cGluaztcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -81,11 +81,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to string _styled(\\"div\\", { target: \\"e1vv9dlm0\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVVIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbnN0eWxlZC5kaXZgXG4gIC8vIGRpc3BsYXk6ZmxleDtcblxuICAvKlxud2VmXG5cbmRmd2YgKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -129,11 +129,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"e4byx853\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0MiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -142,11 +142,11 @@ let SomeOtherComponent = _styled(\\"div\\", { target: \\"e4byx852\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudC1zZWxlY3Rvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNeUIiLCJmaWxlIjoiY29tcG9uZW50LXNlbGVjdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogaG90cGluaztcbmBcblxubGV0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5kaXYoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG5cbmxldCBBbm90aGVyQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgJHtTb21lQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG4gICR7U29tZU90aGVyQ29tcG9uZW50fSB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG5gXG5cbmxldCBPbmVMYXN0Q29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIFtTb21lQ29tcG9uZW50XToge1xuICAgIGNvbG9yOiAnZ3JlZW4nXG4gIH0sXG4gIFtTb21lT3RoZXJDb21wb25lbnRdOiB7XG4gICAgY29sb3I6ICdncmVlbidcbiAgfVxufSlcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -303,11 +303,11 @@ class Thing { target: \\"egllku92\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQyIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -315,11 +315,11 @@ class Thing { target: \\"egllku91\\", label: \\"BadIdeaComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"d1m7sn\\", - styles: \\"background:hotpink;\\" + name: \\"1nzpx79\\", + styles: \\"background:hotpink\\" } : { - name: \\"d1m7sn\\", - styles: \\"background:hotpink;\\", + name: \\"1nzpx79\\", + styles: \\"background:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMrQiIsImZpbGUiOiJsYWJlbC5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuLyogZXNsaW50LWRpc2FibGUgcmVhY3QvanN4LXBhc2NhbC1jYXNlICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL2NvcmUnXG5cbmNsYXNzIFRoaW5nIHtcbiAgc3RhdGljIFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIEJhZElkZWFDb21wb25lbnQgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IGhvdHBpbms7XG4gIGBcbn1cblxue1xuICAvLyBsYWJlbCBzaG91bGQgZ2V0IHNhbml0aXplZFxuICBjb25zdCBNaW5pQ2FsV3JhcCQgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiByZWQ7XG4gIGBcbiAgY29uc3QgVGVzdCA9ICgpID0+IDxNaW5pQ2FsV3JhcCQgLz5cbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -331,11 +331,11 @@ class Thing { target: \\"egllku90\\", label: \\"MiniCalWrap-\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"tokvmb\\", - styles: \\"color:red;\\" + name: \\"hwfcu5\\", + styles: \\"color:red\\" } : { - name: \\"tokvmb\\", - styles: \\"color:red;\\", + name: \\"hwfcu5\\", + styles: \\"color:red\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCaUMiLCJmaWxlIjoibGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wYXNjYWwtY2FzZSAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuXG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBCYWRJZGVhQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiBob3RwaW5rO1xuICBgXG59XG5cbntcbiAgLy8gbGFiZWwgc2hvdWxkIGdldCBzYW5pdGl6ZWRcbiAgY29uc3QgTWluaUNhbFdyYXAkID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogcmVkO1xuICBgXG4gIGNvbnN0IFRlc3QgPSAoKSA9PiA8TWluaUNhbFdyYXAkIC8+XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -397,11 +397,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"eqvttbz1\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -410,11 +410,11 @@ const SomeOtherComponent = _styled(\\"button\\", { target: \\"eqvttbz0\\", label: \\"SomeOtherComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"bjcoli\\", - styles: \\"color:green;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"bjcoli\\", - styles: \\"color:green;\\", + name: \\"v98kxt\\", + styles: \\"color:green\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpcGxlLWNhbGxzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU13QyIsImZpbGUiOiJtdWx0aXBsZS1jYWxscy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkL21hY3JvJ1xuXG5jb25zdCBTb21lQ29tcG9uZW50ID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNvbnN0IFNvbWVPdGhlckNvbXBvbmVudCA9IHN0eWxlZC5idXR0b25gXG4gIGNvbG9yOiBncmVlbjtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -479,11 +479,11 @@ const SomeComponent = _styled(\\"div\\", { target: \\"e1gch6x40\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFc0IiLCJmaWxlIjoib2JqZWN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5cbmNvbnN0IFNvbWVDb21wb25lbnQgPSBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -507,11 +507,11 @@ _styled('div', { target: \\"eavmgrz0\\", label: \\"SomeComponent\\" })(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXNCIiwiZmlsZSI6Im9iamVjdC1jYWxsLWV4cHJlc3Npb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZC9tYWNybydcblxuY29uc3QgU29tZUNvbXBvbmVudCA9IHN0eWxlZCgnZGl2JykoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" diff --git a/packages/babel-plugin-emotion/__tests__/styled-requires-options.js b/packages/babel-plugin-emotion/__tests__/styled-requires-options.js index 1c32b60ab..b67dd4f49 100644 --- a/packages/babel-plugin-emotion/__tests__/styled-requires-options.js +++ b/packages/babel-plugin-emotion/__tests__/styled-requires-options.js @@ -4,9 +4,20 @@ import plugin from 'babel-plugin-emotion' const cases = { 'hash generation no file system': { - code: 'import styled from "@emotion/styled";\nstyled.h1`color:blue;`', + code: ` +import styled from '@emotion/styled' +styled.h1\`color:blue;\` +`, plugins: [plugin], babelFileName: undefined + }, + 'autoLabel set to never': { + code: ` +import styled from '@emotion/styled' +const Foo = styled.h1\`color:hotpink;\` + `, + plugins: [[plugin, { autoLabel: 'never' }]], + babelFileName: __filename } } diff --git a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap b/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap index 5bb86e626..d975078d7 100644 --- a/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap @@ -70,22 +70,22 @@ import { css } from \\"emotion\\"; /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1lrxbo5\\", - styles: \\"color:hotpink;\\", + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"njzoxi\\", - styles: \\"/* @noflip */ left:1px;\\" + name: \\"1q5yx8v\\", + styles: \\"/* @noflip */ left:1px\\" } : { - name: \\"njzoxi\\", - styles: \\"/* @noflip */ left:1px;\\", + name: \\"1q5yx8v\\", + styles: \\"/* @noflip */ left:1px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlHIiwiZmlsZSI6ImNvbW1lbnRzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY3NzYFxuICAvLyBkaXNwbGF5OmZsZXg7XG5cbiAgLypcbndlZlxuXG5kZndmKi9cbiAgY29sb3I6IGhvdHBpbms7XG5gXG5cbmNzc2BcbiAgLyogQG5vZmxpcCAqL1xuICBsZWZ0OiAxcHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogMnB4O1xuXG4gIC8qIEBub2ZsaXAgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDNweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAbm9mbGlwICovXG4gICAgcmlnaHQ6IDFweDtcbiAgfVxuYFxuXG5jc3NgXG4gIC8qIEB3aGF0ZXZlciAqL1xuICBsZWZ0OiA0cHg7XG5gXG5cbmNzc2BcbiAgbGVmdDogNXB4O1xuXG4gIC8qIEB3aGF0ZXZlciAqL1xuICAmLmZvbyB7XG4gICAgbGVmdDogNnB4O1xuICB9XG5cbiAgJi56b3Qge1xuICAgIC8qIEB3aGF0ZXZlciAqL1xuICAgIHJpZ2h0OiAycHg7XG4gIH1cbmBcblxuY3NzYFxuICAvLyBAbm9mbGlwIHNob3VsZC1iZS1yZW1vdmVkXG4gIGxlZnQ6IDdweDtcbmBcblxuY3NzYFxuICAvLyBAc2hvdWxkYmVyZW1vdmVkXG4gIGxlZnQ6IDhweDtcbmBcbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -103,11 +103,11 @@ css(process.env.NODE_ENV === \\"production\\" ? { /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"197xj9y\\", - styles: \\"/* @whatever */ left:4px;\\" + name: \\"bfdx0c\\", + styles: \\"/* @whatever */ left:4px\\" } : { - name: \\"197xj9y\\", - styles: \\"/* @whatever */ left:4px;\\", + name: \\"bfdx0c\\", + styles: \\"/* @whatever */ left:4px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCRyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); @@ -125,22 +125,22 @@ css(process.env.NODE_ENV === \\"production\\" ? { /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"luqhsn\\", - styles: \\"left:7px;\\" + name: \\"o10ag4\\", + styles: \\"left:7px\\" } : { - name: \\"luqhsn\\", - styles: \\"left:7px;\\", + name: \\"o10ag4\\", + styles: \\"left:7px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1v35xj1\\", - styles: \\"left:8px;\\" + name: \\"zrl602\\", + styles: \\"left:8px\\" } : { - name: \\"1v35xj1\\", - styles: \\"left:8px;\\", + name: \\"zrl602\\", + styles: \\"left:8px\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbW1lbnRzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVERyIsImZpbGUiOiJjb21tZW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmNzc2BcbiAgLy8gZGlzcGxheTpmbGV4O1xuXG4gIC8qXG53ZWZcblxuZGZ3ZiovXG4gIGNvbG9yOiBob3RwaW5rO1xuYFxuXG5jc3NgXG4gIC8qIEBub2ZsaXAgKi9cbiAgbGVmdDogMXB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDJweDtcblxuICAvKiBAbm9mbGlwICovXG4gICYuZm9vIHtcbiAgICBsZWZ0OiAzcHg7XG4gIH1cblxuICAmLnpvdCB7XG4gICAgLyogQG5vZmxpcCAqL1xuICAgIHJpZ2h0OiAxcHg7XG4gIH1cbmBcblxuY3NzYFxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgbGVmdDogNHB4O1xuYFxuXG5jc3NgXG4gIGxlZnQ6IDVweDtcblxuICAvKiBAd2hhdGV2ZXIgKi9cbiAgJi5mb28ge1xuICAgIGxlZnQ6IDZweDtcbiAgfVxuXG4gICYuem90IHtcbiAgICAvKiBAd2hhdGV2ZXIgKi9cbiAgICByaWdodDogMnB4O1xuICB9XG5gXG5cbmNzc2BcbiAgLy8gQG5vZmxpcCBzaG91bGQtYmUtcmVtb3ZlZFxuICBsZWZ0OiA3cHg7XG5gXG5cbmNzc2BcbiAgLy8gQHNob3VsZGJlcmVtb3ZlZFxuICBsZWZ0OiA4cHg7XG5gXG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -185,7 +185,7 @@ let someCls = /*#__PURE__*/ css({ color: window.whatever -}, \\";label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmxldCBzb21lQ2xzID0gY3NzKHtcbiAgY29sb3I6IHdpbmRvdy53aGF0ZXZlclxufSlcbiJdfQ== */\\"));" +}, process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls\\", process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy1vYmplY3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRWMiLCJmaWxlIjoiY3NzLW9iamVjdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmxldCBzb21lQ2xzID0gY3NzKHtcbiAgY29sb3I6IHdpbmRvdy53aGF0ZXZlclxufSlcbiJdfQ== */\\");" `; exports[`vanilla emotion does-not-minify-inside-content-property 1`] = ` @@ -208,11 +208,11 @@ import { css } from \\"emotion\\"; const cls1 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"hn2j47-cls1\\", - styles: \\"content:' { } ';;label:cls1;\\" + name: \\"1bpoqk7\\", + styles: \\"content:' { } '\\" } : { - name: \\"hn2j47-cls1\\", - styles: \\"content:' { } ';;label:cls1;\\", + name: \\"19tqhve-cls1\\", + styles: \\"content:' { } ';label:cls1;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); // prettier-ignore @@ -220,11 +220,11 @@ css(process.env.NODE_ENV === \\"production\\" ? { const cls2 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"nh732h-cls2\\", - styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\" + name: \\"9pd1g7\\", + styles: \\"content:\\\\\\" { } \\\\\\"\\" } : { - name: \\"nh732h-cls2\\", - styles: \\"content:\\\\\\" { } \\\\\\";;label:cls2;\\", + name: \\"16r822g-cls2\\", + styles: \\"content:\\\\\\" { } \\\\\\";label:cls2;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvZXMtbm90LW1pbmlmeS1pbnNpZGUtY29udGVudC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoiZG9lcy1ub3QtbWluaWZ5LWluc2lkZS1jb250ZW50LXByb3BlcnR5LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuY29uc3QgY2xzMSA9IGNzc2BcbiAgY29udGVudDogJyAgeyAgfSAgJztcbmBcbi8vIHByZXR0aWVyLWlnbm9yZVxuY29uc3QgY2xzMiA9IGNzc2BcbiAgY29udGVudDogXCIgIHsgIH0gIFwiO1xuYFxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });" @@ -292,30 +292,30 @@ function test() { css(\\"font-size:20px;@media (min-width:420px){color:blue;\\", /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"ekayrg-cls1\\", - styles: \\"width:96px;height:96px;;label:cls1;\\" + name: \\"14ht2kb\\", + styles: \\"width:96px;height:96px\\" } : { - name: \\"ekayrg-cls1\\", - styles: \\"width:96px;height:96px;;label:cls1;\\", + name: \\"1ylk12k-cls1\\", + styles: \\"width:96px;height:96px;label:cls1;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9XIiwiZmlsZSI6ImhvaXN0aW5nLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxuZnVuY3Rpb24gdGVzdCgpIHtcbiAgY29uc3QgY2xzMSA9IGNzc2BcbiAgICBmb250LXNpemU6IDIwcHg7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDQyMHB4KSB7XG4gICAgICBjb2xvcjogYmx1ZTtcbiAgICAgICR7Y3NzYFxuICAgICAgICB3aWR0aDogOTZweDtcbiAgICAgICAgaGVpZ2h0OiA5NnB4O1xuICAgICAgYH07XG4gICAgICBsaW5lLWhlaWdodDogMjZweDtcbiAgICB9XG4gICAgYmFja2dyb3VuZDogZ3JlZW47XG4gICAgJHt7IGJhY2tncm91bmRDb2xvcjogJ2hvdHBpbmsnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMiA9IGNzc2BcbiAgICAke3sgY29sb3I6ICdibHVlJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczMgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiBob3RwaW5rO1xuICAgIH1cbiAgYFxuICBsZXQgb3V0ZXJWYXIgPSAnc29tZXRoaW5nJ1xuICBmdW5jdGlvbiBpbm5lcigpIHtcbiAgICBjb25zdCBzdHlsZXMgPSB7IGNvbG9yOiAnZGFya29yY2hpZCcgfVxuICAgIGNvbnN0IGNvbG9yID0gJ2FxdWFtYXJpbmUnXG5cbiAgICBjb25zdCBjbHM0ID0gY3NzYFxuICAgICAgJHtjbHMzfTtcbiAgICAgICR7Y2xzMX07XG4gICAgICAke3sgY29sb3I6ICdkYXJrb3JjaGlkJyB9fTtcbiAgICAgICR7eyBjb2xvciB9fTtcbiAgICAgICR7Y3NzYFxuICAgICAgICBoZWlnaHQ6IDQyMHB4O1xuICAgICAgICB3aWR0aDogJHtzdHlsZXN9O1xuICAgICAgYH07XG4gICAgYFxuICAgIGxldCBzb21lQ2xzID0gY3NzYFxuICAgICAgY29sb3I6ICR7b3V0ZXJWYXJ9O1xuICAgIGBcbiAgfVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ - }), \\";line-height:26px;}background:green;background-color:hotpink;;;label:cls1;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\")); + }), \\";line-height:26px;}background:green;background-color:hotpink;;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls1\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdrQiIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\"); const cls2 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1tbvdns-cls2\\", - styles: \\"color:blue;;;label:cls2;\\" + name: \\"14ksm7b\\", + styles: \\"color:blue;\\" } : { - name: \\"1tbvdns-cls2\\", - styles: \\"color:blue;;;label:cls2;\\", + name: \\"ca17a1-cls2\\", + styles: \\"color:blue;;label:cls2;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCa0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); const cls3 = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1m06t0b-cls3\\", - styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\" + name: \\"a21n9o\\", + styles: \\"display:flex;&:hover{color:hotpink;}\\" } : { name: \\"1m06t0b-cls3\\", styles: \\"display:flex;&:hover{color:hotpink;};label:cls3;\\", @@ -335,10 +335,10 @@ function test() { color }, \\";\\", /*#__PURE__*/ - css(\\"height:420px;width:\\", styles, \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\")), \\";;label:cls4;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\")); + css(\\"height:420px;width:\\", styles, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDVyIsImZpbGUiOiJob2lzdGluZy5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ2Vtb3Rpb24vbWFjcm8nXG5cbmZ1bmN0aW9uIHRlc3QoKSB7XG4gIGNvbnN0IGNsczEgPSBjc3NgXG4gICAgZm9udC1zaXplOiAyMHB4O1xuICAgIEBtZWRpYSAobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICAke2Nzc2BcbiAgICAgICAgd2lkdGg6IDk2cHg7XG4gICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgIGB9O1xuICAgICAgbGluZS1oZWlnaHQ6IDI2cHg7XG4gICAgfVxuICAgIGJhY2tncm91bmQ6IGdyZWVuO1xuICAgICR7eyBiYWNrZ3JvdW5kQ29sb3I6ICdob3RwaW5rJyB9fTtcbiAgYFxuXG4gIGNvbnN0IGNsczIgPSBjc3NgXG4gICAgJHt7IGNvbG9yOiAnYmx1ZScgfX07XG4gIGBcblxuICBjb25zdCBjbHMzID0gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgJjpob3ZlciB7XG4gICAgICBjb2xvcjogaG90cGluaztcbiAgICB9XG4gIGBcbiAgbGV0IG91dGVyVmFyID0gJ3NvbWV0aGluZydcbiAgZnVuY3Rpb24gaW5uZXIoKSB7XG4gICAgY29uc3Qgc3R5bGVzID0geyBjb2xvcjogJ2RhcmtvcmNoaWQnIH1cbiAgICBjb25zdCBjb2xvciA9ICdhcXVhbWFyaW5lJ1xuXG4gICAgY29uc3QgY2xzNCA9IGNzc2BcbiAgICAgICR7Y2xzM307XG4gICAgICAke2NsczF9O1xuICAgICAgJHt7IGNvbG9yOiAnZGFya29yY2hpZCcgfX07XG4gICAgICAke3sgY29sb3IgfX07XG4gICAgICAke2Nzc2BcbiAgICAgICAgaGVpZ2h0OiA0MjBweDtcbiAgICAgICAgd2lkdGg6ICR7c3R5bGVzfTtcbiAgICAgIGB9O1xuICAgIGBcbiAgICBsZXQgc29tZUNscyA9IGNzc2BcbiAgICAgIGNvbG9yOiAke291dGVyVmFyfTtcbiAgICBgXG4gIH1cbn1cbiJdfQ== */\\"), \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:cls4\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDb0IiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"); let someCls = /*#__PURE__*/ - css(\\"color:\\", outerVar, \\";;label:someCls;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\")); + css(\\"color:\\", outerVar, \\";\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\";label:someCls\\"), process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvaXN0aW5nLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDcUIiLCJmaWxlIjoiaG9pc3RpbmcuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5mdW5jdGlvbiB0ZXN0KCkge1xuICBjb25zdCBjbHMxID0gY3NzYFxuICAgIGZvbnQtc2l6ZTogMjBweDtcbiAgICBAbWVkaWEgKG1pbi13aWR0aDogNDIwcHgpIHtcbiAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgJHtjc3NgXG4gICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICBoZWlnaHQ6IDk2cHg7XG4gICAgICBgfTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyNnB4O1xuICAgIH1cbiAgICBiYWNrZ3JvdW5kOiBncmVlbjtcbiAgICAke3sgYmFja2dyb3VuZENvbG9yOiAnaG90cGluaycgfX07XG4gIGBcblxuICBjb25zdCBjbHMyID0gY3NzYFxuICAgICR7eyBjb2xvcjogJ2JsdWUnIH19O1xuICBgXG5cbiAgY29uc3QgY2xzMyA9IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGhvdHBpbms7XG4gICAgfVxuICBgXG4gIGxldCBvdXRlclZhciA9ICdzb21ldGhpbmcnXG4gIGZ1bmN0aW9uIGlubmVyKCkge1xuICAgIGNvbnN0IHN0eWxlcyA9IHsgY29sb3I6ICdkYXJrb3JjaGlkJyB9XG4gICAgY29uc3QgY29sb3IgPSAnYXF1YW1hcmluZSdcblxuICAgIGNvbnN0IGNsczQgPSBjc3NgXG4gICAgICAke2NsczN9O1xuICAgICAgJHtjbHMxfTtcbiAgICAgICR7eyBjb2xvcjogJ2RhcmtvcmNoaWQnIH19O1xuICAgICAgJHt7IGNvbG9yIH19O1xuICAgICAgJHtjc3NgXG4gICAgICAgIGhlaWdodDogNDIwcHg7XG4gICAgICAgIHdpZHRoOiAke3N0eWxlc307XG4gICAgICBgfTtcbiAgICBgXG4gICAgbGV0IHNvbWVDbHMgPSBjc3NgXG4gICAgICBjb2xvcjogJHtvdXRlclZhcn07XG4gICAgYFxuICB9XG59XG4iXX0= */\\"); } }" `; @@ -518,8 +518,8 @@ import { keyframes } from \\"emotion\\"; const rotate360 = /*#__PURE__*/ keyframes(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1k98dea-rotate360\\", - styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\" + name: \\"1q8eu9e\\", + styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);}\\" } : { name: \\"1k98dea-rotate360\\", styles: \\"from{transform:rotate(0deg);}to{transform:rotate(360deg);};label:rotate360;\\", @@ -549,7 +549,7 @@ import { keyframes } from \\"emotion\\"; let endingRotation = window.whatever; const rotate360 = /*#__PURE__*/ -keyframes(\\"from{transform:rotate(0deg);}to{transform:rotate(\\", endingRotation, \\");};label:rotate360;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgZW5kaW5nUm90YXRpb24gPSB3aW5kb3cud2hhdGV2ZXJcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoJHtlbmRpbmdSb3RhdGlvbn0pO1xuICB9XG5gXG4iXX0= */\\"));" +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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSTJCIiwiZmlsZSI6ImtleWZyYW1lcy13aXRoLWludGVycG9sYXRpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgZW5kaW5nUm90YXRpb24gPSB3aW5kb3cud2hhdGV2ZXJcblxuY29uc3Qgcm90YXRlMzYwID0ga2V5ZnJhbWVzYFxuICBmcm9tIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgfVxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoJHtlbmRpbmdSb3RhdGlvbn0pO1xuICB9XG5gXG4iXX0= */\\");" `; exports[`vanilla emotion object-label 1`] = ` @@ -574,22 +574,22 @@ let obj = { someProp: /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"16vqze6-someProp\\", - styles: \\"color:green;;label:someProp;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"16vqze6-someProp\\", - styles: \\"color:green;;label:someProp;\\", + name: \\"cw3a48-someProp\\", + styles: \\"color:green;label:someProp;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }), anotherProp: /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"r0tjkz-anotherProp\\", - styles: \\"color:hotpink;;label:anotherProp;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"r0tjkz-anotherProp\\", - styles: \\"color:hotpink;;label:anotherProp;\\", + name: \\"1oocabw-anotherProp\\", + styles: \\"color:hotpink;label:anotherProp;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }) @@ -599,22 +599,22 @@ class Thing { static Prop = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"1q8lxwm-Prop\\", - styles: \\"color:yellow;;label:Prop;\\" + name: \\"1bcsghv\\", + styles: \\"color:yellow\\" } : { - name: \\"1q8lxwm-Prop\\", - styles: \\"color:yellow;;label:Prop;\\", + name: \\"1p4vs6c-Prop\\", + styles: \\"color:yellow;label:Prop;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPZ0IiLCJmaWxlIjoib2JqZWN0LWxhYmVsLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnZW1vdGlvbi9tYWNybydcblxubGV0IG9iaiA9IHtcbiAgc29tZVByb3A6IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pLFxuICBhbm90aGVyUHJvcDogY3NzKHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuY2xhc3MgVGhpbmcge1xuICBzdGF0aWMgUHJvcCA9IGNzcyh7IGNvbG9yOiAneWVsbG93JyB9KVxuICBCYWRJZGVhID0gY3NzKHsgY29sb3I6ICdyZWQnIH0pXG59XG4iXX0= */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); BadIdea = /*#__PURE__*/ css(process.env.NODE_ENV === \\"production\\" ? { - name: \\"15lhxip-BadIdea\\", - styles: \\"color:red;;label:BadIdea;\\" + name: \\"hwfcu5\\", + styles: \\"color:red\\" } : { - name: \\"15lhxip-BadIdea\\", - styles: \\"color:red;;label:BadIdea;\\", + name: \\"1htwp0n-BadIdea\\", + styles: \\"color:red;label:BadIdea;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1sYWJlbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRWSIsImZpbGUiOiJvYmplY3QtbGFiZWwuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdlbW90aW9uL21hY3JvJ1xuXG5sZXQgb2JqID0ge1xuICBzb21lUHJvcDogY3NzKHsgY29sb3I6ICdncmVlbicgfSksXG4gIGFub3RoZXJQcm9wOiBjc3MoeyBjb2xvcjogJ2hvdHBpbmsnIH0pXG59XG5jbGFzcyBUaGluZyB7XG4gIHN0YXRpYyBQcm9wID0gY3NzKHsgY29sb3I6ICd5ZWxsb3cnIH0pXG4gIEJhZElkZWEgPSBjc3MoeyBjb2xvcjogJ3JlZCcgfSlcbn1cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }); diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index a9d6eb4f1..f06eb312f 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -73,7 +73,20 @@ export type BabelPath = any export type EmotionBabelPluginPass = any -export default function(babel: *) { +const AUTO_LABEL_VALUES = ['dev-only', 'never', 'always'] + +export default function(babel: *, options: *) { + if ( + options.autoLabel !== undefined && + !AUTO_LABEL_VALUES.includes(options.autoLabel) + ) { + throw new Error( + `The 'autoLabel' option must be undefined, or one of the following: ${AUTO_LABEL_VALUES.map( + s => `"${s}"` + ).join(', ')}` + ) + } + let t = babel.types return { name: 'emotion', diff --git a/packages/babel-plugin-emotion/src/utils/checks.js b/packages/babel-plugin-emotion/src/utils/checks.js deleted file mode 100644 index 07fcc3d12..000000000 --- a/packages/babel-plugin-emotion/src/utils/checks.js +++ /dev/null @@ -1,27 +0,0 @@ -// @flow - -export function isTaggedTemplateExpressionTranspiledByTypeScript(path: *) { - if (path.node.arguments.length !== 1) { - return false - } - - const argPath = path.get('arguments')[0] - - return ( - argPath.isLogicalExpression() && - argPath.get('left').isIdentifier() && - argPath.node.left.name.includes('templateObject') && - argPath.get('right').isAssignmentExpression() && - argPath - .get('right') - .get('right') - .isCallExpression() && - argPath - .get('right') - .get('right') - .get('callee') - .isIdentifier() && - argPath.node.right.right.callee.name.includes('makeTemplateObject') && - argPath.node.right.right.arguments.length === 2 - ) -} diff --git a/packages/babel-plugin-emotion/src/utils/get-styled-options.js b/packages/babel-plugin-emotion/src/utils/get-styled-options.js index 8a4e1f1ad..4c830ca6e 100644 --- a/packages/babel-plugin-emotion/src/utils/get-styled-options.js +++ b/packages/babel-plugin-emotion/src/utils/get-styled-options.js @@ -3,13 +3,14 @@ import { getLabelFromPath } from './label' import { getTargetClassName } from './get-target-class-name' export let getStyledOptions = (t: *, path: *, state: *) => { + const autoLabel = state.opts.autoLabel || 'dev-only' let properties = [ t.objectProperty( t.identifier('target'), t.stringLiteral(getTargetClassName(state, t)) ) ] - let label = getLabelFromPath(path, state, t) + let label = autoLabel !== 'never' ? getLabelFromPath(path, state, t) : null if (label) { properties.push( t.objectProperty(t.identifier('label'), t.stringLiteral(label)) diff --git a/packages/babel-plugin-emotion/src/utils/index.js b/packages/babel-plugin-emotion/src/utils/index.js index a10c2c115..076e03d3a 100644 --- a/packages/babel-plugin-emotion/src/utils/index.js +++ b/packages/babel-plugin-emotion/src/utils/index.js @@ -8,6 +8,9 @@ export { transformExpressionWithStyles } from './transform-expression-with-styles' export { getStyledOptions } from './get-styled-options' -export { appendStringToArguments, joinStringLiterals } from './strings' +export { + appendStringReturningExpressionToArguments, + joinStringLiterals +} from './strings' export { addImport } from './add-import' export { createTransformerMacro } from './transformer-macro' diff --git a/packages/babel-plugin-emotion/src/utils/label.js b/packages/babel-plugin-emotion/src/utils/label.js index 04833600d..cc569c43e 100644 --- a/packages/babel-plugin-emotion/src/utils/label.js +++ b/packages/babel-plugin-emotion/src/utils/label.js @@ -13,11 +13,10 @@ const sanitizeLabelPart = (labelPart: string) => function getLabel( identifierName?: string, - autoLabel: boolean, labelFormat?: string | (LabelFormatOptions => string), filename: string ) { - if (!identifierName || !autoLabel) return null + if (!identifierName) return null const sanitizedName = sanitizeLabelPart(identifierName) @@ -49,9 +48,6 @@ function getLabel( export function getLabelFromPath(path: *, state: *, t: *) { return getLabel( getIdentifierName(path, t), - state.opts.autoLabel === undefined - ? process.env.NODE_ENV !== 'production' - : state.opts.autoLabel, state.opts.labelFormat, state.file.opts.filename ) diff --git a/packages/babel-plugin-emotion/src/utils/strings.js b/packages/babel-plugin-emotion/src/utils/strings.js index 5775edc05..2573ab262 100644 --- a/packages/babel-plugin-emotion/src/utils/strings.js +++ b/packages/babel-plugin-emotion/src/utils/strings.js @@ -1,13 +1,43 @@ // @flow -import { isTaggedTemplateExpressionTranspiledByTypeScript } from './checks' - -export const appendStringToArguments = (path: *, string: string, t: *) => { - if (!string) { - return +function isTaggedTemplateExpressionTranspiledByTypeScript(path: *) { + if (path.node.arguments.length !== 1) { + return false } - const args = path.node.arguments - if (t.isStringLiteral(args[args.length - 1])) { - args[args.length - 1].value += string + + const argPath = path.get('arguments')[0] + + return ( + argPath.isLogicalExpression() && + argPath.get('left').isIdentifier() && + argPath.node.left.name.includes('templateObject') && + argPath.get('right').isAssignmentExpression() && + argPath + .get('right') + .get('right') + .isCallExpression() && + argPath + .get('right') + .get('right') + .get('callee') + .isIdentifier() && + argPath.node.right.right.callee.name.includes('makeTemplateObject') && + argPath.node.right.right.arguments.length === 2 + ) +} + +export const appendStringReturningExpressionToArguments = ( + t: *, + path: *, + expression: * +) => { + let lastIndex = path.node.arguments.length - 1 + let last = path.node.arguments[lastIndex] + if (t.isStringLiteral(last)) { + if (typeof expression === 'string') { + path.node.arguments[lastIndex].value += expression + } else { + path.node.arguments[lastIndex] = t.binaryExpression('+', last, expression) + } } else if (isTaggedTemplateExpressionTranspiledByTypeScript(path)) { const makeTemplateObjectCallPath = path .get('arguments')[0] @@ -17,10 +47,20 @@ export const appendStringToArguments = (path: *, string: string, t: *) => { makeTemplateObjectCallPath.get('arguments').forEach(argPath => { const elements = argPath.get('elements') const lastElement = elements[elements.length - 1] - lastElement.replaceWith(t.stringLiteral(lastElement.node.value + string)) + if (typeof expression === 'string') { + lastElement.replaceWith( + t.stringLiteral(lastElement.node.value + expression) + ) + } else { + lastElement.replaceWith( + t.binaryExpression('+', lastElement.node, t.cloneNode(expression)) + ) + } }) + } else if (typeof expression === 'string') { + path.node.arguments.push(t.stringLiteral(expression)) } else { - args.push(t.stringLiteral(string)) + path.node.arguments.push(expression) } } diff --git a/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js b/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js index 0a8b3046f..8fcad35a6 100644 --- a/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js +++ b/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js @@ -5,13 +5,15 @@ import { getExpressionsFromTemplateLiteral } from './minify' import { getLabelFromPath } from './label' import { getSourceMap } from './source-maps' import { simplifyObject } from './object-to-string' -import { appendStringToArguments, joinStringLiterals } from './strings' -import { isTaggedTemplateExpressionTranspiledByTypeScript } from './checks' +import { + appendStringReturningExpressionToArguments, + joinStringLiterals +} from './strings' const CSS_OBJECT_STRINGIFIED_ERROR = "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)." -function createSourceMapConditional(t, production, development) { +function createNodeEnvConditional(t, production, development) { return t.conditionalExpression( t.binaryExpression( '===', @@ -39,6 +41,7 @@ export let transformExpressionWithStyles = ({ shouldLabel: boolean, sourceMap?: string }): { node?: *, isPure: boolean } => { + const autoLabel = state.opts.autoLabel || 'dev-only' let t = babel.types if (t.isTaggedTemplateExpression(path)) { const expressions = getExpressionsFromTemplateLiteral(path.node.quasi, t) @@ -53,13 +56,6 @@ export let transformExpressionWithStyles = ({ arg => arg.type !== 'SpreadElement' ) - if (canAppendStrings && shouldLabel) { - const label = getLabelFromPath(path, state, t) - if (label) { - appendStringToArguments(path, `;label:${label};`, t) - } - } - let isPure = true path.get('arguments').forEach(node => { @@ -82,12 +78,21 @@ export let transformExpressionWithStyles = ({ sourceMap = getSourceMap(path.node.loc.start, state) } + const label = + shouldLabel && autoLabel !== 'never' + ? getLabelFromPath(path, state, t) + : null + if ( path.node.arguments.length === 1 && t.isStringLiteral(path.node.arguments[0]) ) { - let cssString = path.node.arguments[0].value - let res = serializeStyles([cssString]) + let cssString = path.node.arguments[0].value.replace(/;$/, '') + let res = serializeStyles([ + `${cssString}${ + label && autoLabel === 'always' ? `;label:${label};` : '' + }` + ]) let prodNode = t.objectExpression([ t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)), t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)) @@ -109,6 +114,11 @@ export let transformExpressionWithStyles = ({ cssObjectToString._compact = true state.file.path.unshiftContainer('body', [cssObjectToString]) } + + if (label && autoLabel === 'dev-only') { + res = serializeStyles([`${cssString};label:${label};`]) + } + let devNode = t.objectExpression([ t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)), t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles)), @@ -118,45 +128,38 @@ export let transformExpressionWithStyles = ({ t.cloneNode(state.emotionStringifiedCssId) ) ]) - node = createSourceMapConditional(t, prodNode, devNode) + node = createNodeEnvConditional(t, prodNode, devNode) } return { node, isPure: true } } + + if (label) { + const labelString = `;label:${label}` + + switch (autoLabel) { + case 'dev-only': { + const labelConditional = createNodeEnvConditional( + t, + t.stringLiteral(''), + t.stringLiteral(labelString) + ) + appendStringReturningExpressionToArguments(t, path, labelConditional) + break + } + case 'always': + appendStringReturningExpressionToArguments(t, path, labelString) + break + } + } + if (sourceMap) { - let lastIndex = path.node.arguments.length - 1 - let last = path.node.arguments[lastIndex] - let sourceMapConditional = createSourceMapConditional( + let sourceMapConditional = createNodeEnvConditional( t, t.stringLiteral(''), t.stringLiteral(sourceMap) ) - if (t.isStringLiteral(last)) { - path.node.arguments[lastIndex] = t.binaryExpression( - '+', - last, - sourceMapConditional - ) - } else if (isTaggedTemplateExpressionTranspiledByTypeScript(path)) { - const makeTemplateObjectCallPath = path - .get('arguments')[0] - .get('right') - .get('right') - - makeTemplateObjectCallPath.get('arguments').forEach(argPath => { - const elements = argPath.get('elements') - const lastElement = elements[elements.length - 1] - lastElement.replaceWith( - t.binaryExpression( - '+', - lastElement.node, - t.cloneNode(sourceMapConditional) - ) - ) - }) - } else { - path.node.arguments.push(sourceMapConditional) - } + appendStringReturningExpressionToArguments(t, path, sourceMapConditional) } return { node: undefined, isPure } diff --git a/packages/babel-preset-css-prop/README.md b/packages/babel-preset-css-prop/README.md index 78d8b1942..3b6360a4c 100644 --- a/packages/babel-preset-css-prop/README.md +++ b/packages/babel-preset-css-prop/README.md @@ -31,7 +31,7 @@ yarn add @emotion/babel-preset-css-prop + [ + "@emotion/babel-preset-css-prop", + { -+ "autoLabel": true, ++ "autoLabel": "dev-only", + "labelFormat": "[local]" + } + ] @@ -40,7 +40,7 @@ yarn add @emotion/babel-preset-css-prop - [ - "emotion", - { -- "autoLabel": true, +- "autoLabel": "dev-only", - "labelFormat": "[local]" - } - ] @@ -146,7 +146,7 @@ Options for both `babel-plugin-emotion` and `@babel/plugin-transform-react-jsx` "presets": [ "@emotion/babel-preset-css-prop", { - "autoLabel": true, + "autoLabel": "dev-only", "labelFormat": "[local]", "useBuiltIns": false, "throwIfNamespace": true diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap index e23b5c75e..8b498cea8 100644 --- a/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap +++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/index.js.snap @@ -16,11 +16,11 @@ import * as React from 'react'; import { jsx as ___EmotionJSX } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1gvobwd-Component\\", - styles: \\"color:green;;label:Component;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" } : { - name: \\"1gvobwd-Component\\", - styles: \\"color:green;;label:Component;\\", + name: \\"1p2bh5c-Component\\", + styles: \\"color:green;label:Component;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFycmF5LWNzcy1wcm9wLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVnQyIsImZpbGUiOiJhcnJheS1jc3MtcHJvcC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBDb21wb25lbnQgPSBwcm9wcyA9PiA8ZGl2IGNzcz17W3sgY29sb3I6ICdncmVlbicgfV19IHsuLi5wcm9wc30gLz5cbiJdfQ== */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -57,11 +57,11 @@ import * as React from 'react'; import { jsx as ___EmotionJSX } from \\"@emotion/core\\"; var _ref = process.env.NODE_ENV === \\"production\\" ? { - name: \\"1q24rv0-Button\\", - styles: \\"color:hotpink;;label:Button;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" } : { - name: \\"1q24rv0-Button\\", - styles: \\"color:hotpink;;label:Button;\\", + name: \\"1v4u9bq-Button\\", + styles: \\"color:hotpink;label:Button;\\", map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1RIiwiZmlsZSI6ImluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5cbmV4cG9ydCBsZXQgQnV0dG9uID0gcHJvcHMgPT4ge1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIGNzcz17e1xuICAgICAgICAgIGNvbG9yOiAnaG90cGluaydcbiAgICAgICAgfX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgLz5cbiAgICA8Lz5cbiAgKVxufVxuIl19 */\\", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; diff --git a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap index e89873273..89bcbec2e 100644 --- a/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap +++ b/packages/babel-preset-css-prop/__tests__/__snapshots__/options-are-used.js.snap @@ -13,8 +13,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i import * as React from 'react'; import { jsx as ___EmotionJSX } from \\"@emotion/core\\"; var _ref = { - name: \\"1vf7vy9-__fixtures__--array-css-prop--Component\\", - styles: \\"color:green;;label:__fixtures__--array-css-prop--Component;\\" + name: \\"v98kxt\\", + styles: \\"color:green\\" }; const Component = props => ___EmotionJSX(\\"div\\", _extends({ @@ -46,8 +46,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i import * as React from 'react'; import { jsx as ___EmotionJSX } from \\"@emotion/core\\"; var _ref = { - name: \\"1a7y9g-__fixtures__--__fixtures__--Button\\", - styles: \\"color:hotpink;;label:__fixtures__--__fixtures__--Button;\\" + name: \\"3sn2xs\\", + styles: \\"color:hotpink\\" }; export let Button = props => { return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(\\"button\\", _extends({ diff --git a/packages/core/__tests__/__snapshots__/server.js.snap b/packages/core/__tests__/__snapshots__/server.js.snap index 5ffef2a95..ef18eeb49 100644 --- a/packages/core/__tests__/__snapshots__/server.js.snap +++ b/packages/core/__tests__/__snapshots__/server.js.snap @@ -15,11 +15,11 @@ exports[`ssr @import 1`] = ` exports[`ssr ClassNames 1`] = ` -
- + @@ -177,10 +177,10 @@ exports[`ssr with old api ClassNames 1`] = ` .css-15qt0xu{color:hotpink;}
- - + diff --git a/packages/utils/src/index.js b/packages/utils/src/index.js index 62a86f817..df507e517 100644 --- a/packages/utils/src/index.js +++ b/packages/utils/src/index.js @@ -12,7 +12,7 @@ export function getRegisteredStyles( classNames.split(' ').forEach(className => { if (registered[className] !== undefined) { - registeredStyles.push(registered[className]) + registeredStyles.push(`${registered[className]};`) } else { rawClassName += `${className} ` } From 59368127c7c62b748eefa116cdea84d5a889c21a Mon Sep 17 00:00:00 2001 From: ajs139 Date: Sat, 4 Jan 2020 19:25:56 -0500 Subject: [PATCH 061/176] Improve support for Enzyme's shallow rendering (#1672) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Improve support for Enzyme's shallow rendering * Remove empty className from snapshots * Fix flow errors * Remove [transformed] from plain objects, add interesting test case * Clean-up code * don't transfrom DOM elements * Updating interesting test case, the plot thickens * Resolved the curious test isolatiion issue - clean JSDOM after each test * Move enzyme-specific serialization to subpackage * Update docs/testing.mdx Co-Authored-By: Mateusz Burzyński * Update packages/jest-emotion/README.md Co-Authored-By: Mateusz Burzyński * Add types to jest-emotion/enzyme * Changes per code review * Update packages/jest-emotion/test/react-enzyme.test.js Co-Authored-By: Mitchell Hamilton * Add message to remove enyzme-to-json if it's present * Add warning if no JSOM when getting styles * Update utils.js * Update utils.js * Update utils.js Co-authored-by: Mateusz Burzyński Co-authored-by: Mitchell Hamilton --- docs/testing.mdx | 13 +- packages/create-emotion/test/css.test.js | 1 - packages/jest-emotion/README.md | 16 +- packages/jest-emotion/enzyme/index.js | 1 + packages/jest-emotion/enzyme/package.json | 8 + packages/jest-emotion/enzyme/types/index.d.ts | 13 + packages/jest-emotion/package.json | 17 +- packages/jest-emotion/src/enzyme.js | 43 +++ packages/jest-emotion/src/index.js | 117 +----- packages/jest-emotion/src/serializer.js | 241 +++++++++++++ packages/jest-emotion/src/utils.js | 77 ++-- .../__snapshots__/react-enzyme.test.js.snap | 340 +++++++++++++++--- packages/jest-emotion/test/matchers.test.js | 54 ++- .../jest-emotion/test/react-enzyme.test.js | 289 +++++++++------ packages/jest-emotion/types/index.d.ts | 10 +- packages/styled/test/theming.dom.test.js | 3 - scripts/test-utils/enzyme-env.js | 5 + scripts/test-utils/legacy-env.js | 10 +- 18 files changed, 931 insertions(+), 327 deletions(-) create mode 100644 packages/jest-emotion/enzyme/index.js create mode 100644 packages/jest-emotion/enzyme/package.json create mode 100644 packages/jest-emotion/enzyme/types/index.d.ts create mode 100644 packages/jest-emotion/src/enzyme.js create mode 100644 packages/jest-emotion/src/serializer.js create mode 100644 scripts/test-utils/enzyme-env.js diff --git a/docs/testing.mdx b/docs/testing.mdx index 4540df5e3..2e33dc0ac 100644 --- a/docs/testing.mdx +++ b/docs/testing.mdx @@ -18,11 +18,20 @@ npm install --save-dev jest-emotion Add the snapshot serializer in your [`setupTestFrameworkScriptFile`](http://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) _or_ at the top of your test file. +When using Enzyme, it's recommended to use the combined enzyme and emotion serializer to support shallow rendering: + +```javascript +import { createSerializer } from 'jest-emotion/enzyme' // also adds the enzyme-to-json serializer + +expect.addSnapshotSerializer(createSerializer()) +``` + +Otherwise, use standard `createSerializer` method. + ```javascript -import * as emotion from 'emotion' import { createSerializer } from 'jest-emotion' -expect.addSnapshotSerializer(createSerializer(emotion)) +expect.addSnapshotSerializer(createSerializer()) ``` ### Writing a test diff --git a/packages/create-emotion/test/css.test.js b/packages/create-emotion/test/css.test.js index 4ffa73383..bd0970fcf 100644 --- a/packages/create-emotion/test/css.test.js +++ b/packages/create-emotion/test/css.test.js @@ -1,5 +1,4 @@ // @flow -import 'test-utils/legacy-env' import 'test-utils/next-env' import React from 'react' import renderer from 'react-test-renderer' diff --git a/packages/jest-emotion/README.md b/packages/jest-emotion/README.md index 3feb72670..8715788d7 100644 --- a/packages/jest-emotion/README.md +++ b/packages/jest-emotion/README.md @@ -16,9 +16,19 @@ The easiest way to test React components with emotion is with the snapshot seria // jest.config.js module.exports = { // ... other config - snapshotSerializers: [ - 'jest-emotion' /* if needed other snapshotSerializers should go here */ - ] + snapshotSerializers: ['jest-emotion'] +} +``` + +To assist with shallow rendering, there's a custom enzyme snapshot serializer, that includes the `enzyme-to-json` +serializer, which is available by importing `jest-emotion/enzyme`. If you already have the `enzyme-to-json` serializer +added to `snapshotSerializers`, it will need to be removed to allow this to work. + +```js +// jest.config.js +module.exports = { + // ... other config + snapshotSerializers: ['jest-emotion/enzyme'] } ``` diff --git a/packages/jest-emotion/enzyme/index.js b/packages/jest-emotion/enzyme/index.js new file mode 100644 index 000000000..57c18d477 --- /dev/null +++ b/packages/jest-emotion/enzyme/index.js @@ -0,0 +1 @@ +export * from '../src/enzyme' diff --git a/packages/jest-emotion/enzyme/package.json b/packages/jest-emotion/enzyme/package.json new file mode 100644 index 000000000..3d1b6c5d6 --- /dev/null +++ b/packages/jest-emotion/enzyme/package.json @@ -0,0 +1,8 @@ +{ + "main": "dist/jest-emotion.cjs.js", + "module": "dist/jest-emotion.esm.js", + "types": "../types/enzyme", + "preconstruct": { + "source": "../src/enzyme" + } +} diff --git a/packages/jest-emotion/enzyme/types/index.d.ts b/packages/jest-emotion/enzyme/types/index.d.ts new file mode 100644 index 000000000..7cd1ebc63 --- /dev/null +++ b/packages/jest-emotion/enzyme/types/index.d.ts @@ -0,0 +1,13 @@ +/// + +export interface CreateSerializerOptions { + classNameReplacer?: (className: string, index: number) => string + DOMElements?: boolean +} +export function createSerializer( + options?: CreateSerializerOptions +): jest.SnapshotSerializerPlugin +export const print: jest.SnapshotSerializerPlugin['print'] +export const test: jest.SnapshotSerializerPlugin['test'] +declare const serializer: jest.SnapshotSerializerPlugin +export default serializer diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json index edae2c246..6eb909314 100644 --- a/packages/jest-emotion/package.json +++ b/packages/jest-emotion/package.json @@ -3,11 +3,13 @@ "version": "11.0.0-next.7", "description": "Jest utilities for emotion", "main": "dist/jest-emotion.cjs.js", + "module": "dist/jest-emotion.esm.js", "types": "types/index.d.ts", "files": [ "src", "dist", "types/*.d.ts", + "enzyme", "serializer.js" ], "scripts": { @@ -20,6 +22,14 @@ "css": "^2.2.1", "specificity": "^0.4.1" }, + "peerDependencies": { + "enzyme-to-json": "^3.2.1" + }, + "peerDependenciesMeta": { + "enzyme-to-json": { + "optional": true + } + }, "devDependencies": { "@emotion/core": "^11.0.0-next.7", "dtslint": "^0.3.0", @@ -47,7 +57,10 @@ "bugs": { "url": "https://github.com/emotion-js/emotion/issues" }, - "browser": { - "./dist/jest-emotion.cjs.js": "./dist/jest-emotion.browser.cjs.js" + "preconstruct": { + "entrypoints": [ + ".", + "enzyme" + ] } } diff --git a/packages/jest-emotion/src/enzyme.js b/packages/jest-emotion/src/enzyme.js new file mode 100644 index 000000000..3396a2b58 --- /dev/null +++ b/packages/jest-emotion/src/enzyme.js @@ -0,0 +1,43 @@ +// @flow +import type { Options } from './serializer' +import { createSerializer as createEmotionSerializer } from './serializer' +import { createSerializer as createEnzymeSerializer } from 'enzyme-to-json' + +const enzymeSerializer = createEnzymeSerializer({}) + +const tickle = (wrapper: *) => { + if (typeof wrapper.dive === 'function') { + wrapper.find('EmotionCssPropInternal').forEach(el => el.dive()) + } + return wrapper +} + +export function createSerializer({ + classNameReplacer, + DOMElements = true +}: Options = {}) { + const emotionSerializer = createEmotionSerializer({ + classNameReplacer, + DOMElements + }) + return { + test(node: *) { + return enzymeSerializer.test(node) || emotionSerializer.test(node) + }, + print(node: *, printer: *) { + let result = node + if (enzymeSerializer.test(node)) { + const tickled = tickle(node) + result = enzymeSerializer.print(tickled, printer) + } + if (emotionSerializer.test(node)) { + result = emotionSerializer.print(result, printer) + } + return result + } + } +} + +export const { print, test } = createSerializer() + +export default { print, test } diff --git a/packages/jest-emotion/src/index.js b/packages/jest-emotion/src/index.js index cbfaefa98..8fe27093f 100644 --- a/packages/jest-emotion/src/index.js +++ b/packages/jest-emotion/src/index.js @@ -1,119 +1,6 @@ // @flow -import * as css from 'css' -import { replaceClassNames } from './replace-class-names' -import { - getClassNamesFromNodes, - isReactElement, - isEmotionCssPropElementType, - isEmotionCssPropEnzymeElement, - isDOMElement, - getStylesFromClassNames, - getStyleElements, - getKeys -} from './utils' - +import { createSerializer, print, test } from './serializer' export { matchers } from './matchers' -function getNodes(node, nodes = []) { - if (Array.isArray(node)) { - for (let child of node) { - getNodes(child, nodes) - } - return nodes - } - - if (node.children) { - for (let child of node.children) { - getNodes(child, nodes) - } - } - - if (typeof node === 'object') { - nodes.push(node) - } - - return nodes -} - -function getPrettyStylesFromClassNames( - classNames: Array, - elements: Array -) { - let styles = getStylesFromClassNames(classNames, elements) - - let prettyStyles - try { - prettyStyles = css.stringify(css.parse(styles)) - } catch (e) { - console.error(e) - throw new Error(`There was an error parsing the following css: "${styles}"`) - } - return prettyStyles -} - -type Options = { - classNameReplacer?: (className: string, index: number) => string, - DOMElements?: boolean -} - -function filterEmotionProps(props = {}) { - const { - css, - __EMOTION_TYPE_PLEASE_DO_NOT_USE__, - __EMOTION_LABEL_PLEASE_DO_NOT_USE__, - ...rest - } = props - - rest.css = 'unknown styles' - - return rest -} - -export function createSerializer({ - classNameReplacer, - DOMElements = true -}: Options = {}) { - let cache = new WeakSet() - function print(val: *, printer: Function) { - if (isEmotionCssPropEnzymeElement(val)) { - return val.children.map(printer).join('\n') - } - if (isEmotionCssPropElementType(val)) { - return printer({ - ...val, - props: filterEmotionProps(val.props), - type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ - }) - } - const nodes = getNodes(val) - const classNames = getClassNamesFromNodes(nodes) - let elements = getStyleElements() - const styles = getPrettyStylesFromClassNames(classNames, elements) - nodes.forEach(cache.add, cache) - const printedVal = printer(val) - nodes.forEach(cache.delete, cache) - let keys = getKeys(elements) - return replaceClassNames( - classNames, - styles, - printedVal, - keys, - classNameReplacer - ) - } - - function test(val: *) { - return ( - val && - ((!cache.has(val) && - (isReactElement(val) || (DOMElements && isDOMElement(val)))) || - isEmotionCssPropEnzymeElement(val) || - isEmotionCssPropElementType(val)) - ) - } - return { test, print } -} - -export let { print, test } = createSerializer() - +export { createSerializer, print, test } export default { print, test } diff --git a/packages/jest-emotion/src/serializer.js b/packages/jest-emotion/src/serializer.js new file mode 100644 index 000000000..dd85e03e1 --- /dev/null +++ b/packages/jest-emotion/src/serializer.js @@ -0,0 +1,241 @@ +// @flow +import * as css from 'css' +import { replaceClassNames } from './replace-class-names' +import { + getClassNamesFromNodes, + isReactElement, + isEmotionCssPropElementType, + isEmotionCssPropEnzymeElement, + isDOMElement, + getStylesFromClassNames, + getStyleElements, + getKeys, + flatMap, + isPrimitive, + hasIntersection +} from './utils' + +function getNodes(node, nodes = []) { + if (Array.isArray(node)) { + for (let child of node) { + getNodes(child, nodes) + } + return nodes + } + + if (node.children) { + for (let child of node.children) { + getNodes(child, nodes) + } + } + + if (typeof node === 'object') { + nodes.push(node) + } + + return nodes +} + +function copyProps(src, target) { + return Object.defineProperties(src, { + ...Object.getOwnPropertyDescriptors(target) + }) +} + +function deepTransform(node, transform) { + if (Array.isArray(node)) { + return node.map(child => deepTransform(child, transform)) + } + + const transformed: any = transform(node) + + if (transformed !== node) { + if (transformed.props) { + copyProps(transformed, { + props: Object.entries(transformed.props).reduce( + (props, [key, value]) => + Object.assign(props, { + [key]: deepTransform(value, transform) + }), + {} + ) + }) + } + if (transformed.children) { + return copyProps(transformed, { + // flatMap to allow a child of to be transformed to + children: flatMap( + (deepTransform(transformed.children, transform): any), + id => id + ) + }) + } + } + + return transformed +} + +function getPrettyStylesFromClassNames( + classNames: Array, + elements: Array +) { + const styles = getStylesFromClassNames(classNames, elements) + + let prettyStyles + try { + prettyStyles = css.stringify(css.parse(styles)) + } catch (e) { + console.error(e) + throw new Error(`There was an error parsing the following css: "${styles}"`) + } + return prettyStyles +} + +export type Options = { + classNameReplacer?: (className: string, index: number) => string, + DOMElements?: boolean +} + +function filterEmotionProps(props = {}) { + const { + css, + __EMOTION_TYPE_PLEASE_DO_NOT_USE__, + __EMOTION_LABEL_PLEASE_DO_NOT_USE__, + ...rest + } = props + + rest.css = 'unknown styles' + + return rest +} + +function isShallowEnzymeElement(element: any, classNames: string[]) { + const delimiter = ' ' + const childClassNames = flatMap(element.children || [], ({ props = {} }) => + (props.className || '').split(delimiter) + ).filter(Boolean) + return !hasIntersection(classNames, childClassNames) +} + +const createConvertEmotionElements = ( + keys: string[], + printer: *, + isTransformed +) => (node: any) => { + if (isTransformed(node) || isPrimitive(node)) { + return node + } + if (isEmotionCssPropEnzymeElement(node)) { + const cssClassNames = (node.props.css.name || '').split(' ') + const expectedClassNames = flatMap(cssClassNames, cssClassName => + keys.map(key => `${key}-${cssClassName}`) + ) + // if this is a shallow element, we need to manufacture the className + // since the underlying component is not rendered. + if (isShallowEnzymeElement(node, expectedClassNames)) { + const className = [node.props.className] + .concat(expectedClassNames) + .filter(Boolean) + .join(' ') + const emotionType = node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ + // emotionType will be a string for DOM elements + const type = + typeof emotionType === 'string' ? emotionType : emotionType.name + return { + ...node, + props: filterEmotionProps({ + ...node.props, + className + }), + type + } + } else { + return node.children + } + } + if (isEmotionCssPropElementType(node)) { + return { + ...node, + props: filterEmotionProps(node.props), + type: node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ + } + } + if (isReactElement(node)) { + return copyProps({}, node) + } + return node +} + +function clean(node: any, classNames: string[]) { + if (Array.isArray(node)) { + for (const child of node) { + clean(child, classNames) + } + return + } + if (node.children) { + for (const child of node.children) { + clean(child, classNames) + } + } + if (node.props) { + const { className } = node.props + if (!className) { + // if it's empty, remove it + delete node.props.className + } else { + const hasKnownClass = hasIntersection(className.split(' '), classNames) + if (hasKnownClass) { + delete node.props.css + } + } + } +} + +export function createSerializer({ + classNameReplacer, + DOMElements = true +}: Options = {}) { + const cache = new WeakSet() + const isTransformed = (node: any) => cache.has(node) + function print(val: *, printer: Function) { + const isNestedPrint = isTransformed(val) + const elements = getStyleElements() + const keys = getKeys(elements) + const convertEmotionElements = createConvertEmotionElements( + keys, + printer, + isTransformed + ) + const converted = deepTransform(val, convertEmotionElements) + const nodes = getNodes(converted) + nodes.forEach(cache.add, cache) + const classNames = getClassNamesFromNodes(nodes) + const styles = getPrettyStylesFromClassNames(classNames, elements) + clean(converted, classNames) + const printedVal = printer(converted) + nodes.forEach(cache.delete, cache) + return isNestedPrint + ? printedVal + : replaceClassNames( + classNames, + styles, + printedVal, + keys, + classNameReplacer + ) + } + + return { + test(val: *) { + return ( + val && + (!isTransformed(val) && + (isReactElement(val) || (DOMElements && isDOMElement(val)))) + ) + }, + print + } +} + +export const { print, test } = createSerializer() diff --git a/packages/jest-emotion/src/utils.js b/packages/jest-emotion/src/utils.js index 0a59e8609..17f27be23 100644 --- a/packages/jest-emotion/src/utils.js +++ b/packages/jest-emotion/src/utils.js @@ -1,10 +1,12 @@ // @flow +const isBrowser = typeof document !== 'undefined' + function last(arr) { return arr.length > 0 ? arr[arr.length - 1] : undefined } -function flatMap(arr, iteratee) { +export function flatMap(arr: T[], iteratee: (arg: T) => S[] | S): S[] { return [].concat(...arr.map(iteratee)) } @@ -37,13 +39,23 @@ function isTagWithClassName(node) { return node.prop('className') && typeof node.type() === 'string' } -function getClassNamesFromEnzyme(selectors, node) { - // We need to dive if we have selected a styled child from a shallow render - const actualComponent = shouldDive(node) ? node.dive() : node +function findNodeWithClassName(node) { // Find the first node with a className prop - const components = actualComponent.findWhere(isTagWithClassName) - const classes = components.length && components.first().prop('className') - return getClassNames(selectors, classes) + const found = node.findWhere(isTagWithClassName) + return found.length ? found.first() : null +} + +function getClassNameProp(node) { + return (node && node.prop('className')) || '' +} + +function getClassNamesFromEnzyme(selectors, node) { + // We need to dive in to get the className if we have a styled element from a shallow render + const isShallow = shouldDive(node) + const nodeWithClassName = findNodeWithClassName( + isShallow ? node.dive() : node + ) + return getClassNames(selectors, getClassNameProp(nodeWithClassName)) } function getClassNamesFromCheerio(selectors, node) { @@ -105,9 +117,9 @@ export function getClassNamesFromNodes(nodes: Array) { }, []) } -let keyframesPattern = /^@keyframes\s+(animation-[^{\s]+)+/ +const keyframesPattern = /^@keyframes\s+(animation-[^{\s]+)+/ -let removeCommentPattern = /\/\*[\s\S]*?\*\//g +const removeCommentPattern = /\/\*[\s\S]*?\*\//g const getElementRules = (element: HTMLStyleElement): string[] => { const nonSpeedyRule = element.textContent @@ -128,48 +140,50 @@ export function getStylesFromClassNames( if (!classNames.length) { return '' } - let keys = getKeys(elements) + const keys = getKeys(elements) if (!keys.length) { return '' } - let targetClassName = classNames.find(className => + const targetClassName = classNames.find(className => /^e[a-z0-9]+$/.test(className) ) - let keyPattern = `(${keys.join('|')})-` - let classNamesRegExp = new RegExp( + const keyPattern = `(${keys.join('|')})-` + const classNamesRegExp = new RegExp( targetClassName ? `^(${keyPattern}|${targetClassName})` : `^${keyPattern}` ) - let filteredClassNames = classNames.filter(className => + const filteredClassNames = classNames.filter(className => classNamesRegExp.test(className) ) if (!filteredClassNames.length) { return '' } - let selectorPattern = new RegExp('\\.(' + filteredClassNames.join('|') + ')') - let keyframes = {} + const selectorPattern = new RegExp( + '\\.(' + filteredClassNames.join('|') + ')' + ) + const keyframes = {} let styles = '' - flatMap(elements, getElementRules).forEach(rule => { + flatMap(elements, getElementRules).forEach((rule: string) => { if (selectorPattern.test(rule)) { styles += rule } - let match = rule.match(keyframesPattern) + const match = rule.match(keyframesPattern) if (match !== null) { - let name = match[1] + const name = match[1] if (keyframes[name] === undefined) { keyframes[name] = '' } keyframes[name] += rule } }) - let keyframeNameKeys = Object.keys(keyframes) + const keyframeNameKeys = Object.keys(keyframes) let keyframesStyles = '' if (keyframeNameKeys.length) { - let keyframesNamePattern = new RegExp(keyframeNameKeys.join('|'), 'g') - let keyframesNameCache = {} + const keyframesNamePattern = new RegExp(keyframeNameKeys.join('|'), 'g') + const keyframesNameCache = {} let index = 0 styles = styles.replace(keyframesNamePattern, name => { @@ -189,15 +203,20 @@ export function getStylesFromClassNames( } export function getStyleElements(): Array { - let elements = Array.from(document.querySelectorAll('style[data-emotion]')) + if (!isBrowser) { + throw new Error( + 'jest-emotion requires jsdom. See https://jestjs.io/docs/en/configuration#testenvironment-string for more information.' + ) + } + const elements = Array.from(document.querySelectorAll('style[data-emotion]')) // $FlowFixMe return elements } -let unique = arr => Array.from(new Set(arr)) +const unique = arr => Array.from(new Set(arr)) export function getKeys(elements: Array) { - let keys = unique( + const keys = unique( elements.map( element => // $FlowFixMe we know it exists since we query for elements with this attribute @@ -241,3 +260,11 @@ export function getMediaRules(rules: Array, media: string): Array { }) .reduce((mediaRules, mediaRule) => mediaRules.concat(mediaRule.rules), []) } + +export function isPrimitive(test: any) { + return test !== Object(test) +} + +export function hasIntersection(left: any[], right: any[]) { + return left.some(value => right.includes(value)) +} diff --git a/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap index bedfd8a7c..fec850798 100644 --- a/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap +++ b/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap @@ -1,28 +1,120 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`enzyme mount test 1`] = ` +exports[`enzyme mount basic 1`] = ` .emotion-0 { background-color: red; } + +
+ hello +
+ +`; + +exports[`enzyme mount empty styled 1`] = ` + +
+ Hello +
+ +`; + +exports[`enzyme mount nested 1`] = ` +.emotion-0 { + background-color: red; +} + +
+ +
+ hello +
+ +
+`; + +exports[`enzyme mount nested styled 1`] = ` +.emotion-0 { + background-color: red; +} + +
+ +
+ Hello +
+ +
+`; + +exports[`enzyme mount styled 1`] = ` .emotion-0 { background-color: red; }
- hello + Hello
`; -exports[`enzyme test with prop containing css element 1`] = ` +exports[`enzyme mount theming 1`] = ` .emotion-0 { - background-color: blue; + color: red; + border: 2px solid red; } +
+ + + + + + +
+`; + +exports[`enzyme mount with prop containing css element 1`] = ` .emotion-0 { background-color: blue; } @@ -48,32 +140,7 @@ exports[`enzyme test with prop containing css element 1`] = ` `; -exports[`enzyme test with prop containing css element in fragment 1`] = ` -.emotion-0 { - background-color: blue; -} - -.emotion-0 { - background-color: blue; -} - -
- Array [ - "x", -
- y -
, - ] -
-`; - -exports[`enzyme test with prop containing css element not at the top level 1`] = ` -.emotion-0 { - background-color: blue; -} - +exports[`enzyme mount with prop containing css element not at the top level 1`] = ` .emotion-0 { background-color: blue; } @@ -103,11 +170,7 @@ exports[`enzyme test with prop containing css element not at the top level 1`] = `; -exports[`enzyme test with prop containing css element with other label 1`] = ` -.emotion-0 { - background-color: blue; -} - +exports[`enzyme mount with prop containing css element with other label 1`] = ` .emotion-0 { background-color: blue; } @@ -141,11 +204,7 @@ exports[`enzyme test with prop containing css element with other label 1`] = ` `; -exports[`enzyme test with prop containing css element with other props 1`] = ` -.emotion-0 { - background-color: blue; -} - +exports[`enzyme mount with prop containing css element with other props 1`] = ` .emotion-0 { background-color: blue; } @@ -172,3 +231,202 @@ exports[`enzyme test with prop containing css element with other props 1`] = ` `; + +exports[`enzyme mount with styles on top level 1`] = ` +.emotion-0 { + background-color: red; +} + +Array [ + +
+ Hello +
+ , +] +`; + +exports[`enzyme shallow basic 1`] = ` +.emotion-0 { + background-color: red; +} + +
+ hello +
+`; + +exports[`enzyme shallow empty styled 1`] = ` +
+ Hello +
+`; + +exports[`enzyme shallow nested 1`] = ` +
+ + hello + +
+`; + +exports[`enzyme shallow nested styled 1`] = ` +
+ + Hello + +
+`; + +exports[`enzyme shallow styled 1`] = ` +.emotion-0 { + background-color: red; +} + +
+ Hello +
+`; + +exports[`enzyme shallow theming 1`] = ` +
+ + + + +
+`; + +exports[`enzyme shallow with prop containing css element 1`] = ` +.emotion-0 { + background-color: blue; +} + +
+

+ Hello +

+ + World! +
+`; + +exports[`enzyme shallow with prop containing css element not at the top level 1`] = ` +
+ + Hello +

+ } + > + World! + +
+`; + +exports[`enzyme shallow with prop containing css element with other label 1`] = ` +.emotion-0 { + background-color: blue; +} + + + } +> +

+ Hello +

+ + World! + +`; + +exports[`enzyme shallow with prop containing css element with other props 1`] = ` +.emotion-0 { + background-color: blue; +} + +
+

+ Hello +

+ + World! +
+`; + +exports[`enzyme shallow with styles on top level 1`] = ` +.emotion-0 { + background-color: red; +} + + + Hello + +`; + +exports[`enzyme with prop containing css element in fragment 1`] = ` +.emotion-0 { + background-color: blue; +} + +
+ x + Array [ +
+ y +
, + ] +
+`; diff --git a/packages/jest-emotion/test/matchers.test.js b/packages/jest-emotion/test/matchers.test.js index 67f093e4f..03489af1a 100644 --- a/packages/jest-emotion/test/matchers.test.js +++ b/packages/jest-emotion/test/matchers.test.js @@ -19,8 +19,6 @@ describe('toHaveStyleRule', () => { width: 100%; ` - const enzymeMethods = ['mount', 'render'] - it('matches styles on the top-most node passed in', () => { const tree = renderer .create( @@ -56,33 +54,59 @@ describe('toHaveStyleRule', () => { expect(svgNode).toHaveStyleRule('width', expect.stringMatching(/.*%$/)) }) - it('supports enzyme render methods', () => { + it('supports enzyme `mount` method', () => { const Component = () => (
) - enzymeMethods.forEach(method => { - const wrapper = enzyme[method]() - expect(wrapper).toHaveStyleRule('color', 'red') - expect(wrapper).not.toHaveStyleRule('width', '100%') - const svgNode = wrapper.find('svg') - expect(svgNode).toHaveStyleRule('width', '100%') - expect(svgNode).not.toHaveStyleRule('color', 'red') - }) + const wrapper = enzyme.mount() + expect(wrapper).toHaveStyleRule('color', 'red') + expect(wrapper).not.toHaveStyleRule('width', '100%') + const svgNode = wrapper.find('svg') + expect(svgNode).toHaveStyleRule('width', '100%') + expect(svgNode).not.toHaveStyleRule('color', 'red') }) - // i think this isn't working because of forwardRef - it.skip('supports styled components', () => { + it('supports enzyme `render` method', () => { + const Component = () => ( +
+ +
+ ) + + const wrapper = enzyme.render() + expect(wrapper).toHaveStyleRule('color', 'red') + expect(wrapper).not.toHaveStyleRule('width', '100%') + const svgNode = wrapper.find('svg') + expect(svgNode).toHaveStyleRule('width', '100%') + expect(svgNode).not.toHaveStyleRule('color', 'red') + }) + + it('supports enzyme `shallow` method', () => { + const Component = () => ( +
+ +
+ ) + + const wrapper = enzyme.shallow() + expect(wrapper).toHaveStyleRule('color', 'red') + expect(wrapper).not.toHaveStyleRule('width', '100%') + const svgNode = wrapper.childAt(0) + expect(svgNode).toHaveStyleRule('width', '100%') + expect(svgNode).not.toHaveStyleRule('color', 'red') + }) + + it('supports styled components', () => { const Div = styled('div')` color: red; ` const Svg = styled('svg')` width: 100%; ` - - enzymeMethods.forEach(method => { + ;['mount', 'render', 'shallow'].forEach(method => { const wrapper = enzyme[method](
diff --git a/packages/jest-emotion/test/react-enzyme.test.js b/packages/jest-emotion/test/react-enzyme.test.js index 07514554a..5f6b4cccb 100644 --- a/packages/jest-emotion/test/react-enzyme.test.js +++ b/packages/jest-emotion/test/react-enzyme.test.js @@ -1,130 +1,201 @@ -import 'test-utils/legacy-env' +import 'test-utils/enzyme-env' /** @jsx jsx */ + +import jestInCase from 'jest-in-case' import * as enzyme from 'enzyme' -import { jsx } from '@emotion/core' -import { createSerializer as createEnzymeSerializer } from 'enzyme-to-json' -import { createSerializer } from 'jest-emotion' -import { toMatchSnapshot } from 'jest-snapshot' +import { jsx, ThemeProvider } from '@emotion/core' +import styled from '@emotion/styled' import React from 'react' +import toJson from 'enzyme-to-json' -const createEnzymeSnapshotMatcher = serializerOptions => { - const serializer = createEnzymeSerializer(serializerOptions) - const identityPrinter = v => v - - return function(val) { - return toMatchSnapshot.call(this, serializer.print(val, identityPrinter)) - } -} +import serializer from 'jest-emotion/enzyme' -expect.addSnapshotSerializer(createSerializer()) +expect.addSnapshotSerializer(serializer) -expect.extend({ - toMatchShallowSnapshot: createEnzymeSnapshotMatcher(), - toMatchDeepSnapshot: createEnzymeSnapshotMatcher({ mode: 'deep' }) -}) - -test('enzyme mount test', () => { - const Greeting = ({ children }) => ( -
{children}
- ) - const tree = enzyme.mount(hello) - expect(tree).toMatchShallowSnapshot() -}) +const cases = { + 'empty styled': { + render() { + const Greeting = styled.div`` + return Hello + } + }, + basic: { + render() { + const Greeting = ({ children }) => ( +
{children}
+ ) + return hello + } + }, + styled: { + render() { + const Greeting = styled.div` + background-color: red; + ` + return Hello + } + }, + nested: { + render() { + return
{cases.basic.render()}
+ } + }, + 'nested styled': { + render() { + return
{cases.styled.render()}
+ } + }, + 'with styles on top level': { + render() { + const Greeting = ({ children, className }) => ( +
{children}
+ ) + return Hello + } + }, + 'with prop containing css element': { + render() { + const Greeting = ({ children, content }) => ( +
+ {content} {children} +
+ ) + return ( + Hello

}> + World! + + ) + } + }, + 'with prop containing css element not at the top level': { + render() { + const Greeting = ({ children, content }) => ( +
+ {content} {children} +
+ ) -test('enzyme test with prop containing css element', () => { - const Greeting = ({ children, content }) => ( -
- {content} {children} -
- ) + return ( +
+ + Hello +

+ } + > + World! + +
+ ) + } + }, + 'with prop containing css element with other props': { + render() { + const Greeting = ({ children, content }) => ( +
+ {content} {children} +
+ ) - const tree = enzyme.mount( - Hello

}> - World! - - ) - expect(tree).toMatchShallowSnapshot() -}) + return ( + + Hello +

+ } + > + World! + + ) + } + }, + 'with prop containing css element with other label': { + render() { + const Thing = ({ content, children }) => { + return children + } + const Greeting = ({ children, content }) => ( + }> + {content} {children} + + ) -test('enzyme test with prop containing css element not at the top level', () => { - const Greeting = ({ children, content }) => ( -
- {content} {children} -
- ) + return ( + + Hello +

+ } + > + World! + + ) + } + }, + theming: { + render() { + const Button = styled.button` + color: ${props => props.theme.main}; + border: 2px solid ${props => props.theme.main}; + ` - const tree = enzyme.mount( -
- - Hello -

+ Button.defaultProps = { + theme: { + main: 'red' } - > - World! - -
- ) - expect(tree).toMatchShallowSnapshot() -}) - -test('enzyme test with prop containing css element with other props', () => { - const Greeting = ({ children, content }) => ( -
- {content} {children} -
- ) + } - const tree = enzyme.mount( - - Hello -

+ const theme = { + main: 'blue' } - > - World! - - ) - expect(tree).toMatchShallowSnapshot() -}) -test('enzyme test with prop containing css element with other label', () => { - const Thing = ({ content, children }) => { - return children + return ( +
+ + + + +
+ ) + } } - const Greeting = ({ children, content }) => ( - }> - {content} {children} - - ) +} - const tree = enzyme.mount( - - Hello -

- } - > - World! - +describe('enzyme', () => { + jestInCase( + 'shallow', + ({ render }) => { + const wrapper = enzyme.shallow(render()) + expect(wrapper).toMatchSnapshot() + }, + cases ) - expect(tree).toMatchShallowSnapshot() -}) -test('enzyme test with prop containing css element in fragment', () => { - const FragmentComponent = () => ( - - x
y
- + jestInCase( + 'mount', + ({ render }) => { + const wrapper = enzyme.mount(render()) + expect(wrapper).toMatchSnapshot() + }, + cases ) - const tree = enzyme.mount( -
- -
- ) - expect(tree).toMatchDeepSnapshot() + test('with prop containing css element in fragment', () => { + const FragmentComponent = () => ( + + x
y
+ + ) + + const wrapper = enzyme.mount( +
+ +
+ ) + + expect(toJson(wrapper, { mode: 'deep' })).toMatchSnapshot() + }) }) diff --git a/packages/jest-emotion/types/index.d.ts b/packages/jest-emotion/types/index.d.ts index 15517757e..0b86c81ed 100644 --- a/packages/jest-emotion/types/index.d.ts +++ b/packages/jest-emotion/types/index.d.ts @@ -2,6 +2,12 @@ // TypeScript Version: 2.9 /// + +export interface StyleRuleOptions { + target?: string + media?: string +} + export interface EmotionMatchers extends jest.ExpectExtendMap { toHaveStyleRule( received: any, @@ -16,10 +22,6 @@ export interface CreateSerializerOptions { classNameReplacer?: (className: string, index: number) => string DOMElements?: boolean } -export interface StyleRuleOptions { - target?: string - media?: string -} export function createSerializer( options?: CreateSerializerOptions ): jest.SnapshotSerializerPlugin diff --git a/packages/styled/test/theming.dom.test.js b/packages/styled/test/theming.dom.test.js index bea94316d..8674eab8e 100644 --- a/packages/styled/test/theming.dom.test.js +++ b/packages/styled/test/theming.dom.test.js @@ -4,9 +4,6 @@ import React from 'react' import styled from '@emotion/styled' import { ThemeProvider } from '@emotion/core' import { render, cleanup } from '@testing-library/react' -import serializer from 'jest-emotion' - -expect.addSnapshotSerializer(serializer) afterEach(cleanup) diff --git a/scripts/test-utils/enzyme-env.js b/scripts/test-utils/enzyme-env.js new file mode 100644 index 000000000..69078bc17 --- /dev/null +++ b/scripts/test-utils/enzyme-env.js @@ -0,0 +1,5 @@ +// @flow +import Enzyme from 'enzyme' +import Adapter from 'enzyme-adapter-react-16' + +Enzyme.configure({ adapter: new Adapter() }) diff --git a/scripts/test-utils/legacy-env.js b/scripts/test-utils/legacy-env.js index 27e934359..52c7a1921 100644 --- a/scripts/test-utils/legacy-env.js +++ b/scripts/test-utils/legacy-env.js @@ -1,10 +1,6 @@ // @flow /* eslint-env jest */ -// import { createSerializer } from 'jest-emotion' -// import * as emotion from 'emotion' -import Enzyme from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' -import './next-env' -// expect.addSnapshotSerializer(createSerializer(emotion)) +import 'test-utils/enzyme-env' +import serializer from 'jest-emotion/enzyme' -Enzyme.configure({ adapter: new Adapter() }) +expect.addSnapshotSerializer(serializer) From b8476e08af4a2e8de94a112cb0daf6e8e4d56fe1 Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Sun, 5 Jan 2020 11:08:02 +1000 Subject: [PATCH 062/176] Rename packages (#1675) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * WIP codemod for renaming * Lockfile changes * emotion -> @emotion/css * core -> react * Server stuff * Move removed packages to another directory * More things * More things * Some more things * Rename ESLint plugin * Change name in @emotion/eslint-plugin CHANGELOG.md * Jest package and Babel plugin renmaes * Things * Update eslint plugin migration error message * Formatting things * Fix some things * Upgrade babel-eslint * Add @emotion/pkg-renaming rule to ESLint config and run it * Update existing changesets * Add some changesets * Update removed-packages/create-emotion/src/index.js Co-Authored-By: Mateusz Burzyński * Update removed-packages/emotion/macro.js Co-Authored-By: Mateusz Burzyński * Update removed-packages/eslint-plugin-emotion/src/index.js Co-Authored-By: Mateusz Burzyński * Update CodeSandbox CI config * Fix some things * Fix more things * Fix some stuff * Fix some more things * More fixes * Some things * Various updates for babel plugin * Fix more things * Fix another thing * Things * More stuff * Bad linting rules. * More things * More changes * Fix all the babel plugin stuff * Test the Babel plugin in dist tests because it's built now * Fix docs site building maybe * Update some snapshots * Fix some more things * Hopefully actually fix it this time * Replace @emotion/core with @emotion/react in a bunch of places * Fix TS types for @emotion/server/create-instance * Update snapshots * Disable a TSLint rule * More changesets * Docs and things * Fix more things * Fix a thing * Add a test:typescript script * Use glob in CodeSandbox CI config * Fix a thing * Fix TS things * ESLint plugin things * Fix some things * Fix @emotion/server pkg.json syntax error * Update docs/package-summary.mdx Co-Authored-By: Mateusz Burzyński * Fix some things * Add docs for creating instances of @emotion/css * Fix some little things * Comment out a test * Fix some little things * ts@next.......... Co-authored-by: Mateusz Burzyński --- .changeset/brave-rice-yawn.md | 6 + .changeset/clever-emus-watch.md | 2 +- .changeset/config.json | 5 + .changeset/eleven-apes-cheer.md | 5 + .changeset/flat-adults-add.md | 2 +- .changeset/four-cars-tell.md | 4 +- .changeset/giant-oranges-impress.md | 2 +- .changeset/grumpy-news-wonder.md | 6 + .changeset/large-snakes-ring.md | 2 +- .changeset/lazy-elephants-stare.md | 2 +- .changeset/light-mice-relate.md | 2 +- .changeset/long-apes-admire/changes.json | 2 +- .changeset/lovely-owls-remember.md | 2 +- .changeset/mean-deers-confess.md | 2 +- .changeset/modern-grapes-obey.md | 2 +- .changeset/moody-stingrays-sort.md | 4 +- .changeset/neat-ligers-film.md | 2 +- .changeset/nervous-clouds-brush.md | 6 + .changeset/nine-mugs-care.md | 2 +- .changeset/odd-flowers-breathe.md | 6 + .changeset/polite-impalas-doubt.md | 2 +- .changeset/purple-teachers-clean.md | 6 + .changeset/rare-books-own.md | 6 +- .changeset/rare-toes-grow.md | 2 +- .changeset/rich-hotels-sing.md | 2 +- .changeset/rotten-adults-guess.md | 6 + .changeset/shaggy-cheetahs-vanish.md | 6 + .changeset/silver-bulldogs-beg.md | 2 +- .changeset/smooth-carpets-matter.md | 14 +- .changeset/soft-moose-attend.md | 6 + .changeset/sour-poets-move.md | 4 +- .changeset/spotty-llamas-mate.md | 2 +- .changeset/stupid-radios-draw.md | 4 +- .changeset/two-baboons-mate.md | 2 +- .changeset/two-kiwis-give.md | 2 +- .changeset/violet-spiders-itch.md | 5 + .changeset/weak-islands-confess.md | 4 +- .codesandbox/ci.json | 12 +- .github/ISSUE_TEMPLATE/--bug-report.md | 4 +- README.md | 6 +- babel.config.js | 4 +- docs/babel-macros.mdx | 6 +- docs/babel.mdx | 2 +- docs/cache-provider.mdx | 2 +- docs/class-names.mdx | 2 +- docs/composition.mdx | 4 +- docs/css-prop.mdx | 16 +- docs/docs.yaml | 15 +- docs/globals.mdx | 2 +- docs/install.mdx | 43 +- docs/instances.mdx | 7 - docs/introduction.mdx | 18 +- docs/keyframes.mdx | 4 +- docs/labels.mdx | 4 +- docs/media-queries.mdx | 6 +- docs/nested.mdx | 4 +- docs/object-styles.mdx | 16 +- docs/package-summary.mdx | 56 + docs/source-maps.mdx | 8 +- docs/ssr.mdx | 22 +- docs/styled.mdx | 2 +- docs/testing.mdx | 41 +- docs/theming.mdx | 14 +- docs/typescript.mdx | 18 +- docs/with-props.mdx | 2 +- jest.config.js | 2 +- jest.dist.js | 5 +- package.json | 18 +- .../css-macro/__fixtures__/label-1.js | 5 - .../__fixtures__/no-actual-import.js | 1 - .../css-macro/__fixtures__/other-imports.js | 3 - .../__tests__/css-macro/index.js | 4 - .../__tests__/global-macro/index.js | 4 - .../babel-plugin-emotion/__tests__/index.js | 6 - .../source-maps/__fixtures__/css-object.js | 3 - .../source-maps/__fixtures__/css-string.js | 5 - .../__tests__/__snapshots__/index.js.snap | 6 +- .../__tests__/index.js | 2 +- packages/babel-plugin/CHANGELOG.md | 135 + .../README.md | 42 +- .../core-with-css-import-dynamic.js | 2 +- .../__fixtures__/core-with-css-import.js | 2 +- .../__fixtures__/css-prop-complex-array.js | 2 +- .../does-not-change-other-props.js | 2 +- .../__tests__/__fixtures__/dynamic.js | 2 +- .../__fixtures__/function-declaration.js | 2 +- .../import-namespace-does-not-throw.js | 2 +- .../__tests__/__fixtures__/jsx-hoist.js | 2 +- .../__tests__/__fixtures__/object-property.js | 2 +- .../static-object-with-camel-case.js | 2 +- .../static-object-with-child-selectors.js | 2 +- .../css-requires-options.js.snap | 74 +- .../__tests__/__snapshots__/css.js.snap | 142 +- .../global-requires-options.js.snap | 4 +- .../__tests__/__snapshots__/global.js.snap | 50 +- .../__tests__/__snapshots__/index.js.snap | 88 +- .../styled-requires-options.js.snap | 4 +- .../__tests__/__snapshots__/styled.js.snap | 58 +- .../__snapshots__/vanilla-emotion.js.snap} | 102 +- .../__fixtures__/actual-expected-usage.js | 2 +- .../__tests__/css-macro/__fixtures__/basic.js | 2 +- .../css-macro/__fixtures__/call-expression.js | 2 +- .../__fixtures__/call-inside-call.js | 2 +- .../comment-with-interpolation.js | 2 +- .../css-macro/__fixtures__/impure.js | 2 +- .../inside-anonymous-arrow-function.js | 2 +- .../__fixtures__/inside-anonymous-function.js | 2 +- .../css-macro/__fixtures__/inside-class.js | 2 +- .../inside-non-pascal-case-arrow-function.js | 2 +- .../css-macro/__fixtures__/label-1.js | 5 + .../__fixtures__/label-no-final-semi.js | 2 +- .../css-macro/__fixtures__/label-object.js | 2 +- .../__fixtures__/label-transpiled-by-ts.js | 2 +- .../css-macro/__fixtures__/multiple-calls.js | 2 +- .../__fixtures__/no-actual-import.js | 1 + .../__fixtures__/object-dynamic-property.js | 2 +- .../object-pattern-variable-declarator.js | 4 +- .../css-macro/__fixtures__/other-imports.js | 3 + .../__fixtures__/remove-block-comments.js | 2 +- .../__fixtures__/remove-line-comments.js | 2 +- .../tagged-template-args-forwarded.js | 2 +- .../css-macro/__snapshots__/index.js.snap | 184 +- .../babel-plugin/__tests__/css-macro/index.js | 4 + .../__tests__/css-requires-options.js | 14 +- .../__tests__/css.js | 2 +- .../disable-source-map/__fixtures__/css.js | 2 +- .../disable-source-map/__fixtures__/styled.js | 0 .../__fixtures__/vanilla.js | 2 +- .../__snapshots__/index.js.snap | 10 +- .../__tests__/disable-source-map/index.js | 2 +- .../global-macro/__fixtures__/basic-array.js | 2 +- .../global-macro/__fixtures__/basic-obj.js | 2 +- .../__fixtures__/complex-array.js | 2 +- .../global-macro/__fixtures__/complex-obj.js | 2 +- .../__fixtures__/css-used-as-value.js | 2 +- .../global-macro/__fixtures__/no-jsx.js | 2 +- .../__fixtures__/no-styles-prop.js | 2 +- .../__fixtures__/spread-styles.js | 2 +- .../__fixtures__/with-closing-element.js | 2 +- .../global-macro/__snapshots__/index.js.snap | 68 +- .../__tests__/global-macro/index.js | 4 + .../__tests__/global-requires-options.js | 4 +- .../__tests__/global.js | 2 +- .../__fixtures__/global-needs-css.js | 0 .../import-mapping/__fixtures__/global.js | 0 .../import-mapping/__fixtures__/jsx.js | 0 .../__fixtures__/non-default-styled.js | 0 .../styled-with-base-specified.js | 0 .../import-mapping/__fixtures__/vanilla.js | 0 .../__snapshots__/import-mapping.js.snap | 4 +- .../import-mapping/import-mapping.js | 10 +- packages/babel-plugin/__tests__/index.js | 6 + .../source-maps/__fixtures__/css-object.js | 3 + .../__fixtures__/css-prop-dynamic.js | 2 +- .../source-maps/__fixtures__/css-prop.js | 2 +- .../source-maps/__fixtures__/css-string.js | 5 + .../__fixtures__/css-transpiled-by-ts.js | 2 +- .../__fixtures__/global-styles-prop.js | 2 +- .../source-maps/__fixtures__/styled-object.js | 0 .../source-maps/__fixtures__/styled-string.js | 0 .../source-maps/__snapshots__/index.js.snap | 38 +- .../__tests__/source-maps/index.js | 2 +- .../styled-macro/__fixtures__/basic.js | 0 .../__fixtures__/call-expression.js | 0 .../styled-macro/__fixtures__/comments.js | 0 .../__fixtures__/component-selector.js | 0 .../__fixtures__/existing-options.js | 0 .../__fixtures__/function-interpolation.js | 0 .../styled-macro/__fixtures__/label.js | 2 +- .../more-than-10-interpolations.js | 0 .../__fixtures__/multiple-calls.js | 0 .../styled-macro/__fixtures__/native.js | 0 .../styled-macro/__fixtures__/no-call.js | 0 .../styled-macro/__fixtures__/no-import.js | 0 .../__fixtures__/object-call-expression.js | 0 .../__fixtures__/object-function.js | 0 .../styled-macro/__fixtures__/object.js | 0 .../__fixtures__/other-imports.js | 0 .../__fixtures__/primitives-other-name.js | 0 .../styled-macro/__fixtures__/primitives.js | 0 .../__fixtures__/shorthand-property.js | 0 .../styled-macro/__fixtures__/with-spread.js | 0 .../styled-macro/__snapshots__/index.js.snap | 58 +- .../__tests__/styled-macro/index.js | 0 .../__tests__/styled-requires-options.js | 2 +- .../__tests__/styled.js | 2 +- .../__fixtures__/comments.js | 2 +- .../__fixtures__/css-basic.js | 2 +- .../__fixtures__/css-object.js | 2 +- ...does-not-minify-inside-content-property.js | 2 +- .../__fixtures__/hoisting.js | 2 +- .../__fixtures__/inject-global-basic.js | 2 +- .../inject-global-change-import.js | 2 +- .../inject-global-with-font-face.js | 2 +- .../inject-global-with-interpolation.js | 2 +- .../__fixtures__/keyframes-basic.js | 2 +- .../keyframes-with-interpolation.js | 2 +- .../__fixtures__/object-label.js | 2 +- .../__snapshots__/index.js.snap} | 102 +- .../__tests__/vanilla-emotion-macro/index.js | 0 .../__tests__/vanilla-emotion.js | 2 +- packages/babel-plugin/package.json | 49 + .../src/core-macro.js | 4 +- .../src/emotion-macro.js | 0 .../src/index.js | 22 +- .../src/styled-macro.js | 0 .../src/utils/add-import.js | 0 packages/babel-plugin/src/utils/checks.js | 27 + .../src/utils/get-styled-options.js | 0 .../src/utils/get-target-class-name.js | 0 .../src/utils/index.js | 0 .../src/utils/label.js | 0 .../src/utils/minify-utils.js | 0 .../src/utils/minify.js | 0 .../src/utils/object-to-string.js | 0 .../src/utils/source-maps.js | 0 .../src/utils/strings.js | 0 .../utils/transform-expression-with-styles.js | 0 .../src/utils/transformer-macro.js | 0 packages/babel-preset-css-prop/README.md | 27 +- .../__tests__/__snapshots__/index.js.snap | 4 +- .../__snapshots__/options-are-used.js.snap | 4 +- packages/babel-preset-css-prop/package.json | 4 +- packages/babel-preset-css-prop/src/index.js | 8 +- packages/cache/__tests__/hydration.js | 2 +- packages/core/macro.d.ts | 3 - packages/core/macro.js | 1 - packages/create-emotion-server/README.md | 23 - .../create-emotion-server/types/tslint.json | 7 - packages/create-emotion/README.md | 72 - packages/create-emotion/package.json | 45 - .../test/__snapshots__/css.test.js.snap | 471 ---- .../test/__snapshots__/inline.test.js.snap | 2503 ----------------- .../test/__snapshots__/instance.test.js.snap | 3 - .../test/__snapshots__/stream.test.js.snap | 2483 ---------------- packages/create-emotion/test/css.test.js | 374 --- .../create-emotion/test/emotion-instance.js | 52 - packages/create-emotion/test/inline.test.js | 76 - packages/create-emotion/test/instance.test.js | 21 - packages/create-emotion/test/stream.test.js | 72 - packages/create-emotion/types/tslint.json | 21 - packages/css/CHANGELOG.md | 87 +- packages/{emotion => css}/README.md | 102 +- packages/css/create-instance/package.json | 10 + packages/css/macro.d.ts | 1 + packages/css/macro.js | 1 + packages/{core => css}/macro.js.flow | 0 packages/css/package.json | 64 +- .../index.js => css/src/create-instance.js} | 0 packages/css/src/index.js | 18 +- .../component-selector.test.js.snap | 0 .../test/__snapshots__/css.test.js.snap | 0 .../test/__snapshots__/cx.test.js.snap | 0 .../__snapshots__/inject-global.test.js.snap | 0 .../test/__snapshots__/insertion.test.js.snap | 0 .../test/__snapshots__/keyframes.test.js.snap | 0 .../__snapshots__/label-pattern.test.js.snap | 0 .../__snapshots__/selectivity.test.js.snap | 0 .../test/__snapshots__/sheet.dom.test.js.snap | 0 .../test/__snapshots__/warnings.test.js.snap | 0 .../test/component-selector.test.js | 2 +- packages/{emotion => css}/test/css.test.js | 2 +- packages/{emotion => css}/test/cx.test.js | 2 +- .../test/inject-global.test.js | 2 +- .../{emotion => css}/test/insertion.test.js | 0 .../{emotion => css}/test/keyframes.test.js | 2 +- .../test/label-pattern.test.js | 2 +- .../no-babel/__snapshots__/index.test.js.snap | 9 +- .../test/no-babel/index.test.js | 8 +- .../test/no-babel/warnings.test.js | 2 +- .../{emotion => css}/test/selectivity.test.js | 2 +- .../{emotion => css}/test/sheet.dom.test.js | 2 +- .../{emotion => css}/test/source-map/.babelrc | 0 .../__snapshots__/source-map.test.js.snap | 61 + .../test/source-map/source-map.test.js | 2 +- .../{emotion => css}/test/warnings.test.js | 2 +- .../types/create-instance.d.ts} | 0 packages/{emotion => css}/types/index.d.ts | 4 +- .../types/tests-create-instance.ts} | 2 +- packages/{emotion => css}/types/tests.ts | 2 +- packages/{core => css}/types/tsconfig.json | 0 packages/css/types/tslint.json | 23 + packages/emotion-server/README.md | 11 - packages/emotion-server/types/tsconfig.json | 26 - packages/emotion-server/types/tslint.json | 7 - packages/emotion-theming/src/index.js | 3 - packages/emotion/macro.d.ts | 3 - packages/emotion/macro.js | 1 - packages/emotion/src/index.js | 15 - .../__snapshots__/source-map.test.js.snap | 61 - packages/emotion/types/tsconfig.json | 27 - packages/emotion/types/tslint.json | 20 - packages/eslint-plugin-emotion/README.md | 66 - packages/eslint-plugin/CHANGELOG.md | 8 + packages/eslint-plugin/README.md | 78 + .../docs/rules/import-from-emotion.md | 0 .../docs/rules/jsx-import.md | 6 +- .../docs/rules/no-vanilla.md | 2 +- .../docs/rules/styled-import.md | 0 .../docs/rules/syntax-preference.md | 4 +- packages/eslint-plugin/package.json | 26 + .../src/index.js | 4 +- .../src/rules/import-from-emotion.js | 0 .../src/rules/jsx-import.js | 9 +- .../src/rules/no-vanilla.js | 2 +- .../eslint-plugin/src/rules/pkg-renaming.js | 69 + .../src/rules/styled-import.js | 0 .../src/rules/syntax-preference.js | 0 .../test/rules/import-from-emotion.test.js | 2 +- .../test/rules/jsx-import.test.js | 56 +- .../test/rules/no-vanilla.test.js | 6 +- .../test/rules/pkg-renaming.test.js | 81 + .../test/rules/styled-import.test.js | 2 +- .../test/rules/syntax-preference.test.js | 2 +- packages/{jest-emotion => jest}/CHANGELOG.md | 2 +- packages/{jest-emotion => jest}/README.md | 36 +- .../{jest-emotion => jest}/enzyme/index.js | 0 .../enzyme/package.json | 4 +- .../enzyme/types/index.d.ts | 0 packages/{jest-emotion => jest}/package.json | 10 +- packages/{jest-emotion => jest}/serializer.js | 0 packages/{jest-emotion => jest}/src/enzyme.js | 0 packages/{jest-emotion => jest}/src/index.js | 0 .../{jest-emotion => jest}/src/matchers.js | 0 .../src/replace-class-names.js | 0 .../{jest-emotion => jest}/src/serializer.js | 0 packages/{jest-emotion => jest}/src/utils.js | 0 .../test/__snapshots__/matchers.test.js.snap | 0 .../test/__snapshots__/preact.test.js.snap | 0 .../test/__snapshots__/printer.test.js.snap | 0 .../__snapshots__/react-enzyme.test.js.snap | 0 .../test/matchers.test.js | 4 +- .../test/preact.test.js | 4 +- .../test/printer.test.js | 4 +- .../test/react-enzyme.test.js | 4 +- .../{jest-emotion => jest}/types/index.d.ts | 0 packages/{jest-emotion => jest}/types/test.ts | 2 +- .../types/tsconfig.json | 0 .../{jest-emotion => jest}/types/tslint.json | 0 packages/native/README.md | 8 +- packages/native/macro.js | 2 +- .../__snapshots__/native-styled.test.js.snap | 2 +- packages/native/test/native-styled.test.js | 4 +- packages/native/types/base.d.ts | 2 +- packages/native/types/index.d.ts | 2 +- packages/native/types/tests.tsx | 2 +- packages/primitives-core/package.json | 4 +- packages/primitives-core/src/styled.js | 2 +- packages/primitives/README.md | 2 +- packages/primitives/macro.js | 2 +- packages/primitives/package.json | 4 +- .../emotion-primitives.test.js.snap | 2 +- .../test/emotion-primitives.test.js | 4 +- packages/react/CHANGELOG.md | 162 ++ packages/{core => react}/README.md | 6 +- .../__tests__/__snapshots__/at-import.js.snap | 0 .../__snapshots__/class-names.js.snap | 0 .../__snapshots__/css-cache-hash.js.snap | 0 .../__tests__/__snapshots__/css.js.snap | 2 +- .../__snapshots__/global-with-theme.js.snap | 0 .../__tests__/__snapshots__/global.js.snap | 0 .../globals-are-the-worst.js.snap | 0 .../__tests__/__snapshots__/keyframes.js.snap | 0 .../__snapshots__/legacy-class-name.js.snap | 0 .../__tests__/__snapshots__/server.js.snap | 0 .../__snapshots__/theme-provider.dom.js.snap | 0 .../__snapshots__/theme-provider.js.snap | 0 .../__tests__/__snapshots__/use-theme.js.snap | 0 .../__tests__/__snapshots__/warnings.js.snap | 0 .../__snapshots__/with-theme.js.snap | 0 .../{core => react}/__tests__/at-import.js | 4 +- .../__tests__/babel/__snapshots__/css.js.snap | 0 .../__snapshots__/source-map-server.js.snap | 2 +- .../{core => react}/__tests__/babel/css.js | 2 +- .../__tests__/babel/source-map-server.js | 2 +- .../{core => react}/__tests__/class-names.js | 2 +- .../__tests__/clone-element.js | 2 +- .../compat/__snapshots__/browser.js.snap | 0 .../compat/__snapshots__/server.js.snap | 0 .../__tests__/compat/browser.js | 4 +- .../__tests__/compat/server.js | 6 +- .../__tests__/css-cache-hash.js | 2 +- packages/{core => react}/__tests__/css.js | 2 +- .../{core => react}/__tests__/custom-cache.js | 2 +- .../global-insertion-after-others.js | 2 +- .../__tests__/global-with-theme.js | 2 +- packages/{core => react}/__tests__/global.js | 2 +- .../__tests__/globals-are-the-worst.js | 2 +- .../{core => react}/__tests__/import-prod.js | 4 +- .../{core => react}/__tests__/keyframes.js | 4 +- .../__tests__/legacy-class-name.js | 2 +- packages/{core => react}/__tests__/prod.js | 2 +- packages/{core => react}/__tests__/ref.js | 2 +- packages/{core => react}/__tests__/server.js | 4 +- .../__tests__/theme-provider.dom.js | 2 +- .../__tests__/theme-provider.js | 2 +- .../{core => react}/__tests__/use-theme.js | 2 +- .../{core => react}/__tests__/warnings.js | 2 +- .../{core => react}/__tests__/with-theme.js | 2 +- packages/react/macro.d.ts | 1 + packages/react/macro.js | 1 + packages/{emotion => react}/macro.js.flow | 0 packages/{core => react}/package.json | 21 +- packages/{core => react}/src/class-names.js | 0 packages/{core => react}/src/context.js | 0 packages/{core => react}/src/css.js | 0 packages/{core => react}/src/global.js | 0 packages/{core => react}/src/index.js | 4 +- packages/{core => react}/src/jsx.js | 2 +- packages/{core => react}/src/keyframes.js | 0 packages/{core => react}/src/theming.js | 0 packages/{core => react}/src/utils.js | 0 packages/{core => react}/types/helper.d.ts | 0 packages/{core => react}/types/index.d.ts | 0 packages/{core => react}/types/tests-css.tsx | 2 +- .../{core => react}/types/tests-theming.tsx | 2 +- packages/{core => react}/types/tests.tsx | 4 +- packages/{core => react}/types/theming.d.ts | 2 +- .../types/tsconfig.json | 0 packages/{core => react}/types/tslint.json | 0 packages/serialize/src/index.js | 4 +- packages/serialize/types/index.d.ts | 2 +- packages/server/CHANGELOG.md | 26 + packages/server/README.md | 11 + packages/server/create-instance/package.json | 10 + packages/server/package.json | 62 + .../src/create-instance}/extract-critical.js | 0 .../src/create-instance}/index.js | 0 .../src/create-instance}/inline.js | 0 .../src/create-instance}/stream.js | 0 .../{emotion-server => server}/src/index.js | 4 +- .../test/__snapshots__/index.test.js.snap | 0 .../test/__snapshots__/inline.test.js.snap | 0 .../test/__snapshots__/stream.test.js.snap | 0 .../test/index.test.js | 10 +- .../test/inline.test.js | 4 +- .../test/stream.test.js | 4 +- .../{emotion-server => server}/test/util.js | 4 +- .../types/create-instance.d.ts} | 0 .../types/index.d.ts | 2 +- .../types/tests-create-instance.ts} | 2 +- .../types/tests.tsx | 2 +- .../types/tsconfig.json | 0 packages/server/types/tslint.json | 8 + packages/sheet/types/tests.ts | 11 +- packages/styled/README.md | 4 +- packages/styled/__tests__/edge-cases.js | 2 +- packages/styled/__tests__/styled.js | 2 +- packages/styled/__tests__/warnings.js | 2 +- packages/styled/macro.js | 2 +- packages/styled/package.json | 8 +- packages/styled/src/base.js | 2 +- packages/styled/test/composition.test.js | 2 +- packages/styled/test/index.test.js | 2 +- packages/styled/test/theming.dom.test.js | 2 +- packages/styled/test/theming.test.js | 2 +- packages/styled/types/base.d.ts | 2 +- packages/styled/types/index.d.ts | 2 +- packages/styled/types/tests-base.tsx | 2 +- packages/stylis/types/tests.ts | 25 +- playgrounds/cra/src/App.js | 2 +- playgrounds/razzle/src/App.js | 2 +- playgrounds/razzle/src/Home.js | 2 +- playgrounds/razzle/src/server.js | 6 +- .../babel-plugin-emotion/CHANGELOG.md | 0 .../babel-plugin-emotion/package.json | 1 - .../babel-plugin-emotion/src/index.js | 3 + .../core/CHANGELOG.md | 0 removed-packages/core/package.json | 23 + removed-packages/core/src/index.js | 3 + .../create-emotion-server/CHANGELOG.md | 0 .../create-emotion-server/package.json | 15 +- .../create-emotion-server/src/index.js | 3 + .../create-emotion/CHANGELOG.md | 0 removed-packages/create-emotion/package.json | 28 + removed-packages/create-emotion/src/index.js | 3 + .../emotion-server/CHANGELOG.md | 0 .../emotion-server/package.json | 14 +- removed-packages/emotion-server/src/index.js | 3 + .../emotion-theming/CHANGELOG.md | 0 .../emotion-theming/package.json | 4 +- removed-packages/emotion-theming/src/index.js | 3 + .../emotion/CHANGELOG.md | 0 removed-packages/emotion/macro.js | 3 + .../emotion/package.json | 22 +- removed-packages/emotion/src/index.js | 3 + .../eslint-plugin-emotion/CHANGELOG.md | 0 .../eslint-plugin-emotion/package.json | 4 +- .../eslint-plugin-emotion/src/index.js | 3 + removed-packages/jest-emotion/CHANGELOG.md | 74 + removed-packages/jest-emotion/package.json | 31 + removed-packages/jest-emotion/serializer.js | 2 + removed-packages/jest-emotion/src/index.js | 3 + .../styled-base/CHANGELOG.md | 0 .../styled-base/package.json | 0 .../styled-base/src/index.js | 0 scripts/babel-tester/package.json | 2 +- scripts/benchmarks/.babelrc | 2 +- scripts/benchmarks/package.json | 2 +- .../implementations/emotion-css-func/Box.js | 2 +- .../implementations/emotion-css-func/Dot.js | 2 +- .../implementations/emotion-css-func/View.js | 2 +- .../implementations/emotion-css-prop/Box.js | 2 +- .../implementations/emotion-css-prop/Dot.js | 2 +- .../emotion-css-prop/Provider.js | 2 +- .../implementations/emotion-css-prop/View.js | 2 +- .../src/implementations/emotion-styled/Dot.js | 2 +- .../emotion-styled/Provider.js | 2 +- scripts/ssr-benchmarks/basic.js | 2 +- scripts/ssr-benchmarks/bench.js | 6 +- scripts/test-utils/legacy-env.js | 2 +- scripts/test-utils/next-env.js | 2 +- site/README.md | 6 +- .../gatsby-browser.js | 4 +- .../gatsby-ssr.js | 6 +- site/plugins/gatsby-remark-live-code/index.js | 2 +- site/src/.eslintrc.js | 4 +- site/src/components/DocWrapper.js | 4 +- site/src/components/Link.js | 2 +- site/src/components/Playground.js | 12 +- site/src/components/Search.js | 2 +- site/src/components/SiteHeader.js | 2 +- site/src/components/live/worker.js | 2 +- site/src/layouts/index.js | 4 +- site/src/pages/community.js | 2 +- site/src/templates/doc.js | 2 +- site/src/utils/algolia-styles.js | 2 +- site/src/utils/global.js | 2 +- site/src/utils/markdown-styles.js | 2 +- site/src/utils/style.js | 2 +- site/src/utils/transform.js | 6 +- site/transform.js | 45 - yarn.lock | 147 +- 533 files changed, 2499 insertions(+), 7959 deletions(-) create mode 100644 .changeset/brave-rice-yawn.md create mode 100644 .changeset/eleven-apes-cheer.md create mode 100644 .changeset/grumpy-news-wonder.md create mode 100644 .changeset/nervous-clouds-brush.md create mode 100644 .changeset/odd-flowers-breathe.md create mode 100644 .changeset/purple-teachers-clean.md create mode 100644 .changeset/rotten-adults-guess.md create mode 100644 .changeset/shaggy-cheetahs-vanish.md create mode 100644 .changeset/soft-moose-attend.md create mode 100644 .changeset/violet-spiders-itch.md delete mode 100644 docs/instances.mdx create mode 100644 docs/package-summary.mdx delete mode 100644 packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-1.js delete mode 100644 packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/no-actual-import.js delete mode 100644 packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/other-imports.js delete mode 100644 packages/babel-plugin-emotion/__tests__/css-macro/index.js delete mode 100644 packages/babel-plugin-emotion/__tests__/global-macro/index.js delete mode 100644 packages/babel-plugin-emotion/__tests__/index.js delete mode 100644 packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-object.js delete mode 100644 packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-string.js create mode 100644 packages/babel-plugin/CHANGELOG.md rename packages/{babel-plugin-emotion => babel-plugin}/README.md (83%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/core-with-css-import-dynamic.js (74%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/core-with-css-import.js (74%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/css-prop-complex-array.js (81%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/does-not-change-other-props.js (64%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/dynamic.js (71%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/function-declaration.js (79%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/import-namespace-does-not-throw.js (68%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/jsx-hoist.js (76%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/object-property.js (84%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/static-object-with-camel-case.js (80%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__fixtures__/static-object-with-child-selectors.js (84%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/css-requires-options.js.snap (74%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/css.js.snap (74%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/global-requires-options.js.snap (82%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/global.js.snap (74%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/index.js.snap (70%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/styled-requires-options.js.snap (96%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/__snapshots__/styled.js.snap (95%) rename packages/{babel-plugin-emotion/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap => babel-plugin/__tests__/__snapshots__/vanilla-emotion.js.snap} (56%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/actual-expected-usage.js (68%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/basic.js (58%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/call-expression.js (57%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/call-inside-call.js (69%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/comment-with-interpolation.js (81%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/impure.js (67%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/inside-anonymous-arrow-function.js (57%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/inside-anonymous-function.js (57%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/inside-class.js (80%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/inside-non-pascal-case-arrow-function.js (57%) create mode 100644 packages/babel-plugin/__tests__/css-macro/__fixtures__/label-1.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/label-no-final-semi.js (57%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/label-object.js (77%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js (84%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/multiple-calls.js (65%) create mode 100644 packages/babel-plugin/__tests__/css-macro/__fixtures__/no-actual-import.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/object-dynamic-property.js (65%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/object-pattern-variable-declarator.js (70%) create mode 100644 packages/babel-plugin/__tests__/css-macro/__fixtures__/other-imports.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/remove-block-comments.js (57%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/remove-line-comments.js (51%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__fixtures__/tagged-template-args-forwarded.js (78%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-macro/__snapshots__/index.js.snap (68%) create mode 100644 packages/babel-plugin/__tests__/css-macro/index.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css-requires-options.js (95%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/css.js (83%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/disable-source-map/__fixtures__/css.js (51%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/disable-source-map/__fixtures__/styled.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/disable-source-map/__fixtures__/vanilla.js (51%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/disable-source-map/__snapshots__/index.js.snap (81%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/disable-source-map/index.js (75%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/basic-array.js (74%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/basic-obj.js (67%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/complex-array.js (78%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/complex-obj.js (78%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/css-used-as-value.js (79%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/no-jsx.js (52%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/no-styles-prop.js (58%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/spread-styles.js (67%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__fixtures__/with-closing-element.js (75%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-macro/__snapshots__/index.js.snap (67%) create mode 100644 packages/babel-plugin/__tests__/global-macro/index.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global-requires-options.js (78%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/global.js (84%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__fixtures__/global-needs-css.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__fixtures__/global.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__fixtures__/jsx.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__fixtures__/non-default-styled.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__fixtures__/styled-with-base-specified.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__fixtures__/vanilla.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/__snapshots__/import-mapping.js.snap (99%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/import-mapping/import-mapping.js (74%) create mode 100644 packages/babel-plugin/__tests__/index.js create mode 100644 packages/babel-plugin/__tests__/source-maps/__fixtures__/css-object.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__fixtures__/css-prop-dynamic.js (78%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__fixtures__/css-prop.js (71%) create mode 100644 packages/babel-plugin/__tests__/source-maps/__fixtures__/css-string.js rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js (85%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__fixtures__/global-styles-prop.js (70%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__fixtures__/styled-object.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__fixtures__/styled-string.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/__snapshots__/index.js.snap (81%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/source-maps/index.js (78%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/basic.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/call-expression.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/comments.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/component-selector.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/existing-options.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/function-interpolation.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/label.js (90%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/more-than-10-interpolations.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/multiple-calls.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/native.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/no-call.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/no-import.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/object-call-expression.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/object-function.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/object.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/other-imports.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/primitives-other-name.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/primitives.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/shorthand-property.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__fixtures__/with-spread.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/__snapshots__/index.js.snap (94%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-macro/index.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled-requires-options.js (91%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/styled.js (84%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/comments.js (91%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/css-basic.js (81%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/css-object.js (54%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/does-not-minify-inside-content-property.js (72%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/hoisting.js (95%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-basic.js (73%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-change-import.js (83%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-font-face.js (89%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/inject-global-with-interpolation.js (79%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-basic.js (71%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/keyframes-with-interpolation.js (77%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/__fixtures__/object-label.js (81%) rename packages/{babel-plugin-emotion/__tests__/__snapshots__/vanilla-emotion.js.snap => babel-plugin/__tests__/vanilla-emotion-macro/__snapshots__/index.js.snap} (51%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion-macro/index.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/__tests__/vanilla-emotion.js (83%) create mode 100644 packages/babel-plugin/package.json rename packages/{babel-plugin-emotion => babel-plugin}/src/core-macro.js (98%) rename packages/{babel-plugin-emotion => babel-plugin}/src/emotion-macro.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/index.js (92%) rename packages/{babel-plugin-emotion => babel-plugin}/src/styled-macro.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/add-import.js (100%) create mode 100644 packages/babel-plugin/src/utils/checks.js rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/get-styled-options.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/get-target-class-name.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/index.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/label.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/minify-utils.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/minify.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/object-to-string.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/source-maps.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/strings.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/transform-expression-with-styles.js (100%) rename packages/{babel-plugin-emotion => babel-plugin}/src/utils/transformer-macro.js (100%) delete mode 100644 packages/core/macro.d.ts delete mode 100644 packages/core/macro.js delete mode 100644 packages/create-emotion-server/README.md delete mode 100644 packages/create-emotion-server/types/tslint.json delete mode 100644 packages/create-emotion/README.md delete mode 100644 packages/create-emotion/package.json delete mode 100644 packages/create-emotion/test/__snapshots__/css.test.js.snap delete mode 100644 packages/create-emotion/test/__snapshots__/inline.test.js.snap delete mode 100644 packages/create-emotion/test/__snapshots__/instance.test.js.snap delete mode 100644 packages/create-emotion/test/__snapshots__/stream.test.js.snap delete mode 100644 packages/create-emotion/test/css.test.js delete mode 100644 packages/create-emotion/test/emotion-instance.js delete mode 100644 packages/create-emotion/test/inline.test.js delete mode 100644 packages/create-emotion/test/instance.test.js delete mode 100644 packages/create-emotion/test/stream.test.js delete mode 100644 packages/create-emotion/types/tslint.json rename packages/{emotion => css}/README.md (63%) create mode 100644 packages/css/create-instance/package.json create mode 100644 packages/css/macro.d.ts create mode 100644 packages/css/macro.js rename packages/{core => css}/macro.js.flow (100%) rename packages/{create-emotion/src/index.js => css/src/create-instance.js} (100%) rename packages/{emotion => css}/test/__snapshots__/component-selector.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/css.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/cx.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/inject-global.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/insertion.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/keyframes.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/label-pattern.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/selectivity.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/sheet.dom.test.js.snap (100%) rename packages/{emotion => css}/test/__snapshots__/warnings.test.js.snap (100%) rename packages/{emotion => css}/test/component-selector.test.js (94%) rename packages/{emotion => css}/test/css.test.js (99%) rename packages/{emotion => css}/test/cx.test.js (98%) rename packages/{emotion => css}/test/inject-global.test.js (95%) rename packages/{emotion => css}/test/insertion.test.js (100%) rename packages/{emotion => css}/test/keyframes.test.js (96%) rename packages/{emotion => css}/test/label-pattern.test.js (93%) rename packages/{emotion => css}/test/no-babel/__snapshots__/index.test.js.snap (87%) rename packages/{emotion => css}/test/no-babel/index.test.js (95%) rename packages/{emotion => css}/test/no-babel/warnings.test.js (97%) rename packages/{emotion => css}/test/selectivity.test.js (97%) rename packages/{emotion => css}/test/sheet.dom.test.js (96%) rename packages/{emotion => css}/test/source-map/.babelrc (100%) create mode 100644 packages/css/test/source-map/__snapshots__/source-map.test.js.snap rename packages/{emotion => css}/test/source-map/source-map.test.js (95%) rename packages/{emotion => css}/test/warnings.test.js (98%) rename packages/{create-emotion/types/index.d.ts => css/types/create-instance.d.ts} (100%) rename packages/{emotion => css}/types/index.d.ts (90%) rename packages/{create-emotion/types/tests.ts => css/types/tests-create-instance.ts} (97%) rename packages/{emotion => css}/types/tests.ts (98%) rename packages/{core => css}/types/tsconfig.json (100%) create mode 100644 packages/css/types/tslint.json delete mode 100644 packages/emotion-server/README.md delete mode 100644 packages/emotion-server/types/tsconfig.json delete mode 100644 packages/emotion-server/types/tslint.json delete mode 100644 packages/emotion-theming/src/index.js delete mode 100644 packages/emotion/macro.d.ts delete mode 100644 packages/emotion/macro.js delete mode 100644 packages/emotion/src/index.js delete mode 100644 packages/emotion/test/source-map/__snapshots__/source-map.test.js.snap delete mode 100644 packages/emotion/types/tsconfig.json delete mode 100644 packages/emotion/types/tslint.json delete mode 100644 packages/eslint-plugin-emotion/README.md create mode 100644 packages/eslint-plugin/CHANGELOG.md create mode 100644 packages/eslint-plugin/README.md rename packages/{eslint-plugin-emotion => eslint-plugin}/docs/rules/import-from-emotion.md (100%) rename packages/{eslint-plugin-emotion => eslint-plugin}/docs/rules/jsx-import.md (61%) rename packages/{eslint-plugin-emotion => eslint-plugin}/docs/rules/no-vanilla.md (91%) rename packages/{eslint-plugin-emotion => eslint-plugin}/docs/rules/styled-import.md (100%) rename packages/{eslint-plugin-emotion => eslint-plugin}/docs/rules/syntax-preference.md (77%) create mode 100644 packages/eslint-plugin/package.json rename packages/{eslint-plugin-emotion => eslint-plugin}/src/index.js (80%) rename packages/{eslint-plugin-emotion => eslint-plugin}/src/rules/import-from-emotion.js (100%) rename packages/{eslint-plugin-emotion => eslint-plugin}/src/rules/jsx-import.js (94%) rename packages/{eslint-plugin-emotion => eslint-plugin}/src/rules/no-vanilla.js (84%) create mode 100644 packages/eslint-plugin/src/rules/pkg-renaming.js rename packages/{eslint-plugin-emotion => eslint-plugin}/src/rules/styled-import.js (100%) rename packages/{eslint-plugin-emotion => eslint-plugin}/src/rules/syntax-preference.js (100%) rename packages/{eslint-plugin-emotion => eslint-plugin}/test/rules/import-from-emotion.test.js (95%) rename packages/{eslint-plugin-emotion => eslint-plugin}/test/rules/jsx-import.test.js (75%) rename packages/{eslint-plugin-emotion => eslint-plugin}/test/rules/no-vanilla.test.js (72%) create mode 100644 packages/eslint-plugin/test/rules/pkg-renaming.test.js rename packages/{eslint-plugin-emotion => eslint-plugin}/test/rules/styled-import.test.js (91%) rename packages/{eslint-plugin-emotion => eslint-plugin}/test/rules/syntax-preference.test.js (98%) rename packages/{jest-emotion => jest}/CHANGELOG.md (99%) rename packages/{jest-emotion => jest}/README.md (72%) rename packages/{jest-emotion => jest}/enzyme/index.js (100%) rename packages/{jest-emotion => jest}/enzyme/package.json (53%) rename packages/{jest-emotion => jest}/enzyme/types/index.d.ts (100%) rename packages/{jest-emotion => jest}/package.json (87%) rename packages/{jest-emotion => jest}/serializer.js (100%) rename packages/{jest-emotion => jest}/src/enzyme.js (100%) rename packages/{jest-emotion => jest}/src/index.js (100%) rename packages/{jest-emotion => jest}/src/matchers.js (100%) rename packages/{jest-emotion => jest}/src/replace-class-names.js (100%) rename packages/{jest-emotion => jest}/src/serializer.js (100%) rename packages/{jest-emotion => jest}/src/utils.js (100%) rename packages/{jest-emotion => jest}/test/__snapshots__/matchers.test.js.snap (100%) rename packages/{jest-emotion => jest}/test/__snapshots__/preact.test.js.snap (100%) rename packages/{jest-emotion => jest}/test/__snapshots__/printer.test.js.snap (100%) rename packages/{jest-emotion => jest}/test/__snapshots__/react-enzyme.test.js.snap (100%) rename packages/{jest-emotion => jest}/test/matchers.test.js (99%) rename packages/{jest-emotion => jest}/test/preact.test.js (92%) rename packages/{jest-emotion => jest}/test/printer.test.js (97%) rename packages/{jest-emotion => jest}/test/react-enzyme.test.js (97%) rename packages/{jest-emotion => jest}/types/index.d.ts (100%) rename packages/{jest-emotion => jest}/types/test.ts (97%) rename packages/{jest-emotion => jest}/types/tsconfig.json (100%) rename packages/{jest-emotion => jest}/types/tslint.json (100%) create mode 100644 packages/react/CHANGELOG.md rename packages/{core => react}/README.md (85%) rename packages/{core => react}/__tests__/__snapshots__/at-import.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/class-names.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/css-cache-hash.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/css.js.snap (97%) rename packages/{core => react}/__tests__/__snapshots__/global-with-theme.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/global.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/globals-are-the-worst.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/keyframes.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/legacy-class-name.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/server.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/theme-provider.dom.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/theme-provider.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/use-theme.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/warnings.js.snap (100%) rename packages/{core => react}/__tests__/__snapshots__/with-theme.js.snap (100%) rename packages/{core => react}/__tests__/at-import.js (93%) rename packages/{core => react}/__tests__/babel/__snapshots__/css.js.snap (100%) rename packages/{core => react}/__tests__/babel/__snapshots__/source-map-server.js.snap (51%) rename packages/{core => react}/__tests__/babel/css.js (91%) rename packages/{core => react}/__tests__/babel/source-map-server.js (91%) rename packages/{core => react}/__tests__/class-names.js (96%) rename packages/{core => react}/__tests__/clone-element.js (91%) rename packages/{core => react}/__tests__/compat/__snapshots__/browser.js.snap (100%) rename packages/{core => react}/__tests__/compat/__snapshots__/server.js.snap (100%) rename packages/{core => react}/__tests__/compat/browser.js (85%) rename packages/{core => react}/__tests__/compat/server.js (84%) rename packages/{core => react}/__tests__/css-cache-hash.js (93%) rename packages/{core => react}/__tests__/css.js (99%) rename packages/{core => react}/__tests__/custom-cache.js (90%) rename packages/{core => react}/__tests__/global-insertion-after-others.js (94%) rename packages/{core => react}/__tests__/global-with-theme.js (95%) rename packages/{core => react}/__tests__/global.js (99%) rename packages/{core => react}/__tests__/globals-are-the-worst.js (96%) rename packages/{core => react}/__tests__/import-prod.js (94%) rename packages/{core => react}/__tests__/keyframes.js (98%) rename packages/{core => react}/__tests__/legacy-class-name.js (93%) rename packages/{core => react}/__tests__/prod.js (92%) rename packages/{core => react}/__tests__/ref.js (90%) rename packages/{core => react}/__tests__/server.js (98%) rename packages/{core => react}/__tests__/theme-provider.dom.js (95%) rename packages/{core => react}/__tests__/theme-provider.js (97%) rename packages/{core => react}/__tests__/use-theme.js (96%) rename packages/{core => react}/__tests__/warnings.js (99%) rename packages/{core => react}/__tests__/with-theme.js (96%) create mode 100644 packages/react/macro.d.ts create mode 100644 packages/react/macro.js rename packages/{emotion => react}/macro.js.flow (100%) rename packages/{core => react}/package.json (73%) rename packages/{core => react}/src/class-names.js (100%) rename packages/{core => react}/src/context.js (100%) rename packages/{core => react}/src/css.js (100%) rename packages/{core => react}/src/global.js (100%) rename packages/{core => react}/src/index.js (86%) rename packages/{core => react}/src/jsx.js (98%) rename packages/{core => react}/src/keyframes.js (100%) rename packages/{core => react}/src/theming.js (100%) rename packages/{core => react}/src/utils.js (100%) rename packages/{core => react}/types/helper.d.ts (100%) rename packages/{core => react}/types/index.d.ts (100%) rename packages/{core => react}/types/tests-css.tsx (94%) rename packages/{core => react}/types/tests-theming.tsx (99%) rename packages/{core => react}/types/tests.tsx (97%) rename packages/{core => react}/types/theming.d.ts (95%) rename packages/{create-emotion => react}/types/tsconfig.json (100%) rename packages/{core => react}/types/tslint.json (100%) create mode 100644 packages/server/CHANGELOG.md create mode 100644 packages/server/README.md create mode 100644 packages/server/create-instance/package.json create mode 100644 packages/server/package.json rename packages/{create-emotion-server/src => server/src/create-instance}/extract-critical.js (100%) rename packages/{create-emotion-server/src => server/src/create-instance}/index.js (100%) rename packages/{create-emotion-server/src => server/src/create-instance}/inline.js (100%) rename packages/{create-emotion-server/src => server/src/create-instance}/stream.js (100%) rename packages/{emotion-server => server}/src/index.js (58%) rename packages/{emotion-server => server}/test/__snapshots__/index.test.js.snap (100%) rename packages/{emotion-server => server}/test/__snapshots__/inline.test.js.snap (100%) rename packages/{emotion-server => server}/test/__snapshots__/stream.test.js.snap (100%) rename packages/{emotion-server => server}/test/index.test.js (89%) rename packages/{emotion-server => server}/test/inline.test.js (96%) rename packages/{emotion-server => server}/test/stream.test.js (95%) rename packages/{emotion-server => server}/test/util.js (97%) rename packages/{create-emotion-server/types/index.d.ts => server/types/create-instance.d.ts} (100%) rename packages/{emotion-server => server}/types/index.d.ts (83%) rename packages/{create-emotion-server/types/tests.tsx => server/types/tests-create-instance.ts} (93%) rename packages/{emotion-server => server}/types/tests.tsx (96%) rename packages/{create-emotion-server => server}/types/tsconfig.json (100%) create mode 100644 packages/server/types/tslint.json rename {packages => removed-packages}/babel-plugin-emotion/CHANGELOG.md (100%) rename {packages => removed-packages}/babel-plugin-emotion/package.json (96%) create mode 100644 removed-packages/babel-plugin-emotion/src/index.js rename {packages => removed-packages}/core/CHANGELOG.md (100%) create mode 100644 removed-packages/core/package.json create mode 100644 removed-packages/core/src/index.js rename {packages => removed-packages}/create-emotion-server/CHANGELOG.md (100%) rename {packages => removed-packages}/create-emotion-server/package.json (65%) create mode 100644 removed-packages/create-emotion-server/src/index.js rename {packages => removed-packages}/create-emotion/CHANGELOG.md (100%) create mode 100644 removed-packages/create-emotion/package.json create mode 100644 removed-packages/create-emotion/src/index.js rename {packages => removed-packages}/emotion-server/CHANGELOG.md (100%) rename {packages => removed-packages}/emotion-server/package.json (70%) create mode 100644 removed-packages/emotion-server/src/index.js rename {packages => removed-packages}/emotion-theming/CHANGELOG.md (100%) rename {packages => removed-packages}/emotion-theming/package.json (94%) create mode 100644 removed-packages/emotion-theming/src/index.js rename {packages => removed-packages}/emotion/CHANGELOG.md (100%) create mode 100644 removed-packages/emotion/macro.js rename {packages => removed-packages}/emotion/package.json (60%) create mode 100644 removed-packages/emotion/src/index.js rename {packages => removed-packages}/eslint-plugin-emotion/CHANGELOG.md (100%) rename {packages => removed-packages}/eslint-plugin-emotion/package.json (91%) create mode 100644 removed-packages/eslint-plugin-emotion/src/index.js create mode 100644 removed-packages/jest-emotion/CHANGELOG.md create mode 100644 removed-packages/jest-emotion/package.json create mode 100644 removed-packages/jest-emotion/serializer.js create mode 100644 removed-packages/jest-emotion/src/index.js rename {packages => removed-packages}/styled-base/CHANGELOG.md (100%) rename {packages => removed-packages}/styled-base/package.json (100%) rename {packages => removed-packages}/styled-base/src/index.js (100%) delete mode 100644 site/transform.js diff --git a/.changeset/brave-rice-yawn.md b/.changeset/brave-rice-yawn.md new file mode 100644 index 000000000..963f46ab9 --- /dev/null +++ b/.changeset/brave-rice-yawn.md @@ -0,0 +1,6 @@ +--- +'@emotion/eslint-plugin': major +'eslint-plugin-emotion': major +--- + +Rename `eslint-plugin-emotion` to `@emotion/eslint-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` and `emotion/` with `@emotion/` in your rules config in your ESLint config. diff --git a/.changeset/clever-emus-watch.md b/.changeset/clever-emus-watch.md index 660987951..b64492864 100644 --- a/.changeset/clever-emus-watch.md +++ b/.changeset/clever-emus-watch.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': minor +'@emotion/babel-plugin': minor '@emotion/babel-preset-css-prop': minor --- diff --git a/.changeset/config.json b/.changeset/config.json index 689f17f86..eadd77dce 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -8,6 +8,7 @@ "linked": [ [ "@emotion/core", + "@emotion/react", "@emotion/styled", "@emotion/styled-base", "@emotion/cache", @@ -15,14 +16,18 @@ "create-emotion", "emotion", "emotion-server", + "@emotion/server", "create-emotion-server", "babel-plugin-emotion", + "@emotion/babel-plugin", "@emotion/babel-preset-css-prop", "jest-emotion", + "@emotion/jest", "@emotion/native", "@emotion/primitives", "@emotion/primitives-core", "eslint-plugin-emotion", + "@emotion/eslint-plugin", "emotion-theming" ] ], diff --git a/.changeset/eleven-apes-cheer.md b/.changeset/eleven-apes-cheer.md new file mode 100644 index 000000000..a0889706a --- /dev/null +++ b/.changeset/eleven-apes-cheer.md @@ -0,0 +1,5 @@ +--- +'@emotion/jest': minor +--- + +Improve support for Enzyme's shallow rendering with the addition of the @emotion/jest/enzyme snapshot serializer diff --git a/.changeset/flat-adults-add.md b/.changeset/flat-adults-add.md index a837f6a63..48b3b2163 100644 --- a/.changeset/flat-adults-add.md +++ b/.changeset/flat-adults-add.md @@ -1,5 +1,5 @@ --- -'jest-emotion': patch +'@emotion/jest': patch --- Take specificity into account when matching styles diff --git a/.changeset/four-cars-tell.md b/.changeset/four-cars-tell.md index bd1a203ce..7294fa626 100644 --- a/.changeset/four-cars-tell.md +++ b/.changeset/four-cars-tell.md @@ -1,12 +1,12 @@ --- -'@emotion/core': major +'@emotion/react': major '@emotion/styled': major --- Reworked TypeScript definitions so it's easier to provide a type for Theme. Instead of creating custom instances (like before) you can augment builtin Theme interface like this: ```ts -declare module '@emotion/core' { +declare module '@emotion/react' { export interface Theme { primaryColor: string secondaryColor: string diff --git a/.changeset/giant-oranges-impress.md b/.changeset/giant-oranges-impress.md index f80d9a8dd..90a3adc17 100644 --- a/.changeset/giant-oranges-impress.md +++ b/.changeset/giant-oranges-impress.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': major +'@emotion/babel-plugin': major '@emotion/babel-preset-css-prop': major --- diff --git a/.changeset/grumpy-news-wonder.md b/.changeset/grumpy-news-wonder.md new file mode 100644 index 000000000..f22caaf8f --- /dev/null +++ b/.changeset/grumpy-news-wonder.md @@ -0,0 +1,6 @@ +--- +'@emotion/babel-plugin': major +'babel-plugin-emotion': major +--- + +Rename `babel-plugin-emotion` to `@emotion/babel-plugin`. Please replace `"plugins": ["emotion"]` with `"plugins": ["@emotion"]` in your Babel config. diff --git a/.changeset/large-snakes-ring.md b/.changeset/large-snakes-ring.md index 8e90494d7..d4ccc025c 100644 --- a/.changeset/large-snakes-ring.md +++ b/.changeset/large-snakes-ring.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': minor +'@emotion/babel-plugin': minor '@emotion/babel-preset-css-prop': minor --- diff --git a/.changeset/lazy-elephants-stare.md b/.changeset/lazy-elephants-stare.md index ea8a1e15a..dd2a95c2f 100644 --- a/.changeset/lazy-elephants-stare.md +++ b/.changeset/lazy-elephants-stare.md @@ -1,5 +1,5 @@ --- -'@emotion/core': patch +'@emotion/react': patch '@emotion/serialize': patch --- diff --git a/.changeset/light-mice-relate.md b/.changeset/light-mice-relate.md index 34ab07455..d61cb57be 100644 --- a/.changeset/light-mice-relate.md +++ b/.changeset/light-mice-relate.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': patch +'@emotion/babel-plugin': patch --- Avoid transpiling vanilla emotion calls in already transpiled code to avoid double labels and such diff --git a/.changeset/long-apes-admire/changes.json b/.changeset/long-apes-admire/changes.json index a07e1e459..7e72dcf94 100644 --- a/.changeset/long-apes-admire/changes.json +++ b/.changeset/long-apes-admire/changes.json @@ -13,7 +13,7 @@ "dependencies": ["@emotion/serialize"] }, { - "name": "@emotion/core", + "name": "@emotion/react", "type": "patch", "dependencies": [ "@emotion/css", diff --git a/.changeset/lovely-owls-remember.md b/.changeset/lovely-owls-remember.md index 55e45374f..9029ae977 100644 --- a/.changeset/lovely-owls-remember.md +++ b/.changeset/lovely-owls-remember.md @@ -1,5 +1,5 @@ --- -'@emotion/core': minor +'@emotion/react': minor --- Support functions in arrays passed to css prop and Global's styles prop. This allows for composition of theme-accepting functions. diff --git a/.changeset/mean-deers-confess.md b/.changeset/mean-deers-confess.md index f7a14ca24..d2c99fce7 100644 --- a/.changeset/mean-deers-confess.md +++ b/.changeset/mean-deers-confess.md @@ -1,5 +1,5 @@ --- -'jest-emotion': major +'@emotion/jest': major --- Added the `T` parameter to the `Matchers` interface in the TypeScript definitions to make this module compatible with `@types/jest@^24.0.20`. diff --git a/.changeset/modern-grapes-obey.md b/.changeset/modern-grapes-obey.md index 9577dc879..101947bfe 100644 --- a/.changeset/modern-grapes-obey.md +++ b/.changeset/modern-grapes-obey.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': major +'@emotion/babel-plugin': major --- Drop Babel 6 support diff --git a/.changeset/moody-stingrays-sort.md b/.changeset/moody-stingrays-sort.md index c36050960..a2b998262 100644 --- a/.changeset/moody-stingrays-sort.md +++ b/.changeset/moody-stingrays-sort.md @@ -1,5 +1,5 @@ --- -'@emotion/core': minor +'@emotion/react': minor --- -`Global` imported from macro entry (`@emotion/core/macro`) gets source maps generated now when inline css-less expression is used as value of the `styles` prop. +`Global` imported from macro entry (`@emotion/react/macro`) gets source maps generated now when inline css-less expression is used as value of the `styles` prop. diff --git a/.changeset/neat-ligers-film.md b/.changeset/neat-ligers-film.md index dfcc34ce2..febfb48b4 100644 --- a/.changeset/neat-ligers-film.md +++ b/.changeset/neat-ligers-film.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': patch +'@emotion/babel-plugin': patch --- Fix issue with not updating referenced import when bailing out on already transpiled vanilla emotion nodes (a regression introduced in #1602) diff --git a/.changeset/nervous-clouds-brush.md b/.changeset/nervous-clouds-brush.md new file mode 100644 index 000000000..2641f4514 --- /dev/null +++ b/.changeset/nervous-clouds-brush.md @@ -0,0 +1,6 @@ +--- +'@emotion/react': major +'@emotion/core': major +--- + +Rename `@emotion/core` to `@emotion/react`. Please change any imports of `@emotion/core` to import `@emotion/react` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`. diff --git a/.changeset/nine-mugs-care.md b/.changeset/nine-mugs-care.md index 39406a255..37d54a5f5 100644 --- a/.changeset/nine-mugs-care.md +++ b/.changeset/nine-mugs-care.md @@ -1,5 +1,5 @@ --- -'@emotion/core': patch +'@emotion/react': patch '@emotion/is-prop-valid': patch '@emotion/serialize': patch --- diff --git a/.changeset/odd-flowers-breathe.md b/.changeset/odd-flowers-breathe.md new file mode 100644 index 000000000..b9d52adf8 --- /dev/null +++ b/.changeset/odd-flowers-breathe.md @@ -0,0 +1,6 @@ +--- +'@emotion/css': major +'create-emotion': major +--- + +Move create `create-emotion` to `@emotion/css/create-instance`. Please change any imports of `create-emotion` to import `@emotion/css/create-instance` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`. diff --git a/.changeset/polite-impalas-doubt.md b/.changeset/polite-impalas-doubt.md index 5f665d514..b306d0beb 100644 --- a/.changeset/polite-impalas-doubt.md +++ b/.changeset/polite-impalas-doubt.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': major +'@emotion/babel-plugin': major '@emotion/babel-preset-css-prop': major --- diff --git a/.changeset/purple-teachers-clean.md b/.changeset/purple-teachers-clean.md new file mode 100644 index 000000000..893b3fc6b --- /dev/null +++ b/.changeset/purple-teachers-clean.md @@ -0,0 +1,6 @@ +--- +'@emotion/jest': major +'jest-emotion': major +--- + +Rename `jest-emotion` to `@emotion/jest`. Please replace `"snapshotSerializers": ["jest-emotion"]` with `"snapshotSerializers": ["@emotion/jest"]` if you're using the snapshot serializer. Also replace any imports of `jest-emotion` with `@emotion/jest` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`. diff --git a/.changeset/rare-books-own.md b/.changeset/rare-books-own.md index a687a7257..5b426e316 100644 --- a/.changeset/rare-books-own.md +++ b/.changeset/rare-books-own.md @@ -1,13 +1,15 @@ --- -'babel-plugin-emotion': major +'@emotion/babel-plugin': major '@emotion/cache': major -'@emotion/core': major +'@emotion/react': major 'create-emotion': major 'create-emotion-server': major '@emotion/css': major 'emotion': major 'emotion-server': major +'@emotion/server': major 'emotion-theming': major +'@emotion/jest': major 'jest-emotion': major '@emotion/native': major '@emotion/primitives': major diff --git a/.changeset/rare-toes-grow.md b/.changeset/rare-toes-grow.md index c5f1d891e..f1271495e 100644 --- a/.changeset/rare-toes-grow.md +++ b/.changeset/rare-toes-grow.md @@ -1,5 +1,5 @@ --- -'jest-emotion': patch +'@emotion/jest': patch --- Match rules in declarations with component used as a selector diff --git a/.changeset/rich-hotels-sing.md b/.changeset/rich-hotels-sing.md index 092c446ef..44f967083 100644 --- a/.changeset/rich-hotels-sing.md +++ b/.changeset/rich-hotels-sing.md @@ -1,5 +1,5 @@ --- -'@emotion/core': patch +'@emotion/react': patch --- Fix issue with published TypeScript test files augmenting Theme interface. diff --git a/.changeset/rotten-adults-guess.md b/.changeset/rotten-adults-guess.md new file mode 100644 index 000000000..0f2e8256f --- /dev/null +++ b/.changeset/rotten-adults-guess.md @@ -0,0 +1,6 @@ +--- +'@emotion/server': major +'emotion-server': major +--- + +Rename `emotion-server` to `@emotion/server`. Please change any imports of `emotion-server` to import `@emotion/server` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`. diff --git a/.changeset/shaggy-cheetahs-vanish.md b/.changeset/shaggy-cheetahs-vanish.md new file mode 100644 index 000000000..b4003deb5 --- /dev/null +++ b/.changeset/shaggy-cheetahs-vanish.md @@ -0,0 +1,6 @@ +--- +'@emotion/css': major +'emotion': major +--- + +Rename `emotion` to `@emotion/css`. Please change any imports of `emotion` to import `@emotion/css` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`. diff --git a/.changeset/silver-bulldogs-beg.md b/.changeset/silver-bulldogs-beg.md index 06889d664..bae2268ac 100644 --- a/.changeset/silver-bulldogs-beg.md +++ b/.changeset/silver-bulldogs-beg.md @@ -1,5 +1,5 @@ --- -'eslint-plugin-emotion': minor +'@emotion/eslint-plugin': minor --- Respect `syntax-preference` rule when using css prop. diff --git a/.changeset/smooth-carpets-matter.md b/.changeset/smooth-carpets-matter.md index f7d011e1c..29a9cd0dd 100644 --- a/.changeset/smooth-carpets-matter.md +++ b/.changeset/smooth-carpets-matter.md @@ -1,18 +1,20 @@ --- -'babel-plugin-emotion': major -'@emotion/core': major +'@emotion/babel-plugin': major +'@emotion/react': major '@emotion/css': major --- -Removed `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/core/macro` has been added to account for this use case and appropriate changes has been made to `babel-plugin-emotion` to facilitate those changes. +Removed default export from `@emotion/css` - it's main purpose was to allow `css` to be a Babel macro, but since babel-plugin-macros allows us to keep imports nowadays this is no longer needed. `@emotion/react/macro` has been added to account for this use case and appropriate changes has been made to `@emotion/babel-plugin` to facilitate those changes. -If you have used `@emotion/css` directly (it was always reexported from `@emotion/core`) or you have been using its macro then you should update your code like this: +If you have used `@emotion/css` directly (it was always reexported from `@emotion/react`) or you have been using its macro then you should update your code like this: ```diff -import css from '@emotion/css' -+import { css } from '@emotion/core' ++import { css } from '@emotion/react' // or -import css from '@emotion/css/macro' -+import { css } from '@emotion/core/macro' ++import { css } from '@emotion/react/macro' ``` + +You can also use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin` to do this for you. diff --git a/.changeset/soft-moose-attend.md b/.changeset/soft-moose-attend.md new file mode 100644 index 000000000..b94c1edd9 --- /dev/null +++ b/.changeset/soft-moose-attend.md @@ -0,0 +1,6 @@ +--- +'@emotion/server': major +'create-emotion-server': major +--- + +Move `create-emotion-server` to `@emotion/server/create-instance`. Please change any imports of `create-emotion-server` to import `@emotion/server/create-instance` or use the `@emotion/pkg-renaming` ESLint rule from `@emotion/eslint-plugin`. diff --git a/.changeset/sour-poets-move.md b/.changeset/sour-poets-move.md index e11178983..9382886e9 100644 --- a/.changeset/sour-poets-move.md +++ b/.changeset/sour-poets-move.md @@ -1,5 +1,5 @@ --- -'@emotion/core': patch +'@emotion/react': patch --- -Warn if @emotion/core is initialized more than once in the same development environment. +Warn if @emotion/react is initialized more than once in the same development environment. diff --git a/.changeset/spotty-llamas-mate.md b/.changeset/spotty-llamas-mate.md index f78a58baa..ee3e8fe99 100644 --- a/.changeset/spotty-llamas-mate.md +++ b/.changeset/spotty-llamas-mate.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': major +'@emotion/babel-plugin': major '@emotion/styled-base': major '@emotion/styled': major --- diff --git a/.changeset/stupid-radios-draw.md b/.changeset/stupid-radios-draw.md index 2c8893745..494b49b31 100644 --- a/.changeset/stupid-radios-draw.md +++ b/.changeset/stupid-radios-draw.md @@ -1,6 +1,6 @@ --- -'babel-plugin-emotion': minor +'@emotion/babel-plugin': minor '@emotion/babel-preset-css-prop': minor --- -Added the `importMap` option which allows you to tell babel-plugin-emotion what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms +Added the `importMap` option which allows you to tell @emotion/babel-plugin what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms diff --git a/.changeset/two-baboons-mate.md b/.changeset/two-baboons-mate.md index 29614302b..7f85bc1ef 100644 --- a/.changeset/two-baboons-mate.md +++ b/.changeset/two-baboons-mate.md @@ -1,5 +1,5 @@ --- -'@emotion/core': major +'@emotion/react': major 'emotion-theming': major '@emotion/native': major '@emotion/primitives-core': major diff --git a/.changeset/two-kiwis-give.md b/.changeset/two-kiwis-give.md index 2f4eaa3c8..d78a9c4a2 100644 --- a/.changeset/two-kiwis-give.md +++ b/.changeset/two-kiwis-give.md @@ -1,5 +1,5 @@ --- -'babel-plugin-emotion': minor +'@emotion/babel-plugin': minor --- `Global` gets handled by the Babel plugin now - this gives inline css-less expressions source maps. diff --git a/.changeset/violet-spiders-itch.md b/.changeset/violet-spiders-itch.md new file mode 100644 index 000000000..ae923d112 --- /dev/null +++ b/.changeset/violet-spiders-itch.md @@ -0,0 +1,5 @@ +--- +'@emotion/eslint-plugin': minor +--- + +Add @emotion/pkg-renaming rule for Emotion 11 migration diff --git a/.changeset/weak-islands-confess.md b/.changeset/weak-islands-confess.md index 7442c94c9..34b866e87 100644 --- a/.changeset/weak-islands-confess.md +++ b/.changeset/weak-islands-confess.md @@ -1,6 +1,6 @@ --- -'@emotion/core': major +'@emotion/react': major 'emotion-theming': major --- -`emotion-theming` has been removed and all its exports were moved to `@emotion/core` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/core'` from now on. +`emotion-theming` has been removed and all its exports were moved to `@emotion/react` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/react'` from now on. diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 739e4819c..14352fc9f 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,14 +1,4 @@ { - "packages": [ - "packages/babel-plugin-emotion", - "packages/cache", - "packages/core", - "packages/create-emotion", - "packages/css", - "packages/emotion", - "packages/emotion-theming", - "packages/serialize", - "packages/styled" - ], + "packages": ["packages/*"], "sandboxes": ["pk1qjqpw67"] } diff --git a/.github/ISSUE_TEMPLATE/--bug-report.md b/.github/ISSUE_TEMPLATE/--bug-report.md index 2e8b9e6dc..12495f83e 100644 --- a/.github/ISSUE_TEMPLATE/--bug-report.md +++ b/.github/ISSUE_TEMPLATE/--bug-report.md @@ -41,7 +41,7 @@ assignees: '' **Environment information:** - + - `react` version: -- `emotion` version: +- `@emotion/react` version: diff --git a/README.md b/README.md index f5933c8ca..d68b359a9 100644 --- a/README.md +++ b/README.md @@ -37,12 +37,12 @@ Frequently viewed docs: Get up and running with a single import. ```bash -npm install --save @emotion/core +npm install --save @emotion/react ``` ```jsx /** @jsx jsx */ -import { jsx } from '@emotion/core' +import { jsx } from '@emotion/react' let SomeComponent = props => { return ( @@ -60,7 +60,7 @@ let SomeComponent = props => { The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project. -Look here 👉 _[emotion babel plugin feature table and documentation](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion)_ +Look here 👉 _[emotion babel plugin feature table and documentation](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin)_ ### Demo Sandbox diff --git a/babel.config.js b/babel.config.js index 95001ffae..50a4395ad 100644 --- a/babel.config.js +++ b/babel.config.js @@ -14,14 +14,14 @@ module.exports = api => { ((!filename.includes('no-babel') && needsBabelPluginEmotion(filename)) || filename.includes(path.join('__tests__', 'babel'))), - plugins: ['babel-plugin-emotion'] + plugins: ['@emotion/babel-plugin'] }, { test: filename => filename && filename.includes('source-map') && needsBabelPluginEmotion(filename), - plugins: [['babel-plugin-emotion', { sourceMap: true }]] + plugins: [['@emotion/babel-plugin', { sourceMap: true }]] } ] } diff --git a/docs/babel-macros.mdx b/docs/babel-macros.mdx index f2d519578..9831e1d0c 100644 --- a/docs/babel-macros.mdx +++ b/docs/babel-macros.mdx @@ -8,10 +8,10 @@ All of Emotion's Babel Macros are available by adding `/macro` to the end of the ```jsx import styled from '@emotion/styled/macro' -import { jsx, css, Global, keyframes } from '@emotion/core/macro' -import { css, keyframes, injectGlobal } from 'emotion/macro' +import { jsx, css, Global, keyframes } from '@emotion/react/macro' +import { css, keyframes, injectGlobal } from '@emotion/css/macro' ``` > Note > -> There are some optimisations which aren't possible with Babel Macros, so if it's possible, we still recommend using babel-plugin-emotion +> There are some optimisations which aren't possible with Babel Macros, so if it's possible, we still recommend using @emotion/babel-plugin diff --git a/docs/babel.mdx b/docs/babel.mdx index 4ea2e9972..a15cd4f8f 100644 --- a/docs/babel.mdx +++ b/docs/babel.mdx @@ -2,7 +2,7 @@ title: 'Babel Plugin' --- -`babel-plugin-emotion` is highly recommended. All of the options that can be provided to `babel-plugin-emotion` are documented in [`babel-plugin-emotion`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion). +`@emotion/babel-plugin` is highly recommended. All of the options that can be provided to `@emotion/babel-plugin` are documented in [`@emotion/babel-plugin`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin). ### Install diff --git a/docs/cache-provider.mdx b/docs/cache-provider.mdx index 8691993bc..7f165dc1c 100644 --- a/docs/cache-provider.mdx +++ b/docs/cache-provider.mdx @@ -7,7 +7,7 @@ It can be useful to customize emotion's options - i.e. to add custom Stylis plug ```jsx // @live /** @jsx jsx */ -import { CacheProvider, jsx, css } from '@emotion/core' +import { CacheProvider, jsx, css } from '@emotion/react' import createCache from '@emotion/cache' const myCache = createCache({ diff --git a/docs/class-names.mdx b/docs/class-names.mdx index 8e60b4813..884ea69e0 100644 --- a/docs/class-names.mdx +++ b/docs/class-names.mdx @@ -6,7 +6,7 @@ It can be useful to create a className that is not passed to a component, for ex ```jsx // @live -import { ClassNames } from '@emotion/core' +import { ClassNames } from '@emotion/react' // this might be a component from npm that accepts a wrapperClassName prop let SomeComponent = props => ( diff --git a/docs/composition.mdx b/docs/composition.mdx index d0ff2d9f9..b1eef27a9 100644 --- a/docs/composition.mdx +++ b/docs/composition.mdx @@ -7,7 +7,7 @@ Composition is one of the most powerful and useful patterns in Emotion. You can ```jsx // @live /** @jsx jsx */ -import { jsx, css } from '@emotion/core' +import { jsx, css } from '@emotion/react' const base = css` color: hotpink; @@ -55,7 +55,7 @@ With Emotion though, you can create styles and combine them. ```jsx // @live /** @jsx jsx */ -import { css, jsx } from '@emotion/core' +import { css, jsx } from '@emotion/react' const danger = css` color: red; diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx index a2745fc5c..a0d1dd251 100644 --- a/docs/css-prop.mdx +++ b/docs/css-prop.mdx @@ -47,11 +47,11 @@ Similar to a comment containing linter configuration, this configures the [jsx b > [JSX Pragma Babel Documentation](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#pragma) -#### Import the `jsx` function from `@emotion/core` +#### Import the `jsx` function from `@emotion/react` ```js /** @jsx jsx */ -import { jsx } from '@emotion/core' +import { jsx } from '@emotion/react' ``` Note that excluding this will cause your css to render as `[Object Object]`. @@ -67,7 +67,7 @@ The `css` prop accepts object styles directly and does not require an additional ```jsx // @live /** @jsx jsx */ -import { jsx } from '@emotion/core' +import { jsx } from '@emotion/react' render(
Note: > -> **`css` from `@emotion/core` does not return the computed class name string.** The function returns an object containing the computed name and flattened styles. The returned object is understood by emotion at a low level and can be composed with other emotion based styles inside of the `css` prop, other `css` calls, or the `styled` API. +> **`css` from `@emotion/react` does not return the computed class name string.** The function returns an object containing the computed name and flattened styles. The returned object is understood by emotion at a low level and can be composed with other emotion based styles inside of the `css` prop, other `css` calls, or the `styled` API. You can also pass in your css as variables, which allows for composition (read more about this [here](https://emotion.sh/docs/composition)). @@ -128,7 +128,7 @@ The `P` component in this example has its default styles overridden in the `Arti ```js /** @jsx jsx */ -import { jsx } from '@emotion/core' +import { jsx } from '@emotion/react' const P = props => (

(

diff --git a/docs/install.mdx b/docs/install.mdx index 3bc69fda7..e5208bd84 100644 --- a/docs/install.mdx +++ b/docs/install.mdx @@ -2,16 +2,16 @@ title: 'Install' --- -There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the [`@emotion/core` package](/packages/@emotion/core). If you're not using React, you should use [the `emotion` package](#vanilla). +There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the [`@emotion/react` package](/packages/@emotion/react). If you're not using React, you should use [the `emotion` package](#vanilla). ```bash -yarn add @emotion/core +yarn add @emotion/react ``` or if you prefer npm ```bash -npm install --save @emotion/core +npm install --save @emotion/react ``` To use it, import what you need, for example use [the css prop](/docs/css-prop.md) to create class names with styles. @@ -20,7 +20,7 @@ To use it, import what you need, for example use [the css prop](/docs/css-prop.m // @live // this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement /** @jsx jsx */ -import { jsx, css } from '@emotion/core' +import { jsx, css } from '@emotion/react' const style = css` color: hotpink; @@ -52,7 +52,7 @@ render( `styled` is a way to create React components that have styles attached to them. ```bash -# assuming you already have @emotion/core installed +# assuming you already have @emotion/react installed yarn add @emotion/styled ``` @@ -73,7 +73,7 @@ const Button = styled.button` render() ``` -## With [`babel-plugin-emotion`](/packages/babel-plugin-emotion) +## With [`@emotion/babel-plugin`](/packages/@emotion/babel-plugin) > Note: > @@ -82,13 +82,13 @@ render() Emotion has an optional [Babel](https://babeljs.io/) plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels. ```bash -yarn add --dev babel-plugin-emotion +yarn add --dev @emotion/babel-plugin ``` or if you prefer npm ```bash -npm install --save-dev babel-plugin-emotion +npm install --save-dev @emotion/babel-plugin ``` ## .babelrc @@ -97,7 +97,7 @@ _`"emotion"` must be the **first plugin** in your babel config `plugins` list._ ```json { - "plugins": ["emotion"] + "plugins": ["@emotion"] } ``` @@ -107,38 +107,23 @@ If you are using Babel's env option emotion must also be first for each environm { "env": { "production": { - "plugins": ["emotion", ...otherBabelPlugins] + "plugins": ["@emotion", ...otherBabelPlugins] } }, - "plugins": ["emotion"] -} -``` - -## Recommended config - -```json -{ - "env": { - "production": { - "plugins": ["emotion"] - }, - "development": { - "plugins": [["emotion", { "sourceMap": true }]] - } - } + "plugins": ["@emotion"] } ``` # Vanilla -If you're not using React, you can use vanilla Emotion from the `emotion` package. Most of the documentation here focuses on the React-specific version of Emotion, but most of the concepts in the React-specific version also apply to vanilla Emotion. +If you're not using React, you can use vanilla Emotion from the `@emotion/css` package. Most of the documentation here focuses on the React-specific version of Emotion, but most of the concepts in the React-specific version also apply to vanilla Emotion. ```bash -yarn add emotion +yarn add @emotion/css ``` ```jsx -import { css } from 'emotion' +import { css } from '@emotion/css' const app = document.getElementById('root') const myClassName = css` diff --git a/docs/instances.mdx b/docs/instances.mdx deleted file mode 100644 index 631ea2b5e..000000000 --- a/docs/instances.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 'Instances' ---- - -emotion allows creating custom instances of emotion to provide special options. Instances are created with the [`create-emotion`](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion) and [`create-emotion-server`](https://github.com/emotion-js/emotion/tree/master/packages/create-emotion-server) packages which create instances of `emotion` and `emotion-server` respectively. They are documented in their own respective READMEs linked above. - -The instances' paths should be added as an option to `babel-plugin-emotion` [as shown in `babel-plugin-emotion`'s README](https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion#instances). diff --git a/docs/introduction.mdx b/docs/introduction.mdx index d3287a173..c2d9f989f 100644 --- a/docs/introduction.mdx +++ b/docs/introduction.mdx @@ -11,12 +11,12 @@ There are two primary methods of using Emotion. The first is framework agnostic ### Framework Agnostic ```bash -npm i emotion +npm i @emotion/css ``` -**[`emotion` documentation](https://emotion.sh/docs/emotion)** +**[`@emotion/css` documentation](https://emotion.sh/docs/@emotion/css)** -The [emotion](https://www.npmjs.com/package/emotion) package is framework agnostic and the simplest way to use Emotion. +The [@emotion/css](https://www.npmjs.com/package/@emotion/css) package is framework agnostic and the simplest way to use Emotion. - Requires no additional setup, babel plugin, or other config changes. @@ -30,7 +30,7 @@ The [emotion](https://www.npmjs.com/package/emotion) package is framework agnost ```jsx // @live -import { css, cx } from 'emotion' +import { css, cx } from '@emotion/css' const color = 'white' @@ -54,10 +54,10 @@ render( ### React ```bash -npm i @emotion/core +npm i @emotion/react ``` -The ["@emotion/core"](https://www.npmjs.com/package/@emotion/core) package requires React and is recommended for users of that framework if possible. +The ["@emotion/react"](https://www.npmjs.com/package/@emotion/react) package requires React and is recommended for users of that framework if possible. - Best when using React with a build environment that can be configured. @@ -76,13 +76,13 @@ The ["@emotion/core"](https://www.npmjs.com/package/@emotion/core) package requi - ESLint plugins available to ensure proper patterns and configuration are set. -**[`@emotion/core` css prop documentation](/docs/css-prop.md)** +**[`@emotion/react` css prop documentation](/docs/css-prop.md)** ```jsx // @live // this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement /** @jsx jsx */ -import { css, jsx } from '@emotion/core' +import { css, jsx } from '@emotion/react' const color = 'white' @@ -104,7 +104,7 @@ render( ``` ```bash -npm i @emotion/styled @emotion/core +npm i @emotion/styled @emotion/react ``` The [@emotion/styled](https://www.npmjs.com/package/@emotion/styled) package is for those who prefer to use the `styled.div` style API for creating components. diff --git a/docs/keyframes.mdx b/docs/keyframes.mdx index 49e7a951c..916267ba4 100644 --- a/docs/keyframes.mdx +++ b/docs/keyframes.mdx @@ -2,12 +2,12 @@ title: 'Keyframes' --- -You can define animations using the `keyframes` helper from `@emotion/core`. `keyframes` takes in a css keyframe definition and returns an object you can use in styles. You can use strings or objects just like `css`. +You can define animations using the `keyframes` helper from `@emotion/react`. `keyframes` takes in a css keyframe definition and returns an object you can use in styles. You can use strings or objects just like `css`. ```jsx // @live /** @jsx jsx */ -import { jsx, css, keyframes } from '@emotion/core' +import { jsx, css, keyframes } from '@emotion/react' const bounce = keyframes` from, 20%, 53%, 80%, to { diff --git a/docs/labels.mdx b/docs/labels.mdx index f051613c8..f94de377e 100644 --- a/docs/labels.mdx +++ b/docs/labels.mdx @@ -2,12 +2,12 @@ title: 'Labels' --- -Emotion adds a css property called `label`, the value of it is appended to the end of the class name, so it's more readable than a hash. `babel-plugin-emotion` adds these labels automatically based on the variable name and other information, so they don't need to be manually specified. +Emotion adds a css property called `label`, the value of it is appended to the end of the class name, so it's more readable than a hash. `@emotion/babel-plugin` adds these labels automatically based on the variable name and other information, so they don't need to be manually specified. ```jsx // @live /** @jsx jsx */ -import { css, jsx } from '@emotion/core' +import { css, jsx } from '@emotion/react' let style = css` color: hotpink; diff --git a/docs/media-queries.mdx b/docs/media-queries.mdx index 67ca85d04..6528d5bb6 100644 --- a/docs/media-queries.mdx +++ b/docs/media-queries.mdx @@ -7,7 +7,7 @@ Using media queries in emotion works just like using media queries in regular cs ```jsx // @live /** @jsx jsx */ -import { jsx, css } from '@emotion/core' +import { jsx, css } from '@emotion/react' render(

Note: > -> `babel-plugin-emotion` is required for source maps +> `@emotion/babel-plugin` is required for source maps -emotion supports source maps for styles authored in javascript. +Emotion supports source maps for styles authored in JavaScript. ![source-map-demo](https://user-images.githubusercontent.com/662750/30778580-78fbeae4-a096-11e7-82e1-120b6984e875.gif) Required For Source Maps: -1. `babel-plugin-emotion` must be in your Babel setup. [[documentation]](./install.md) +1. `@emotion/babel-plugin` must be in your Babel setup. [[documentation]](./install.md) 2. `process.env.NODE_ENV` must be any value except `"production"` > Note: > -> Source maps are on by default in babel-plugin-emotion but they will be removed in production builds +> Source maps are on by default in @emotion/babel-plugin but they will be removed in production builds diff --git a/docs/ssr.mdx b/docs/ssr.mdx index 56e470066..e0a6b1811 100644 --- a/docs/ssr.mdx +++ b/docs/ssr.mdx @@ -6,7 +6,7 @@ Server side rendering in Emotion 10 has two approaches, each with their own trad ## Default Approach -Server side rendering works out of the box in Emotion 10 and above if you're only using `@emotion/core` and `@emotion/styled`. This means you can call React's [`renderToString`](https://reactjs.org/docs/react-dom-server.html#rendertostring) or [`renderToNodeStream`](https://reactjs.org/docs/react-dom-server.html#rendertonodestream) methods directly without any extra configuration. +Server side rendering works out of the box in Emotion 10 and above if you're only using `@emotion/react` and `@emotion/styled`. This means you can call React's [`renderToString`](https://reactjs.org/docs/react-dom-server.html#rendertostring) or [`renderToNodeStream`](https://reactjs.org/docs/react-dom-server.html#rendertonodestream) methods directly without any extra configuration. ```jsx import { renderToString } from 'react-dom/server' @@ -36,9 +36,9 @@ You can also use the advanced integration, it requires more work but does not ha ### On server ```jsx -import { CacheProvider } from '@emotion/core' +import { CacheProvider } from '@emotion/react' import { renderToString } from 'react-dom/server' -import createEmotionServer from 'create-emotion-server' +import createEmotionServer from '@emotion/server/create-instance' import createCache from '@emotion/cache' const cache = createCache() @@ -97,7 +97,7 @@ This returns a string of html that inlines the critical css required right befor ```jsx import { renderToString } from 'react-dom/server' -import { renderStylesToString } from 'emotion-server' +import { renderStylesToString } from '@emotion/server' import App from './App' const html = renderStylesToString(renderToString()) @@ -109,7 +109,7 @@ This returns a [Node Stream Writable](https://nodejs.org/api/stream.html#stream_ ```jsx import { renderToNodeStream } from 'react-dom/server' -import { renderStylesToNodeStream } from 'emotion-server' +import { renderStylesToNodeStream } from '@emotion/server' import App from './App' const stream = renderToNodeStream().pipe(renderStylesToNodeStream()) @@ -121,7 +121,7 @@ This returns an object with the properties `html`, `ids` and `css`. It removes u ```jsx import { renderToString } from 'react-dom/server' -import { extractCritical } from 'emotion-server' +import { extractCritical } from '@emotion/server' import App from './App' const { html, ids, css } = extractCritical(renderToString()) @@ -132,7 +132,7 @@ const { html, ids, css } = extractCritical(renderToString()) `hydrate` should be called on the client with the `ids` that `extractCritical` returns. If you don't call it then emotion will reinsert all the rules. `hydrate` is **only** required for `extractCritical`, **not** for `renderStylesToString` or `renderStylesToNodeStream`, hydration occurs automatically with `renderStylesToString` and `renderStylesToNodeStream`. ```jsx -import { hydrate } from 'emotion' +import { hydrate } from '@emotion/css' hydrate(ids) ``` @@ -192,7 +192,7 @@ export const myCache = createMyCache() gatsby-ssr.js ```jsx -import { CacheProvider } from '@emotion/core' +import { CacheProvider } from '@emotion/react' import { createMyCache } from './create-emotion-cache' @@ -204,7 +204,7 @@ export const wrapRootElement = ({ element }) => ( gatsby-browser.js ```jsx -import { CacheProvider } from '@emotion/core' +import { CacheProvider } from '@emotion/react' import { myCache } from './create-emotion-cache' @@ -215,7 +215,7 @@ export const wrapRootElement = ({ element }) => ( > Note: > -> While Emotion 10 and above supports SSR out of the box, it's still recommended to use gatsby-plugin-emotion as gatsby-plugin-emotion will enable babel-plugin-emotion and other potential future optimisations. +> While Emotion 10 and above supports SSR out of the box, it's still recommended to use gatsby-plugin-emotion as gatsby-plugin-emotion will enable @emotion/babel-plugin and other potential future optimisations. ## Puppeteer @@ -242,7 +242,7 @@ if (root.hasChildNodes()) { disable-speedy.js ```js -import { sheet } from 'emotion' +import { sheet } from '@emotion/css' // Check if the root node has any children to detect if the app has been preprendered // speedy is disabled when the app is being prerendered so that styles render into the DOM diff --git a/docs/styled.mdx b/docs/styled.mdx index 9c9c49ddd..0035bf950 100644 --- a/docs/styled.mdx +++ b/docs/styled.mdx @@ -183,7 +183,7 @@ You can create dynamic styles that are based on props and use them in styles. ```jsx // @live import styled from '@emotion/styled' -import { css } from '@emotion/core' +import { css } from '@emotion/react' const dynamicStyle = props => css` diff --git a/docs/testing.mdx b/docs/testing.mdx index 2e33dc0ac..8842df9c7 100644 --- a/docs/testing.mdx +++ b/docs/testing.mdx @@ -6,46 +6,63 @@ Adding [snapshot tests with Jest](https://facebook.github.io/jest/docs/en/snapsh By diffing the serialized value of your React tree Jest can show you what changed in your app and allow you to fix it or update the snapshot. -By default snapshots with emotion show generated class names. Adding [jest-emotion](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion) allows you to output the actual styles being applied. +By default snapshots with emotion show generated class names. Adding [@emotion/jest](https://github.com/emotion-js/emotion/tree/master/packages/jest) allows you to output the actual styles being applied. ### Installation ```bash -npm install --save-dev jest-emotion +npm install --save-dev @emotion/jest ``` -Add the snapshot serializer in your [`setupTestFrameworkScriptFile`](http://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) _or_ at the top of your test file. +Add the snapshot serializer to the [`snapshotSerializers`](http://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) option + +When using Enzyme, it's recommended to add the combined enzyme and emotion serializer to support shallow rendering to your Jest config + +```json +{ + "snapshotSerializers": ["@emotion/jest"] +} +``` + +Or use `expect.addSnapshotSerializer` to add it. -When using Enzyme, it's recommended to use the combined enzyme and emotion serializer to support shallow rendering: ```javascript -import { createSerializer } from 'jest-emotion/enzyme' // also adds the enzyme-to-json serializer +import serializer from '@emotion/jest/enzyme' // also adds the enzyme-to-json serializer -expect.addSnapshotSerializer(createSerializer()) +expect.addSnapshotSerializer(serializer) ``` -Otherwise, use standard `createSerializer` method. +If you're not using Enzyme, add the snapshot serializer to your Jest config + +```json +{ + "snapshotSerializers": ["@emotion/jest"] +} +``` + +Or use `expect.addSnapshotSerializer` to add it. ```javascript -import { createSerializer } from 'jest-emotion' +import serializer from '@emotion/jest' expect.addSnapshotSerializer(createSerializer()) ``` + + ### Writing a test -Writing a test with `jest-emotion` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON. +Writing a test with `@emotion/jest` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON. ```jsx import React from 'react' -import serializer from 'jest-emotion' /** @jsx jsx */ -import { jsx } from '@emotion/core' +import { jsx } from '@emotion/react' import renderer from 'react-test-renderer' -expect.addSnapshotSerializer(serializer) const Button = props => (