Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/giuseppeg/styled-jsx-plugin-postcss
Plugin to add PostCSS support to styled-jsx.
https://github.com/giuseppeg/styled-jsx-plugin-postcss
css-in-js postcss styled-jsx styled-jsx-plugin
Last synced: about 15 hours ago
JSON representation
Plugin to add PostCSS support to styled-jsx.
- Host: GitHub
- URL: https://github.com/giuseppeg/styled-jsx-plugin-postcss
- Owner: giuseppeg
- Created: 2017-10-06T12:30:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T17:02:29.000Z (over 3 years ago)
- Last Synced: 2024-05-29T20:39:22.842Z (8 months ago)
- Topics: css-in-js, postcss, styled-jsx, styled-jsx-plugin
- Language: JavaScript
- Homepage:
- Size: 242 KB
- Stars: 91
- Watchers: 4
- Forks: 17
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# styled-jsx-plugin-postcss
[](https://travis-ci.org/giuseppeg/styled-jsx-plugin-postcss)
[](https://www.npmjs.com/package/styled-jsx-plugin-postcss)
Use [PostCSS](https://github.com/postcss/postcss) with
[styled-jsx](https://github.com/zeit/styled-jsx) 💥
⚠️ **This plugin is not actively being maintained. If you want me to work on it please [consider donating](https://github.com/sponsors/giuseppeg).**
## Supporters
Companies and individuals who sponsored some work on this library:
🥇 [@swissredcross](https://github.com/swissredcross)
## Usage
Install this package first.
```bash
npm install --save styled-jsx-plugin-postcss
```
Next, add `styled-jsx-plugin-postcss` to the `styled-jsx`'s `plugins` in your
babel configuration:
```json
{
"plugins": [
["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-postcss"] }]
]
}
```
With config:
```json
{
"plugins": [
[
"styled-jsx/babel",
{
"plugins": [
[
"styled-jsx-plugin-postcss",
{
"path": "[PATH_PREFIX]/postcss.config.js",
"compileEnv": "worker"
}
]
]
}
]
]
}
```
## compileEnv
When using Node.js v12.3.0 and above the plugin defaults to compiling using a worker thread instead of a child process. This results in faster builds.
If for any reason you want to force compiling using a child process (slower) you can register the plugin with the config option `compileEnv` set to `process`.
### Example with CRA
Usage with Create React App requires you to either _eject_ or use [react-app-rewired](https://github.com/timarney/react-app-rewired).
Here is an example using `react-app-rewired`:
```javascript
// config-overrides.js
// this file overrides the CRA webpack.config
const { getBabelLoader } = require("react-app-rewired");
module.exports = function override(config, env) {
const loader = getBabelLoader(config.module.rules);
// Older versions of webpack have `plugins` on `loader.query` instead of `loader.options`.
const options = loader.options || loader.query;
options.plugins = [
[
"styled-jsx/babel",
{
plugins: ["styled-jsx-plugin-postcss"],
},
],
].concat(options.plugins || []);
return config;
};
```
_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_.
#### Notes
`styled-jsx-plugin-postcss` uses `styled-jsx`'s plugin system which is supported
from version 2. Read more on their repository for further info.
## Plugins
`styled-jsx-plugin-postcss` uses
[`postcss-load-config`](https://www.npmjs.com/package/postcss-load-config)
therefore you may want to refer to their docs to learn more about
[adding plugins](https://www.npmjs.com/package/postcss-load-config#packagejson).
## Contributions
**PRs and contributions are welcome!**
We aim to drive development of this plugin through community contributions.
## License
MIT