Upgrade to styled-components v6 (#6510)

* bump styled-components to v6 and get all the tests passing * minor updates based on migration guide * adjust next.config.mjs in app-root
zooniverse · Dec 10, 2024 · b6322d2 · b6322d2
1 parent 634f67a
commit b6322d2
Show file tree

Hide file tree

Showing 34 changed files with 623 additions and 567 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "test:ci": "nyc --silent lerna run --parallel test:ci"
   },
   "engines": {
-    "node": ">=16.18"
+    "node": ">=20.5"
   },
   "nyc": {
     "exclude": [

diff --git a/packages/app-project/.babelrc b/packages/app-project/.babelrc
@@ -2,6 +2,7 @@
   "env": {
     "test": {
       "plugins": [
+        "babel-plugin-styled-components",
         [ "babel-plugin-webpack-alias", { "config": "./webpack.config.test.js" } ]
       ],
       "presets": ["next/babel"]

diff --git a/packages/app-project/package.json b/packages/app-project/package.json
@@ -49,7 +49,7 @@
     "react-dom": "~18.2.0",
     "react-i18next": "~14.1.3",
     "react-resize-detector": "~9.1.0",
-    "styled-components": "~5.3.3",
+    "styled-components": "~6.1.13",
     "swr": "~2.2.0",
     "validator": "~13.12.0"
   },

diff --git a/packages/app-project/src/helpers/theme/README.md b/packages/app-project/src/helpers/theme/README.md
@@ -1,5 +1,3 @@
 # Theme
 
 Creates a Grommet theme by performing a deep merge of the Grommet base theme with the Zooniverse custom Grommet theme.
-
-This was originally done in the `GrommetWrapper` theme, but was moved here so it can be reused with `@artsy/fresnel` to extract the breakpoints for responsive sizing.
diff --git a/...p-project/src/screens/ProjectHomePage/components/Hero/components/Background/Background.js b/...p-project/src/screens/ProjectHomePage/components/Hero/components/Background/Background.js
@@ -1,45 +1,30 @@
-import { number, shape, string } from 'prop-types'
-import styled, { css, withTheme } from 'styled-components'
+import { string } from 'prop-types'
+import styled from 'styled-components'
 
 const Img = styled.img`
-    height: 230px;
-    min-height: inherit;
-    object-fit: cover;
-    width: 100%;
+  height: 230px;
+  min-height: inherit;
+  object-fit: cover;
+  width: 100%;
 
-  ${props => css`
-    @media (min-width: ${props.breakpoint}px) {
-      flex: 1 1 auto;
-      object-position: 0 50%;
-    }
-  `}
+  // Grommet small breakpoint
+  @media (width > 769px) {
+    flex: 1 1 auto;
+    object-position: 0 50%;
+  }
 `
 
-function Background ({
-  backgroundSrc,
-  theme
-}) {
-  const breakpoint = theme.global.breakpoints.small.value
+function Background ({ backgroundSrc }) {
   return (
     <Img
       alt=''
-      breakpoint={breakpoint}
       src={backgroundSrc}
     />
   )
 }
 
 Background.propTypes = {
-  backgroundSrc: string.isRequired,
-  theme: shape({
-    global: shape({
-      breakpoints: shape({
-        small: shape({
-          value: number.isRequired
-        }).isRequired
-      }).isRequired
-    }).isRequired
-  }).isRequired
+  backgroundSrc: string.isRequired
 }
 
-export default withTheme(Background)
+export default Background
diff --git a/packages/app-root/next.config.mjs b/packages/app-root/next.config.mjs
@@ -16,6 +16,9 @@ function commitID() {
 const COMMIT_ID = process.env.COMMIT_ID || commitID()
 
 const nextConfig = {
+  compiler: {
+    styledComponents: true
+  },
   compress: false,
   env: {
     COMMIT_ID

diff --git a/packages/app-root/package.json b/packages/app-root/package.json
@@ -32,7 +32,7 @@
     "panoptes-client": "~5.6.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "styled-components": "~5.3.10",
+    "styled-components": "~6.1.13",
     "swr": "~2.2.4"
   },
   "devDependencies": {

diff --git a/packages/app-root/src/app/style-registry.js b/packages/app-root/src/app/style-registry.js
@@ -22,7 +22,7 @@ export default function StyledComponentsRegistry({
   if (typeof window !== 'undefined') return <>{children}</>
 
   return (
-    <StyleSheetManager disableVendorPrefixes sheet={styledComponentsStyleSheet.instance}>
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
       {children}
     </StyleSheetManager>
   )

diff --git a/packages/lib-classifier/.babelrc b/packages/lib-classifier/.babelrc
@@ -1,5 +1,6 @@
 {
   "plugins": [
+    "babel-plugin-styled-components",
     ["@babel/plugin-transform-runtime", {
       "helpers": false
     }],

diff --git a/packages/lib-classifier/package.json b/packages/lib-classifier/package.json
@@ -59,7 +59,7 @@
     "grommet-icons": "~4.x.x",
     "react": ">= 16.14",
     "react-dom": ">= 16.14",
-    "styled-components": "~5.x.x"
+    "styled-components": "6.x.x"
   },
   "devDependencies": {
     "@babel/cli": "~7.25.9",
@@ -84,6 +84,7 @@
     "@zooniverse/standard": "~2.0.0",
     "babel-loader": "~9.2.1",
     "babel-plugin-module-resolver": "~5.0.0",
+    "babel-plugin-styled-components": "~2.1.4",
     "babel-plugin-transform-imports": "~2.0.0",
     "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
@@ -95,7 +96,6 @@
     "grommet": "~2.41.0",
     "grommet-icons": "~4.12.0",
     "html-webpack-plugin": "~5.6.0",
-    "ignore-styles": "~5.0.1",
     "jsdom": "~25.0.1",
     "million": "~3.1.11",
     "mobx": "~6.12.0",
@@ -118,7 +118,6 @@
     "storybook": "~7.6.11",
     "storybook-react-i18next": "~2.0.1",
     "style-loader": "~4.0.0",
-    "styled-components": "~5.3.3",
     "superagent": "~8.1.0",
     "webpack": "~5.96.1",
     "webpack-cli": "~5.1.0",

diff --git a/...ctViewer/components/InteractionLayer/components/DrawingToolMarks/DrawingToolMarks.spec.js b/...ctViewer/components/InteractionLayer/components/DrawingToolMarks/DrawingToolMarks.spec.js
@@ -1,5 +1,8 @@
 import { mount, shallow } from 'enzyme'
 import sinon from 'sinon'
+import { Grommet } from 'grommet'
+import zooTheme from '@zooniverse/grommet-theme'
+
 import { PointTool, LineTool } from '@plugins/drawingTools/models/tools'
 import { Mark } from '@plugins/drawingTools/components'
 import SVGContext from '@plugins/drawingTools/shared/SVGContext'
@@ -87,16 +90,18 @@ describe('Components > DrawingToolMarks', function () {
       onDelete = sinon.stub()
       onFinish = sinon.stub()
       const wrapper = mount(
-        <SVGContext.Provider value={mockContext}>
-          <svg>
-            <DrawingToolMarks
-              onDelete={onDelete}
-              onDeselectMark={onDeselectMark}
-              onFinish={onFinish}
-              marks={marks}
-            />
-          </svg>
-        </SVGContext.Provider>
+        <Grommet theme={zooTheme}>
+          <SVGContext.Provider value={mockContext}>
+            <svg>
+              <DrawingToolMarks
+                onDelete={onDelete}
+                onDeselectMark={onDeselectMark}
+                onFinish={onFinish}
+                marks={marks}
+              />
+            </svg>
+          </SVGContext.Provider>
+        </Grommet>
       )
       dragEnd = wrapper.find(Mark).at(1).prop('dragEnd')
     })

diff --git a/.../SubjectViewer/components/InteractionLayer/components/PreviousMarks/PreviousMarks.spec.js b/.../SubjectViewer/components/InteractionLayer/components/PreviousMarks/PreviousMarks.spec.js
@@ -1,5 +1,7 @@
 import { render, waitFor } from '@testing-library/react'
 import { Provider } from 'mobx-react'
+import { Grommet } from 'grommet'
+import zooTheme from '@zooniverse/grommet-theme'
 
 import SHOWN_MARKS from '@helpers/shownMarks'
 import { WorkflowFactory } from '@test/factories'
@@ -60,11 +62,13 @@ describe('Component > PreviousMarks', function () {
   function withStore(store) {
     return function Wrapper({ children }) {
       return (
-        <Provider classifierStore={store}>
-          <svg>
-            {children}
-          </svg>
-        </Provider>
+        <Grommet theme={zooTheme}>
+          <Provider classifierStore={store}>
+            <svg>
+              {children}
+            </svg>
+          </Provider>
+        </Grommet>
       )
     }
   }

diff --git a/...ctViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.spec.js b/...ctViewer/components/InteractionLayer/components/TranscribedLines/TranscribedLines.spec.js
@@ -1,4 +1,3 @@
-import { within } from '@testing-library/dom'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import zooTheme from '@zooniverse/grommet-theme'
@@ -10,16 +9,12 @@ import sinon from 'sinon'
 
 import SHOWN_MARKS from '@helpers/shownMarks'
 import * as tasks from '@plugins/tasks'
-import RootStore from '@store'
-import TranscriptionReductions from '@store/subjects/Subject/TranscriptionReductions'
 import { reducedSubject } from '@store/subjects/Subject/TranscriptionReductions/mocks'
-import { WorkflowFactory, SubjectFactory } from '@test/factories'
-import mockStore, { defaultClient } from '@test/mockStore/mockStore.js'
+import { WorkflowFactory } from '@test/factories'
+import mockStore from '@test/mockStore/mockStore.js'
 
 import TranscribedLines from '.'
 
-import { expect } from 'chai'
-
 describe('Component > TranscribedLines', function () {
   function withStore(store) {
     return function Wrapper({ children }) {