Migrate styleguide from emotion v10 to @emotion/css v11

LaurentClaes · claude · LaurentClaes · commit f6f9c74fe099 · 2026-03-13T10:42:00.000+02:00
- Replace all `import { css } from 'emotion'` with `from '@emotion/css'`
  across 23 files (jsx, tsx, mdx)
- Add @emotion/css as styleguide dependency
- Remove emotion v10 from root devDependencies
- Remove core-js from styleguide dependencies (no longer needed)
- Keep emotion/create-emotion overrides for vanilla-drylus/extract-emotion

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/package.json b/package.json
@@ -81,7 +81,6 @@
     "concurrently": "^9.0.0",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.0.0",
-    "emotion": "10.0.27",
     "eslint": "^9.0.0",
     "eslint-formatter-pretty": "^5.0.0",
     "eslint-plugin-jest": "^29.0.0",
diff --git a/packages/styleguide/app/app.tsx b/packages/styleguide/app/app.tsx
@@ -4,7 +4,7 @@ import { Color, DrylusProvider, Layout, Page, Position } from '@drawbotics/react
 import { useScreenSize } from '@drawbotics/use-screen-size';
 // @ts-ignore
 import drylus from '@drawbotics/vanilla-drylus/dist/drylus.js';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
diff --git a/packages/styleguide/app/components/Code.jsx b/packages/styleguide/app/components/Code.jsx
@@ -1,5 +1,5 @@
 import sv from '@drawbotics/drylus-style-vars';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import React from 'react';
 
