Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

feat(core): apply CSS cascade layer (@layer) rules

Abierto
  • ¿Algo no está bien?
#11,461 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, typescript
Área
frontend, web-dev

Línea de trabajo

Start with ui/styling/style-scope.ts and css/css-tree-parser.ts, then trace RuleSet and compareSelectors to understand how rules are populated and ordered. Review the existing unit tests and the proposed behavior for named, dotted, anonymous, and imported layers. Done means supported @layer rules retain their names and cascade order without changing the explicitly out-of-scope at-rules.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
25.7k
Forks
1.7k
Merge medio
2 d 19 h
PR fusionados (30 d)
27

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de NativeScript/NativeScript

Todos los issues de NativeScript/NativeScript

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.