Use PostCSS with styled-jsx 💥
Install the package first.
npm install --save styled-jsx-postcss
Next, add styled-jsx-postcss/babel
to plugins
in your babel configuration:
{
"plugins": [
"styled-jsx-postcss/babel"
]
}
styled-jsx-postcss
extends styled-jsx
therefore you don't need to include both – just add styled-jsx-postcss
and you're ready to rock!
Also keep in mind that the PostCSS transformations run on styled-jsx
transformed code.
If you're already using styled-jsx
and don't want to rename all the import
and/or require
you can define an alias with webpack (and other module bundlers I believe) like so:
module.exports = {
resolve: {
alias: {
'styled-jsx': '@giuseppeg/styled-jsx-postcss'
}
},
// ...
}
styled-jsx-postcss
uses postcss-load-plugins
therefore you may want to refer to their docs to learn more about adding plugins
styled-jsx-postcss
exports all of the modules from styled-jsx
.
This mean that you can include styled-jsx-postcss/server
or styled-jsx-postcss/style
like you would do with Zeit's styled-jsx
!
Read the styled-jsx docs.
<3 goes to
- the Zeit team and the authors of
styled-jsx
. - the PostCSS authors, org and community
- Michael Ciniawsky for making postcss-load-plugins