postcss-faster-namespace

A simple and faster postcss plugin that thinks from origin heart, which can quickly add namespaces and scopes for all css selectors. It might solve some styling problems between micro-frontend applications. 一个单纯的从本心出发的postcss插件，它可以快速为所有的css选择器添加命名空间和作用域。它可能会解决微前端应用程序之间的一些样式问题。

Getting Started

npm i -D postcss-faster-namespace

or

yarn add -D postcss-faster-namespace

or

pnpm add -D postcss-faster-namespace

usage

const postcss = require('postcss');
const fasterNamespace = require('postcss-faster-namespace');

const input = `.hide {
  display: none;
}`;

postcss([fasterNamespace({ prefix: '.namespace' })])
  .process(input, { from: null })
  .then(function (result) {
    console.log(result.css); // .namespace .hide { display: none; }
  });

postcss([fasterNamespace({
 prefix: '.namespace',
 suffix: 'tail'
})])
  .process(input, { from: null })
  .then(function (result) {
    console.log(result.css); // .namespace .hide-tail { display: none; }
  });

input

.foo {}

output

.namespace .foo {}

options

Type:

type Options = {
  prefix?: string,
  suffix?: string,
  separator?: string,
  getCustomClass?: Function
}

• prefix: A selector will be added to your css selectors.
• suffix: It will be added to your css selectors.

/* input */
.icon {}

/* output */
.icon--tail {}

• separator: A tail connector between selector and suffix. The default value is --.

/* input */
.icon {}

/* output */
.icon--ax {}

• getCustomClass: It is a function which you can customize the class name.

prefix: '.namespace',
suffix: 'tail',
getCustomClass: ({ prefix, suffix, selector }) => {
  const index = selector.indexOf(':');
  if (index !== -1) {
    selector = selector.substring(0, index) + '--' + suffix + selector.substring(index, selector.length);
  } else {
    selector = selector.split(' ').map(v => v + '--' + suffix).join(' ')
  }
  return `${prefix} ${selector}`;
}