CSS-Componentization

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

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

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

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

.editor__title {
    display: grid;
}

Usage

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) ])

Applying Options

Options are applyied in the following way:

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.