Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
analyze-css
Advanced tools
Readme
CSS selectors complexity and performance analyzer. analyze-css is built as a set of rules bound to events fired by CSS parser. Each rule can generate metrics and add "offenders" with more detailed information (see Usage section for an example).
analyze-css comes as a "binary" for command-line and as CommonJS module. Run the following to install them globally:
npm install --global analyze-css
or to install from GitHub's repository:
npm install --global @macbre/analyze-css
You can use analyze-css "binary" to analyze local CSS files or remote CSS assets:
$ analyze-css --file examples/elecena.css
$ analyze-css --url http://s3.macbre.net/analyze-css/propertyResets.css
$ analyze-css --url https://s3.macbre.net/analyze-css/propertyResets.css --ignore-ssl-errors
You can provide CSS via stdin as well (notice the dash: -
):
$ echo ".foo {margin: 0 \!important}" | analyze-css -
This will emit JSON formatted results on stdout
. Use --pretty
(or -p
shortcut) option to make the output readable for human beings.
Basic HTTP authentication can be provided through the options --auth-user
and --auth-pass
.
HTTP proxy (e.g. http://localhost:8080
) can be provided via:
--proxy
or -x
optionHTTP_PROXY
env variablenpm i --save analyze-css
const analyze = require('analyze-css');
(async() => {
const results = await analyze('.foo {margin: 0 !important}');
console.log(results); // example? see below
})();
// options can be provided
const opts = {
'noOffenders': true
};
(async() => {
const results = await analyze('.foo {margin: 0 !important}', opts);
console.log(results); // example? see below
})();
Created by @DeuxHuitHuit
$ npm i grunt-contrib-analyze-css
It uses configurable threshold and compares the analyze-css result with it.
{
"generator": "analyze-css v0.10.2",
"metrics": {
"base64Length": 11332,
"redundantBodySelectors": 0,
"redundantChildNodesSelectors": 1,
"colors": 106,
"comments": 1,
"commentsLength": 68,
"complexSelectors": 37,
"duplicatedSelectors": 7,
"duplicatedProperties": 24,
"emptyRules": 0,
"expressions": 0,
"oldIEFixes": 51,
"imports": 0,
"importants": 3,
"mediaQueries": 0,
"notMinified": 0,
"multiClassesSelectors": 74,
"parsingErrors": 0,
"oldPropertyPrefixes": 79,
"propertyResets": 0,
"qualifiedSelectors": 28,
"specificityIdAvg": 0.04,
"specificityIdTotal": 25,
"specificityClassAvg": 1.27,
"specificityClassTotal": 904,
"specificityTagAvg": 0.79,
"specificityTagTotal": 562,
"selectors": 712,
"selectorLengthAvg": 1.5722460658082975,
"selectorsByAttribute": 92,
"selectorsByClass": 600,
"selectorsById": 25,
"selectorsByPseudo": 167,
"selectorsByTag": 533,
"length": 55173,
"rules": 433,
"declarations": 1288
},
"offenders": {
"importants": [
".foo {margin: 0 !important}"
]
}
}
body .foo
, section body h2
, but not body > h1
)ul li
, table tr
)header ul li .foo
).foo { }
)expression( document.body.clientWidth > 600 ? "600px" : "auto" )
)* html .foo {}
and .foo { *zoom: 1 }
, read more)@import
rules!important
@media screen and (min-width: 1370px)
)span.foo.bar
)--moz-border-radius
)header#nav
, .foo#bar
, h1.title
).foo, .bar { color: red }
is counted as two selectors - .foo
and .bar
).foo .bar, #test div > span { color: red }
will be set as 2.5).foo[value=bar]
):hover
).foo, .bar { color: red }
is counted as one rule).foo, .bar { color: red }
is counted as one declaration - color: red
)Running tests and linting the code:
$ npm test && npm run-script lint
Turning on debug mode (i.e. verbose logging to stderr via debug module):
$ DEBUG=analyze-css* analyze-css ...
FAQs
CSS selectors complexity and performance analyzer
We found that analyze-css demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).