@symbiote-native/css-parser 0.4.0 → 0.5.0

package/README.md

@@ -16,9 +16,10 @@ CSS Modules all work identically regardless of source language.
 
 ## Install
 
-Not installed directly by an app — each adapter package (`@symbiote-native/react`,
-`@symbiote-native/vue`, `@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:
+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:
 
 ```bash
 npm install @symbiote-native/css-parser
@@ -27,10 +28,11 @@ npm install @symbiote-native/css-parser
 ## Who calls this, and how
 
 **An app never imports this package directly.** It runs only inside a Metro transformer, on the
-Node build machine — never shipped in the app's native JS bundle. Each adapter package
-(`@symbiote-native/react`, `@symbiote-native/vue`, `@symbiote-native/angular`) depends on `@symbiote-native/css-parser`
-as a regular dependency and re-exports it via its own `./metro-css-parser` subpath, so a consuming
-app's `metro.config.js` wires:
+Node build machine — never shipped in the app's native JS bundle. Every adapter package
+(`@symbiote-native/react`, `@symbiote-native/vue`, `@symbiote-native/svelte`,
+`@symbiote-native/solid`, `@symbiote-native/angular`) depends on `@symbiote-native/css-parser` as a
+regular dependency and re-exports it via its own `./metro-css-parser` subpath, so a consuming app's
+`metro.config.js` wires:
 
 ```js
 // metro.config.js
@@ -133,11 +135,12 @@ 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 supports `scoped` / `:global()` / CSS Modules and SCSS/Sass/Less/Stylus preprocessing; it does
+- 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
   not yet generate a typed `.d.ts` for an **inline** Vue `<style module>` block (only standalone
   `.module.css` files get the strict, no-index-signature type — Vue's own Volar plugin gives inline
-  blocks a looser, typo-tolerant type for free) and has no Svelte support yet (no Svelte adapter
-  exists in SymbioteNative today).
+  blocks a looser, typo-tolerant type for free).
 
 ## Related packages
 
@@ -145,6 +148,7 @@ import {
   `resolveClassName`) this package's compiled output resolves against, and the class+style merge
   used by every adapter.
 - [`@symbiote-native/react`](../../adapters/react) / [`@symbiote-native/vue`](../../adapters/vue) /
+  [`@symbiote-native/svelte`](../../adapters/svelte) / [`@symbiote-native/solid`](../../adapters/solid) /
   [`@symbiote-native/angular`](../../adapters/angular) — each depends on this package directly and
   re-exports it via its own `./metro-css-parser` subpath, so a consuming app needs no extra install
   step.

package/build/lightning/selectors.d.ts

@@ -8,7 +8,7 @@ export interface ISelectorMatch {
     readonly combinators: readonly ISelectorCombinator[];
 }
 export interface IDroppedSelector {
-    readonly reason: 'root' | 'pseudo-class' | 'pseudo-element' | 'attribute' | 'element' | 'id' | 'universal' | 'unsupported';
+    readonly reason: 'root' | 'pseudo-class' | 'pseudo-element' | 'attribute' | 'element' | 'id' | 'universal' | 'unsupported' | 'state-pseudo-class';
     /** e.g. 'hover', '[data-x]', 'div'. */
     readonly detail: string;
 }
@@ -18,4 +18,6 @@ export interface ISelectorResult {
     /** The rest, with a reason. */
     readonly dropped: readonly IDroppedSelector[];
 }
+export declare const IS_STATE_TOKEN_ENABLED: boolean;
+export declare const STATE_TOKEN = ":active";
 export declare function selectorsToMatches(selectors: unknown, filename: string): ISelectorResult;

package/build/lightning/selectors.js

@@ -54,7 +54,31 @@ const DROP_EXPLANATION = {
     id: 'React Native has no id selectors',
     universal: 'React Native has no universal selector',
     unsupported: 'this selector shape has no React Native equivalent',
+    // Never reaches the shared "can never match" sentence — it has its own branch at the warn site.
+    'state-pseudo-class': '',
 };
+// `: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.
+//
+// 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
+// two ways to say one thing and a debugging session has two places to look. This is also part of a
+// larger pseudo-class-state feature that is not built; shipping a fragment of it invites code that
+// depends on the fragment.
+//
+// The engine side is deliberately untouched: with no `:active` rule ever registered,
+// `hasActiveRules` stays false and `resolveActiveClassName` is never called, so the path costs
+// nothing while it waits.
+// Typed `boolean`, not inferred as the literal `false`: the literal would let tsc prune the
+// enabled branch of `selectors.test.ts` as unreachable, and that branch is the recorded contract
+// the flag restores — pruning it is how the dormant half rots unnoticed.
+export const IS_STATE_TOKEN_ENABLED = false;
 const DEEP_PSEUDO_ELEMENTS = new Set(['v-deep', 'ng-deep']);
 // Every `SelectorComponent['type']`, so the guard below rejects a shape lightningcss does not
 // produce instead of trusting any object that happens to carry a `type` string.
@@ -98,6 +122,10 @@ function combinatorFor(value) {
             return null;
     }
 }
