CSS-Componentization

[![Build Status][ci-img]][ci]

[PostCSS] plugin to rename styles accourding to their files. Great for componentizing and name-spacing.

[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/Tom-Julux/CSS-Componentization.svg
[ci]: https://travis-ci.org/Tom-Julux/CSS-Componentization

Write your componetized CSS rules without component prefixes (in fact, forget about them entirely besides naming your files):


``css
/Filename: editor.css/
.title {
display: grid;
}
`

CSS-Componentization will use the filename or a set prefix to apply prefixes for you.

`css
.editor__title {
display: grid;
}
`

Usage

`js
const css_comps = require('css-componentization');
const opts = {
handleClassNames: Boolean, //Sets wether classes are prefixed. Defaults to true
handleIDs: Boolean, //Sets wether ids are prefixed. Defaults to false
customPrefix: String , //Set the prefix. Defaults to the name of the file containing the css.
discriminator: String, // Sets the discriminator between the prefix and the original name.
ignoreFiles: Array, //All files in this list wont be prefixed.
prefixMap: Map, //A map used to map specific prefixes to files.
}
postcss([ css_comps(opts) ])
`

$3

Options are applyied in the following way:

`js
if (ignoreFiles.includes(filename))
return;

let prefix = null;
if (filename)
prefix = filename;
if (customPrefix)
prefix = customPrefix;
if (prefixMap.has(filename))
prefix = prefixMap.get(filename);

if (!prefix)
return;
prefix += discriminator;

if (handleClassNames)
applyPrefix(handleClassNames);
if (handleIDs)
applyPrefix(handleIDs);
``
See [PostCSS] docs for examples for your environment.