How to replace a node?

[joelmoss]

I have this CSS:

body {
  @mixin container;
  color: red;
}

And want to replace the @mixin container; line with additional CSS. For example:

font-size: 12px;
a {
  color: pink;
}

My output should be

body {
  font-size: 12px;
  color: red;
  a {
    color: pink;
  }
}

So in my middleware, I can check for the @mixin type:

if (element.type === '@mixin') {
  // ??
}

but how to replace the node with the above CSS?

thx

[thysultan]

You can do this in multiple ways depending on the use case the simplest case being to just return a string from the middleware, other cases involve observing the parent/sibling nodes and serialising output that you return based on that, others include mutating the AST directly... the default middleware /src/Middleware.js have examples.

Closing the issue: if possible we can continue this discussion on the Discussions section.