70: Migrate from styled-components to emotion

Author: steffenkleinle

README.md

@@ -10,9 +10,8 @@ This helps us avoid calculating the height ourselves and therefore browsers don'
 heavy Recalculate-Style-Phases.
 For more information read [here](https://developers.google.com/web/fundamentals/performance/rendering/).
 
-Since it's using [styled-components](https://www.styled-components.com/) internally, it's best to
-use it in apps where you already have styled-components in place.
-The component is only compatible with styled-components v4 and higher.
+Since it's using [emotion](https://emotion.sh) internally, it's best to
+use it in apps where you already have emotion in place.
 
 The component is inspired by [react-headroom](https://kyleamathews.github.io/react-headroom/).
 

demo/demo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import StickyHeadroom from '../src/Headroom'
-import styled from 'styled-components'
+import styled from '@emotion/styled'
 import CITIES from './cities'
 
 const Header = styled.header`

package-lock.json

@@ -36,7 +36,7 @@
     "react",
     "hide",
     "header",
-    "styled-components",
+    "emotion",
     "typescript"
   ],
   "module": "./index.js",
@@ -64,13 +64,15 @@
   ],
   "peerDependencies": {
     "react": "16.x.x || 17.x.x || 18.x.x || 19.x.x",
-    "styled-components": "4.x.x || 5.x.x || 6.x.x"
+    "@emotion/react": "11.x.x",
+    "@emotion/styled": "11.x.x"
   },
   "devDependencies": {
-    "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@swc/core": "^1.11.24",
     "@swc/jest": "^0.2.38",
-    "@swc/plugin-styled-components": "^7.1.5",
+    "@swc/plugin-emotion": "^9.0.4",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.21",
     "@types/react-dom": "^19.1.5",
@@ -88,14 +90,12 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
-    "jest-styled-components": "^7.2.0",
     "postcss": "^8.5.3",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "^3.5.3",
     "raf": "^3.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "styled-components": "^6.1.18",
     "stylelint": "^16.19.1",
     "stylelint-config-recommended": "^16.0.0",
     "swc-loader": "^0.2.6",

package.json

@@ -1,5 +1,6 @@
 import React from 'react'
-import styled, { css, keyframes } from 'styled-components'
+import styled from '@emotion/styled'
+import { css, keyframes } from '@emotion/react'
 
 const DIRECTION_UP = 'up'
 const DIRECTION_DOWN = 'down'

src/Headroom.tsx

@@ -9,7 +9,6 @@ describe('Headroom', () => {
 // TODO: Rewrite tests #37
 // import { ReactWrapper, mount } from 'enzyme'
 // import Headroom from '../Headroom'
-// import 'jest-styled-components'
 // import React, { ComponentProps } from 'react'
 //
 // const pinStart = 10

src/__tests__/Headroom.spec.tsx

@@ -20,7 +20,7 @@ function compile(fileNames: string[], options: CompilerOptions): Record<string,
 // * index.tsx (a copy of src/Headroom.tsx)                                             - using typescript
 // * index.d.ts (which is the typescript declaration)                                   - using typescript
 // * index.d.ts.map (the source map for index.d.ts)                                     - using typescript
-// * index.js (which strips the typescript annotations and optimizes styled-components) - using swc
+// * index.js (which strips the typescript annotations and optimizes emotion)           - using swc
 // * index.js.map (the source map for index.js)                                         - using swc
 // * index.cjs (a CommonJS version of index.js for legacy tooling)                      - using swc
 // * index.cjs.map (the source map for index.cjs)                                       - using swc
@@ -65,7 +65,7 @@ function compile(fileNames: string[], options: CompilerOptions): Record<string,
       experimental: {
         plugins: [
           [
-            '@swc/plugin-styled-components',
+            '@swc/plugin-emotion',
             {
               displayName: false,
               ssr: false,
@@ -105,7 +105,7 @@ function compile(fileNames: string[], options: CompilerOptions): Record<string,
       experimental: {
         plugins: [
           [
-            '@swc/plugin-styled-components',
+            '@swc/plugin-emotion',
             {
               displayName: false,
               ssr: false,

tools/build.ts

@@ -30,7 +30,7 @@ const webpackConfig: webpack.Configuration = {
             experimental: {
               plugins: [
                 [
-                  '@swc/plugin-styled-components',
+                  '@swc/plugin-emotion',
                   {
                     displayName: false,
                     ssr: false,