From 83639b7f98bcdc426839fa3294956079b26a1e10 Mon Sep 17 00:00:00 2001 From: mitchellhamilton Date: Wed, 10 Feb 2021 08:30:31 +1000 Subject: [PATCH 1/9] Setup publishing --- .github/workflows/release.yml | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f799df7c9..c7f8946ee 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -3,8 +3,7 @@ name: Release on: push: branches: - - master - - next + - v10 jobs: release: @@ -31,6 +30,7 @@ jobs: uses: changesets/action@master with: publish: yarn release + title: Version v10 Packages (if this PR has major changes, do not merge it) env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/package.json b/package.json index 789f76e93..cf935d3fc 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "postinstall": "opencollective postinstall && preconstruct dev && manypkg check", "changeset": "changeset", "version-packages": "changeset version", - "release": "yarn build && changeset publish" + "release": "yarn build && changeset publish --tag ten" }, "resolutions": { "**/react": "16.14.0", From ed47786b084384ac8fa5f88f0a3b50f4f3026a78 Mon Sep 17 00:00:00 2001 From: Tim Anido Date: Wed, 10 Feb 2021 09:31:02 +1100 Subject: [PATCH 2/9] Import css from core to ensure correct import even when emotion/css@11 is hoisted (#2248) * import css from core to ensure correct import even when emotion/css@11 is hoisted * Update index.js Co-authored-by: Mitchell Hamilton --- .changeset/kind-coats-doubt.md | 5 +++++ .../__tests__/source-maps/__snapshots__/index.js.snap | 2 +- packages/babel-plugin-emotion/src/index.js | 5 +++-- 3 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/kind-coats-doubt.md diff --git a/.changeset/kind-coats-doubt.md b/.changeset/kind-coats-doubt.md new file mode 100644 index 000000000..4a5092de6 --- /dev/null +++ b/.changeset/kind-coats-doubt.md @@ -0,0 +1,5 @@ +--- +'babel-plugin-emotion': patch +--- + +optimiseCssProp results in `css` being imported from @emotion/core rather than @emotion/css 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 950abad45..7f2729c71 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 @@ -66,7 +66,7 @@ const SomeComponent = props => ( ↓ ↓ ↓ ↓ ↓ ↓ -import _css from \\"@emotion/css\\"; +import { css as _css } from \\"@emotion/core\\"; /** @jsx jsx */ import { jsx } from '@emotion/core'; diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index 23e0335ad..0a6faa1eb 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -2,7 +2,7 @@ import { createEmotionMacro } from './emotion-macro' import { createStyledMacro } from './styled-macro' import cssMacro, { transformCssCallExpression } from './css-macro' -import { addDefault } from '@babel/helper-module-imports' +import { addNamed } from '@babel/helper-module-imports' import nodePath from 'path' import { getSourceMap, getStyledOptions } from './utils' @@ -206,10 +206,11 @@ export default function(babel: *) { }) if (t.isCallExpression(expressionPath)) { if (!state.cssIdentifier) { - state.cssIdentifier = addDefault(path, '@emotion/css', { + state.cssIdentifier = addNamed(path, 'css', '@emotion/core', { nameHint: 'css' }) } + expressionPath .get('callee') .replaceWith(t.cloneDeep(state.cssIdentifier)) From 0f9c84c415fece9009a9bcd20b05afda6b5e107c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 10 Feb 2021 08:44:06 +1000 Subject: [PATCH 3/9] Version Packages (#2249) Co-authored-by: github-actions[bot] --- .changeset/kind-coats-doubt.md | 5 ----- packages/babel-plugin-emotion/CHANGELOG.md | 6 ++++++ packages/babel-plugin-emotion/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/kind-coats-doubt.md diff --git a/.changeset/kind-coats-doubt.md b/.changeset/kind-coats-doubt.md deleted file mode 100644 index 4a5092de6..000000000 --- a/.changeset/kind-coats-doubt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'babel-plugin-emotion': patch ---- - -optimiseCssProp results in `css` being imported from @emotion/core rather than @emotion/css diff --git a/packages/babel-plugin-emotion/CHANGELOG.md b/packages/babel-plugin-emotion/CHANGELOG.md index 0c65926c5..bb1b972f8 100644 --- a/packages/babel-plugin-emotion/CHANGELOG.md +++ b/packages/babel-plugin-emotion/CHANGELOG.md @@ -1,5 +1,11 @@ # babel-plugin-emotion +## 10.2.2 + +### Patch Changes + +- [`ed47786b`](https://github.com/emotion-js/emotion/commit/ed47786b084384ac8fa5f88f0a3b50f4f3026a78) [#2248](https://github.com/emotion-js/emotion/pull/2248) Thanks [@xanido](https://github.com/xanido)! - optimiseCssProp results in `css` being imported from @emotion/core rather than @emotion/css + ## 10.0.33 ### Patch Changes diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index 4270f485d..14355e635 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.33", + "version": "10.2.2", "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", From b5a26619b158703e9bc653f6297b33350c9e7b40 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 25 Nov 2021 22:39:05 +0000 Subject: [PATCH 4/9] Drop usage of the deprecated `SFC` type (#2560) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * v10: Drop usage of deprecated React types * Adjust test-only references to "SFC" terminology * Tweak changesets Co-authored-by: Mateusz Burzyński --- .changeset/wicked-ducks-rest.md | 8 ++++++++ docs/typescript.mdx | 8 ++++---- packages/core/types/index.d.ts | 4 ++-- packages/emotion-theming/types/index.d.ts | 4 ++-- packages/emotion-theming/types/tests.tsx | 22 ++++++++++----------- packages/styled-base/types/index.d.ts | 2 +- packages/styled-base/types/tests.tsx | 24 +++++++++++------------ 7 files changed, 40 insertions(+), 32 deletions(-) create mode 100644 .changeset/wicked-ducks-rest.md diff --git a/.changeset/wicked-ducks-rest.md b/.changeset/wicked-ducks-rest.md new file mode 100644 index 000000000..3abc17514 --- /dev/null +++ b/.changeset/wicked-ducks-rest.md @@ -0,0 +1,8 @@ +--- +'@emotion/core': minor +'emotion-theming': minor +'@emotion/styled': minor +'@emotion/styled-base': minor +--- + +Dropped usage of a deprecated `SFC` React type in favor of `FC`. The `FC` type has been introduced in `@types/react@16.7.2` so this version of this package is now a minimum requirement for TypeScript users. diff --git a/docs/typescript.mdx b/docs/typescript.mdx index 91232cd68..aded5786a 100644 --- a/docs/typescript.mdx +++ b/docs/typescript.mdx @@ -148,7 +148,7 @@ const Image3 = styled.div` ### React Components ```tsx -import React, { SFC } from 'react' +import React, { FC } from 'react' import styled from '@emotion/styled' type ComponentProps = { @@ -156,7 +156,7 @@ type ComponentProps = { label: string } -const Component: SFC = ({ +const Component: FC = ({ label, className }) =>
{label}
@@ -180,7 +180,7 @@ 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 = { @@ -188,7 +188,7 @@ type ComponentProps = { label: string } -const Component: SFC = ({ +const Component: FC = ({ label, className }) =>
{label}
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts index 9395e0133..f13c7461c 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 diff --git a/packages/emotion-theming/types/index.d.ts b/packages/emotion-theming/types/index.d.ts index 4080d83c9..340306139 100644 --- a/packages/emotion-theming/types/index.d.ts +++ b/packages/emotion-theming/types/index.d.ts @@ -22,11 +22,11 @@ export function useTheme(): Theme */ export function withTheme>( component: C -): React.SFC, 'theme'>> +): React.FC, 'theme'>> export interface EmotionTheming { ThemeProvider(props: ThemeProviderProps): React.ReactElement withTheme>( component: C - ): React.SFC, 'theme'>> + ): React.FC, 'theme'>> } diff --git a/packages/emotion-theming/types/tests.tsx b/packages/emotion-theming/types/tests.tsx index d62277d72..e215d6644 100644 --- a/packages/emotion-theming/types/tests.tsx +++ b/packages/emotion-theming/types/tests.tsx @@ -13,7 +13,7 @@ interface Props { prop: boolean theme: Theme } -declare const CompSFC: React.SFC +declare const CompFC: React.FC declare class CompC extends React.Component {} const WrappedCompC = withTheme(CompC) @@ -21,16 +21,16 @@ const WrappedCompC = withTheme(CompC) ; 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() { @@ -43,9 +43,9 @@ class CompCWithDefault extends React.Component { const themeFail: Theme = useTheme() // $ExpectError } -const ThemedSFCWithDefault = withTheme(CompSFCWithDefault) -; -; +const ThemedFCWithDefault = withTheme(CompFCWithDefault) +; +; const ThemedCompWithDefault = withTheme(CompCWithDefault) ; @@ -59,7 +59,7 @@ const { // $ExpectError ; -typedWithTheme(CompSFC) +typedWithTheme(CompFC) /** * @todo * Following line should report an error. @@ -79,7 +79,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}
} diff --git a/packages/styled-base/types/index.d.ts b/packages/styled-base/types/index.d.ts index 6d7bd61a8..29c2cbcfc 100644 --- a/packages/styled-base/types/index.d.ts +++ b/packages/styled-base/types/index.d.ts @@ -39,7 +39,7 @@ export interface StyledOptions { } export interface StyledComponent - extends React.SFC & { theme?: Theme }>, + extends React.FC & { theme?: Theme }>, ComponentSelector { /** * @desc this method is type-unsafe diff --git a/packages/styled-base/types/tests.tsx b/packages/styled-base/types/tests.tsx index 864d4050c..ce437e4b0 100644 --- a/packages/styled-base/types/tests.tsx +++ b/packages/styled-base/types/tests.tsx @@ -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; @@ -124,7 +124,7 @@ const Button4 = styled( fontSize: ${5}px; color: ${props => props.primary} ` -const Button5 = styled(ReactSFC0)(props => ({ +const Button5 = styled(ReactFC0)(props => ({ color: props.primary })) ;
@@ -158,7 +158,7 @@ const Container1 = Container0.withComponent('span') // $ExpectError ; -const Container2 = Container0.withComponent(ReactSFC0) +const Container2 = Container0.withComponent(ReactFC0) ; // $ExpectError ; @@ -173,7 +173,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 +184,7 @@ const Container4 = styled(ReactSFC2)(props => ({ // $ExpectError ; -const Container5 = Container3.withComponent(ReactSFC2) +const Container5 = Container3.withComponent(ReactFC2) ; // $ExpectError ; @@ -194,7 +194,7 @@ const Container5 = Container3.withComponent(ReactSFC2) ; // $ExpectError -styled(ReactSFC2)() +styled(ReactFC2)() /** * @todo @@ -256,7 +256,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}
} From 960de78337d7c4378556c83dbd75a370ae6dac7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 25 Nov 2021 23:53:57 +0100 Subject: [PATCH 5/9] Upgrade Changesets --- package.json | 4 +- yarn.lock | 196 +++++++++++++++++++++++++-------------------------- 2 files changed, 98 insertions(+), 102 deletions(-) diff --git a/package.json b/package.json index cf935d3fc..d592906f5 100644 --- a/package.json +++ b/package.json @@ -172,8 +172,8 @@ "@babel/preset-react": "^7.12.1", "@babel/register": "^7.5.5", "@babel/runtime": "^7.5.5", - "@changesets/changelog-github": "^0.1.0", - "@changesets/cli": "2.11.2", + "@changesets/changelog-github": "^0.4.1", + "@changesets/cli": "^2.18.0", "@manypkg/cli": "^0.5.2", "@mdx-js/mdx": "^1.1.0", "@mdx-js/react": "^1.0.27", diff --git a/yarn.lock b/yarn.lock index cbd4390df..da8d4466b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1397,63 +1397,64 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@changesets/apply-release-plan@^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-4.0.0.tgz#e78efb56a4e459a8dab814ba43045f2ace0f27c9" - integrity sha512-MrcUd8wIlQ4S/PznzqJVsmnEpUGfPEkCGF54iqt8G05GEqi/zuxpoTfebcScpj5zeiDyxFIcA9RbeZ3pvJJxoA== +"@changesets/apply-release-plan@^5.0.2": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-5.0.2.tgz#8abcbbce338a0ac10d67b1cc777b0b893b452198" + integrity sha512-grNaIzOjAd34VV5493hyL7a9Y5P2v0dLXWaSfcUUIREemzkkpuVtsqAQRtot2JIjOcpGMyTn3tnaMpErJ1ZByw== dependencies: - "@babel/runtime" "^7.4.4" - "@changesets/config" "^1.2.0" + "@babel/runtime" "^7.10.4" + "@changesets/config" "^1.6.2" "@changesets/get-version-range-type" "^0.3.2" - "@changesets/git" "^1.0.5" - "@changesets/types" "^3.1.0" + "@changesets/git" "^1.2.0" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" + detect-indent "^6.0.0" fs-extra "^7.0.1" lodash.startcase "^4.4.0" outdent "^0.5.0" - prettier "^1.18.2" + prettier "^1.19.1" resolve-from "^5.0.0" semver "^5.4.1" -"@changesets/assemble-release-plan@^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-4.0.0.tgz#60c2392c0e2c99f24778ab3a5c8e8c80ddaaaa59" - integrity sha512-3Kv21FNvysTQvZs3fHr6aZeDibhZHtgI1++fMZplzVtwNVmpjow3zv9lcZmJP26LthbpVH3I8+nqlU7M43lfWA== +"@changesets/assemble-release-plan@^5.0.2": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-5.0.2.tgz#81063d2e01f967851063f5689f80374aa35175e9" + integrity sha512-4Q7w0ZeeNCv6sxUywL2bc8D2id9nyq2SB0LK+WY6ocg9/m4b3giKcbcGYxczgFbJvdcgxowqXPPAyETI9RpqBg== dependencies: "@babel/runtime" "^7.10.4" "@changesets/errors" "^0.1.4" - "@changesets/get-dependents-graph" "^1.1.3" - "@changesets/types" "^3.1.0" + "@changesets/get-dependents-graph" "^1.2.3" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" semver "^5.4.1" -"@changesets/changelog-github@^0.1.0": - version "0.1.0" - resolved "https://registry.yarnpkg.com/@changesets/changelog-github/-/changelog-github-0.1.0.tgz#32b9b025e3686c3c0563763540e97af4a88cc794" - integrity sha512-0s9vT743lkJwkuCrOIl7V7uEJq2vSY3GQ7u2haALHEAJSDkh7B/IoiL774cj9nzLbuVJE+B1pALJC/5TNtr/0w== +"@changesets/changelog-github@^0.4.1": + version "0.4.1" + resolved "https://registry.yarnpkg.com/@changesets/changelog-github/-/changelog-github-0.4.1.tgz#880cb624477972ea103abf6942cf4ee3106f682b" + integrity sha512-WK9DzS3i0wa2doEnOr4sm/FMnNtxzCCAKP7dEcWvhYkgXYX5R6jmfHAcDstmjAhiuvbhoHYom4MOC1tIzgwnfA== dependencies: - "@changesets/get-github-info" "^0.3.0" - "@changesets/types" "^0.3.0" + "@changesets/get-github-info" "^0.5.0" + "@changesets/types" "^4.0.1" dotenv "^8.1.0" -"@changesets/cli@2.11.2": - version "2.11.2" - resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.11.2.tgz#6c2d9470a9c89e7389db5ac80069a77072079413" - integrity sha512-Lfw4MWj46H7dgPzgYmRJ8QbpDxi02dK+21zuWzBjVtsf3AqJgy7oVdXl4Yga/JhBq8eeoxBS9NoCVw8/JOZBcg== +"@changesets/cli@^2.18.0": + version "2.18.0" + resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.18.0.tgz#662e27c78897cf948ca61177df9c915d750b8221" + integrity sha512-WJj0g0BvTxsVfAnHJrOTORRTTP6CG5yT4gxVGW3og8B1SquEwL3KhIXIbpA+o3BnkBlm/hRoIrkRivrgX7GOJA== dependencies: "@babel/runtime" "^7.10.4" - "@changesets/apply-release-plan" "^4.0.0" - "@changesets/assemble-release-plan" "^4.0.0" - "@changesets/config" "^1.4.0" + "@changesets/apply-release-plan" "^5.0.2" + "@changesets/assemble-release-plan" "^5.0.2" + "@changesets/config" "^1.6.2" "@changesets/errors" "^0.1.4" - "@changesets/get-dependents-graph" "^1.1.3" - "@changesets/get-release-plan" "^2.0.1" - "@changesets/git" "^1.0.6" + "@changesets/get-dependents-graph" "^1.2.3" + "@changesets/get-release-plan" "^3.0.2" + "@changesets/git" "^1.2.0" "@changesets/logger" "^0.0.5" - "@changesets/pre" "^1.0.4" - "@changesets/read" "^0.4.6" - "@changesets/types" "^3.2.0" - "@changesets/write" "^0.1.3" + "@changesets/pre" "^1.0.7" + "@changesets/read" "^0.5.1" + "@changesets/types" "^4.0.1" + "@changesets/write" "^0.1.5" "@manypkg/get-packages" "^1.0.1" "@types/semver" "^6.0.0" boxen "^1.3.0" @@ -1472,15 +1473,15 @@ term-size "^2.1.0" tty-table "^2.8.10" -"@changesets/config@^1.2.0", "@changesets/config@^1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@changesets/config/-/config-1.4.0.tgz#c157a4121f198b749f2bbc2e9015b6e976ece7d6" - integrity sha512-eoTOcJ6py7jBDY8rUXwEGxR5UtvUX+p//0NhkVpPGcnvIeITHq+DOIsuWyGzWcb+1FaYkof3CCr32/komZTu4Q== +"@changesets/config@^1.6.2": + version "1.6.2" + resolved "https://registry.yarnpkg.com/@changesets/config/-/config-1.6.2.tgz#42ade5ec516560e33698f207804b3560223ea334" + integrity sha512-CJV71tDz/A4TmpyYRIdT4pwGg0GWuem7ahNR01VnOHhmXoXFbXrISX1TYGYo611N7vO9RQHmV8cnhmlHU0LlNA== dependencies: "@changesets/errors" "^0.1.4" - "@changesets/get-dependents-graph" "^1.1.3" + "@changesets/get-dependents-graph" "^1.2.3" "@changesets/logger" "^0.0.5" - "@changesets/types" "^3.2.0" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" fs-extra "^7.0.1" micromatch "^4.0.2" @@ -1492,36 +1493,36 @@ dependencies: extendable-error "^0.1.5" -"@changesets/get-dependents-graph@^1.1.3": - version "1.1.3" - resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-1.1.3.tgz#da959c43ce98f3a990a6b8d9c1f894bcc1b629c7" - integrity sha512-cTbySXwSv9yWp4Pp5R/b5Qv23wJgFaFCqUbsI3IJ2pyPl0vMaODAZS8NI1nNK2XSxGIg1tw+dWNSR4PlrKBSVQ== +"@changesets/get-dependents-graph@^1.2.3": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-1.2.3.tgz#593c292cd4a1543606817d818f0d8c753ac26411" + integrity sha512-+Fyf+L+4rck9au5zIZcIJX+8zBMGRdgZwD5DGGt37hP011R/46fahnpJ6imNB9cV+HTMNX/QMAFrkWqt1hy73A== dependencies: - "@changesets/types" "^3.0.0" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" chalk "^2.1.0" fs-extra "^7.0.1" semver "^5.4.1" -"@changesets/get-github-info@^0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@changesets/get-github-info/-/get-github-info-0.3.0.tgz#1776a6b5ed2f9f1d16d076ef19acbc29003ef81c" - integrity sha512-PTFJk1hiMUZ1YGzULmRNo6a6w6LTV6iCY1muCBTby+k4WWGbGgAaqKfUVhpZBosd1fvFIlXl3wqxdA93PLkRaQ== +"@changesets/get-github-info@^0.5.0": + version "0.5.0" + resolved "https://registry.yarnpkg.com/@changesets/get-github-info/-/get-github-info-0.5.0.tgz#b91ceb2d82edef78ae1598ea9fc335a012250295" + integrity sha512-vm5VgHwrxkMkUjFyn3UVNKLbDp9YMHd3vMf1IyJoa/7B+6VpqmtAaXyDS0zBLfN5bhzVCHrRnj4GcZXXcqrFTw== dependencies: dataloader "^1.4.0" node-fetch "^2.5.0" -"@changesets/get-release-plan@^2.0.1": - version "2.0.1" - resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-2.0.1.tgz#b95d8f1a3cc719ff4b42b9b9aae72458d8787c13" - integrity sha512-+x5N9/Iaka+c0Kq7+3JsboMNyffKYlWPmdm+VeafDcMwJFhBDkxm84qaCJ93ydmnzQOTig6gYVqw0k8BbHExyQ== +"@changesets/get-release-plan@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-3.0.2.tgz#7e5b264838032b226263f8bfeff4706c255f6d4f" + integrity sha512-jAWHQfaDOUKEcrnx6GZyYM7oKmbI+vQ+wbYowIeYpiojprQC0P7I6asbzk4fpGM2xyzP4EjRMErRGH91VVzBSg== dependencies: "@babel/runtime" "^7.10.4" - "@changesets/assemble-release-plan" "^4.0.0" - "@changesets/config" "^1.2.0" - "@changesets/pre" "^1.0.4" - "@changesets/read" "^0.4.6" - "@changesets/types" "^3.1.0" + "@changesets/assemble-release-plan" "^5.0.2" + "@changesets/config" "^1.6.2" + "@changesets/pre" "^1.0.7" + "@changesets/read" "^0.5.1" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" "@changesets/get-version-range-type@^0.3.2": @@ -1529,14 +1530,14 @@ resolved "https://registry.yarnpkg.com/@changesets/get-version-range-type/-/get-version-range-type-0.3.2.tgz#8131a99035edd11aa7a44c341cbb05e668618c67" integrity sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg== -"@changesets/git@^1.0.5", "@changesets/git@^1.0.6": - version "1.0.6" - resolved "https://registry.yarnpkg.com/@changesets/git/-/git-1.0.6.tgz#057e627e5d3fcb74bf6c18d7284e130ba5a7632e" - integrity sha512-e0M06XuME3W5lGhz+CO0vLc60u+hLk/pYjOx/6GXEWuQrwtGgeycFIfRgRt8qTs664o1oKtVHBbd7ItpoWgFfA== +"@changesets/git@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@changesets/git/-/git-1.2.0.tgz#9b6c4bcf101ecf2f870df6771bb1ca12d863984e" + integrity sha512-9EM+04/6TIImnNTgagxrwtimITtHEDaBYKubPPA6WDzd+KiTOf9g7i/6aUhhdwbwqQQfPAn5gzgfFB0KvwEHeA== dependencies: "@babel/runtime" "^7.10.4" "@changesets/errors" "^0.1.4" - "@changesets/types" "^3.1.1" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" is-subdir "^1.1.1" spawndamnit "^2.0.0" @@ -1548,59 +1549,54 @@ dependencies: chalk "^2.1.0" -"@changesets/parse@^0.3.6": - version "0.3.7" - resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.3.7.tgz#1368136e2b83d5cff11b4d383a3032723530db99" - integrity sha512-8yqKulslq/7V2VRBsJqPgjnZMoehYqhJm5lEOXJPZ2rcuSdyj8+p/2vq2vRDBJT2m0rP+C9G8DujsGYQIFZezw== +"@changesets/parse@^0.3.9": + version "0.3.9" + resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.3.9.tgz#c518792b05f15ab418d58dc1cea81601556e845e" + integrity sha512-XoTEkMpvRRVxSlhvOaK4YSFM+RZhYFTksxRh7ieNkb6pMxkpq8MOYSi/07BuqkODn4dJEMOoSy3RzL99P6FyqA== dependencies: - "@changesets/types" "^3.0.0" + "@changesets/types" "^4.0.1" js-yaml "^3.13.1" -"@changesets/pre@^1.0.4": - version "1.0.5" - resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-1.0.5.tgz#91e5e3b31b4a85ce37de72f6511a786f62f29b51" - integrity sha512-p43aAQY3aijhDnBLCriPao5YArlRjD4mSHRJq9PsBhljVLWqQQXcn6seSd77d+bD1tATLhB8tQ2eYoxMtMydXQ== +"@changesets/pre@^1.0.7": + version "1.0.7" + resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-1.0.7.tgz#caf6430c90b8ac6d58c9cd90a19558ab06b19b88" + integrity sha512-oUU6EL4z0AIyCv/EscQFxxJsQfc9/AcSpqAGbdZrLXwshUWTXsJHMWlE3/+iSIyQ+I+/xtxbBxnqDUpUU3TOOg== dependencies: - "@babel/runtime" "^7.4.4" + "@babel/runtime" "^7.10.4" "@changesets/errors" "^0.1.4" - "@changesets/types" "^3.0.0" + "@changesets/types" "^4.0.1" "@manypkg/get-packages" "^1.0.1" fs-extra "^7.0.1" -"@changesets/read@^0.4.6": - version "0.4.6" - resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.4.6.tgz#1c03e709a870a070fc95490ffa696297d23458f7" - integrity sha512-rOd8dsF/Lgyy2SYlDalb3Ts/meDI2AcKPXYhSXIW3k6+ZLlj6Pt+nmgV5Ut8euyH7loibklNTDemfvMffF4xig== +"@changesets/read@^0.5.1": + version "0.5.1" + resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.5.1.tgz#89635bf2b84e5fd5d49e1d685adb9c47b5e679a1" + integrity sha512-QJ3rVS+L0Y3yLk3cAOglNh4tuMUfQl8cJjyAnNnJHS9nCXZUiZjYiJc+34XpZT5vUb+4+0FY1wWtzlkAKuLR2g== dependencies: - "@babel/runtime" "^7.4.4" - "@changesets/git" "^1.0.5" + "@babel/runtime" "^7.10.4" + "@changesets/git" "^1.2.0" "@changesets/logger" "^0.0.5" - "@changesets/parse" "^0.3.6" - "@changesets/types" "^3.0.0" + "@changesets/parse" "^0.3.9" + "@changesets/types" "^4.0.1" chalk "^2.1.0" fs-extra "^7.0.1" p-filter "^2.1.0" -"@changesets/types@^0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@changesets/types/-/types-0.3.0.tgz#ca7b609c1e778448c8763ca8cdb0bbd776c39c9b" - integrity sha512-9fwlRVzvfzF6vf7178vu1HDg4N80Z4Y/B0pS9zUWmmEruLzmzN94OoDk3obQ3P8M0EUH+oHnq8QVuKPLAR9VAw== - -"@changesets/types@^3.0.0", "@changesets/types@^3.1.0", "@changesets/types@^3.1.1", "@changesets/types@^3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@changesets/types/-/types-3.2.0.tgz#d8306d7219c3b19b6d860ddeb9d7374e2dd6b035" - integrity sha512-rAmPtOyXpisEEE25CchKNUAf2ApyAeuZ/h78YDoqKZaCk5tUD0lgYZGPIRV9WTPoqNjJULIym37ogc6pkax5jg== +"@changesets/types@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@changesets/types/-/types-4.0.1.tgz#85cf3cc32baff0691112d9d15fc21fbe022c9f0a" + integrity sha512-zVfv752D8K2tjyFmxU/vnntQ+dPu+9NupOSguA/2Zuym4tVxRh0ylArgKZ1bOAi2eXfGlZMxJU/kj7uCSI15RQ== -"@changesets/write@^0.1.3": - version "0.1.3" - resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.1.3.tgz#00ae575af50274773d7493e77fb96838a08ad8ad" - integrity sha512-q79rbwlVmTNKP9O6XxcMDj81CEOn/kQHbTFdRleW0tFUv98S1EyEAE9vLPPzO6WnQipHnaozxB1zMhHy0aQn8Q== +"@changesets/write@^0.1.5": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.1.5.tgz#97574d95c8e48c3bbb1173802672f9a64d1b7fef" + integrity sha512-AYVSCH7on/Cyzo/8lVfqlsXmyKl3JhbNu9yHApdLPhHAzv5wqoHiZlMDkmd+AA67SRqzK2lDs4BcIojK+uWeIA== dependencies: - "@babel/runtime" "^7.4.4" - "@changesets/types" "^3.0.0" + "@babel/runtime" "^7.10.4" + "@changesets/types" "^4.0.1" fs-extra "^7.0.1" human-id "^1.0.2" - prettier "^1.18.2" + prettier "^1.19.1" "@cnakazawa/watch@^1.0.3": version "1.0.3" @@ -19441,7 +19437,7 @@ prettier@1.14.3: resolved "https://registry.npmjs.org/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895" integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg== -prettier@^1.18.2: +prettier@^1.19.1: version "1.19.1" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== From 122e9f11bf3aec2100dd55cee00b74170abe1ec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 26 Nov 2021 11:25:30 +0100 Subject: [PATCH 6/9] Fix hydration mismatches with `React.useId` (#2566) * Fix hydration mismatches with `React.useId` * Update .changeset/strange-kids-change.md Co-authored-by: Mitchell Hamilton --- .changeset/strange-kids-change.md | 10 ++++++ packages/core/src/class-names.js | 32 +++++++++++-------- packages/core/src/emotion-element.js | 30 ++++++++++------- .../__snapshots__/react-enzyme.test.js.snap | 15 ++++++--- packages/styled-base/src/index.js | 29 ++++++++++------- 5 files changed, 73 insertions(+), 43 deletions(-) create mode 100644 .changeset/strange-kids-change.md diff --git a/.changeset/strange-kids-change.md b/.changeset/strange-kids-change.md new file mode 100644 index 000000000..e8b3af3e8 --- /dev/null +++ b/.changeset/strange-kids-change.md @@ -0,0 +1,10 @@ +--- +'@emotion/core': minor +'@emotion/styled': minor +'@emotion/styled-base': minor +--- + +author: @eps1lon +author: @Andarist + +Fixed hydration mismatches if `React.useId` (an upcoming API in React 18) is used within a tree below our components. diff --git a/packages/core/src/class-names.js b/packages/core/src/class-names.js index e99313b4d..2179d30c5 100644 --- a/packages/core/src/class-names.js +++ b/packages/core/src/class-names.js @@ -77,6 +77,8 @@ type Props = { }) => React.Node } +const Noop = () => null + export const ClassNames = withEmotionCache((props, context) => { return ( @@ -112,23 +114,25 @@ export const ClassNames = withEmotionCache((props, context) => { let content = { css, cx, theme } let ele = props.children(content) hasRendered = true + let possiblyStyleElement = if (!isBrowser && rules.length !== 0) { - return ( - -