CONTRIBUTING.md 2.4 KB
Newer Older
P
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.

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

P
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
  disappointed.

13
2. Fork, then clone: `git clone https://github.com/YOUR_USERNAME/styled-components.git`
P
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
To make development process easier, you could use a sandbox provided in this repo. 
To use the sandbox, follow these steps:
35

36
1. Go to sandbox folder: `cd sandbox`
37

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

40 41 42 43 44 45 46 47
3. Run `yarn start` or `npm start` to start sandbox server

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

In the sandbox `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.

Sandbox supports client-side and server-side rendering.
48 49

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

- 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`
55

56
- Server-size entry point is at `styled-components/sandbox/src/server.js`
P
Phil Plueckthun 已提交
57 58 59 60

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.