Skip to content

Commit d058bb9

Browse files
author
Joseph A. Szczesniak
authored
Merge pull request #18 from NukaPunk/master
Removed postcss.config.js and updated readme
2 parents 93c872c + 1534e46 commit d058bb9

File tree

3 files changed

+38
-5
lines changed

3 files changed

+38
-5
lines changed

.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
postcss.config.js
2+
test.js
3+
fixture.css

README.md

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ Use [PostCSS](https://github.com/postcss/postcss) with
88

99
## Usage
1010

11-
Install the package first.
11+
_Note that Next.js supports PostCSS out of the box, so you do not need this plug-in is using Next_.
12+
13+
Install this package and also `styled-jsx` first.
1214

1315
```bash
14-
npm install --save styled-jsx-plugin-postcss
16+
npm install --save styled-jsx styled-jsx-plugin-postcss
1517
```
1618

1719
Next, add `styled-jsx-plugin-postcss` to the `styled-jsx`'s `plugins` in your
@@ -25,6 +27,33 @@ babel configuration:
2527
}
2628
```
2729

30+
### Example with CRA
31+
32+
Usage with Create React App requires you to either _eject_ or use [react-app-rewired](https://github.com/timarney/react-app-rewired).
33+
34+
Here is an example using `react-app-rewired`:
35+
36+
```javascript
37+
// config-overrides.js
38+
// this file overrides the CRA webpack.config
39+
40+
const { getBabelLoader } = require('react-app-rewired')
41+
42+
module.exports = function override (config, env) {
43+
const loader = getBabelLoader(config.module.rules)
44+
45+
// Older versions of webpack have `plugins` on `loader.query` instead of `loader.options`.
46+
const options = loader.options || loader.query
47+
options.plugins = [['styled-jsx/babel', {
48+
'plugins': ['styled-jsx-plugin-postcss']
49+
}]].concat(options.plugins || [])
50+
return config
51+
}
52+
```
53+
54+
_Note: Please follow their instructions on how to set up build & test scripts, and make sure you have a correctly formatted `postcss.config.js` as well_.
55+
56+
2857
#### Notes
2958

3059
`styled-jsx-plugin-postcss` uses `styled-jsx`'s plugin system which is supported
@@ -39,8 +68,9 @@ therefore you may want to refer to their docs to learn more about
3968

4069
## Contributions
4170

42-
Although a _Proof Of Concept_ plugin, **PRs and contributions are welcome!** We
43-
aim to drive development of this plugin through community contributions.
71+
**PRs and contributions are welcome!**
72+
73+
We aim to drive development of this plugin through community contributions.
4474

4575
## License
4676

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "styled-jsx-plugin-postcss",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Plugin to add PostCSS support to styled-jsx",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)