Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
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
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
Unknown package
The npm package analyze-css receives a total of 2,523 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.