chore: migrate from yarn to bun (#4223)

* chore: switch to bun

* chore: apply prettier

* chore: update workflow

* chore: remove remaining references to yarn

* chore: update core team doc

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: probablyup
+github: quantizor # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single patreon username
 open_collective: styled-components
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

.github/workflows/test.yml

@@ -14,50 +14,35 @@ jobs:
   prettier:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Setup node
-        uses: actions/setup-node@v3
+      - uses: oven-sh/setup-bun@v1
         with:
-          node-version: 18
-          cache: "yarn"
+          bun-version: latest
 
-      - run: yarn --pure-lockfile
-
-      - name: Prettier
-        run: yarn prettier
+      - run: bun install
+      - run: bun run prettier
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Setup node
-        uses: actions/setup-node@v3
+      - uses: oven-sh/setup-bun@v1
         with:
-          node-version: 18
-          cache: "yarn"
-
-      - run: yarn --pure-lockfile
+          bun-version: latest
 
-      - name: Build
-        run: yarn build
+      - run: bun install
+      - run: bun run build
         env:
           BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16, 18]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Setup node
-        uses: actions/setup-node@v3
+      - uses: oven-sh/setup-bun@v1
         with:
-          node-version: ${{ matrix.node }}
-          cache: "yarn"
-
-      - run: yarn --pure-lockfile
+          bun-version: latest
 
-      - name: Jest
-        run: yarn test
+      - run: bun install
+      - run: bun run test

CONTRIBUTING.md

@@ -62,11 +62,11 @@ Here is a quick guide to doing code contributions to the library.
 
 3. Create a branch with a meaningful name for the issue: `git checkout -b fix-something`
 
-4. Install packages by running `yarn` in the root of the project.
+4. Install packages by running `bun` in the root of the project; if you don't have `bun` installed, [follow this guide](https://bun.sh/docs/installation)
 
 5. Make your changes and commit: `git add` and `git commit`
 
-6. Make sure that the tests still pass: `yarn test`
+6. Make sure that the tests still pass: `bun run test`
 
 7. Push your branch: `git push -u origin your-branch-name`
 
@@ -80,7 +80,7 @@ Here is a quick guide to doing code contributions to the library.
 
 ### How do I set up the project?
 
