How to use the csso.walk function in csso

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 alexjlockwood / ShapeShifter / src / app / scripts / parsers / svgo / svgo.ts View on Github external
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; //  "
        return (declarationAScore - declarationBScore);
      });

      // to css
      for (var mergedDeclarationsSortedIndex in mergedDeclarationsSorted) {
        var declaration = mergedDeclarationsSorted[mergedDeclarationsSortedIndex];
        newInlineCssAst.declarations.insert(declaration);
      }
      var newCss = csso.translate(newInlineCssAst);
</style>
github alexjlockwood / ShapeShifter / src / app / scripts / parsers / svgo / svgo.ts View on Github external
continue;
    }
    var cssStr = styleEl.content[0].text || styleEl.content[0].cdata || [];

    // collect <style>s and their css ast
    var cssAst = csso.parse(cssStr, { context: 'stylesheet' });
    styleItems.push({
      styleEl: styleEl,
      cssAst: cssAst
    });

    // collect css selectors and their containing ruleset
    var curAtruleExpNode = null,
      curPseudoClassItem = null,
      curPseudoClassList = null;
    csso.walk(cssAst, function (node, item, list) {

      // media query blocks
      // "look-behind the SimpleSelector", AtruleExpression node comes _before_ the affected SimpleSelector
      if (node.type === 'AtruleExpression') { // marks the beginning of an Atrule
        curAtruleExpNode = node;
      }
      // "look-ahead the SimpleSelector", Atrule node comes _after_ the affected SimpleSelector
      if (node.type === 'Atrule') { // marks the end of an Atrule
        curAtruleExpNode = null;
      }

      // Pseudo classes
      // "look-behind the SimpleSelector", PseudoClass node comes _before_ the affected SimpleSelector
      if (node.type === 'PseudoClass') {
        curPseudoClassItem = item;
        curPseudoClassList = list;</style>
github alexjlockwood / ShapeShifter / src / app / scripts / parsers / svgo / svgo.ts View on Github external
}
      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; //  "
        return (declarationAScore - declarationBScore);
      });

      // to css
      for (var mergedDeclarationsSortedIndex in mergedDeclarationsSorted) {
        var declaration = mergedDeclarationsSorted[mergedDeclarationsSortedIndex];
        newInlineCssAst.declarations.insert(declaration);
      }
      var newCss = csso.translate(newInlineCssAst);

      elInlineStyleAttr.value = newCss;</style>
github alexjlockwood / ShapeShifter / src / app / scripts / parsers / svgo / svgo.ts View on Github external
elInlineStyleAttr.value = newCss;
      selectedEl.addAttr(elInlineStyleAttr);
    }

    if (removeMatchedSelectors &amp;&amp; selectedEls !== null &amp;&amp; selectedEls.length &gt; 0) {
      // clean up matching simple selectors if option removeMatchedSelectors is enabled
      selectorItem.rulesetNode.selector.selectors.remove(selectorItem.simpleSelectorItem);
    }
  }

  var styleItemIndex: any = 0,
    styleItem: any = {};
  for (styleItemIndex in styleItems) {
    styleItem = styleItems[styleItemIndex];

    csso.walk(styleItem.cssAst, function (node, item, list) {
      // clean up 

csso

CSS minifier with structural optimisations

MIT
Latest version published 2 years ago

Package Health Score

79 / 100
Full package analysis