Current behavior
_populateRules in ui/styling/style-scope.ts only descends into @media at-rules. Any other block at-rule — @layer, @supports, @scope, @container — is silently dropped with its contents.
@layer utilities {
.my-util { color: red; }
}
.my-util never applies. This is already biting the ecosystem: Tailwind v4 output crashes/loops on @layer (NativeScript/tailwind#197), and Panda CSS / Bamboo / UnoCSS all emit cascade layers, so none of the modern build-time atomic-CSS pipelines can feed NativeScript today. Community workarounds flatten @layer at bundler time (e.g. ns-tailwind-vite), which loses the cascade semantics.
Proposal
Apply @layer per CSS Cascade Level 5, scoped to what NativeScript's cascade implements:
- Parse: the css-tree adapter (
css/css-tree-parser.ts) already emits {type: 'layer', rules: [...]} — it just needs to keep the prelude (layer names).
- Order: a document-wide name → ordinal registry; statement form
@layer a, b; pre-declares order, block form registers on first sight, dotted names (a.b) resolve through ancestors, anonymous blocks get unreferenceable names.
- Cascade: each
RuleSet carries a layerPath: number[]; compareSelectors compares layer paths before specificity, with unlayered rules sorting after all layered ones — matching the spec (unlayered author styles beat all layered styles; layer order beats specificity within layers).
@import "x.css" layer(name) nests the imported sheet under the named layer.
Deliberately out of scope: !important layer-order reversal (NS does not implement !important — it warns and strips) and other block at-rules (@supports, @container, @scope), which still need real semantics and are safer left dropped than applied unconditionally.
PR
I have a patch ready on a fork branch with unit tests — will open the PR referencing this issue.