From 81af7e744c00b1c508ac8fdc8e9ecf518cf2685b Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 1 Jul 2025 14:10:12 -0500 Subject: [PATCH 1/3] chore(deps): remove styled-components, styled system --- package-lock.json | 94 +++++++------------------------------ packages/react/package.json | 21 ++------- 2 files changed, 20 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8cec7c19d0e..4f50bc7e2fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8826,6 +8826,7 @@ }, "node_modules/@styled-system/background": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8833,6 +8834,7 @@ }, "node_modules/@styled-system/border": { "version": "5.1.5", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8840,6 +8842,7 @@ }, "node_modules/@styled-system/color": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8847,6 +8850,7 @@ }, "node_modules/@styled-system/core": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "object-assign": "^4.1.1" @@ -8854,10 +8858,12 @@ }, "node_modules/@styled-system/css": { "version": "5.1.5", + "dev": true, "license": "MIT" }, "node_modules/@styled-system/flexbox": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8865,6 +8871,7 @@ }, "node_modules/@styled-system/grid": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8872,6 +8879,7 @@ }, "node_modules/@styled-system/layout": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8879,6 +8887,7 @@ }, "node_modules/@styled-system/position": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8886,6 +8895,7 @@ }, "node_modules/@styled-system/props": { "version": "5.1.5", + "dev": true, "license": "MIT", "dependencies": { "styled-system": "^5.1.5" @@ -8893,6 +8903,7 @@ }, "node_modules/@styled-system/shadow": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8900,13 +8911,7 @@ }, "node_modules/@styled-system/space": { "version": "5.1.2", - "license": "MIT", - "dependencies": { - "@styled-system/core": "^5.1.2" - } - }, - "node_modules/@styled-system/theme-get": { - "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8914,6 +8919,7 @@ }, "node_modules/@styled-system/typography": { "version": "5.1.2", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2" @@ -8921,6 +8927,7 @@ }, "node_modules/@styled-system/variant": { "version": "5.1.5", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/core": "^5.1.2", @@ -9351,15 +9358,6 @@ "@types/unist": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/is-empty": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@types/is-empty/-/is-empty-1.2.3.tgz", @@ -9604,36 +9602,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/styled-components": { - "version": "5.1.34", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/hoist-non-react-statics": "*", - "@types/react": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/styled-system": { - "version": "5.1.23", - "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.23.tgz", - "integrity": "sha512-mIwCCdhDa2ifdQCEm8ZeD8m4UEbFsokqEoT9YNOUv4alUJ8jbMKxvpr+oOwfuZgwqLh5HjWuEzwnX7DzWvjFBg==", - "license": "MIT", - "dependencies": { - "csstype": "^3.0.2" - } - }, - "node_modules/@types/styled-system__css": { - "version": "5.0.21", - "license": "MIT", - "dependencies": { - "csstype": "^3.0.2" - } - }, - "node_modules/@types/styled-system__theme-get": { - "version": "5.0.4", - "license": "MIT" - }, "node_modules/@types/supports-color": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.3.tgz", @@ -19674,20 +19642,6 @@ "node": ">=8" } }, - "node_modules/jest-styled-components": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@adobe/css-tools": "^4.0.1" - }, - "engines": { - "node": ">= 12" - }, - "peerDependencies": { - "styled-components": ">= 5" - } - }, "node_modules/jest-util": { "version": "29.7.0", "dev": true, @@ -22599,6 +22553,7 @@ }, "node_modules/object-assign": { "version": "4.1.1", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -27850,6 +27805,7 @@ }, "node_modules/styled-system": { "version": "5.1.5", + "dev": true, "license": "MIT", "dependencies": { "@styled-system/background": "^5.1.2", @@ -31468,13 +31424,7 @@ "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.13.0", "@primer/primitives": "10.x || 11.x", - "@styled-system/css": "^5.1.5", - "@styled-system/props": "^5.1.5", - "@styled-system/theme-get": "^5.1.2", "@types/react-is": "^18.2.1", - "@types/styled-system": "^5.1.23", - "@types/styled-system__css": "^5.0.16", - "@types/styled-system__theme-get": "^5.0.1", "clsx": "^2.1.1", "color2k": "^2.0.3", "deepmerge": "^4.3.1", @@ -31486,7 +31436,6 @@ "react-compiler-runtime": "^19.1.0-rc.2", "react-intersection-observer": "^9.16.0", "react-is": "^18.2.0", - "styled-system": "^5.1.5", "type-check": "0.4.0" }, "devDependencies": { @@ -31530,7 +31479,6 @@ "@types/react-dom": "18.3.0", "@types/react-test-renderer": "18.3.0", "@types/semver": "7.7.0", - "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^4.3.3", "afterframe": "^1.0.2", "ajv": "8.16.0", @@ -31541,7 +31489,6 @@ "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", "babel-plugin-react-compiler": "^19.1.0-rc.2", - "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "chalk": "^5.4.1", @@ -31557,7 +31504,6 @@ "jest-environment-jsdom": "29.7.0", "jest-fail-on-console": "3.2.0", "jest-matchmedia-mock": "1.1.0", - "jest-styled-components": "7.2.0", "jscodeshift": "0.15.0", "lodash.groupby": "4.6.0", "lodash.keyby": "4.6.0", @@ -31580,7 +31526,6 @@ "rollup-plugin-visualizer": "6.0.0", "semver": "7.7.1", "storybook": "^9.0.12", - "styled-components": "5.3.11", "terser": "5.36.0", "ts-toolbelt": "9.6.0", "tsx": "4.20.3", @@ -31599,10 +31544,8 @@ "peerDependencies": { "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", - "@types/styled-components": "^5.1.11", "react": "18.x || 19.x", - "react-dom": "18.x || 19.x", - "styled-components": "5.x" + "react-dom": "18.x || 19.x" }, "peerDependenciesMeta": { "@types/react": { @@ -31610,9 +31553,6 @@ }, "@types/react-dom": { "optional": true - }, - "@types/styled-components": { - "optional": true } } }, diff --git a/packages/react/package.json b/packages/react/package.json index 173d21af383..bc4ea828301 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -89,13 +89,7 @@ "@primer/live-region-element": "^0.7.1", "@primer/octicons-react": "^19.13.0", "@primer/primitives": "10.x || 11.x", - "@styled-system/css": "^5.1.5", - "@styled-system/props": "^5.1.5", - "@styled-system/theme-get": "^5.1.2", "@types/react-is": "^18.2.1", - "@types/styled-system": "^5.1.23", - "@types/styled-system__css": "^5.0.16", - "@types/styled-system__theme-get": "^5.0.1", "clsx": "^2.1.1", "color2k": "^2.0.3", "deepmerge": "^4.3.1", @@ -107,7 +101,6 @@ "react-compiler-runtime": "^19.1.0-rc.2", "react-intersection-observer": "^9.16.0", "react-is": "^18.2.0", - "styled-system": "^5.1.5", "type-check": "0.4.0" }, "devDependencies": { @@ -151,7 +144,6 @@ "@types/react-dom": "18.3.0", "@types/react-test-renderer": "18.3.0", "@types/semver": "7.7.0", - "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^4.3.3", "afterframe": "^1.0.2", "ajv": "8.16.0", @@ -162,7 +154,6 @@ "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", "babel-plugin-react-compiler": "^19.1.0-rc.2", - "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "chalk": "^5.4.1", @@ -178,7 +169,6 @@ "jest-environment-jsdom": "29.7.0", "jest-fail-on-console": "3.2.0", "jest-matchmedia-mock": "1.1.0", - "jest-styled-components": "7.2.0", "jscodeshift": "0.15.0", "lodash.groupby": "4.6.0", "lodash.keyby": "4.6.0", @@ -201,7 +191,6 @@ "rollup-plugin-visualizer": "6.0.0", "semver": "7.7.1", "storybook": "^9.0.12", - "styled-components": "5.3.11", "terser": "5.36.0", "ts-toolbelt": "9.6.0", "tsx": "4.20.3", @@ -216,10 +205,8 @@ "peerDependencies": { "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", - "@types/styled-components": "^5.1.11", "react": "18.x || 19.x", - "react-dom": "18.x || 19.x", - "styled-components": "5.x" + "react-dom": "18.x || 19.x" }, "peerDependenciesMeta": { "@types/react": { @@ -227,9 +214,7 @@ }, "@types/react-dom": { "optional": true - }, - "@types/styled-components": { - "optional": true } } -} \ No newline at end of file +} + From e1877236767bde59be104733b69132ddeb62a833 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 1 Jul 2025 14:10:21 -0500 Subject: [PATCH 2/3] chore: remove styled-components plugin from babel config --- packages/react/babel.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js index 52353c3bc26..752d0c505b6 100644 --- a/packages/react/babel.config.js +++ b/packages/react/babel.config.js @@ -16,7 +16,6 @@ const sharedPlugins = [ 'macros', 'dev-expression', 'add-react-displayname', - 'babel-plugin-styled-components', '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining', ] From be1b30764a400270a8412a6d3aaae9e5fbc53b04 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 1 Jul 2025 14:10:41 -0500 Subject: [PATCH 3/3] chore: remove box --- packages/react/src/Box/Box.docs.json | 25 ---- .../react/src/Box/Box.features.stories.tsx | 33 ----- packages/react/src/Box/Box.stories.tsx | 42 ------ packages/react/src/Box/Box.test.tsx | 130 ------------------ packages/react/src/Box/Box.tsx | 56 -------- packages/react/src/Box/index.ts | 2 - 6 files changed, 288 deletions(-) delete mode 100644 packages/react/src/Box/Box.docs.json delete mode 100644 packages/react/src/Box/Box.features.stories.tsx delete mode 100644 packages/react/src/Box/Box.stories.tsx delete mode 100644 packages/react/src/Box/Box.test.tsx delete mode 100644 packages/react/src/Box/Box.tsx delete mode 100644 packages/react/src/Box/index.ts diff --git a/packages/react/src/Box/Box.docs.json b/packages/react/src/Box/Box.docs.json deleted file mode 100644 index 609dab5ef85..00000000000 --- a/packages/react/src/Box/Box.docs.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "id": "box", - "name": "Box", - "status": "deprecated", - "a11yReviewed": false, - "stories": [], - "importPath": "@primer/react", - "props": [ - { - "name": "ref", - "type": "React.RefObject" - }, - { - "name": "as", - "type": "React.ElementType", - "defaultValue": "\"div\"" - }, - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - } - ], - "subcomponents": [] -} diff --git a/packages/react/src/Box/Box.features.stories.tsx b/packages/react/src/Box/Box.features.stories.tsx deleted file mode 100644 index c1e7f6aa4b3..00000000000 --- a/packages/react/src/Box/Box.features.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type {Meta} from '@storybook/react-vite' -import Box from './Box' - -export default { - title: 'Deprecated/Components/Box/Features', - component: Box, -} as Meta - -export const Border = () => ( - Box with border -) - -export const BorderBottom = () => ( - - Box with bottom border - -) - -export const Flexbox = () => ( - - 1 - 2 - 3 - -) - -export const Grid = () => ( - - 1 - 2 - 3 - -) diff --git a/packages/react/src/Box/Box.stories.tsx b/packages/react/src/Box/Box.stories.tsx deleted file mode 100644 index 69d862ca616..00000000000 --- a/packages/react/src/Box/Box.stories.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type {Meta, StoryFn} from '@storybook/react-vite' -import Box from './Box' - -export default { - title: 'Deprecated/Components/Box', - component: Box, -} as Meta - -export const Default = () => Default Box - -export const Playground: StoryFn = args => Playground - -Playground.args = { - as: 'div', - sx: { - borderWidth: 1, - borderStyle: 'solid', - borderColor: 'border.default', - p: 3, - }, -} - -Playground.argTypes = { - forwardedAs: { - controls: false, - table: { - disable: true, - }, - }, - ref: { - controls: false, - table: { - disable: true, - }, - }, - theme: { - controls: false, - table: { - disable: true, - }, - }, -} diff --git a/packages/react/src/Box/Box.test.tsx b/packages/react/src/Box/Box.test.tsx deleted file mode 100644 index bc7477787dd..00000000000 --- a/packages/react/src/Box/Box.test.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import {render, screen} from '@testing-library/react' -import {describe, expect, it} from 'vitest' -import Box from '../Box' -import theme from '../theme' - -const breakpoints = [ - null, - 'screen and (min-width: 544px)', - 'screen and (min-width: 768px)', - 'screen and (min-width: 1012px)', -] as const - -describe('Box', () => { - it('should support `className` on the outermost element', () => { - const Element = () => - expect(render().container.firstChild).toHaveClass('test-class-name') - }) - - it('should support margin', () => { - render() - const box = screen.getByTestId('box') - expect(getCSSRuleForClass(getClassName(box.className)).style.margin).toBe(theme.space[1]) - }) - - it('should support responsive margin', () => { - const m = [0, 1, 2, 3] - - render() - - const box = screen.getByTestId('box') - const className = getClassName(box.className) - - for (let i = 0; i < m.length; i++) { - let themeValue = theme.space[m[i]] - if (themeValue === '0') { - themeValue = '0px' - } - - if (i === 0) { - const cssRule = getCSSRuleForClass(className) - expect(cssRule.style.margin).toBe(themeValue) - } else { - const cssRule = getCSSRuleForClass(className, breakpoints[i]!) - expect(cssRule.style.margin).toBe(themeValue) - } - } - }) - - it('should support padding', () => { - render() - const box = screen.getByTestId('box') - expect(getCSSRuleForClass(getClassName(box.className)).style.padding).toBe(theme.space[1]) - }) - - it('should support responsive padding', () => { - const p = [0, 1, 2, 3] - - render() - - const box = screen.getByTestId('box') - const className = getClassName(box.className) - - for (let i = 0; i < p.length; i++) { - let themeValue = theme.space[p[i]] - if (themeValue === '0') { - themeValue = '0px' - } - - if (i === 0) { - const cssRule = getCSSRuleForClass(className) - expect(cssRule.style.padding).toBe(themeValue) - } else { - const cssRule = getCSSRuleForClass(className, breakpoints[i]!) - expect(cssRule.style.padding).toBe(themeValue) - } - } - }) - - it('should support display', () => { - render() - const box = screen.getByTestId('box') - expect(getCSSRuleForClass(getClassName(box.className)).style.display).toBe('inline') - }) - - it('should support responsive display', () => { - const display = ['none', 'inline', 'inline-block', 'block'] - render() - const box = screen.getByTestId('box') - const className = getClassName(box.className) - for (let i = 0; i < display.length; i++) { - if (i === 0) { - const cssRule = getCSSRuleForClass(className) - expect(cssRule.style.display).toBe(display[i]) - } else { - const cssRule = getCSSRuleForClass(className, breakpoints[i]!) - expect(cssRule.style.display).toBe(display[i]) - } - } - }) -}) - -function getClassName(className: string): string { - // styled-components with `Box` seems to generate two classes: `sx-` and - // ``. We are looking for the second class which seems to be the one the - // styles are applied to in CSS. - const classes = className.split(' ') - return classes[1] -} - -function getCSSRuleForClass(className: string, mediaText?: string): CSSStyleRule { - for (const sheet of document.styleSheets) { - for (const rule of sheet.cssRules) { - if (mediaText) { - if (rule instanceof CSSMediaRule && rule.media.mediaText === mediaText) { - for (const innerRule of rule.cssRules) { - if (innerRule instanceof CSSStyleRule && innerRule.selectorText === `.${className}`) { - return innerRule - } - } - } - } else if (rule instanceof CSSStyleRule) { - if (rule.selectorText === `.${className}`) { - return rule - } - } - } - } - - throw new Error(`CSS rule for class "${className}" not found`) -} diff --git a/packages/react/src/Box/Box.tsx b/packages/react/src/Box/Box.tsx deleted file mode 100644 index f806c7abe71..00000000000 --- a/packages/react/src/Box/Box.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import styled from 'styled-components' -import type { - BackgroundProps, - BorderProps, - ColorProps, - FlexboxProps, - GridProps, - LayoutProps, - PositionProps, - ShadowProps, - SpaceProps, - TypographyProps, -} from 'styled-system' -import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system' -import type {SxProp} from '../sx' -import sx from '../sx' -import type {ComponentProps} from '../utils/types' - -type StyledBoxProps = SxProp & - SpaceProps & - ColorProps & - TypographyProps & - LayoutProps & - FlexboxProps & - GridProps & - BackgroundProps & - BorderProps & - PositionProps & - ShadowProps - -/** - * @deprecated The Box component is deprecated. Replace with a `div` or - * appropriate HTML element instead, with CSS modules for styling. - * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md - */ -const Box = styled.div( - space, - color, - typography, - layout, - flexbox, - grid, - background, - border, - position, - shadow, - sx, -) - -/** - * @deprecated The Box component is deprecated. Replace with a `div` or - * appropriate HTML element instead, with CSS modules for styling. - * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md - */ -export type BoxProps = ComponentProps -export default Box diff --git a/packages/react/src/Box/index.ts b/packages/react/src/Box/index.ts deleted file mode 100644 index 136edb00d51..00000000000 --- a/packages/react/src/Box/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {default} from './Box' -export type {BoxProps} from './Box'