为PostCSS中的所有直接后代生成规则

debugcn 发表于 Dev

马特

我想创建一个PostCSS插件，在这里我可以为所有直接后代生成一个新规则。

例如，我想生成规则：

div > * {
   color: black;
}

对于所有人divs来说display: block。

我没有找到一个很好的例子来做到这一点。

module.exports = () => {
  let skipped = Symbol("isSkipped"); // skipped flag
  let counter = Symbol("skippedCounter"); // counter for test "isSkipped" optimization

  function generateRule(decl) {
    let rules = decl.parent;
    rules[counter] = Number.isInteger(rules[counter]) ? rules[counter] : 0;

    if (!rules[skipped]) {
      if (decl.value === "block") {
        
        // generate a new rule here

        rules[skipped] = true;
        rules[counter]++;
      }
    }
  }

  return {
    postcssPlugin: "postcss-example-plugin",
    Declaration: {
      display: (decl) => generateRule(decl),
    },
  };
};
module.exports.postcss = true;

直流凋零

我不确定您要寻找的是哪一部分，因此，如果这不能解决您的问题，请随时进行澄清，我将更新答复。

这是一些我认为可以满足您需求的代码-尽管大多数情况下您已经编写了这些代码而没有进行优化：

module.exports = {
  postcssPlugin: "add-rule-to-descendants",
  Declaration: {
    // https://postcss.org/api/#declarationprocessor
    display(displayDecl, { Rule, Declaration }) {
      if (displayDecl.value === 'block') {
        // Add the new rule after the parent https://postcss.org/api/#rule-after
        displayDecl.parent.after(
          new Rule({
            selector: `${displayDecl.parent.selector} > *`,
            nodes: [
              new Declaration({ prop: 'color', value: 'black' })
            ]
          })
        );
      }
    }
  }
}

我还在Repl.it https://repl.it/@dcwither/postcss-all-decendants-rule#plugin.js上进行了一些快速测试，为该示例做准备。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。