How to use css-size - 5 common examples
To help you get started, we’ve selected a few css-size examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
linkedin / opticss / test / util / assertSmaller.ts View on Github 
export function debugSize(inputCSS: string, result: CascadeTestResult): Promise {
let testedMarkup = result.testedTemplates[0].testedMarkups[0];
let inputHtml = testedMarkup.originalBody;
let optimizedHtml = Promise.resolve({css: testedMarkup.optimizedBody});
const optimizedCss = Promise.resolve({css: result.optimization.output.content.toString()});
let templatePromise = cssSize.table(inputHtml, {}, () => optimizedHtml).then((table) => {
console.log("Markup");
console.log(table);
});
let cssPromise = cssSize.table(inputCSS, {}, () => optimizedCss).then((table) => {
console.log("Styles");
console.log(table);
});
return Promise.all([cssPromise, templatePromise]).then(() => {});
}export function debugSize(inputCSS: string, result: CascadeTestResult): Promise {
let testedMarkup = result.testedTemplates[0].testedMarkups[0];
let inputHtml = testedMarkup.originalBody;
let optimizedHtml = Promise.resolve({css: testedMarkup.optimizedBody});
const optimizedCss = Promise.resolve({css: result.optimization.output.content.toString()});
let templatePromise = cssSize.table(inputHtml, {}, () => optimizedHtml).then((table) => {
console.log("Markup");
console.log(table);
});
let cssPromise = cssSize.table(inputCSS, {}, () => optimizedCss).then((table) => {
console.log("Styles");
console.log(table);
});
return Promise.all([cssPromise, templatePromise]).then(() => {});
}export function assertSmaller(inputCSS: string, result: CascadeTestResult, assertions?: DeltaAssertions): Promise {
let testedMarkup = result.testedTemplates[0].testedMarkups[0];
let inputHtml = testedMarkup.originalBody;
let optimizedHtml = Promise.resolve({css: testedMarkup.optimizedBody});
const optimizedCss = Promise.resolve({css: result.optimization.output.content.toString()});
let templatePromise = cssSize.numeric(inputHtml, {}, () => optimizedHtml);
let cssPromise = cssSize.numeric(inputCSS, {}, () => optimizedCss);
return Promise.all([cssPromise, templatePromise]).then(([cssDelta, templateDelta]) => {
assertDelta("uncompressed", cssDelta, templateDelta, assertions);
assertDelta("gzip", cssDelta, templateDelta, assertions);
assertDelta("brotli", cssDelta, templateDelta, assertions);
});
}export function assertSmaller(inputCSS: string, result: CascadeTestResult, assertions?: DeltaAssertions): Promise {
let testedMarkup = result.testedTemplates[0].testedMarkups[0];
let inputHtml = testedMarkup.originalBody;
let optimizedHtml = Promise.resolve({css: testedMarkup.optimizedBody});
const optimizedCss = Promise.resolve({css: result.optimization.output.content.toString()});
let templatePromise = cssSize.numeric(inputHtml, {}, () => optimizedHtml);
let cssPromise = cssSize.numeric(inputCSS, {}, () => optimizedCss);
return Promise.all([cssPromise, templatePromise]).then(([cssDelta, templateDelta]) => {
assertDelta("uncompressed", cssDelta, templateDelta, assertions);
assertDelta("gzip", cssDelta, templateDelta, assertions);
assertDelta("brotli", cssDelta, templateDelta, assertions);
});
}});
} catch (e) {
console.error(e);
throw e;
}
};
});
var input = fs.readFileSync(process.argv[2])
var compactorOpts = {
useBrotliDictionary: false
}
cssSize.table(input, compactorOpts, function(css, opts) {
return postcss([
unprefix,
removePrefixes,
//shorthandExpand,
compactor(compactorOpts),
autoprefixer({browsers: "last 2 versions"})
]).process(css).then(function(result) {
fs.writeFileSync("min.css", result.css);
return result;
});
}).then(function(result) {
console.log(result);
});css-size
Compare the compressed and uncompressed sizes of a CSS file before and after processing.
