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 |
tuple
, list
, hash
Get inner value of 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:
Sponsors
No sponsors yet! Will you be the first?
Contributors
These amazing people have contributed code to this project:
License
Unless stated otherwise all works are:
- Copyright © Keita Okamoto
and licensed under: