2.5 KB
Newer Older
Phil Plueckthun 已提交
1 2 3 4
Thanks for giving this a read! We're always open to your contributions to styled-components.
This document will get you started on how to contribute and things you should know.
So please give it a thorough read.

Phil Plueckthun 已提交
5 6
Please also give the code of conduct a read.

Phil Plueckthun 已提交
7 8 9 10 11 12
## How do I contribute code?

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

2. Fork, then clone: `git clone`
Phil Plueckthun 已提交
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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

4. Make your changes and commit: `git add` and `git commit`

5. Make sure that the tests still pass: `npm test` and `npm run flow` (for the type checks)

6. Push your branch: `git push -u origin your-branch-name`

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

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

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

10. Perform a celebratory dance! :dancer:

## How do I set up the project?

33 34 35 36 37
Run `npm install` and edit code in the `src/` folder. It's luckily very simple! :wink:

## How do I verify and test my changes?

To make development process easier, you could use a sandbox provided in this repo.
To use the sandbox, follow these steps:

1. Go to sandbox folder: `cd sandbox`

2. Install all the dependencies: `yarn install` or `npm install`

44 45 46 47 48
3. Run `yarn start` or `npm start` to start sandbox server

Now you should have the sandbox running on `localhost:3000`

Sandbox supports client-side and server-side rendering.

50 51
You can use an interactive editor, powered by [`react-live`](, to
test your changes. But if you want more control, you can edit the sandbox itseft:
52 53 54 55

- Root `<App>` componens is located at `styled-components/sandbox/src/App.js` file

- Client-side entry point is at `styled-components/sandbox/src/browser.js`

Sergey 已提交
- Server-side entry point is at `styled-components/sandbox/src/server.js`
Phil Plueckthun 已提交

59 60 61 62
In the sandbox source, `styled-components` is an alias to `styled-components/src` folder,
so you can edit the source directly and dev-server will handle rebuilding the source and
livereloading your sandbox after the build is done.

Phil Plueckthun 已提交
63 64 65
When you commit our pre-commit hook will run, which executes `lint-staged`. It will run
the linter automatically and warn you, if the code you've written doesn't comply with our
code style.