Every byte counts when creating good user experiences for mobile devices and slow networks. Don't let the browser do unnecessary work. css-bingo finds all extraneous rules and selectors in your CSS, not used in your html, and removes them.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
index.d.ts
index.js
package.json

README.md

css-bingo

Every byte counts when creating good user experiences for mobile devices and slow networks. Don't let the browser do unnecessary work. css-bingo finds all extraneous rules and selectors in your CSS, not used in your html, and removes them.

Build Status NPM Version NSP Status Greenkeeper badge Coverage Status

Install

$ npm install css-bingo

Usage

const cssBingo = require('css-bingo');

const css = '.foo{color:#fff;}.bar{color:#000;}#baz{color:777}';
const html = '<br class="foo" />';

console.log(cssBingo(css, html));
// .foo{color:#fff;}

There are no options.

Selectors

Supported

Rules with supported selectors will be removed when the selector is not found in the provided html.

Selector Example
* *
.class .foo
.class.class .foo.bar
#id #baz
#id.class #baz.foo
element p
element.class p.foo
element,element div, p
element element div p
element>element div > p
element+element div + p
element~element p ~ ul

class names in both the class and the data-class attribute of html elements will be used.

<html>
    <body>
        <h1 class="foo" data-class="bar">Heading 1</h1>
    </body>
</html>

Unsupported

Element attributes, pseudo classes and pseudo elements of selectors are ignored when matching elements to selectors.

Selector Example
[attribute] [target]
[attribute=value] [target=_blank]
[attribute~=value] [title~=flower]
[attribute|=value] [lang
[attribute^=value] a[href^="https"]
[attribute$=value] a[href$=".pdf"]
[attribute*=value] a[href*="w3schools"]
:active a:active
::after p::after
::before p::before
:checked input:checked
:disabled input:disabled
:empty p:empty
:enabled input:enabled
:first-child p:first-child
::first-letter p::first-letter
::first-line p::first-line
:first-of-type p:first-of-type
:focus input:focus
:hover a:hover
:in-range input:in-range
:invalid input:invalid
:lang(language) p:lang(it)
:last-child p:last-child
:last-of-type p:last-of-type
:link a:link
:not(selector) :not(p)
:nth-child(n) p:nth-child(2)
:nth-last-child(n) p:nth-last-child(2)
:nth-last-of-type(n) p:nth-last-of-type(2)
:nth-of-type(n) p:nth-of-type(2)
:only-of-type p:only-of-type
:only-child p:only-child
:optional input:optional
:out-of-range input:out-of-range
:read-only input:read-only
:read-write input:read-write
:required input:required
:root :root
::selection ::selection
:target #news:target
:valid input:valid
:visited a:visited

element-attributes

Element Attributes are ignored.

css html output
input[type=text]{color:#c00;} <input type="text"/> input[type=text]{color:#c00;}
input[type=text]{color:#c00;} <input type="password"/> input[type=text]{color:#c00;}
input[type=text]{color:#c00;} <button></button>

pseudo-classes

Pseudo Classes are ignored.

css html output
button:hover{color:#c00;} <button></button> button:hover{color:#c00;}
button:hover{color:#c00;} <input />

pseudo-elements

Pseudo Elements are ignored.

css html output
p::first-letter{color:#c00;} <p>foo bar</p> p::first-letter{color:#c00;}
p::first-letter{color:#c00;} <p></p> p::first-letter{color:#c00;}
p::first-letter{color:#c00;} <ul><li>foo></li><li>bar</li></ul>

Performance

1000 test runs on a 2.7 GHz Intel Core i5 MacBook Pro (early 2015) using unprocessed css and html from debitoor.

Library Duration
css-bingo 65s
purify-css 118s

Background

We are using css-bingo in nocms that we use to build our static websites @debitoor.

There are 5-10 people working on our websites at any given time during the work day and each of them submit pull-requests that are then built by our build agents. While pull requests can be built in parallel, merges to master can not. It is therefore important that we have a fast and stable build process.

I built css-bingo because none of the existing libraries that I could find had the accuracy and performance that we needed.

Contributing

Pull-requests are welcome. Check the issue list for something to do, or submit your own ideas. Performance improvements and bugfixes are always welcome.

Clone repository:

$ git clone git@github.com:jonatanpedersen/css-bingo.git

Install dependencies:

$ npm install

Test

mocha is used to describe and run tests.

Run tests:

$ npm test

Functional tests are described in ./test/tests.json.

Debugging

debug is used with the namespace css-bingo. Enable debugging by setting the DEBUG environment variable DEBUG=css-bingo.

Sat, 04 Feb 2017 22:24:42 GMT css-bingo removed rule: { type: 'rule', selectors: [], declarations: [ { type: 'declaration', property: 'color', value: 'red', position: Position { start: { line: 1, column: 22 }, end: { line: 1, column: 31 }, source: undefined } } ], position: Position { start: { line: 1, column: 17 }, end: { line: 1, column: 33 }, source: undefined } }

Coverage

istanbul and mocha are used to capture coverage data.

Run coverage:

$ npm run cover

Coverage data is written to ./coverage/ and a html report is written to ./coverage/lcov-report/index.html.

Continuous Integration

All pull requests and commits are built for the latest versions of node 4, 5, 6 and 7 by travis-ci, and coverage is reported to coveralls.io.

Licence

The MIT License (MIT)

Copyright (c) 2017 Jonatan Pedersen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.