omardelarosa/styled-jsx-plugin-stylus

Plugin to add Stylus support to styled-jsx

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

styled-jsx-plugin-stylus's Issues

Error passing stylus options

I am trying to use your stylus options example to import a stylus file containing variable defitions before rendering. Here is my .babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx/babel": {
          "plugins": [
            "styled-jsx-plugin-stylus",
            {
              use(style) {
                return style.import('assets/definitions.styl');
              }
            }
          ]
        }
      }
    ]
  ]
}

I am getting the following error:

Error while parsing JSON - Expected ']' instead of '{' at line 9 column 11 of the JSON5 data.

I think that Next babel dosn't like that function in the json. Have you gotten this functionality to work yourself? I'm using this with Next.js.

Using js variable inside styled-jsx component

When I put js variable inside <style jsx> component I get an error: StyleSheet: "insertRule" accepts only strings.

So, this works:

<style jsx>{`
    p
        color: blue
`}</style>

but this doesn't:

const s = `
    p
        color: blue
`
<style jsx>{s}</style>

Is there a way to make this work?

ReferenceError: _JSXStyle is not defined

ReferenceError: _JSXStyle is not defined