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 => (