diff --git a/packages/styleguide/app/components/InlineCode.jsx b/packages/styleguide/app/components/InlineCode.jsx
@@ -1,5 +1,5 @@
 import sv from '@drawbotics/drylus-style-vars';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 const styles = {
diff --git a/packages/styleguide/app/components/LinksNavigation.jsx b/packages/styleguide/app/components/LinksNavigation.jsx
@@ -1,6 +1,6 @@
 import sv, { fade } from '@drawbotics/drylus-style-vars';
 import { Title } from '@drawbotics/react-drylus';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import kebabCase from 'lodash/kebabCase';
 import last from 'lodash/last';
 import omit from 'lodash/omit';
diff --git a/packages/styleguide/app/components/MobileSidebar.jsx b/packages/styleguide/app/components/MobileSidebar.jsx
@@ -13,7 +13,7 @@ import {
   Text,
   Title,
 } from '@drawbotics/react-drylus';
-import { css, keyframes } from 'emotion';
+import { css, keyframes } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
diff --git a/packages/styleguide/app/components/Playground/Playground.jsx b/packages/styleguide/app/components/Playground/Playground.jsx
@@ -1,5 +1,5 @@
 import sv from '@drawbotics/drylus-style-vars';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import flow from 'lodash/flow';
 import omit from 'lodash/omit';
 import React, { useRef, useState } from 'react';
diff --git a/packages/styleguide/app/components/Playground/Preview.jsx b/packages/styleguide/app/components/Playground/Preview.jsx
@@ -1,6 +1,6 @@
 import sv from '@drawbotics/drylus-style-vars';
 import { Button, Icon, Size, Tier } from '@drawbotics/react-drylus';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import React, { Fragment, useState } from 'react';
 import ReactDOM from 'react-dom';
 
diff --git a/packages/styleguide/app/components/Playground/Prop/Prop.jsx b/packages/styleguide/app/components/Playground/Prop/Prop.jsx
@@ -1,5 +1,5 @@
 import sv from '@drawbotics/drylus-style-vars';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 import { extractIntrinsics } from '../utils';
diff --git a/packages/styleguide/app/components/Playground/Prop/props/ToggleProp.jsx b/packages/styleguide/app/components/Playground/Prop/props/ToggleProp.jsx
@@ -1,5 +1,5 @@
 import { Toggle } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 const styles = {
diff --git a/packages/styleguide/app/components/Playground/PropsTable.jsx b/packages/styleguide/app/components/Playground/PropsTable.jsx
@@ -27,7 +27,7 @@ import {
   ExtendedColor,
 } from '@drawbotics/react-drylus';
 import docs from '@drawbotics/react-drylus/docs.json';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import upperFirst from 'lodash/upperFirst';
 import React, { Fragment } from 'react';
 
diff --git a/packages/styleguide/app/components/Renderer.jsx b/packages/styleguide/app/components/Renderer.jsx
@@ -20,7 +20,7 @@ import {
   Title,
 } from '@drawbotics/react-drylus';
 import { MDXProvider } from '@mdx-js/react';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/styleguide/app/components/Search.jsx b/packages/styleguide/app/components/Search.jsx
@@ -12,7 +12,7 @@ import {
   Size,
   Spinner,
 } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { Fragment, useState } from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/styleguide/app/components/Sidebar.tsx b/packages/styleguide/app/components/Sidebar.tsx
@@ -14,7 +14,7 @@ import {
   Size,
   Tooltip,
 } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/styleguide/app/pages/component-kit/animation/components/Navbar.jsx b/packages/styleguide/app/pages/component-kit/animation/components/Navbar.jsx
@@ -13,7 +13,7 @@ import {
   Text,
 } from '@drawbotics/react-drylus';
 import Logo from '~/components/Logo';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React from 'react';
 
 const styles = {
diff --git a/packages/styleguide/app/pages/component-kit/animation/dashboard-grid.mdx b/packages/styleguide/app/pages/component-kit/animation/dashboard-grid.mdx
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import {
   Content,
   Margin,
diff --git a/packages/styleguide/app/pages/component-kit/animation/route-changes.mdx b/packages/styleguide/app/pages/component-kit/animation/route-changes.mdx
@@ -20,7 +20,7 @@ import {
   Direction,
   Speed,
 } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import { Redirect, Route, Link, HashRouter, Switch } from 'react-router-dom';
 
 import Playground from '~/components/Playground';
diff --git a/packages/styleguide/app/pages/component-kit/animation/toolbar.mdx b/packages/styleguide/app/pages/component-kit/animation/toolbar.mdx
@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import {
   Color,
   Content,
diff --git a/packages/styleguide/app/pages/component-kit/brand/colors.mdx b/packages/styleguide/app/pages/component-kit/brand/colors.mdx
@@ -1,5 +1,5 @@
 import sv from '@drawbotics/drylus-style-vars';
-import { css, cx } from 'emotion';
+import { css, cx } from '@emotion/css';
 import {
   Grid,
   GridItem,
diff --git a/packages/styleguide/app/pages/component-kit/components/icon.mdx b/packages/styleguide/app/pages/component-kit/components/icon.mdx
@@ -1,5 +1,5 @@
 import { Icon, Flex, FlexItem, FlexJustify, Size } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import sv from '@drawbotics/drylus-style-vars';
 
 import Playground from '~/components/Playground';
diff --git a/packages/styleguide/app/pages/component-kit/forms/input.mdx b/packages/styleguide/app/pages/component-kit/forms/input.mdx
@@ -10,7 +10,7 @@ import {
   FlexJustify,
   Category,
 } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import Playground from '~/components/Playground';
 import { ControlledField } from '../utils';
diff --git a/packages/styleguide/app/pages/component-kit/forms/text-area.mdx b/packages/styleguide/app/pages/component-kit/forms/text-area.mdx
@@ -1,5 +1,5 @@
 import { TextArea } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 
 import Playground from '~/components/Playground';
 import { ControlledField } from '../utils';
diff --git a/packages/styleguide/app/pages/component-kit/packages.mdx b/packages/styleguide/app/pages/component-kit/packages.mdx
@@ -8,7 +8,7 @@ import {
   TextLink,
   Category,
 } from '@drawbotics/react-drylus';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import sv from '@drawbotics/drylus-style-vars';
 
 
diff --git a/packages/styleguide/app/routes/Intro.jsx b/packages/styleguide/app/routes/Intro.jsx
@@ -13,7 +13,7 @@ import background3 from '~/assets/background-3.svg';
 import codingGuidelines from '~/assets/coding-guidelines.svg';
 import componentKit from '~/assets/component-kit.svg';
 import designGuidelines from '~/assets/design-guidelines.svg';
-import { css } from 'emotion';
+import { css } from '@emotion/css';
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
@@ -18,7 +18,7 @@
     "@drawbotics/react-drylus": "file:../react-drylus",
     "@drawbotics/use-screen-size": "^3.0.1",
     "@drawbotics/vanilla-drylus": "file:../vanilla-drylus",
-    "core-js": "^3.0.0",
+    "@emotion/css": "^11.13.5",
     "hast-util-to-string": "^1.0.1",
     "lodash.upperfirst": "^4.3.1",
     "react-json-pretty": "^2.1.0",
