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.
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.
$ npm install css-bingo
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.
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>
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 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 are ignored.
| css | html | output |
|---|---|---|
button:hover{color:#c00;} | <button></button> | button:hover{color:#c00;} |
button:hover{color:#c00;} | <input /> |
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> |
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 |
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.
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
mocha is used to describe and run tests.
Run tests:
$ npm test
Functional tests are described in ./test/tests.json.
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 } }
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.
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.
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.
FAQs
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.
The npm package css-bingo receives a total of 19 weekly downloads. As such, css-bingo popularity was classified as not popular.
We found that css-bingo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.