How to use csso - 10 common examples
To help you get started, we’ve selected a few csso 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.
basisjs / basisjs-tools / lib / build / css / pack.js View on Github 
flow.css.packages.forEach(function(file){
fconsole.log(file.relOutputFilename);
// make a copy of ast, as it could has shared parts
// and csso optimizer might corrupt those parts
file.ast = csso.compress(copyAst(file.ast));
});
fconsole.endl();fconsole.start('Process packages');
flow.css.packages.forEach(function(file){
fconsole.log(file.relOutputFilename);
// make a copy of ast, as it could has shared parts
// and csso optimizer might corrupt those parts
file.ast = csso.compress(copyAst(file.ast));
});
fconsole.endl();
fconsole.start('Process style attributes');
for (var i = 0, file; file = flow.files.queue[i]; i++)
if (file.type == 'style-block')
{
fconsole.log(file.relpath);
file.ast = csso.compress(
[{}, 'stylesheet', [{}, 'ruleset', [{}, 'selector', [{}, 'simpleselector', [{}, 'ident', 'rule']]],
file.ast
]])[2][3];
}
fconsole.end();
}).handlerName = '[css] Compress';return new Promise((resolve, reject) => {
if (source.fileContent && !source.content && source.type == 'css') {
try {
source.content = source.compress
? require('csso').minify(source.fileContent).css
: source.fileContent;
// Change tag type
source.tag = 'style';
} catch (err) {
reject(err);
}
}
resolve();
});
};await step('3. generate style.css', async () => {
const csso = require('csso');
const stylePaths = [];
stylePaths.push(...(await globAsync(SRC_PATH, 'ui/**/*.css')));
stylePaths.push(...(await globAsync(SRC_PATH, 'pptr/**/*.css')));
stylePaths.push(...(await globAsync(SRC_PATH, 'third_party/**/*.css')));
const styles = stylePaths.map(stylePath => fs.readFileSync(stylePath, 'utf8'));
const styleContent = '/* THIS FILE IS GENERATED BY build.js */\n\n' + csso.minify(styles.join('\n'), {restructure: false}).css;
fs.writeFileSync(path.join(DST_PATH, 'style.css'), styleContent, 'utf8');
});formatStyles: (styles: string): Promise => {
return minify(styles).css; // TODO filter out mapbox styles automatically
},
extractStyles: true,packCommentToken(' [WARN] Recursion: ' + context.map(relpath).join(' -> ') + ' -> ' + relpath(filename) + ' '),
[{}, 's', '\n\n']
];
}
treeConsole.log('# [OK] ' + relpath(filename));
content = fs.readFileSync(filename, 'utf-8');
context.push(filename);
}
if (context.length)
content = content.replace(/^|\n/g, "$&" + offset);
// parse css into tree
var cssTree = csso.parse(content, 'stylesheet');
// add header
cssTree.splice(2, 0,
[{}, 's', offset],
packCommentToken('\n ' + offset + '* ' + filename + ' content injection\n ' + offset),
[{}, 's', '\n']
);
cssTree.push(
[{}, 's', '\n\n']
);
treeConsole.incDeep();
processCssTree(cssTree, baseURI, context);
treeConsole.decDeep();
if (!isInlineStyle)// collect function rebaseCss(css, file, config) {
// Handle empty CSS files
if (config.noCss || !css.trim()) {
return css;
}
var ast;
try {
ast = CSSO.parse(css);
} catch (exception) {
config.out.warn("CSS parse error: " + file.path);
config.out.warn(exception.message);
return css;
}
var worklist = [ast];
while (worklist.length) {
var node = worklist.pop(), quote;
if (node[0] === "uri") {
var value = node[1], uri;
if (value[0] === "raw") {
uri = value[1];
quote = "";
} else if (value[0] === "string") {
// remove quotes (first and last character)// skip selectors that match more than once if option onlyMatchedOnce is enabled
continue;
}
for (var selectedElIndex in selectedEls) {
var selectedEl = selectedEls[selectedElIndex];
// empty defaults in case there is no style attribute
var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
elInlineStyles = '';
if (selectedEl.hasAttr('style')) {
elInlineStyleAttr = selectedEl.attr('style');
elInlineStyles = elInlineStyleAttr.value;
}
var inlineCssAst = csso.parse(elInlineStyles, { context: 'block' });
// merge element(inline) styles + matching <style> styles
var newInlineCssAst = csso.parse('', { context: 'block' }); // for an empty css ast (in block context)
var mergedDeclarations = [];
var _fetchDeclarations = function (node, item) {
if (node.type === 'Declaration') {
mergedDeclarations.push(item);
}
};
var itemRulesetNodeCloned = csso.clone(selectorItem.rulesetNode);
// clone to prevent leaking declaration references (csso.translate(...))
csso.walk(itemRulesetNodeCloned, _fetchDeclarations);
csso.walk(inlineCssAst, _fetchDeclarations);
// sort by !important(ce)</style>for (var selectedElIndex in selectedEls) {
var selectedEl = selectedEls[selectedElIndex];
// empty defaults in case there is no style attribute
var elInlineStyleAttr = { name: 'style', value: '', prefix: '', local: 'style' },
elInlineStyles = '';
if (selectedEl.hasAttr('style')) {
elInlineStyleAttr = selectedEl.attr('style');
elInlineStyles = elInlineStyleAttr.value;
}
var inlineCssAst = csso.parse(elInlineStyles, { context: 'block' });
// merge element(inline) styles + matching <style> styles
var newInlineCssAst = csso.parse('', { context: 'block' }); // for an empty css ast (in block context)
var mergedDeclarations = [];
var _fetchDeclarations = function (node, item) {
if (node.type === 'Declaration') {
mergedDeclarations.push(item);
}
};
var itemRulesetNodeCloned = csso.clone(selectorItem.rulesetNode);
// clone to prevent leaking declaration references (csso.translate(...))
csso.walk(itemRulesetNodeCloned, _fetchDeclarations);
csso.walk(inlineCssAst, _fetchDeclarations);
// sort by !important(ce)
var mergedDeclarationsSorted = stable(mergedDeclarations, function (declarationA, declarationB) {
var declarationAScore = ~~declarationA.data.value.important, // (cast boolean to number)
declarationBScore = ~~declarationB.data.value.important; // "</style>
