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.

github basisjs / basisjs-tools / lib / build / css / pack.js View on Github external
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();
github basisjs / basisjs-tools / lib / build / css / pack.js View on Github external
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';
github popeindustries / inline-source / lib / css.js View on Github external
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();
  });
};
github zhaoqize / puppeteer-api-zh_CN / build.js View on Github external
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');
  });
github devinit / datahub / tools / criticalCss / index.js View on Github external
formatStyles: (styles: string): Promise => {
      return minify(styles).css; // TODO filter out mapbox styles automatically
    },
    extractStyles: true,
github basisjs / basisjs / tools / build / build.js View on Github external
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)
github montagejs / mop / lib / transform / css.js View on Github external
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)
github alexjlockwood / ShapeShifter / src / app / scripts / parsers / svgo / svgo.ts View on Github external
// 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>
github alexjlockwood / ShapeShifter / src / app / scripts / parsers / svgo / svgo.ts View on Github external
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>

csso

CSS minifier with structural optimisations

MIT
Latest version published 2 years ago

Package Health Score

76 / 100
Full package analysis