Parse native CSS nesting in plain CSS

[nex3]

• Proposal
• Dart Sass (Add support for nesting in plain CSS dart-sass#2198)
• Tests (Add specs for plain CSS nesting sass-spec#1963)
• Documentation is probably not necessary, since this is covered by the general expectation that plain CSS parsing supports all plain CSS features
• Update canonical spec (Flush plain CSS nesting changes to the spec #3841)

---

Although we're preserving Sass's current nesting behavior for now (per #3030), we can support native CSS nesting when parsing plain CSS. We shouldn't do any resolution here, just pass it through as-is.

[nex3]

Proposal is out, since this is a low-risk subset of plain CSS nesting support I'll give this two weeks for public comment.

[flachware]

I appreciate the efforts to bring native nesting to Sass. Please clarify, do I understand correctly that this means that all features of Sass are available in .css files, except for Sass’ nesting?

[nex3]

No, no Sass features are available in .css files. They are parsed strictly as plain CSS. See https://sass-lang.com/documentation/at-rules/use#loading-css for details.

[flachware]

Pity, so it’s either Sass or native nesting. But thanks for clarifying.

[ggedde]

@nex3 I am a little confused as to how this will work. Sorry the documentation is a bit hard to understand. I just tested using @use with a plain .css file, but nesting does not work as it gives an error. Is there no way to currently import an plain .css file and leave it exactly as the way it is and ignore all errors? Is there any error suppression setting, etc? Or are you saying that we will have to wait for that?

I guess I can just run some sort of npm package/command after sass parse to add my plain css to the final bundle, etc.

[nex3]

This issue is still open and the checkbox for "Dart Sass" isn't checked, which indicates that this has not yet been implemented.