Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including foovar with all npm packages installed. Try it out:

require("stylus/package.json"); // stylus is a peer dependency. var foovar = require("foovar")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

foovar v0.6.2

Refer to Stylus variables in JS

foovar

CircleCI

NPM version NPM downloads

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-nameJS:varName()JS:varName.typeJS:varName.css
'some text''some text''string''some text'
20px20'px''20px'
50%50'%''50%'
200ms200'ms''200ms'
255255undefined'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)'
truetrue'boolean'undefined
falsefalse'boolean'undefined
nullnull'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:

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:

and licensed under:

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free