@symbiote-native/css-parser 0.2.3 → 0.4.0

package/build/metro-css-module/index.js

@@ -1,27 +1,24 @@
 // Compiles a standalone .css/.scss/.sass/.less/.styl (and their .module.* twins) file into a
 // plain JS module — the framework-agnostic twin of a Vue SFC's inline <style>/<style module>
-// block (examples/vue-sfc/metro-vue-transformer.js), usable from ANY adapter's own source file:
+// block (adapters/vue/metro-vue-transformer.cjs), usable from ANY adapter's own source file:
 // a default import of `Card.module.scss` works the same from a React .tsx, a Vue <script>, or an
 // Angular .ts.
 //
 // A plain style file registers its classes globally, exactly like an unscoped Vue <style>
 // block — side-effect import only (`import './theme.scss'`), no default export. A `.module.*`
-// file is ALWAYS scoped (that's the entire point of the extension): each class is suffixed with
-// a hash of the file's own path (core/css-parser's fileScopeId, tagged `__module__` so it can
-// never collide with a Vue <style scoped> block's plain `__<scopeId>` suffix even if the two
-// ever shared a scope id), and the default export is a plain name->scopedName map, so
-// `resolveClassName(styles.card)` (React `style={resolveClassName(styles.card)}`) or a template
-// binding that hands the already-scoped string straight to resolveClassName's exact-match path
-// both just work, no registry changes needed. `:global(.name)` opts a selector out of scoping,
-// same as Vue's <style scoped>.
+// file is ALWAYS scoped (that's the entire point of the extension): **lightningcss** owns the
+// renaming, `composes`, and `:global()` handling, and hands back both the renamed CSS and the
+// authored-name -> scoped-name `exports` map. We keep only what is genuinely ours — turning CSS
+// declarations into RN style objects (`compileCssToRules`).
+//
+// lightningcss is MPL-2.0 and this package is MIT. Depending on it is fine (file-level copyleft
+// does not reach our files); NEVER vendor, copy, or patch its sources — a copied file would
+// carry MPL.
 //
 // A preprocessor source (SCSS/Sass/Less/Stylus) is reduced to plain CSS text via
-// preprocessors.ts's `compile()` BEFORE any of the CSS-Modules scoping logic below runs — that
-// logic is entirely language-agnostic, it only ever sees `parseCSS`'s plain-CSS output, same as
-// it always did for a `.css` file.
+// preprocessors.ts's `compile()` BEFORE lightningcss runs — it reads plain CSS only.
 import * as path from 'node:path';
-import { parseCSS } from "../parser/index.js";
-import { globalClassNamesIn } from "../global-selectors.js";
+import { compileCssToRules } from "../lightning/rules.js";
 import { hashFilePath } from "../file-scope-id.js";
 import { compile, detectLanguage } from "../preprocessors/index.js";
 export function isCssModuleFile(filename) {
@@ -30,41 +27,150 @@ export function isCssModuleFile(filename) {
         return false;
     return filename.slice(0, -ext.length).endsWith('.module');
 }
+// A `composes` entry names the SCOPED class, so walking a chain (`.a composes .b`, `.b composes
+// .c`) needs the way back to the composed class's own export — lightningcss reports one hop, not
+// the flattened set.
+function localsByScopedName(exports) {
+    const locals = new Map();
+    for (const [local, entry] of Object.entries(exports)) {
+        locals.set(entry.name, local);
+    }
+    return locals;
+}
+function referenceTokens(reference, exports, locals, visited, filename) {
+    // Resolving one would mean compiling the other file here, which this per-file transform cannot
+    // do. Warn-and-drop is what the declaration mapper already does with a property it cannot map.
+    if (reference.type === 'dependency') {
+        console.warn(`[@symbiote-native/css-parser] ${filename}: \`composes: ${reference.name} from ` +
+            `"${reference.specifier}"\` ` +
+            'crosses files and is not supported — dropped.');
+        return [];
+    }
+    if (reference.type === 'global')
+        return [reference.name];
+    const local = locals.get(reference.name);
+    return local === undefined
+        ? [reference.name]
+        : tokensFor(local, exports, locals, visited, filename);
+}
+// Composed names come FIRST, the class's own name LAST. The runtime registry merges a
+// space-separated class string left to right (core/engine/src/style-registry), so this is what
+// makes the composing class override what it composes — the cascade order `composes` means.
+function tokensFor(local, exports, locals, visited, filename) {
+    if (visited.has(local))
+        return [];
+    visited.add(local);
+    const entry = exports[local];
+    if (entry === undefined)
+        return [];
+    const tokens = [];
+    for (const reference of entry.composes) {
+        tokens.push(...referenceTokens(reference, exports, locals, visited, filename));
+    }
+    tokens.push(entry.name);
+    return tokens;
+}
+// `globals` is deliberately a SUPERSET of what CSS Modules specifies. lightningcss (like
+// css-loader and every other CSS Modules implementation) exports only the names it renamed, and
+// a `:global(...)` name is
+// by definition not renamed — so upstream has nothing to map and omits it. For us that omission
+// would force the author back to a bare string literal (`class="legacy-reset"`), throwing away the
+// typed, discoverable `styles.x` access that is the entire reason this map exists. So a global
+// name is exported as ITSELF: same key, no scope suffix.
+function classMapFrom(exports, globals, filename) {
+    const locals = localsByScopedName(exports);
+    const classMap = {};
+    // Sorted, because `exports` is a Rust HashMap whose iteration order is randomized PER PROCESS
+    // — emitting it verbatim makes the generated module bytes differ between builds and churns
+    // Metro's content cache. Measured, not assumed: three runs over one file gave three orders.
+    const names = [...new Set([...Object.keys(exports), ...globals])].sort();
+    for (const name of names) {
+        // A name that is BOTH locally declared and `:global()`-wrapped elsewhere in the file resolves
+        // as local — the rename actually happened, so the scoped spelling is the one that matches.
+        const value = exports[name] === undefined
+            ? name
+            : tokensFor(name, exports, locals, new Set(), filename).join(' ');
+        // Keyed AS AUTHORED — `.legacy-reset` keys as `legacy-reset`, read as
+        // `styles['legacy-reset']`. This reverses an earlier camelCase decision (css-loader's
+        // `exportLocalsConvention`), which existed only to keep dot access legal and paid for it by
+        // merging `.legacy-reset` and `.legacyReset` into one key — a collision that needed a warning
+        // to be survivable. Nothing downstream normalizes any more: the registry key is the authored
+        // name too, and `classNamesToDtsSource`'s `formatKey` already quotes a non-identifier key, so
+        // `styles['legacy-reset']` type-checks.
+        classMap[name] = value;
+    }
+    return classMap;
+}
+/**
+ * One CSS source compiled as a CSS MODULE — a standalone `.module.*` file and a Vue
+ * `<style module>` block are the same thing and go through this, so neither can register a class
+ * under a name the other would not.
+ *
+ * The scope tail is our own `hashFilePath`, not lightningcss's `[hash]`: the runtime registry
+ * parses this tail to factor a scope back out (SCOPE_TAIL_PATTERN in
+ * core/engine/src/style-registry) and its alphabet is lowercase base36, which lightningcss's
+ * mixed-case hash does not fit — that would silently kill scoped-token base layering. Same hash
+ * the `<style scoped>` and Svelte scopers use, so all three scoping shapes stay one algorithm.
+ */
+export function compileCssModule(css, filename) {
+    const compiled = compileCssToRules(css, {
+        filename,
+        pattern: `[local]__module__${hashFilePath(filename)}`,
+    });
+    return {
+        rules: compiled.rules,
+        classMap: classMapFrom(compiled.moduleExports, compiled.globals, filename),
+    };
+}
+async function toPlainCss(source, filename) {
+    const lang = detectLanguage(filename);
+    return lang === 'css' ? source : await compile(source, lang, filename);
+}
+/**
+ * The names a `.module.*` file's default export actually carries.
+ *
+ * The `.d.ts` generator MUST read them from here rather than re-deriving names off the raw
+ * source: what a rule MATCHES on and what the module EXPORTS are different sets. A compound
+ * rule `.card.big` matches on both its tokens, but only the names the author wrote as classes
+ * are exports. Typing off a re-derived set invents members that are `undefined` at runtime and
+ * hides valid ones behind a TS2339.
+ */
+export async function moduleClassNames(source, filename) {
+    const css = await toPlainCss(source, filename);
+    return Object.keys(compileCssModule(css, filename).classMap);
+}
 // Preprocessing (SCSS/Less/Stylus → plain CSS text) is inherently async in Node — Less has no
 // sync render API at all, and Stylus's callback-based render must be Promise-wrapped — so
 // compileCssFile is async uniformly, even for a plain `.css` file that needs no preprocessing.
 // See metro-transformer.ts for the fuller sync-vs-async writeup; the short version is that a
 // sync fast-path for `.css` would fork this function into two shapes for a build-time-only,
 // content-hash-cached call that is never a runtime hot path.
-export async function compileCssFile(source, filename, options) {
-    const lang = detectLanguage(filename);
-    const css = lang === 'css' ? source : await compile(source, lang, filename);
-    const parsed = parseCSS(css, { filename, ...options });
+export async function compileCssFile(source, filename) {
+    const css = await toPlainCss(source, filename);
     if (!isCssModuleFile(filename)) {
+        const { rules } = compileCssToRules(css, { filename });
         return {
-            code: `import { registerStyles } from '@symbiote-native/engine';\nregisterStyles(${JSON.stringify(parsed)});\n`,
+            code: `import { registerRules } from '@symbiote-native/engine';\n` +
+                `registerRules(${serializeRules(rules)});\n`,
         };
     }
-    const scopeId = hashFilePath(filename);
-    // Scanned against the COMPILED css text, not the raw source: :global(...) isn't native SCSS/
-    // Less/Stylus syntax (each preprocessor just passes an unrecognized selector through
-    // unchanged), but scanning the compiler's actual output — rather than assuming source and
-    // output stay textually identical for this token — is the one that can't drift under nesting/
-    // interpolation.
-    const exemptFromScope = globalClassNamesIn(css);
-    const styles = {};
-    const classMap = {};
-    for (const [className, props] of Object.entries(parsed)) {
-        const isExempt = exemptFromScope.has(className);
-        const scopedName = isExempt ? className : `${className}__module__${scopeId}`;
-        classMap[className] = scopedName;
-        styles[scopedName] = props;
-    }
+    const { rules, classMap } = compileCssModule(css, filename);
     return {
         code: [
-            `import { registerStyles } from '@symbiote-native/engine';`,
-            `registerStyles(${JSON.stringify(styles)});`,
+            `import { registerRules } from '@symbiote-native/engine';`,
+            `registerRules(${serializeRules(rules)});`,
             `export default ${JSON.stringify(classMap)};`,
         ].join('\n') + '\n',
     };
 }
+// `combinators` is compile-time-only — the registry matches by token subset and never reads it —
+// so it is stripped rather than shipped in every app bundle. Stage 4 is where it starts to mean
+// something at runtime, and that is when it earns its bytes.
+function serializeRules(rules) {
+    return JSON.stringify(rules.map(({ tokens, specificity, order, style }) => ({
+        tokens,
+        specificity,
+        order,
+        style,
+    })));
+}

package/build/metro-transformer/index.js

@@ -8,31 +8,23 @@
 // shamefully-hoist pnpm config (.npmrc) makes that resolvable without the app adding
 // @symbiote-native/css-parser to its own package.json.
 //
-// Sync vs async: `transform()` is async uniformly, for every recognized style extension
-// including plain `.css`. Metro's own `metro-transform-worker` already does
-// `await transformer.transform(...)` before touching the result (confirmed by reading the
-// installed metro-transform-worker source directly — `transformJSWithBabel` in its `index.js`),
-// so a babelTransformerPath module's `transform()` returning a Promise is a supported, exercised
-// shape, not a hack. SCSS/Less/Stylus compilation is inherently async in Node (Less ships no sync
-// render API at all; Stylus's callback-based render must be Promise-wrapped; Sass's
-// `compileString` does have a sync API, but the lazy `import('sass')` step itself is async
-// either way — see preprocessors.ts). A sync fast-path could still be kept for plain `.css`, but
-// that forks this function into two shapes to save a single microtask on a call that only ever
-// runs at Metro build time, content-hash-cached, never a runtime hot path — not worth the
-// duplication. `return upstreamTransformer.transform(...)` as the last line of an async function
-// forwards whatever it returns (Promise or not) as this function's own resolved value with no
-// extra `await` needed; Metro awaits the whole chain regardless.
+// `transform()` is async uniformly, even for plain `.css`: Metro's `metro-transform-worker`
+// already awaits `transformer.transform(...)` before using the result (`transformJSWithBabel` in
+// its `index.js`), so a babelTransformerPath module returning a Promise is a supported shape.
+// SCSS/Less/Stylus compilation is inherently async in Node (Less ships no sync render API;
+// Stylus's render is callback-based; Sass's sync `compileString` still needs an async
+// `import('sass')` — see preprocessors.ts). No separate sync path for plain `.css`: this only
+// runs at Metro build time, content-hash-cached, never a runtime hot path, so forking the
+// function to save one microtask isn't worth the duplication.
 import { createRequire } from 'node:module';
 import { compileCssFile } from "../metro-css-module/index.js";
 import { isStyleFile } from "../preprocessors/index.js";
-// @react-native/metro-babel-transformer is a real `dependency` of this package (not merely a
-// peer/dev dep), so it lands in css-parser's OWN resolvable node_modules under pnpm — no
-// hoisting or `paths`-anchored require.resolve trick needed, unlike the app-local workaround
-// this replaces (formerly duplicated in every adapter's example metro-css-transformer.js).
-// Exported (not just used internally) so a per-framework Metro transformer that ALSO needs to
-// delegate to the upstream RN transformer (the Vue SFC transformer, for its non-.vue passthrough
-// branch) can reuse this instead of its own fragile direct `require('@react-native/metro-babel-
-// transformer')`, which would only resolve for an external install by accident of hoisting.
+// @react-native/metro-babel-transformer is a real `dependency` of this package, so it resolves
+// via css-parser's own node_modules under pnpm — no hoisting/`paths` trick needed, unlike the
+// app-local workaround this replaces (formerly duplicated in every adapter's example
+// metro-css-transformer.js). Exported so a per-framework transformer that also needs the
+// upstream RN transformer (e.g. the Vue SFC transformer's non-.vue passthrough branch) can reuse
+// this instead of its own fragile direct `require('@react-native/metro-babel-transformer')`.
 export function resolveUpstreamTransformer() {
     const require = createRequire(import.meta.url);
     return require('@react-native/metro-babel-transformer');

package/build/preprocessors/index.js

@@ -1,6 +1,7 @@
 // Optional SCSS/Sass, Less, and Stylus preprocessor support. Each compiler here only ever reduces
-// its own syntax down to plain CSS text — parser.ts's `parseCSS()` is the single, UNCHANGED
-// downstream consumer of that text, exactly as it always was for a plain `.css` file. Tailwind
+// its own syntax down to plain CSS text — `lightning/rules.ts`'s `compileCssToRules()` is the
+// single, UNCHANGED downstream consumer of that text, exactly as it is for a plain `.css`
+// file. Tailwind
 // is a separate, out-of-scope concern and has no branch here.
 //
 // `sass`/`less`/`stylus` are lazy `import()`ed, never a top-level import, and are
@@ -29,7 +30,7 @@ export function isStyleFile(filename) {
  * (`compileScss` itself picks the concrete syntax off the extension); anything unrecognized is
  * treated as plain CSS, same as today. */
 export function detectLanguage(filename) {
-    return RECOGNIZED_EXTENSIONS.get(path.extname(filename).toLowerCase()) ?? 'css';
+    return (RECOGNIZED_EXTENSIONS.get(path.extname(filename).toLowerCase()) ?? 'css');
 }
 let sassModule;
 let lessModule;

package/build/properties.d.ts

@@ -12,13 +12,12 @@ type IPropertyMapping = {
 export declare const PROPERTY_TABLE: Record<string, IPropertyMapping>;
 /**
  * Map one CSS declaration to its RN style entry. Returns `null` and warns once per unique
- * unsupported property name (deduped via the caller-owned `warnedProperties` set, so the
- * warning fires once per {@link parseCSS} call, not per occurrence).
+ * unsupported property name, deduped via the caller-owned `warnedProperties` set.
  *
- * `text-shadow` bypasses {@link PROPERTY_TABLE}: RN has no unified CSS-string `textShadow` prop
- * (unlike `transform`/`box-shadow` above) — only three separate legacy props
- * (`textShadowColor`/`Offset`/`Radius`) that take already-decomposed values, so this package is
- * the only place that CAN parse the CSS shorthand; there is no engine-level processor to defer to.
+ * `text-shadow` is absent from {@link PROPERTY_TABLE} and is NOT handled here: RN has no unified
+ * CSS-string `textShadow` prop (unlike `transform`/`box-shadow` above), only three decomposed
+ * legacy props, so it needs the typed AST rather than a value string —
+ * `lightning/declarations.ts`'s `textShadowToStyle` owns it.
  */
 export declare function mapCSSProperty(prop: string, value: string, warnedProperties: Set<string>): Record<string, unknown> | null;
 export {};

package/build/properties.js

@@ -1,7 +1,7 @@
 // CSS property → React Native ViewStyle/TextStyle prop mapping. RN's own style props already
 // mirror CSS's shorthand model 1:1 (`margin`, `borderRadius`, `borderTopLeftRadius`, …), so this
 // table is a flat kebab→camel rename plus a value-conversion kind — no shorthand expansion is needed.
-import { parseNumeric, parseNumericOrPercent, parseRawValue, parseTextShadow, warnOnce, } from "./values.js";
+import { parseNumeric, parseNumericOrPercent, parseRawValue, warnOnce, } from "./values.js";
 /**
  * kebab-case CSS property → { RN camelCase prop, value-conversion kind }.
  * `dimension` = number-or-percent (`parseNumericOrPercent`); `number` = always a plain
@@ -35,9 +35,9 @@ export const PROPERTY_TABLE = {
     overflow: { rnProperty: 'overflow', kind: 'raw' },
     // Only `flex`/`none` are valid RN values; passed through unvalidated per spec.
     display: { rnProperty: 'display', kind: 'raw' },
-    // A genuine 1:1 CSS property (unlike transform/shadow — no shape mismatch), just missing
-    // from the initial table. `2 / 3` string ratios are not accepted here (`parseNumeric`
-    // requires a plain number) — CSS `aspect-ratio: 0.667` works, `aspect-ratio: 2/3` doesn't yet.
+    // A genuine 1:1 CSS property (unlike transform/shadow, no shape mismatch). `2 / 3` string
+    // ratios are not accepted here (`parseNumeric` requires a plain number) — CSS
+    // `aspect-ratio: 0.667` works, `aspect-ratio: 2/3` doesn't yet.
     'aspect-ratio': { rnProperty: 'aspectRatio', kind: 'number' },
     gap: { rnProperty: 'gap', kind: 'dimension' },
     'row-gap': { rnProperty: 'rowGap', kind: 'dimension' },
@@ -67,7 +67,10 @@ export const PROPERTY_TABLE = {
     // from RN's own `processBackgroundImage.js`. RN's own style prop is itself named with an
     // `experimental_` prefix (still evolving upstream), which is why the RN key doesn't just
     // match a kebab→camel rename of the CSS property the way every other entry here does.
-    'background-image': { rnProperty: 'experimental_backgroundImage', kind: 'raw' },
+    'background-image': {
+        rnProperty: 'experimental_backgroundImage',
+        kind: 'raw',
+    },
     // Spacing
     margin: { rnProperty: 'margin', kind: 'dimension' },
     'margin-top': { rnProperty: 'marginTop', kind: 'dimension' },
@@ -91,10 +94,22 @@ export const PROPERTY_TABLE = {
     'border-bottom-color': { rnProperty: 'borderBottomColor', kind: 'raw' },
     'border-left-color': { rnProperty: 'borderLeftColor', kind: 'raw' },
     'border-radius': { rnProperty: 'borderRadius', kind: 'dimension' },
-    'border-top-left-radius': { rnProperty: 'borderTopLeftRadius', kind: 'dimension' },
-    'border-top-right-radius': { rnProperty: 'borderTopRightRadius', kind: 'dimension' },
-    'border-bottom-left-radius': { rnProperty: 'borderBottomLeftRadius', kind: 'dimension' },
-    'border-bottom-right-radius': { rnProperty: 'borderBottomRightRadius', kind: 'dimension' },
+    'border-top-left-radius': {
+        rnProperty: 'borderTopLeftRadius',
+        kind: 'dimension',
+    },
+    'border-top-right-radius': {
+        rnProperty: 'borderTopRightRadius',
+        kind: 'dimension',
+    },
+    'border-bottom-left-radius': {
+        rnProperty: 'borderBottomLeftRadius',
+        kind: 'dimension',
+    },
+    'border-bottom-right-radius': {
+        rnProperty: 'borderBottomRightRadius',
+        kind: 'dimension',
+    },
     'border-style': { rnProperty: 'borderStyle', kind: 'raw' },
     // Visual
     'background-color': { rnProperty: 'backgroundColor', kind: 'raw' },
@@ -122,17 +137,14 @@ function convertValue(kind, value) {
 }
 /**
  * Map one CSS declaration to its RN style entry. Returns `null` and warns once per unique
- * unsupported property name (deduped via the caller-owned `warnedProperties` set, so the
- * warning fires once per {@link parseCSS} call, not per occurrence).
+ * unsupported property name, deduped via the caller-owned `warnedProperties` set.
  *
- * `text-shadow` bypasses {@link PROPERTY_TABLE}: RN has no unified CSS-string `textShadow` prop
- * (unlike `transform`/`box-shadow` above) — only three separate legacy props
- * (`textShadowColor`/`Offset`/`Radius`) that take already-decomposed values, so this package is
- * the only place that CAN parse the CSS shorthand; there is no engine-level processor to defer to.
+ * `text-shadow` is absent from {@link PROPERTY_TABLE} and is NOT handled here: RN has no unified
+ * CSS-string `textShadow` prop (unlike `transform`/`box-shadow` above), only three decomposed
+ * legacy props, so it needs the typed AST rather than a value string —
+ * `lightning/declarations.ts`'s `textShadowToStyle` owns it.
  */
 export function mapCSSProperty(prop, value, warnedProperties) {
-    if (prop === 'text-shadow')
-        return parseTextShadow(value, warnedProperties);
     const mapping = PROPERTY_TABLE[prop];
     if (!mapping) {
         warnOnce(warnedProperties, prop, `[@symbiote-native/css-parser] unsupported CSS property "${prop}" dropped`);

package/build/scoped-classes.d.ts

@@ -0,0 +1,23 @@
+import { type IStyleRule } from './lightning/rules.ts';
+export type IScopedCss = {
+    readonly rules: readonly IStyleRule[];
+    /** Authored class name -> the name it registers under. */
+    readonly names: ReadonlyMap<string, string>;
+};
+export type IScopedCssOptions = {
+    readonly filename: string;
+    /** A lightningcss CSS-Modules pattern, `[local]` first — see the table above. */
+    readonly pattern: string;
+};
+/**
+ * A SCOPED style block (a Svelte `<style>`, a Vue `<style scoped>`) compiled for the registry:
+ * the rules keyed under their scoped names, and the name map its markup rewriter resolves every
+ * class token through.
+ *
+ * Both halves come out of ONE `compileCssToRules` call. The two-pass shape this used to have —
+ * rename, then re-parse the ORIGINAL text and re-key it per token — existed only because the old
+ * parser derived a key by camelCasing the selector, which mangled a scope tail whose base36 hash
+ * started with a letter (`card__svelte-p4np8c` registered as `card__svelteP4np8c`). Nothing
+ * camelCases any more, so there is nothing to work around.
+ */
+export declare function compileScopedCss(css: string, options: IScopedCssOptions): IScopedCss;

package/build/scoped-classes.js

@@ -0,0 +1,35 @@
+// The ONE class-renaming call in this repo. Every scoping shape we have is the same lightningcss
+// CSS-Modules rename with a different suffix, so none of them owns a loop of its own:
+//
+//   standalone .module.*   [local]__module__<hash>     metro-css-module/index.ts
+//   Vue <style module>     [local]__module__<hash>
+//   Vue <style scoped>     [local]__data-v-<hash>
+//   Svelte <style>         [local]__svelte-<hash>      adapters/svelte/src/preprocessor
+//
+// The rename is not the point — the name MAP is. A scoping pass has two halves (the registered
+// style rules and the markup rewriter) and they must name a class identically; each half deriving
+// the name for itself is the bug class this file exists to close. Both halves read `names` below.
+// lightningcss also decides `:global()` for free: a name it did NOT rename is global, surfaced as
+// `ICompiledCss.globals`, so nothing has to re-walk selectors hunting for the escape hatch.
+//
+// lightningcss is MPL-2.0 and this package is MIT. Depending on it is fine (file-level copyleft
+// does not reach our files); NEVER vendor, copy, or patch its sources.
+import { compileCssToRules } from "./lightning/rules.js";
+/**
+ * A SCOPED style block (a Svelte `<style>`, a Vue `<style scoped>`) compiled for the registry:
+ * the rules keyed under their scoped names, and the name map its markup rewriter resolves every
+ * class token through.
+ *
+ * Both halves come out of ONE `compileCssToRules` call. The two-pass shape this used to have —
+ * rename, then re-parse the ORIGINAL text and re-key it per token — existed only because the old
+ * parser derived a key by camelCasing the selector, which mangled a scope tail whose base36 hash
+ * started with a letter (`card__svelte-p4np8c` registered as `card__svelteP4np8c`). Nothing
+ * camelCases any more, so there is nothing to work around.
+ */
+export function compileScopedCss(css, options) {
+    const compiled = compileCssToRules(css, options);
+    return {
+        rules: compiled.rules,
+        names: new Map(Object.entries(compiled.exports)),
+    };
+}

package/build/values.d.ts

@@ -15,13 +15,9 @@ export declare function parseNumericOrPercent(value: string): number | string;
  */
 export declare function parseRawValue(value: string): string;
 /**
- * Warn once per unique `key` across a {@link parseCSS} call (the caller-owned `warned` set is
- * shared with the plain-property drop warning in properties.ts, so every "unsupported X dropped"
- * message in this package dedupes the same way).
+ * Warn once per unique `key` against a caller-owned `warned` set. Every "unsupported X dropped"
+ * message in this package dedupes through here, so the set's lifetime is what picks the
+ * granularity: `compileCssToRules` keeps one per call, `lightning/declarations.ts` one per file.
  */
 export declare function warnOnce(warned: Set<string>, key: string, message: string): void;
-/** `text-shadow` → RN's `textShadowColor`/`textShadowOffset`/`textShadowRadius` (no Android
- * elevation equivalent — RN has no elevation concept for text, and no engine-level processor
- * to defer to the way `box-shadow` does — see the PROPERTY_TABLE comment in properties.ts). */
-export declare function parseTextShadow(value: string, warned: Set<string>): Record<string, unknown> | null;
 export { REM_TO_PX };

package/build/values.js

@@ -1,6 +1,5 @@
 // CSS → React Native value conversion. RN style props take plain numbers for `px` / unitless
 // values, so there is no unit conversion needed here beyond scaling `rem`/`em` — `px` is identity.
-import valueParser from 'postcss-value-parser';
 // symbiote has no root-font-size registry (a DOM `<html>` element would own one); we pick CSS's
 // own default of a 16px root font size as the `rem` multiplier, so `2rem` reads as `32`.
 const REM_TO_PX = 16;
@@ -37,9 +36,9 @@ export function parseRawValue(value) {
     return value.trim();
 }
 /**
- * Warn once per unique `key` across a {@link parseCSS} call (the caller-owned `warned` set is
- * shared with the plain-property drop warning in properties.ts, so every "unsupported X dropped"
- * message in this package dedupes the same way).
+ * Warn once per unique `key` against a caller-owned `warned` set. Every "unsupported X dropped"
+ * message in this package dedupes through here, so the set's lifetime is what picks the
+ * granularity: `compileCssToRules` keeps one per call, `lightning/declarations.ts` one per file.
  */
 export function warnOnce(warned, key, message) {
     if (warned.has(key))
@@ -47,60 +46,4 @@ export function warnOnce(warned, key, message) {
     warned.add(key);
     console.warn(message);
 }
-// A length token always starts with a digit, `.`, or `-` (`0`, `2px`, `-4px`); a color token
-// never does, whether it's a keyword (`red`), a hex (`#fff`), or a function (`rgba(0,0,0,.3)`) —
-// so classifying by leading character separates them without needing a CSS color grammar.
-const LENGTH_TOKEN_PATTERN = /^-?[\d.]/;
-/** Split a `text-shadow` value on its TOP-LEVEL commas only — a comma inside a color function
- * (`rgba(0, 0, 0, .3)`) must not split a single shadow layer in two. */
-function splitShadowLayers(value) {
-    const layers = [];
-    let current = [];
-    for (const node of valueParser(value.trim()).nodes) {
-        if (node.type === 'div' && node.value === ',') {
-            layers.push(valueParser.stringify(current).trim());
-            current = [];
-            continue;
-        }
-        current.push(node);
-    }
-    layers.push(valueParser.stringify(current).trim());
-    return layers.filter(Boolean);
-}
-function parseShadowTokens(layer) {
-    const rawTokens = valueParser(layer)
-        .nodes.filter(node => node.type !== 'space' && node.type !== 'div')
-        .map(node => valueParser.stringify(node));
-    const lengths = rawTokens.filter(token => LENGTH_TOKEN_PATTERN.test(token));
-    const colorToken = rawTokens.find(token => !LENGTH_TOKEN_PATTERN.test(token));
-    if (lengths.length < 2)
-        return null;
-    return {
-        offsetX: parseNumeric(lengths[0]),
-        offsetY: parseNumeric(lengths[1]),
-        blurRadius: lengths[2] !== undefined ? parseNumeric(lengths[2]) : 0,
-        color: colorToken ?? '#000000',
-    };
-}
-/** `text-shadow` → RN's `textShadowColor`/`textShadowOffset`/`textShadowRadius` (no Android
- * elevation equivalent — RN has no elevation concept for text, and no engine-level processor
- * to defer to the way `box-shadow` does — see the PROPERTY_TABLE comment in properties.ts). */
-export function parseTextShadow(value, warned) {
-    const layers = splitShadowLayers(value);
-    if (layers.length > 1) {
-        warnOnce(warned, 'text-shadow:multiple', '[@symbiote-native/css-parser] multiple text-shadow layers are not supported, only the first is applied');
-    }
-    const first = layers[0];
-    if (!first)
-        return null;
-    const tokens = parseShadowTokens(first);
-    if (!tokens)
-        return null;
-    return {
-        textShadowColor: tokens.color,
-        textShadowOffset: { width: tokens.offsetX, height: tokens.offsetY },
-        textShadowRadius: tokens.blurRadius,
-    };
-}
-//#endregion text-shadow
 export { REM_TO_PX };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/css-parser",
-  "version": "0.2.3",
+  "version": "0.4.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": {
@@ -41,8 +41,7 @@
   },
   "dependencies": {
     "@react-native/metro-babel-transformer": "0.86.0",
-    "postcss": "^8.4.49",
-    "postcss-value-parser": "^4.2.0"
+    "lightningcss": "^1.32.0"
   },
   "devDependencies": {
     "sass": "^1.101.0",