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

|Stylus:$var-name| JS:varName()| JS:varName.type| JS:varName.css| |:----|:---------|:------------|:-----------| |'some text'|'some text'|'string'|'some text'| |20px|20|'px'|'20px'| |50%|50|'%'|'50%'| |200ms|200|'ms'|'200ms'| |255|255|undefined|'255'| |auto|'auto'|'ident'|'auto'| |#112233|[17,34,51,1]|'rgba'|'#112233'| |#11223344|[17,34,51,0.26666666666666666]|'rgba'|'#11223344'| |rgba(11,22,33,.4)|[11,22,33,0.4]|'rgba'|'rgba(11,22,33,0.4)'| |hsl(11,22%,33%)|[11,22,33,1]|'hsla'|'hsla(11,22%,33%,1)'| |hsla(11,22%,33%,.4)|[11,22,33,0.4]|'hsla'|'hsla(11,22%,33%,0.4)'| |true|true|'boolean'|undefined| |false|false|'boolean'|undefined| |null|null|'null'|undefined| |cubic-bezier(1,0,1,0)|[1,0,1,0]|'cubic-bezier'|'cubic-bezier(1,0,1,0)'| |10px 20px 30px 40px|[FoovarValue instance x 4]|'tuple'|['10px', '20px', '30px', '40px']| |1em, 2em, 3em, 4em|[FoovarValue instance x 4]|'list'|['1em', '2em', '3em', '4em']| |{ foo: 1em }|{ foo: FoovarValue instance }|'hash'|undefined|

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: