Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
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
The npm package analyze-css receives a total of 5,333 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.