css-namespacing

css-namespacing allows you to quickly and precisely add the named namespace to the classname specified in the CSS code

中文版文档

Getting Started

To begin, you'll need to install css-namespacing:

$ npm install css-namespacing --save-dev

Usage

1.Define namespace in option,and you can prefix all classnames with specified namspace .

const namespacing = require("css-namespacing")
const before=`
  .box .box1{
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
  }
`
const after=namespacing(before,{namespace:'bsp-'})
console.log(after)
/**
 * output:
 *  .bsp-box .bsp-box1{
 *    font-size: 1.5em;
 *    font-weight: bold;
 *    line-height: 1.5;
 *  }
 * /

2.If you define not in option, it skips some classnames that match the regular expression in not. Note: The element in not must be a regular expression.

const namespacing = require("css-namespacing")
const before=`
  .box1,.box2 .box3+.box4,
  .box5~.box6 .box7[class="box8 box9"]{

  }
`
const after=namespacing(before,{not:[/box2/, /box4/, /box5/, /box9/]})
console.log(after)
/**
 * output:
 *  .cst-box1,.box2 .cst-box3+.box4,
 *  .box5~.cst-box6 .cst-box7[class="cst-box8 box9"]{
 *
 *  }
 * /

3.If you define only in option, it adds a namespace to only those classnames that match the regular expression in only.Note: If both only and not are defined in options, only will have a higher priority.

const namespacing = require("css-namespacing")
const before=`
  .box1,.box2 .box3+.box4,
  .box5~.box6 .box7[class="box8 box9"]{

  }
`
const after=namespacing(before,{only: [/box2/, /box4/], not: [/box3/, /box4/] })
console.log(after)
/**
 * output:
 * .box1,.cst-box2 .box3+.cst-box4,
 * .box5~.box6 .box7[class="box8 box9"]{
 *
 * }
 * /

4.Support at-rules.You can also define namespace or only or not in your css code with @namespacing atrule.If you want to learn more about this usage of @namespacing,check here.

const namespacing = require("css-namespacing")
const before=`
  @namespacing prefix('my-') not([/box2/])
  .box{}
  .box2{}
`
const after=namespacing(before)
console.log(after)
/**
 * output:
 * .my-box{}
 * .box2{}
 * /

Availability

If you want to read more tests to check if it works, read my tests:unit directory.

In addition, you can compare the CSS files before and after conversion in the tests:file directory.

Function parameters

Name	Type	Default	Description	Necessary
data	{String}	undefined	The CSS code string you want to add namespace with	true
option	{String}	{}	The options of namespacing	false

option

Type: Object Default: {}

• option.namespace

  Type:String Default:cst-

  The namespace to prefix

• option.not

  Type:Array<RegExp> Default:[]

  The classname that is not be prefixed with namespace

• option.only

  Type:Array<RegExp> Default:[]

  Only the classname of the namespace will be added, and the classname that is not matched by a regular expression in only will not be added

AtRule

1.You can define prefix after @namespacing to change in the namespace prefix, this value has higher priority than the namespace defined in the option.

const namespacing = require("css-namespacing")
const before=`
  .box[title=W3School]
  {
    border:5px solid blue;
  }
  @namespacing prefix('my1-')
  .box1{
    font-size:1.5em;
  }
  @namespacing prefix('my2-')
  .box2{
    line-height:1.5;
  }
`
const after=namespacing(before,{namespace:'my-'})
console.log(after)
/**
 * output:
 * .my-box[title=W3School]
 *  {
 *    border:5px solid blue;
 *  }
 *  .my1-box1{
 *    font-size:1.5em;
 *   }
 *  .my2-box2{
 *    line-height:1.5;
 *  }
 * /

2.You can also define not or only after @namespacing ,The only and not in the @namespacing are merged with the only and not arrays in the option, respectively.Note: The data structure of not and only here are the same as in option

const namespacing = require("css-namespacing")
const before=`
  .box{}
  .box2{}
  @namespacing not([/box3/])
  .box3{}
  .box{}
  .box2{}
`
const after=namespacing(before,{ not: [/box2/] })
console.log(after)
/**
 * output:
 * .cst-box{}
 * .box2{}
 * .box3{}
 * .cst-box{}
 * .box2{}
 * /

const namespacing = require("css-namespacing")
const before=`
  .box{}
  .box2{}
  @namespacing only([/box2/])
  .box{}
  .box2{}
`
const after=namespacing(before,{ only: [/^box$/]})
console.log(after)
/**
 * output:
 * .cst-box{}
 * .box2{}
 * .cst-box{}
 * .cst-box2{}
 * /

Support Webpack

See css-namespacing-loader.

License

MIT