-Run [`yarn install`](https://yarnpkg.com/) and edit code in the `packages/styled-components/src/` folder. It's luckily very simple! :wink:
+Run `bun install` and edit code in the `packages/styled-components/src/` folder.
 
 ### How do I verify and test my changes?
 
@@ -90,9 +90,9 @@ To use the sandbox, follow these steps:
 
 1. Go to sandbox folder: `cd packages/sandbox`
 
-2. Install all the dependencies: `yarn install`. Since this repository uses `yarn` workspaces, avoid using `npm` where you can.
+2. Install all the dependencies: `bun install`.
 
-3. Run `yarn dev` to start sandbox server
+3. Run `bun dev` to start sandbox server
 
 Now you should have the sandbox running on `localhost:3000`. The Sandbox supports client-side and server-side rendering.
 
@@ -121,18 +121,18 @@ cd packages/benchmarks
 Then build the benchmark page:
 
 ```sh
-yarn run build
+bun run build
 ```
 
 Then open the page in your browser:
 
 ```sh
-yarn run open
+bun run open
 ```
 
-On the page which opens, select the benchmark to run and click the "Run" button in your browser. 
+On the page which opens, select the benchmark to run and click the "Run" button in your browser.
 
-You may need to re-build styled-components and/or the benchmarks package after making changes if you want to re-run the benchmarks with your changes. 
+You may need to re-build styled-components and/or the benchmarks package after making changes if you want to re-run the benchmarks with your changes.
 
 ### How do I fix my pre-commit hook?
 
@@ -147,16 +147,6 @@ This will delete the old `pre-commit` git hook and install husky's one.
 Without the proper uninstallation script of the `pre-commit` package, this is necessary because `husky` will skip its installation when
 a git hook is already present.
 
-## Release process
-
-[Core team members](./CORE_TEAM.md) have the responsibility of pushing new releases to npm. The release process is as follows:
-
-1. Make sure you have the latest changes and are on the main branch: `git checkout main && git pull origin main`
-2. Install all the dependencies by running `yarn` in the root folder.
-3. Run `yarn publish`, choose the next logical version number based on changes
-4. Push the resulting commit after release back to `main` branch
-5. Congratulations, you just published a new release of `styled-components`! :tada: Let everybody know on Twitter, in our community and all the other places
-
 ## Credits
 
 These contribution guidelines are based on https://github.com/moya/contributors, big thanks to @alloy, @orta et al. for the inspiration and guidance.

CORE_TEAM.md

@@ -6,31 +6,35 @@ The `styled-components` Core Team is a group of `styled-components` contributors
 
 The `styled-components` Core Team has the following responsibilities:
 
-* Being available to answer high-level questions about `styled-components`'s vision and future.
-* Being available to review longstanding/forgotten pull requests.
-* Occasionally check `styled-components` issues, offer input, and categorize with GitHub issue labels.
-* Looking out for up-and-coming members of the `styled-components` community who might want to serve as Core Team members.
-* Pushing new releases of the package to `npm`.
+- Being available to answer high-level questions about `styled-components`'s vision and future.
+- Being available to review longstanding/forgotten pull requests.
+- Occasionally check `styled-components` issues, offer input, and categorize with GitHub issue labels.
+- Looking out for up-and-coming members of the `styled-components` community who might want to serve as Core Team members.
+- Pushing new releases of the package to `npm`.
 
 Note that the `styled-components` Core Team – and all `styled-components` contributors – are open source _volunteers_; membership on the Core Team is expressly _not_ an obligation. The Core Team is distinguished as leaders in the community and while they are a good group to turn to when someone needs an answer to a question, they are still volunteering their time, and may not be available to help immediately.
 
 ## Core Team Members
 
-The current core team members, ordered by time of addition:
+The current core team members, ordered first by status and then time of addition:
 
-* [@geelen](https://github.com/geelen)
-* [@mxstbr](https://github.com/mxstbr)
-* [@philpl](https://github.com/philpl)
-* [@schwers](https://github.com/schwers)
-* [@probablyup](https://github.com/probablyup)
-* [@imbhargav5](https://github.com/imbhargav5)
+| Handle      | Status   |
+| ----------- | -------- |
+| @quantizor  | active   |
+| @geelen     | inactive |
+| @mxstbr     | inactive |
+| @philpl     | inactive |
+| @schwers    | inactive |
+| @imbhargav5 | inactive |
+
+We are seeking helping hands for the future of styled-components! If interested, please shoot [@quantizor](https://x.com/quantizor) a message on X.
 
 ## Adding new Core Team Members
 
 The process for adding new Core Team members is as follows:
 
-* An existing Core Team member reaches out privately to see if the individual is interested. If they are, open a pull request adding them to the list.
-* Existing Core Team members review the pull request. The person merging the PR is responsible for adding them to the ["Core" GitHub team](https://github.com/orgs/styled-components/teams/core) and for adding them as an owner to the npm package. (`npm owner add <npmusername>`)
+- An existing Core Team member reaches out privately to see if the individual is interested. If they are, open a pull request adding them to the list.
+- Existing Core Team members review the pull request. The person merging the PR is responsible for adding them to the ["Core" GitHub team](https://github.com/orgs/styled-components/teams/core) and for adding them as an owner to the npm package. (`npm owner add <npmusername>`)
 
 > Note: If you feel like you have demonstrated a lasting enthusiasm for the `styled-components` project and community, yet nobody has reached out to you about joining the core team, feel free to ping one of the existing core team members _privately_ about the possibility of joining the core team.
 

package.json

@@ -2,13 +2,12 @@
   "name": "styled-components-project",
   "private": true,
   "scripts": {
-    "build": "yarn workspace styled-components build",
+    "build": "bun run --cwd packages/styled-components build",
     "postbuild": "cp README.md packages/styled-components/",
-    "postinstall": "yarn workspace styled-components generateErrors",
-    "lint": "yarn workspace styled-components lint",
-    "prettier": "yarn workspace styled-components prettier:check",
-    "size": "yarn workspace styled-components size",
-    "test": "yarn workspace styled-components test"
+    "postinstall": "bun run --cwd packages/styled-components generateErrors",
+    "prettier": "bun run --cwd packages/styled-components prettier:check",
+    "size": "bun run --cwd packages/styled-components size",
+    "test": "bun run --cwd packages/styled-components test"
   },
   "author": "Glen Maddern",
   "license": "MIT",

packages/benchmarks/package.json

@@ -18,7 +18,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-native-web": "^0.17.1",
-    "styled-components-next": "link:../styled-components",
+    "styled-components": "workspace:*",
     "styled-components-v5": "npm:styled-components@^5.3.7",
     "styled-jsx": "^5.1.2",
     "styletron-engine-atomic": "^1.5.0",

packages/benchmarks/src/implementations/styled-components-object/Box.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components-next';
+import styled from 'styled-components';
 import View from './View';
 
 const getColor = color => {

packages/benchmarks/src/implementations/styled-components-object/Dot.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components-next';
+import styled from 'styled-components';
 import View from './View';
 
 export default styled(View).attrs(p => ({ style: { borderBottomColor: p.color } }))(p => ({

packages/benchmarks/src/implementations/styled-components-object/View.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components-next';
+import styled from 'styled-components';
 
 export default styled.div({
   alignItems: 'stretch',

packages/benchmarks/src/implementations/styled-components/Box.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components-next';
+import styled, { css } from 'styled-components';
 import View from './View';
 
 const getColor = color => {

packages/benchmarks/src/implementations/styled-components/Dot.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components-next';
+import styled from 'styled-components';
 import View from './View';
 
 export default styled(View).attrs(p => ({

packages/benchmarks/src/implementations/styled-components/View.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components-next';
+import styled from 'styled-components';
 
 export default styled.div`
   align-items: stretch;

packages/sandbox/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "link:../styled-components"
+    "styled-components": "workspace:*"
   },
   "engines": {
     "node": ">= 14"

packages/styled-components/package.json

@@ -13,18 +13,18 @@
   "sideEffects": false,
   "scripts": {
     "generateErrors": "node scripts/generateErrorMap.js",
-    "prebuild": "rimraf dist && yarn generateErrors",
+    "prebuild": "rimraf dist && bun run generateErrors",
     "build": "rollup -c",
-    "postbuild": "yarn size",
-    "pretest": "yarn generateErrors",
-    "test": "yarn test:web && yarn test:native",
+    "postbuild": "bun run size",
+    "pretest": "bun run generateErrors",
+    "test": "bun run test:web && bun run test:native",
     "test:web": "jest -c jest.config.main.js",
     "test:native": "jest -c jest.config.native.js --forceExit",
     "test:integration": "jest -c jest.config.integration.js --runInBand --forceExit",
     "size": "bundlewatch",
     "prettier": "prettier src/** --write",
     "prettier:check": "prettier src/** --check",
-    "prepublishOnly": "cp ../../README.md . && yarn build"
+    "prepublishOnly": "cp ../../README.md . && bun run build"
   },
   "repository": {
     "type": "git",

packages/styled-components/src/constants.ts

@@ -18,20 +18,20 @@ export const DISABLE_SPEEDY = Boolean(
   typeof SC_DISABLE_SPEEDY === 'boolean'
     ? SC_DISABLE_SPEEDY
     : typeof process !== 'undefined' &&
-      typeof process.env !== 'undefined' &&
-      typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
-      process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
-    ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
-      ? false
-      : process.env.REACT_APP_SC_DISABLE_SPEEDY
-    : typeof process !== 'undefined' &&
-      typeof process.env !== 'undefined' &&
-      typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
-      process.env.SC_DISABLE_SPEEDY !== ''
-    ? process.env.SC_DISABLE_SPEEDY === 'false'
-      ? false
-      : process.env.SC_DISABLE_SPEEDY
-    : process.env.NODE_ENV !== 'production'
+        typeof process.env !== 'undefined' &&
+        typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' &&
+        process.env.REACT_APP_SC_DISABLE_SPEEDY !== ''
+      ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false'
+        ? false
+        : process.env.REACT_APP_SC_DISABLE_SPEEDY
+      : typeof process !== 'undefined' &&
+          typeof process.env !== 'undefined' &&
+          typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' &&
+          process.env.SC_DISABLE_SPEEDY !== ''
+        ? process.env.SC_DISABLE_SPEEDY === 'false'
+          ? false
+          : process.env.SC_DISABLE_SPEEDY
+        : process.env.NODE_ENV !== 'production'
 );
 
 // Shared empty execution context when generating static styles

packages/styled-components/src/constructors/constructWithOptions.ts

@@ -22,8 +22,8 @@ type AttrsResult<T extends Attrs<any>> = T extends (...args: any) => infer P
     ? P
     : never
   : T extends object
-  ? T
-  : never;
+    ? T
+    : never;
 
 /**
  * Based on Attrs being a simple object or function that returns

packages/styled-components/src/models/StyledComponent.ts

@@ -96,8 +96,8 @@ function resolveContext<Props extends object>(
         key === 'className'
           ? joinStrings(context[key] as string | undefined, resolvedAttrDef[key] as string)
           : key === 'style'
-          ? { ...context[key], ...resolvedAttrDef[key] }
-          : resolvedAttrDef[key as keyof typeof resolvedAttrDef];
+            ? { ...context[key], ...resolvedAttrDef[key] }
+            : resolvedAttrDef[key as keyof typeof resolvedAttrDef];
     }
   }
 

packages/styled-components/src/models/StyledNativeComponent.ts

@@ -96,8 +96,8 @@ function useStyledComponentImpl<Props extends StyledComponentImplProps>(
       isFunction(props.style)
         ? (state: any) => [generatedStyles].concat(props.style(state))
         : props.style
-        ? [generatedStyles].concat(props.style)
-        : generatedStyles,
+          ? [generatedStyles].concat(props.style)
+          : generatedStyles,
     [props.style, generatedStyles]
   );
 

packages/styled-components/src/utils/hoist.ts

@@ -96,8 +96,8 @@ type NonReactStatics<S extends OmniComponent, C extends ExcludeList = {}> = {
     S extends React.MemoExoticComponent<any>
       ? keyof typeof MEMO_STATICS | keyof C
       : S extends React.ForwardRefExoticComponent<any>
-      ? keyof typeof FORWARD_REF_STATICS | keyof C
-      : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C
+        ? keyof typeof FORWARD_REF_STATICS | keyof C
+        : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C
   >]: S[key];
 };