css-split

css-split

High performance css split package, support split css into different parts by selectors number.

features:

• 10+ times faster than postcss css split
• split css into parts
• count css selectors number

Performance

Execute npm run perf to run performance test:

> css-split@1.1.0 perf /Users/zoujie.wzj/git/css-split
> node perf/index.js

******************* START POSTCSS CSS SPLIT *******************
> write css-split/perf/output/part0-postcss-split.css: 123290 Byte (1000)
> write css-split/perf/output/part1-postcss-split.css: 91555 Byte (991)
> write css-split/perf/output/part2-postcss-split.css: 105142 Byte (1000)
> write css-split/perf/output/part3-postcss-split.css: 105242 Byte (1000)
> write css-split/perf/output/part4-postcss-split.css: 107561 Byte (988)

postcss-split: 1016.641ms

******************* START FAST CSS SPLIT *******************
> write css-split/perf/output/part0-css-split.css: 123226 Byte (1000)
> write css-split/perf/output/part1-css-split.css: 91619 Byte (992)
> write css-split/perf/output/part2-css-split.css: 105142 Byte (1000)
> write css-split/perf/output/part3-css-split.css: 105242 Byte (1000)
> write css-split/perf/output/part4-css-split.css: 107561 Byte (988)

fast-css-split: 35.537ms

Usage

Split css by selectors number:

const split = require('css-split')

const css = `
// some css content
@charset "UTF-8";
.ui-warp .ui-title-warp {
  margin: 20px 0 10px;
}

.ui-warp .ui-title-cont,
.ui-warp .ui-title-cont x {
  font-size: 20px;
}

.ui-warp .ui-title-cont a {
  font-size: 14px;
  margin-left: 10px;
}

.ui-warp .ui-task-desc .add-row-btn {
  margin-left: 10px;
}

//......
`

let parts = split(css, 2)
for (let part of parts) {
  console.log('count:', part.count) // selectors number
  console.log(part.content) // split content
}

Also you can count selectors number of css:

const split = require('css-split')

const css = `
// some css content
@charset "UTF-8";
.ui-warp .ui-title-warp {
  margin: 20px 0 10px;
}

.ui-warp .ui-title-cont,
.ui-warp .ui-title-cont x {
  font-size: 20px;
}
`
// count = 3
let count = split.count(css)

API

split(content, size)

• content, {String}, css content
• size, {Number}, selectors number to split

split content by size, and return the parts Array:

[{
  id: 0,
  count: 111,
  from: 0,
  to: 1212,
  content: 'split css rules ...'
}, ...]

split.count(content)

• content, {String}, css content

count all the selectors number of content, and return a Number

LICENSE

MIT