styled-jsx-postcss

Babel transform to run PostCSS on styled-jsx

Usage no npm install needed!

<script type="module">
  import styledJsxPostcss from 'https://cdn.skypack.dev/styled-jsx-postcss';
</script>

README

styled-jsx-postcss

Build Status npm

Use PostCSS with styled-jsx 💥

Usage

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"
  ]
}

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:

module.exports = {
  resolve: {
    alias: {
      'styled-jsx': '@giuseppeg/styled-jsx-postcss'
    }
  },
  // ...
}

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