+// lightningcss reports a plain state pseudo-class by name in `kind`. The TOKEN keeps the colon so
+// it stays unspellable as a class name.
+const STATE_PSEUDO_CLASS = 'active';
+export const STATE_TOKEN = ':active';
 function createBuilder() {
     return {
         tokens: [],
@@ -197,6 +225,31 @@ function consumePayload(builder, args, wrapper) {
                 const nameIndex = index + (isPseudoElement ? 2 : 1);
                 const name = identAt(args, nameIndex) ?? wrapper;
                 builder.specificity[isPseudoElement ? 2 : 1]++;
+                // `:active` is kept on this path too, or the SAME CSS behaves differently on the
+                // cssModules flag — the recurring hazard this file's header names. `:global(.btn:active)`
+                // arrives parsed (`kind:'global'`) with cssModules ON and reaches the ordinary walk, which
+                // keeps it; with the flag OFF it arrives here as a raw token stream and would drop the
+                // WHOLE rule. Same source, opposite outcome, decided by which file it lives in.
+                //
+                // Keeping it is also the right side of the `:deep` asymmetry rather than an exception to
+                // it: `:global()` says only that the NAME lives outside this file's scope, while
+                // `:deep()` says the MATCH may cross a scope boundary. Only the second breaks the promise
+                // the state token rests on — that the rule targets the node whose press machine owns the
+                // state. Svelte cares most, since `:global()` is its ONLY escape hatch.
+                if (!isPseudoElement && name === STATE_PSEUDO_CLASS) {
+                    if (builder.combinators.includes('deep') ||
+                        builder.pending === 'deep') {
+                        drop(builder, 'pseudo-class', 'active through a deep combinator');
+                    }
+                    else if (IS_STATE_TOKEN_ENABLED) {
+                        pushToken(builder, STATE_TOKEN);
+                    }
+                    else {
+                        drop(builder, 'state-pseudo-class', 'active');
+                    }
+                    index = nameIndex;
+                    break;
+                }
                 drop(builder, isPseudoElement ? 'pseudo-element' : 'pseudo-class', name);
                 index = nameIndex;
                 break;
@@ -301,6 +354,42 @@ function consumeComponent(builder, component) {
                     return;
                 }
             }
+            // `:active` is the ONE state pseudo-class this module keeps, and it is not an exception to
+            // the "a selector RN can never match" principle above — it is the one state the ENGINE
+            // actually knows, because the press machine owns it. It is kept as an ordinary compound
+            // TOKEN (`.btn:active` -> tokens ['btn', ':active'], combinator 'none'), so specificity,
+            // source order, scoping and the resolve cache all keep working with no new concept in the
+            // registry: the engine adds the token to a pressed node's class list and the existing
+            // matcher does the rest. A CSS identifier cannot carry an unescaped `:`, so the token can
+            // never collide with a real class name.
+            //
+            // `:hover` / `:focus` stay dropped deliberately — RN has no hover or focus state the engine
+            // owns — as do `:nth-child` and the rest. Widening past `:active` is its own decision, and
+            // the limit it will hit is the registry's resolve cache: it is capped at 512 entries and
+            // CLEARS WHOLE rather than evicting, so states that COMBINE multiply the distinct class
+            // strings on a screen and can drop the cache, which breaks the identity `isAlreadyPublished`
+            // 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.
+                if (builder.combinators.includes('deep') ||
+                    builder.pending === 'deep') {
+                    drop(builder, 'pseudo-class', 'active through a deep combinator');
+                    return;
+                }
+                if (!IS_STATE_TOKEN_ENABLED) {
+                    drop(builder, 'state-pseudo-class', 'active');
+                    return;
+                }
+                pushToken(builder, STATE_TOKEN);
+                return;
+            }
             // `:not()`/`:is()` take the specificity of their argument rather than a flat 1, but they are
             // dropped here regardless, and only a KEPT selector's specificity is ever read.
             builder.specificity[1]++;
@@ -359,6 +448,13 @@ export function selectorsToMatches(selectors, filename) {
             // `root` is returned, never announced from here — see DROP_EXPLANATION.root.
             if (problem.reason === 'root')
                 continue;
+            // Its own sentence, because the shared one below ends in "can never match in React Native"
+            // 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.`);
+                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.`);
             continue;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/css-parser",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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": {
@@ -17,6 +17,17 @@
   "main": "./build/index.js",
   "module": "./build/index.js",
   "types": "./build/index.d.ts",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "css",
+    "scss",
+    "css-modules",
+    "postcss",
+    "lightningcss",
+    "metro",
+    "build-tool"
+  ],
   "exports": {
     ".": {
       "types": "./build/index.d.ts",