How to use the css-tree.walkRules function in css-tree

To help you get started, we’ve selected a few css-tree 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 openstax / css-coverage.js / src / runCoverage.js View on Github external
function prepare (cssFile, ignoreDeclarations) {
  const cssContent = fs.readFileSync(cssFile, 'utf8')

  let ast
  try {
    ast = cssTree.parse(cssContent, { filename: cssFile, positions: true })
  } catch (e) {
    // CssSyntaxError
    console.error('CssSyntaxError: ' + e.message + ' @ ' + e.line + ':' + e.column)
    throw e
  }

  const cssRules = []
  const cssDeclarations = {} // so it is serializable to the browser

  cssTree.walkRules(ast, (rule) => {
    if (rule.type === 'Atrule') {
      // ignore
    } else if (rule.type === 'Rule') {
      const converted = rule.prelude.children.map((selector) => {
        rule.block.children.each(declaration => {
          if (ignoreDeclarations && ignoreDeclarations.indexOf(declaration.property.toLowerCase()) >= 0) {
            return // skip because it is ignored
          }
          // Append to a list of locations
          const key = cssTree.translate(declaration)
          let locs = cssDeclarations[key]
          locs = locs || []
          locs.push(declaration.loc)
          cssDeclarations[key] = locs
        })
        return cssTree.translate(selector)
github openstax / css-coverage.js / src / runCoverage.js View on Github external
if (sourceMapConsumer) {
      // From https://github.com/mozilla/source-map#sourcemapconsumerprototypeoriginalpositionforgeneratedposition
      // Could have been {line: rule.position.start.line, column: rule.positoin.start.column}
      const startInfo = getStartInfo(origStart)
      const endInfo = getStartInfoOrNull(origEnd) || startInfo
      addCoverageRaw(startInfo.source, count, startInfo.line, endInfo.line, startInfo.column, endInfo.column)
    } else {
      // No sourceMap available
      const startLine = origStart.line
      const endLine = startLine // Just do the selector (startLine)
      addCoverageRaw(cssFile, count, startLine, endLine, origStart.column, origStart.column)
    }
  }

  let i = -1
  cssTree.walkRules(ast, (rule, item, list) => {
    if (rule.type !== 'Rule') {
      return // Skip AtRules
    }

    i += 1

    const count = coverageOutput[i][0]

    // From https://github.com/mozilla/source-map#sourcemapconsumerprototypeoriginalpositionforgeneratedposition
    // Could have been {line: rule.position.start.line, column: rule.positoin.start.column}
    const origStart = rule.loc.start
    const origEnd = rule.loc.end

    addCoverage(count, origStart, origEnd)
  })
github alexjlockwood / ShapeShifter / src / app / scripts / svgo / plugins / inlineStyles.ts View on Github external
selectedEl.style.setProperty(
          styleDeclaration.name,
          styleDeclaration.value,
          styleDeclaration.priority,
        );
      });
    }

    if (opts.removeMatchedSelectors && selectedEls !== null && selectedEls.length > 0) {
      // clean up matching simple selectors if option removeMatchedSelectors is enabled
      selector.rule.selector.children.remove(selector.item);
    }
  }

  for (var style of styles) {
    csstree.walkRules(style.cssAst, function(node, item, list) {
      // clean up 
github alexjlockwood / ShapeShifter / src / app / scripts / svgo / lib / css-tools.ts View on Github external
export function flattenToSelectors(cssAst) {
  var selectors = [];

  csstree.walkRules(cssAst, function(node) {
    if (node.type !== 'Rule') {
      return;
    }

    var atrule = this.atrule;
    var rule = node;

    node.selector.children.each(function(selectorNode, selectorItem) {
      var selector = {
        item: selectorItem,
        atrule: atrule,
        rule: rule,
        pseudos: [],
      };

      selectorNode.children.each(function(selectorChildNode, selectorChildItem, selectorChildList) {