styled-jsx-postcss

Use PostCSS with styled-jsx ????

Usage

Install the package first.

1npm install --save styled-jsx-postcss

Next, add styled-jsx-postcss/babel to plugins in your babel configuration:

1{
2  "plugins": [
3    "styled-jsx-postcss/babel"
4  ]
5}

Notes

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:

1module.exports = {
2  resolve: {
3    alias: {
4      'styled-jsx': '@giuseppeg/styled-jsx-postcss'
5    }
6  },
7  // ...
8}

Plugins

styled-jsx-postcss uses postcss-load-plugins therefore you may want to refer to their docs to learn more about adding plugins

styled-jsx api

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.

Credits

<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