css-bingo
v1.4.6
Published
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.
Downloads
33
Readme
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.
Install
$ npm install css-bingoUsage
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|=en] | | [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 [email protected]:jonatanpedersen/css-bingo.gitInstall dependencies:
$ npm installTest
mocha is used to describe and run tests.
Run tests:
$ npm testFunctional 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 coverCoverage 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.