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
moduleexports = stylus: use:
Export Variables
foovar(path: string, options: hash)
Generate variables file.
vars.styl
foo = 10pxbar = 'some text' 'src/StyleDefinitions.js')
Path resolving is absolute if start with /
. Otherwise relative from process.cwd()
.
options.include: string
Export only matched name.
'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 'src/StyleDefinitions.js')
It can be used as follows.
const vars = ; vars; // 10varsfooBartype // pxvarsfooBarcss // 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 40pxbar = { baz: 1em } 'src/StyleDefinitions.js')
const StyleDefinitions = ; StyleDefinitions0 // 10StyleDefinitions1type // 'px'StyleDefinitions2css // '30px' StyleDefinitions // 1StyleDefinitionsbaztype // 'em'StyleDefinitionsbazcss // '1em'
Convert to plain object
foo = 10px 20px 30px 40pxbar = { baz: 1em } 'src/StyleDefinitions.js')
You can use foovar.convertToPlainObject
method as following.
const StyleDefinitions = ;const convertToPlainObject = ; const obj = ; // {// foo: [10, 20, 30, 40],// bar: {// baz: 1// }// }
options.from: 'value' | 'css' | 'type'
Default is 'value'
, other options are 'css'
and 'type'
.
const obj = ; // {// foo: ['10px', '20px', '30px', '40px'],// bar: {// baz: '1em'// }// }
const obj = ; // {// 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: