Rework Namespace CSS
A simple namespacing plugin for Rework.
Allows for CSS to be namespaced by selector, and with class prefixes.
Options
Pass in an options object to configure the plugin. Possible options:
selector
: all selectors will have this string prepended to them (with a space afterwards, unless it's the root)
class
: all classes will have this string prepended to them
root
: what selector to use as the root of the namespace. Defaults to html
.
namespaceHtml
: whether html
should be converted to .html
. Useful if complete namespacing is required. Defaults to true
.
namespaceBody
: whether body
should be converted to .body
. Useful if complete namespacing is required. Defaults to true
ignoreUnderscored
: whether selectors that begin with an underscore should have the underscore removed and not be namespaced. Defaults to true
. Useful for selectors that need to break out of namespacing. Eg. ._reset {}
won't get transformed into .namespace ._reset {}
, but as .reset {}
instead
Example
Note: grunt-rework
is fairly old now so the following may no longer work.
Have only tested with 0.0.6
, such as from https://github.com/geordiemhall/grunt-rework
Grunt snippet (untested, may not actually work these days):
var reworkNamespace = grunt
Gulp snippet (untested, may not actually work these days):
var rework = reworknamespace = // ... return gulp
Will take the following CSS:
And turn it into: