How to write a plugin that runs before postcss-nested?

[ZakisM]

Hi, i'm trying to write a plugin that will run before postcss-nested. I want the plugin to find each rule and wrap it like below:

Before:

.item {
    color: red;
}

After:

.item {
  && {
      color: red;
  }
}

I was able to get this working by modifying rule.nodes[0].raws.before and rule.nodes[0].parent.raws.after, however it doesn't seem to be working with postcss-nested as I expect. It inserts the CSS correctly, but it doesn't translate it to:

.item.item.item {
    color: red;
}

Is it because i'm using .raws or could it be because the plugins aren't running in the order I expect?

[ai]

You can use Root event and then root.walkRules().

But it is better to convert .item to .item.item inside your plugin. Preparing CSS before another plugin is a bad practice (what if your user will forget to add anorther plugin?).

[ZakisM]

Thanks for the quick response.

In this case I have tried to do that, but have found it to be much trickier to implement correctly by repeating the names manually. I understand it's better practice, however in this case this will be a private plugin only used by my personal project.

This is the plugin I came up with:

module.exports = (options = {}) => {
    return {
        postcssPlugin: "increase-specificity-plugin",
        Once(root) {
            root.walkRules((rule) => {
                if (rule.parent.type === "root") {
                    const currentBefore = rule.nodes[0].raws.before;
                    rule.nodes[0].raws.before = "\n && {" + currentBefore;
                    rule.nodes[0].parent.raws.after = "\n }\n";
                }
            });
        },
    };
};

Inside my postcss.config.js

const increaseSpecificityPlugin = require("./postcss/increaseSpecificityPlugin");
const postcssNested = require("postcss-nested");
const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
    plugins: [increaseSpecificityPlugin(), postcssNested(), postcssPresetEnv()],
};

However, the result is as below:

.hwRnzKhBNBNaYCYnwPKy {
 && {
    color: red;
 }
}

So it is not running postcss-nested as I expect. Is there another way to achieve this?

[ai]

The problem is in rule.nodes[0].raws.before = "\n && {" + currentBefore.

raws is only for whitespace symbols. You can’t put CSS structure symbols there.

You need a more tricky code instead:

        Once(root, { Rule }) {
            root.walkRules((rule) => {
                if (rule.parent.type === "root") {
                    const nested = new Rule({ selector: '&&' })
                    nested.append(rule.nodes)
                    rule.append(nested)
                }
            });
        },

[ZakisM]

Thanks a lot for your help!

I finally have it working as expected now:

        Once(root) {
            root.walkRules((rule) => {
                if (rule.parent.type === "root") {
                    const parentRule = postcss.rule({ selector: rule.selector });
                    const ruleClone = rule.clone();
                    ruleClone.selector = "&&";
                    parentRule.append(ruleClone);

                    rule.replaceWith(parentRule);
                }
            });
        },