CSS namespacing

css-namespace.js

/*
Automatically namespace all CSS selectors.
Eliminates most problems with style leak

    .active {}

...becomes

    .button-active {}
*/

const CLASS_SELECTOR = /\.(\w+)/;
const ID_SELECTOR = /\#(\w+)/;
const WHITESPACE = /^\s+$/;
const SELECTOR = /^[.#]/;

const prefixClasses = (css, prefix) =>
  css.replace(CLASS_SELECTOR, '.' + prefix + '$1');

const prefixIds = (css, prefix) =>
  css.replace(ID_SELECTOR, '#' + prefix + '$1');

export const namespace = (css, ns) =>
  prefixClasses(prefixIds(css, ns), ns);

const isLineValid = (line) => WHITESPACE.test(line) || SELECTOR.test(line);

const removeExt = (path) => path.replace(/\.\w+$/, '');

const namespaceFromPath = (path) =>
  removeExt(path.replace(/^\//, '').replace('/', '-')) + '-';