As the creators and maintainers of this project, we want to ensure that styled-components lives and continues to grow and evolve. The evolution of the library should never be blocked by any single person's time. One of the simplest ways of doing this is by encouraging a larger set of shallow contributors. Through this, we hope to mitigate the problems of a project that needs updates but there's no one who has the power to do so.

To quote @alloy from this issue:

Don't ever feel bad for not contributing to open source.

We want contributors to provide ideas, keep the ship shipping and to take some of the load from others. It is non-obligatory; we’re here to get things done in an enjoyable way. 🏆

It's important to note that all repositories under the styled-components banner have a Code of Conduct. Please review and help enforce this CoC should any violations happen if you feel comfortable doing so.

These days, we highly recommend trying a tool like ChatGPT to get instant feedback and tips. @quantizor can be reached on X to start a private conversation, but please keep in mind that response is not guaranteed since open source is volunteer effort and subject to personal availability.

1. Ensure pnpm is installed (https://pnpm.io/installation)
2. Fork the repository, then pull it down to your disk: git clone git@github.com:YOUR_USERNAME/styled-components.git
3. Hop into the styled-components folder and run pnpm install
4. Set the base repository as upstream: git remote add upstream git@github.com:styled-components/styled-components.git (makes it easier to pull updates to your fork)

At this point, the repository is initialized and ready for development! Check the packages/ folder for the styled-components core library, a development sandbox (great for testing functionality), and the benchmarks suite.

Helpful commands:

• run unit tests: pnpm test
• check code style pnpm prettier (handled automatically if you have a prettier extension installed in your IDE)
• run build: pnpm build
• run dev sandbox: pnpm --filter sandbox dev (or just pnpm dev if you're in that folder)

Here is a quick guide to doing code contributions to the library.

1. Find some issue you're interested in, or a feature that you'd like to tackle. Also make sure that no one else is already working on it. We don't want you to be disappointed.

2. See Environment setup

3. Update your local copy of the main branch with the latest code: git checkout main && git pull -f upstream/main

4. Create a branch with a meaningful name for the issue: git checkout -b fix-something

5. Run pnpm install to capture any dependency updates

6. Make desired changes...

7. Add a changeset via pnpm changeset, be descriptive!

   • patch = bugfix, chores, small things
   • minor = new functionality
   • major = breaking changes

8. Push your branch: git push -u origin your-branch-name

9. Submit a pull request to the upstream styled-components repository.

10. Choose a descriptive title and describe your changes briefly.

11. Wait for a maintainer to review your PR, make changes if it's being recommended, and get it merged.

12. Perform a celebratory dance! 💃

We have three different benchmarks: mounting a deep tree, mounting a wide tree and updating dynamic styles. Shoutout to @necolas, who wrote these for react-native-web and whom we stole these benchmarks from.

To run the benchmarks run:

cd packages/benchmarks

Then build the benchmark page:

pnpm build

Then open the page in your browser:

pnpm open

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.

These contribution guidelines are based on https://github.com/moya/contributors, big thanks to @alloy, @orta et al. for the inspiration and guidance.

Please see the "Sponsor" button at the top of the repository, thank you!

Thank you to all the people who have already contributed to styled-components!

Thank you to all our backers! [Become a backer]

Thank you to all our sponsors! (please ask your company to also support this open source project by becoming a sponsor)