styled-jsx-stylus v0.0.1

styled-jsx-stylus

Install

npm i --save styled-jsx-stylus

Usage

Similar to how you use css in styled-jsx to render styles outside of a file, this module allows you to use stylus to do the same for stylus.

/* styles.js */

import styl from 'styled-jsx-stylus';

export const button = styl`
  $red = #F25F41

  button
    color: $red
`;

export default styl`
  div
    color: green
`;

/* myComponent/index.js */

import styles, { button } from './styles';

export default = () => (
  <div>
    <button>styled-jsx-stylus</button>
    <style jsx>{styles}</style>
    <style jsx>{button}</style>
  </div>
);

Modifiers

If you need to modify the stylus render object, like to add .import paths, then you can pass a second arg to the function. To do this, you have to call the styl function traditionally.

/* styles.js */

import styl from 'styled-jsx-stylus';

export const button = styl(`
  button
    color: $red
`, stylus => {
  return stylus
    .set('filename', `${__dirname}/button.styl`)
    .import(`${__dirname}/vars.styl`);
});

export default styl`
  div
    color: green
`;

Global Modifiers

If you want to apply a static modifier to all stylus blocks, you can set or override the global modifier.

/* server/index.js */

import { setGlobalModifier } from 'styled-jsx-stylus';

setGlobalModifier(stylus => stylus.import(`${__dirname}/styles/vars.styl`));

// ...

In this example, all styl blocks will now have server/styles/vars.styl imported.