foovar v0.6.2

Refer to Stylus variables in JS

Installation

$ npm i --save foovar

Usage

in Stylus CLI

$ stylus -u foovar path/to/src.styl

in webpack with stylus-loader

webpack.config.js

module.exports = {
  stylus: {
    use: [require('foovar')()]
  }
}

Export Variables

foovar(path: string, options: hash)

Generate variables file.

vars.styl

foo = 10px
bar = 'some text'

foovar('src/StyleDefinitions.js')

Path resolving is absolute if start with /. Otherwise relative from process.cwd().

options.include: string

Export only matched name.

foovar('src/StyleDefinitions.js', {
  include: '^\$foo\-' // start with `$foo-`
})

options.exclude: string

Export only unmatched name.

options.noGeneratedLog: boolean

Don't display message to console if true.

options.compress: boolean

Compress the exporting file if true.

options.plainObject: boolean | 'value' | 'css' | 'type'

Export plain object. (but not object literal)

options.propertyCase: 'raw' | 'camel' | 'pascal' | kebab | 'snake' | 'header' | 'constant'

Set case of property name. Default value is camel case.

When you set raw, foovar does not change property name.

Import variables

If you export as follows,

foo-bar = 10px

foovar('src/StyleDefinitions.js')

It can be used as follows.

const vars = require('./src/StyleDefinitions.js');

vars.fooBar(); // 10
vars.fooBar.type // px
vars.fooBar.css // 10px

Examples

Get inner value of tuple, list, hash

foo = 10px 20px 30px 40px
bar = { baz: 1em }

foovar('src/StyleDefinitions.js')

const StyleDefinitions = require('./src/StyleDefinitions.js');

StyleDefinitions.foo()[0]() // 10
StyleDefinitions.foo()[1].type // 'px'
StyleDefinitions.foo()[2].css // '30px'

StyleDefinitions.bar().baz() // 1
StyleDefinitions.bar().baz.type // 'em'
StyleDefinitions.bar().baz.css // '1em'

Convert to plain object

foo = 10px 20px 30px 40px
bar = { baz: 1em }

foovar('src/StyleDefinitions.js')

You can use foovar.convertToPlainObject method as following.

const StyleDefinitions = require('./src/StyleDefinitions.js');
const convertToPlainObject = require('foovar/lib/convertToPlainObject');

const obj = convertToPlainObject(StyleDefinitions);

// {
//   foo: [10, 20, 30, 40],
//   bar: {
//     baz: 1
//   }
// }

options.from: 'value' | 'css' | 'type'

Default is 'value', other options are 'css' and 'type'.

const obj = convertToPlainObject(StyleDefinitions, { from: 'css' });

// {
//   foo: ['10px', '20px', '30px', '40px'],
//   bar: {
//     baz: '1em'
//   }
// }

const obj = convertToPlainObject(StyleDefinitions, { from: 'type' });

// {
//   foo: ['px', 'px', 'px', 'px'],
//   bar: {
//     baz: 'em'
//   }
// }

Discover the release history by heading on over to the HISTORY.md file.

These amazing people are maintaining this project:

No sponsors yet! Will you be the first?

These amazing people have contributed code to this project:

Unless stated otherwise all works are:

and licensed under: