Create namespaced css class names.
$ npm install namespaced
Use a colon to denote a local class name. The colon is replaced by the given namespace and a hyphen. The constructs are:
- local names, e.g.
:foo
, to which the namespace is prepended. - global names, e.g.
bar
, which are not altered - arrays of class names, e.g.
[:foo, bar]
- functions, whose return value are namespaced
- objects, whose member values are recursively handled according to the rules
Only strings are accepted as class names. The following values are
silently discarded: null
, undefined
, false
, true
.
See examples below.
namespaced('my', ':local') // 'my-local'
namespaced('my', ':local', 'global') // 'my-local global'
namespaced('my', [':local', 'global']) // 'my-local global'
var css = namespaced('my')
css(':bar') // 'my-bar'
css(':bar', 'zot') // 'my-bar zot'
css([':bar', 'zot']) // 'my-bar zot'
css(null && ':bar') // ''
css(false || ':bar') // 'my-bar'
css('foo', true && ':bar', false && ':zot') // 'foo my-bar'
var styles = namespaced('my', {
foo: ':foo', // 'my-foo'
bar: 'bar', // 'bar'
zot: [':zot', 'bar', false && ':foo'], // 'my-zot bar'
qux: 'bar :foo :zot', // 'bar my-foo my-zot'
nested: {
stuff: ['bar', ':stuff'] // 'bar my-stuff'
},
fun: function(o) { return ':important-' + o.key; }
});
styles.foo // 'my-foo'
styles.nested.stuff // 'bar my-stuff'
styles.fun({key: 'foo'}) // 'my-important-foo'
More specifically, if there is just one argument, a function is returned. If more than one argument is given, the remaining arguments are evaluated as rules.
Here's a BNF-ish specification of what is possible:
rules := [rule*]
rule := simple-rule | object | function | rules
simple-rule := local-name | global-name
local-name := ':' classname
global-name := classname
Where object
is an object whose member's values are rule
s and
function
is a function that returns a rule
.