Skip to content

Keep @charset and ICSS rules outside the assigned layer - #12

Open
jasikpark wants to merge 2 commits into
mainfrom
b-root-only-nodes
Open

jasikpark wants to merge 2 commits into
mainfrom
b-root-only-nodes

Conversation

@jasikpark

Copy link
Copy Markdown
Collaborator

First slice of #11.

The plugin wraps every root node in the layer, which breaks two kinds of rule that only work at the top level of a stylesheet:

  • @charset has to be the first statement in the file.
  • css-loader / icss-utils only read :import and :export at the root, so values exported from a CSS Module (e.g. Sass design tokens) silently disappear once they're inside @layer.

These are now hoisted ahead of the layer wrapper. Neither emits styles, so moving them doesn't change the cascade, and files without them produce identical output.

Not in this PR (each its own follow-up from #11):

  • @import: moving it outside the layer would make the imported CSS unlayered (higher priority than every layer), so it should become @import "x" layer(<name>) instead.
  • Not nesting layers the file already declares.
  • A layerOrder option.

@charset must be the first statement in a stylesheet, and css-loader /
icss-utils only read :import and :export at the root, so wrapping them in
the layer broke the charset and silently dropped CSS Module exports.

Refs #11

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@jasikpark
jasikpark marked this pull request as ready for review October 28, 2026 21:17
@jasikpark
jasikpark requested review from johnmaguire and removed request for johnmaguire October 28, 2026 21:18
johnmaguire
johnmaguire previously approved these changes Oct 29, 2026

@johnmaguire johnmaguire left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, one small inline note.

Non-blocking: @namespace has the same top-level-only rule and is still wrapped in the layer (invalid there). It could be one more line in the same filter, or a follow-up under #11 if you'd rather keep this PR narrow.

Comment thread src/index.ts Resolved
@namespace is only valid at the top level, so wrapping it in the layer
invalidated it. A hoisted @charset kept its raws.before, so a leading
comment in the source left a newline ahead of it and browsers ignored it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants