styled-jsx-plugin-stylus

Use Stylus with styled-jsx 💥

Usage

Install the package first.

npm install --save-dev styled-jsx-plugin-stylus

Install the stylus version you need (it is a peer dependency).

npm install --save-dev stylus

Next, add styled-jsx-plugin-stylus to the styled-jsx's plugins in your babel configuration:

{
  "plugins": [
    [
      "styled-jsx/babel",
      { "plugins": ["styled-jsx-plugin-stylus"] }
    ]
  ]
}

stylus options

To pass options to stylus before preprocessing begins, use an optional object in the babel config:

{
  plugins: [
    [
      "styled-jsx/babel",
      {
      	 plugins: [
      	 	[ 
      	 		"styled-jsx-plugin-stylus"
      	 		{ 
      	 			use(style) {
      	 				return style
      	 					.include('/path/to/module')
      	 					.define(...)
      	 					.set(...);
      	 			}
      	 		}
      	 	]
      	}
    ]
  ]
}

More information is available in the stylus docs: http://stylus-lang.com/docs/js.html#usefn

Notes

styled-jsx-plugin-stylus uses styled-jsx's plugin system which is supported from version 2.

Read more on their repository for further info.

This plugin is a bare minimum implementation. More to come.

License

MIT