Add vars from JS to stylus
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore Initial commit Sep 12, 2016
LICENSE initial commit Sep 12, 2016
README.md also allow hashed objects as value Sep 12, 2016
index.js also allow hashed objects as value Sep 12, 2016
package.json 1.0.1 Sep 12, 2016

README.md

Stylus var

A function to add an array of vars from js to stylus. Useful for when you have some vars in JS that need to be added to stylus.

Install

npm i -D stylus-var

Usage

Your objects in the array should be structured like;

{
  name: 'ColorPrimary',
  value: '#ffffff'
}

inside stylus

background-color: ColorPrimary

If the value is an object, you can access it's properties inside stylus by doing this;

{
  name: 'FontSize',
  value: {
    base: '10px',
    body: '1.6rem'
  }
}

inside stylus

font-size: FontSize.body

(keep in mind to use the colon when defining an objects)

Example

var ArrayWithStyles = [
  {
    name: 'someColor',
    value: '#ffffff'
  }
];

var styleVars = require('stylus-var');

stylus.use(styleVars(ArrayWithStyles));

Example with webpack. (requires more dependencies)

var ArrayWithStyles = [
  {
    name: 'someColor',
    value: '#ffffff'
  }
];

var styleVars = require('stylus-var');

module.exports = {
    module: {
        loaders: [
            {
                test: /\.styl$/,
                loader: ExtractTextPlugin.extract('css-loader!stylus-loader')
            },
        ]
    },

    stylus: {
      use: [styleVars(ArrayWithStyles)]
    }
}