Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
analyze-css
Advanced tools
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
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://jigsaw.w3.org/css-validator/style/base.css
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
.
var analyzer = require('analyze-css');
new analyzer('.foo {margin: 0 !important}', function(err, results) {
console.error(err);
console.log(results); // example? see below
});
// options can be provided
var opts = {
'noOffenders': true
};
new analyzer('.foo {margin: 0 !important}', opts, function(err, results) {
console.error(err);
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.8.0",
"metrics": {
"base64Length": 11332,
"redundantBodySelectors": 0,
"redundantChildNodesSelectors": 1,
"colors": 106,
"comments": 1,
"commentsLength": 68,
"complexSelectors": 37,
"complexSelectorsByAttribute": 3,
"duplicatedSelectors": 7,
"duplicatedProperties": 24,
"emptyRules": 0,
"expressions": 0,
"oldIEFixes": 51,
"imports": 0,
"importants": 3,
"mediaQueries": 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,
"universalSelectors": 5,
"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
)[class$="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 > *
).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
The npm package analyze-css receives a total of 4,090 weekly downloads. As such, analyze-css popularity was classified as popular.
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 0 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.