React 18 support for Global Styles :)

.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 }}

docs/typescript.mdx

@@ -148,15 +148,15 @@ const Image3 = styled.div<ImageProps>`
 ### React Components
 
 ```tsx
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 import styled from '@emotion/styled'
 
 type ComponentProps = {
   className?: string
   label: string
 }
 
-const Component: SFC<ComponentProps> = ({
+const Component: FC<ComponentProps> = ({
   label,
   className
 }) => <div className={className}>{label}</div>
@@ -180,15 +180,15 @@ 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 = {
   className?: string
   label: string
 }
 
-const Component: SFC<ComponentProps> = ({
+const Component: FC<ComponentProps> = ({
   label,
   className
 }) => <div className={className}>{label}</div>

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",
@@ -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",

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

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';

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",

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))

packages/core/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @emotion/core
 
+## 10.3.1
+
+### Patch Changes
+
+- [#2576](https://github.com/emotion-js/emotion/pull/2576) [`33c01578`](https://github.com/emotion-js/emotion/commit/33c015780edc4f812d36ac7f0d228cd339873736) Thanks [@Methuselah96](https://github.com/Methuselah96)! - Export `Keyframes` type to avoid TypeScript inserting `import("@emotion/serialize").Keyframes` references into declaration files emitted based on a source files exporting `keyframes` result. This avoids issues with strict package managers that don't allow accessing undeclared dependencies.
+
+## 10.3.0
+
+### Minor Changes
+
+- [#2566](https://github.com/emotion-js/emotion/pull/2566) [`122e9f11`](https://github.com/emotion-js/emotion/commit/122e9f11bf3aec2100dd55cee00b74170abe1ec9) Thanks [@eps1lon](https://github.com/eps1lon), [@Andarist](https://github.com/Andarist)! - Fixed hydration mismatches if `React.useId` (an upcoming API in React 18) is used within a tree below our components.
+
+* [#2560](https://github.com/emotion-js/emotion/pull/2560) [`b5a26619`](https://github.com/emotion-js/emotion/commit/b5a26619b158703e9bc653f6297b33350c9e7b40) Thanks [@eps1lon](https://github.com/eps1lon)! - 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.
+
 ## 10.1.1
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emotion/core",
-  "version": "10.1.1",
+  "version": "10.3.1",
   "main": "dist/core.cjs.js",
   "module": "dist/core.esm.js",
   "browser": {
@@ -32,12 +32,12 @@
     "react": ">=16.3.0"
   },
   "devDependencies": {
-    "@emotion/styled": "^10.0.27",
+    "@emotion/styled": "^10.3.0",
     "@types/react": "^16.8.20",
     "dtslint": "^0.3.0",
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
-    "emotion-theming": "^10.0.27",
+    "emotion-theming": "^10.3.0",
     "html-tag-names": "^1.1.2",
     "react": "16.14.0",
     "svg-tag-names": "^1.1.1"

packages/core/src/class-names.js

@@ -77,6 +77,8 @@ type Props = {
   }) => React.Node
 }
 
+const Noop = () => null
+
 export const ClassNames = withEmotionCache<Props>((props, context) => {
   return (
     <ThemeContext.Consumer>
@@ -112,23 +114,25 @@ export const ClassNames = withEmotionCache<Props>((props, context) => {
         let content = { css, cx, theme }
         let ele = props.children(content)
         hasRendered = true
+        let possiblyStyleElement = <Noop />
         if (!isBrowser && rules.length !== 0) {
-          return (
-            <React.Fragment>
-              <style
-                {...{
-                  [`data-emotion-${context.key}`]: serializedHashes.substring(
-                    1
-                  ),
-                  dangerouslySetInnerHTML: { __html: rules },
-                  nonce: context.sheet.nonce
-                }}
-              />
-              {ele}
-            </React.Fragment>
+          possiblyStyleElement = (
+            <style
+              {...{
+                [`data-emotion-${context.key}`]: serializedHashes.substring(1),
+                dangerouslySetInnerHTML: { __html: rules },
+                nonce: context.sheet.nonce
+              }}
+            />
           )
         }
-        return ele
+        // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+        return (
+          <React.Fragment>
+            {possiblyStyleElement}
+            {ele}
+          </React.Fragment>
+        )
       }}
     </ThemeContext.Consumer>
   )

packages/core/src/emotion-element.js

@@ -56,6 +56,8 @@ export const createEmotionProps = (type: React.ElementType, props: Object) => {
   return newProps
 }
 
+const Noop = () => null
+
 let render = (cache, props, theme: null | Object, ref) => {
   let cssProp = theme === null ? props.css : props.css(theme)
 
@@ -112,27 +114,31 @@ let render = (cache, props, theme: null | Object, ref) => {
   newProps.className = className
 
   const ele = React.createElement(type, newProps)
+  let possiblyStyleElement = <Noop />
   if (!isBrowser && rules !== undefined) {
     let serializedNames = serialized.name
     let next = serialized.next
     while (next !== undefined) {
       serializedNames += ' ' + next.name
       next = next.next
     }
-    return (
-      <>
-        <style
-          {...{
-            [`data-emotion-${cache.key}`]: serializedNames,
-            dangerouslySetInnerHTML: { __html: rules },
-            nonce: cache.sheet.nonce
-          }}
-        />
-        {ele}
-      </>
+    possiblyStyleElement = (
+      <style
+        {...{
+          [`data-emotion-${cache.key}`]: serializedNames,
+          dangerouslySetInnerHTML: { __html: rules },
+          nonce: cache.sheet.nonce
+        }}
+      />
     )
   }
-  return ele
+  // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
+  return (
+    <>
+      {possiblyStyleElement}
+      {ele}
+    </>
+  )
 }
 
 // eslint-disable-next-line no-undef

packages/core/types/index.d.ts

@@ -9,7 +9,7 @@ import {
   ComponentClass,
   Context,
   Provider,
-  SFC,
+  FC,
   ReactElement,
   ReactNode,
   Ref,
@@ -24,13 +24,13 @@ export {
   ObjectInterpolation
 } from '@emotion/css'
 
-export { EmotionCache, Interpolation, SerializedStyles, css }
+export { EmotionCache, Interpolation, Keyframes, SerializedStyles, css }
 
 export const ThemeContext: Context<object>
 export const CacheProvider: Provider<EmotionCache>
 export function withEmotionCache<Props, RefType = any>(
   func: (props: Props, context: EmotionCache, ref: Ref<RefType>) => ReactNode
-): SFC<Props & ClassAttributes<RefType>>
+): FC<Props & ClassAttributes<RefType>>
 
 export const jsx: typeof createElement
 

packages/emotion-theming/CHANGELOG.md

@@ -1,5 +1,11 @@
 # emotion-theming
 
+## 10.3.0
+
+### Minor Changes
+
+- [#2560](https://github.com/emotion-js/emotion/pull/2560) [`b5a26619`](https://github.com/emotion-js/emotion/commit/b5a26619b158703e9bc653f6297b33350c9e7b40) Thanks [@eps1lon](https://github.com/eps1lon)! - 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.
+
 ## 10.0.27
 
 ### Patch Changes

packages/emotion-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emotion-theming",
-  "version": "10.0.27",
+  "version": "10.3.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.27",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/core": "^10.3.0",
+    "@emotion/styled": "^10.3.0",
     "@types/react": "^16.8.20",
     "dtslint": "^0.3.0",
     "react": "16.14.0"

packages/emotion-theming/types/index.d.ts

@@ -22,11 +22,11 @@ export function useTheme<Theme>(): Theme
  */
 export function withTheme<C extends React.ComponentType<any>>(
   component: C
-): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
+): React.FC<AddOptionalTo<PropsOf<C>, 'theme'>>
 
 export interface EmotionTheming<Theme> {
   ThemeProvider(props: ThemeProviderProps<Theme>): React.ReactElement
   withTheme<C extends React.ComponentType<any>>(
     component: C
-  ): React.SFC<AddOptionalTo<PropsOf<C>, 'theme'>>
+  ): React.FC<AddOptionalTo<PropsOf<C>, 'theme'>>
 }