[Feature Request]: Convert CSS rules to nested CSS rules

[tbondwilkinson]

What should be improved?

This would be the reverse operation as something like https://github.com/csstools/postcss-nesting

a, b {
  color: red;
}

a c, a d, b c, b d {
  color: white;
}

Could become

a, b {
  color: red;

  & c, & d {
    color: white;
  }
}

(yes I took their example and reversed it).

Describe the solution you would like

For projects that wanted to reduce their CSS for browsers that supported it, writing nested CSS could reduce the amount of bytes.

There should be some way of statically analyzing CSS selectors and seeing which parts of selectors are duplicated and could be inlined, but even if it works only in some instances, if it had enough byte benefit it would be worth doing.

Possible alternatives

No response

Additional context

This is most useful for authoring formats like Sass which use a different style of nesting. It seems like Sass offering native-nested CSS output is out of scope for their team priorities.

Users who don't write Sass don't typically need this - they could write native CSS nesting and use postcss plugins to transform it to vanilla CSS in browsers that didn't support it.

Are you willing to work on this?

• Yes, I would like to help

[alexander-akait]

Yeah, it is not easy task to handle all possible cases, but I think we can start and do it step by step, feel free to send a PR