foovar

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'
//   }
// }

History

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

Backers

Maintainers

These amazing people are maintaining this project:

• Keita Okamoto — view contributions

Sponsors

No sponsors yet! Will you be the first?

Contributors

These amazing people have contributed code to this project:

• Keita Okamoto — view contributions
• KeitaO — view contributions

License

Unless stated otherwise all works are:

• Copyright © Keita Okamoto

and licensed under:

• MIT License