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.
css-size
Advanced tools
Readme
Compare the size of a CSS file after processing it to the original.
The functionality can be easily replaced by minifying the file and dividing the minified file size by the unminified file size.
Results are shown for uncompressed as well as when compressed using gzip and brotli. For most users, one of the compressed sizes will best represent what will be served to a client in production. It also provides a better comparison between the minified and the original CSS.
CSS is expected to processed by postcss
plugins but can be used with
any processing code that returns a promise that resolves to an object
with a css
property.
With npm do:
npm install css-size --save
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var nano = require('cssnano');
var css = 'h1 {\n color: black;\n}\n';
var nanoOpts = {};
var cssSize = require("css-size");
function process(css, options) {
return postcss([ autoprefixer, nano(options) ]).process(css);
}
cssSize(css, nanoOpts, process).then(function (results) {
console.log(results);
/*
{ uncompressed:
{ original: '23 B',
processed: '14 B',
difference: '9 B',
percent: '60.87%' },
gzip:
{ original: '43 B',
processed: '34 B',
difference: '9 B',
percent: '79.07%' },
brotli:
{ original: '27 B',
processed: '16 B',
difference: '11 B',
percent: '59.26%' } }
*/
});
cssSize.table(css, nanoOpts, process).then(function (table) {
console.log(table);
/*
┌────────────┬──────────────┬────────┬────────┐
│ │ Uncompressed │ Gzip │ Brotli │
├────────────┼──────────────┼────────┼────────┤
│ Original │ 23 B │ 43 B │ 27 B │
├────────────┼──────────────┼────────┼────────┤
│ Processed │ 14 B │ 34 B │ 16 B │
├────────────┼──────────────┼────────┼────────┤
│ Difference │ 9 B │ 9 B │ 11 B │
├────────────┼──────────────┼────────┼────────┤
│ Percent │ 60.87% │ 79.07% │ 59.26% │
└────────────┴──────────────┴────────┴────────┘
*/
});
cssSize.numeric(css, nanoOpts, process).then(function (results) {
console.log(results);
/*
{
uncompressed: {
original: 23,
processed: 14,
difference: 9,
percent: 0.6087
},
gzip: {
original: 43,
processed: 34,
difference: 9,
percent: 0.7907
},
brotli: {
original: 27,
processed: 16,
difference: 11,
percent: 0.5926
}
}
*/
});
cssSize(input, options, processor)
Pass input
of CSS to receive an object with information about the
original & minified sizes (uncompressed, gzipped, and brotli'd), plus
difference and percentage results. The options
object is passed
through to the processor
should you wish to compare sizes using
different options than the defaults.
cssSize.numeric(input, options, processor)
Exactly like cssSize(...)
except the results are returned as numbers
instead of preformatted strings. In numeric mode, the percentage
value is a
fraction (rounded to 4 significant digits), instead of being scaled to 100%
.
cssSize.table(input, options, processor)
Use the table method instead to receive the results as a formatted table.
Type: string
, buffer
Type: object
Type: function
The processor accepts as arguments the input and options and returns a
Promise that resolves to an object with a css
property containing the
processed css output.
See the available options with:
$ css-size --help
js-size
: Display the size of a JS file.See CONTRIBUTORS.md.
MIT © Ben Briggs
FAQs
Compare the compressed and uncompressed sizes of a CSS file before and after processing.
The npm package css-size receives a total of 56 weekly downloads. As such, css-size popularity was classified as not popular.
We found that css-size demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 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
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.