Doesn't work with postcss-preset-env

[JohnAlbin]

If I configure PostCSS to run postcss-mixins before postcss-preset-env and I define a mixin that uses syntax that needs to be transformed by postcss-preset-env, I expect the mixin's output to be processed by later plugins properly.

But right now I get the raw mixin definition printed into my output CSS without the mixin definition being altered by later plugins.

If I have a stylesheet that defines a mixin like this:

@define-mixin testMixin {
  font-weight: bold;

  &:hover {
    color: blue;
  }

  @media (min-width: 1280px) {
    & {
      font-size: 20px;
    }
  }
}

.usage {
  @mixin testMixin;

  &:focus {
    color: green;
  }

  @media (min-width: 1280px) {
    font-size: 40px;
  }
}

The output has invalid CSS where the mixin is used, while the rest of the file is correct:

.usage {
  font-weight: bold;
  &:hover {
    color: blue;
  }
  @media (min-width: 1280px) {
    & {
      font-size: 20px;
    }
  }
}

.usage:focus {
  color: green;
}

@media (min-width: 1280px) {
  .usage {
    font-size: 40px
  }
}

But I expect the correct output:

.usage {
  font-weight: bold;
}

.usage:hover {
  color: blue;
}

@media (min-width: 1280px) {
  .usage {
    font-size: 20px;
  }
}

.usage:focus {
  color: green;
}

@media (min-width: 1280px) {
  .usage {
    font-size: 40px
  }
}

This is my postcss.config.js:

module.exports = {
  // The order of plugins is important.
  plugins: {
    'postcss-mixins': {},
    // Add support for experimental (stage 1) and higher W3 specs.
    // See https://cssdb.org/
    'postcss-preset-env': {
      stage: 1,
    },
  },
};

[ai]

You need to open the issue in postcss-nesting. It should use PostCSS 8 events to transform nested rules after every CSS AST change (seems like right now it transforms it only once).

[JohnAlbin]

I searched the issue queue for closed postcss-preset-env issues, but I didn't think to search for a postcss-nesting issue.

Sorry about that! Thanks for the quick reply.