Package Exports

css-split

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-split) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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