@symbiote-native/css-parser 0.5.0 → 0.5.2

package/README.md

@@ -19,7 +19,8 @@ CSS Modules all work identically regardless of source language.
 Not installed directly by an app — every adapter package (`@symbiote-native/react`,
 `@symbiote-native/vue`, `@symbiote-native/svelte`, `@symbiote-native/solid`,
 `@symbiote-native/angular`) already depends on it and re-exports it via its own
-`./metro-css-parser` subpath. Writing a Metro transformer for a new adapter yourself:
+`./metro-css-parser` subpath, so any app scaffolded by `npx @symbiote-native/cli new` already has
+it wired, no separate flag needed. Writing a Metro transformer for a new adapter yourself:
 
 ```bash
 npm install @symbiote-native/css-parser
@@ -52,7 +53,7 @@ import './theme.css'; // plain CSS — registers classes globally, no export
 ```
 
 ```tsx
-<View className="card" style={styles.highlight} /> // React
+<view className="card" style={styles.highlight} /> // React
 ```
 
 ```html
@@ -135,6 +136,10 @@ import {
 - It does not implement Tailwind CSS — that needs whole-project class scanning and JIT utility
   generation, a fundamentally different shape than "one source file reduces to CSS text", and is
   being designed as a separate, future package.
+- It drops a `:active`/`:hover`/`:focus` rule the same as any other pseudo-class — there is no
+  CSS-class route to a pressed look. `Pressable`'s functional `style={({ pressed }) => ...}` prop
+  is the supported way to style a pressed state; the engine resolves it into a separate style slot
+  outside this pipeline.
 - It supports `scoped` / `:global()` / CSS Modules and SCSS/Sass/Less/Stylus preprocessing —
   including Svelte's own `<style>` block (its preprocessor calls this package's
   `compileScopedCss`, the same compile every Vue `<style scoped>` block goes through) — and it does

package/build/lightning/declarations.js

@@ -756,13 +756,9 @@ function declarationToStyleAt(declaration, context, depth) {
         }
         case 'text-shadow':
             return textShadowToStyle(value, context);
-        // A CSS-Modules DIRECTIVE, not a style property — and lightningcss has ALREADY acted on it:
-        // the composed names come back through `exports[...].composes`, which
-        // `metro-css-module/index.ts` walks to flatten a chain. Measured 2026-08-20: it arrives as a
-        // first-class `property: 'composes'`, NOT under `custom` where an unknown name goes, so it fell
-        // through to the PROPERTY_TABLE miss and every author of a WORKING `.module.*` file was told
-        // "unsupported CSS property" on every build. The drop warnings are the only signal that a real
-        // rule died; a channel that cries wolf on working code is the one nobody reads when it matters.
+        // A CSS-Modules DIRECTIVE, not a style property: the composed names come back through
+        // `exports[...].composes`, which `metro-css-module/index.ts` flattens. It arrives as a
+        // first-class `property: 'composes'`, NOT under `custom`, so it must be matched here.
         case 'composes':
             return {};
         default:

package/build/lightning/rules.js

@@ -12,8 +12,8 @@
 // Class names are emitted AS AUTHORED (`card-title` stays `card-title`, plus whatever the scoping
 // rename appended). No camelCase anywhere in this file: normalization is what the trap was made of.
 //
-// Measured 2026-08-20 and the reason this is ONE pass, not two: with `cssModules` on, the visitor
-// still sees the ORIGINAL class names — lightningcss renames AFTER the visitor walk. So the AST
+// The reason this is ONE pass, not two: with `cssModules` on, the visitor still sees the
+// ORIGINAL class names — lightningcss renames AFTER the visitor walk. So the AST
 // gives authored tokens and `exports` gives their renamed spelling, and the renamed CSS text never
 // has to be parsed a second time (which is exactly what `../metro-css-module/index.ts` had to do,
 // and what mangled a scope tail whose base36 hash began with a letter).
@@ -28,10 +28,9 @@ import { selectorsToMatches } from "./selectors.js";
 import { warnOnce } from "../values.js";
 // A conditional at-rule is DROPPED WHOLE, its nested rules with it. There is no media-query engine
 // in React Native, so applying `.responsive` from `@media (min-width: 900px)` would paint it on
-// every phone — worse than not supporting the rule, because it looks supported. The retired text
-// pass dropped these too, but silently: it simply never walked into an at-rule. Measured
-// 2026-08-20: returning `[]` from the at-rule visitor removes it BEFORE the walk descends, so a
-// nested style rule never reaches the collector; without it lightningcss hoists it out.
+// every phone — worse than not supporting the rule, because it looks supported. Returning `[]`
+// from the at-rule visitor removes it BEFORE the walk descends, so a nested style rule never
+// reaches the collector; without it lightningcss hoists it out.
 //
 // `@keyframes` and `@font-face` need no entry here — neither emits a style rule to begin with.
 const CONDITIONAL_AT_RULES = ['media', 'supports', 'container'];

package/build/lightning/selectors.js

@@ -11,7 +11,7 @@
 //   .card[data-x]{…}               -> key `card[dataX]`      a key no element can ever carry
 //   .a.b / .a .b / .a>.b / .a+.b   -> all key `aB`           five selectors, one key, merged
 //
-// (Traps six and seven in `.claude/rules/style-registry-collisions.md`, measured 2026-08-20.)
+// (Traps six and seven in `.claude/rules/style-registry-collisions.md`.)
 //
 // So this module reports what the selector ACTUALLY says and refuses to guess:
 //   - tokens stay AS AUTHORED — `card-title` is `card-title`. Casing is the caller's problem, and
@@ -32,8 +32,7 @@
 // a raw token stream — structurally the same thing `:global(X)` is under that same mode. All three
 // are folded into `deep` here.
 //
-// `:global(X)` arrives in TWO DIFFERENT SHAPES and BOTH are live, so both are handled (measured
-// 2026-08-20, lightningcss 1.32, same CSS through both modes):
+// `:global(X)` arrives in TWO DIFFERENT SHAPES and BOTH are live, so both are handled:
 //
 //   cssModules OFF  {kind:'custom-function', name:'global', arguments:[…raw token stream…]}
 //   cssModules ON   {kind:'global',          selector:[…parsed SelectorComponent[]…]}
@@ -60,11 +59,9 @@ const DROP_EXPLANATION = {
 // `:active` support is OFF, and the selector machinery below is kept intact so one line turns it
 // back on.
 //
-// WHY. The pressed look has a second, better route that did not exist when `:active` landed: a
-// functional `style={({pressed}) => …}`, which every lowering transform specialises into
-// `style` + `activeStyle` at build time (2026-08-23). It reaches the same slot with no pseudo-class
-// machinery, it is what the ecosystem already writes, and it lowers — so the reason `:active`
-// existed, keeping a Pressable lowerable without a state-reading callback, is gone.
+// WHY. The pressed look has a second, better route: a functional `style={({pressed}) => …}`,
+// which the engine resolves into `style` + `activeStyle` (`routeProp`). It reaches the same slot
+// with no pseudo-class machinery and it is what the ecosystem already writes.
 //
 // Keeping BOTH live is what argues against it: they occupy different cascade slots (`activeStyle`
 // replaces the authored style, an `:active` class rule replaces the class style), so an adapter has
@@ -371,13 +368,9 @@ function consumeComponent(builder, component) {
             // depends on for every node at once.
             if (component.kind === STATE_PSEUDO_CLASS) {
                 builder.specificity[1]++;
-                // ...but NOT through a scope boundary. `:deep(.b:active)` already dropped, because a
-                // custom-function payload is a raw token stream this walk re-parses; `.a >>> .b:active`
-                // did NOT, because `>>>` is a real combinator and the walk reaches the pseudo-class
-                // normally. Two spellings of one relation behaving differently is the bug, and the
-                // decision (2026-08-23) is to refuse BOTH: a deep selector reaches into another
-                // component's internals, and the state token is only meaningful on the node whose press
-                // machine owns it — which is exactly the node a deep rule cannot predict.
+                // ...but NOT through a scope boundary. Both `:deep(.b:active)` and `.a >>> .b:active`
+                // refuse: a deep selector reaches into another component's internals, and the state
+                // token is only meaningful on the node whose press machine owns it.
                 if (builder.combinators.includes('deep') ||
                     builder.pending === 'deep') {
                     drop(builder, 'pseudo-class', 'active through a deep combinator');
@@ -452,7 +445,7 @@ export function selectorsToMatches(selectors, filename) {
             // and that is FALSE here — the pressed look is fully supported, by a different route. A
             // warning that misdescribes the cause is worse than none: it sends the reader to the engine.
             if (problem.reason === 'state-pseudo-class') {
-                console.warn(`[@symbiote-native/css-parser] ${filename}: dropped \`:${problem.detail}\` — pseudo-class state is currently disabled in this parser. Use a functional style instead: style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}, which every lowering transform compiles to style + activeStyle.`);
+                console.warn(`[@symbiote-native/css-parser] ${filename}: dropped \`:${problem.detail}\` — pseudo-class state is currently disabled in this parser. Use a functional style instead: style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}, which the engine resolves to style + activeStyle.`);
                 continue;
             }
             console.warn(`[@symbiote-native/css-parser] ${filename}: dropped a rule on \`${problem.detail}\` — ${DROP_EXPLANATION[problem.reason]}, so it can never match in React Native.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/css-parser",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Build-time CSS/SCSS/Less/Stylus compiler for SymbioteNative — compiles stylesheets to React Native style objects, resolved at runtime via a cross-adapter class-name registry.",
   "license": "MIT",
   "repository": {