Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
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://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 variablevar 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.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
The npm package analyze-css receives a total of 2,005 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 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.