@symbiote-native/vue 0.3.8 → 0.5.0

package/metro-vue-transformer.cjs

@@ -1,55 +1,48 @@
-// Metro babel transformer that teaches the bundler to read Vue SFCs (.vue). Metro has no
-// Vue plugin (unplugin-vue ships vite/webpack/esbuild/rollup adapters, not Metro), so we do
-// the single-pass compile here: parse the SFC, compile <script setup> + <template> into one
-// component module, then hand the JS to RN's own babel transformer. This is the Metro twin
-// of what @vitejs/plugin-vue does for Vite; the 'vue'→runtime-core rewrite is needed because
-// a custom, non-DOM renderer needs the compiler helpers from @vue/runtime-core, not from
-// vue/runtime-dom.
+// Metro babel transformer that teaches the bundler to read Vue SFCs (.vue). Metro has no Vue
+// plugin (unplugin-vue only ships vite/webpack/esbuild/rollup adapters), so we do the
+// single-pass compile here: parse the SFC, compile <script setup> + <template> into one
+// component module, then hand the JS to RN's own babel transformer - the Metro twin of
+// @vitejs/plugin-vue. Imports get retargeted from 'vue' to @symbiote-native/vue/runtime-helpers
+// (not bare @vue/runtime-core) because that shim also supplies our own `vShow` - compiled
+// v-show imports it by name, and only @vue/runtime-dom's DOM-based version exists otherwise.
 //
-// Retargeted at @symbiote-native/vue/runtime-helpers rather than bare @vue/runtime-core: that shim
-// re-exports runtime-core verbatim PLUS supplies our own `vShow` (compiled v-show imports it by
-// name, and only @vue/runtime-dom's DOM-based version exists otherwise).
-//
-// Ships as a package-level export (`@symbiote-native/vue/metro-vue-transformer`) rather than living
-// in each consuming app: a consumer's own metro.config.js just points babelTransformerPath at it.
+// Ships as a package-level export (`@symbiote-native/vue/metro-vue-transformer`) rather than
+// living in each consuming app: a consumer's own metro.config.js just points
+// babelTransformerPath at it.
 
 const nodeFs = require('fs');
 const { parse, compileScript, registerTS } = require('@vue/compiler-sfc');
 const { createCompoundExpression } = require('@vue/compiler-core');
 
-// A bare-specifier type import (`import type { X } from '@symbiote-native/navigation/vue'`, as
-// opposed to a relative one) needs real node_modules resolution (package.json exports, pnpm
-// symlinks) to turn the specifier into a file path — compileScript's own `fs` option only reads
-// paths it's already given, it can't do that resolution. @vue/compiler-sfc's sanctioned hook for
-// this is `registerTS`, the same one @vitejs/plugin-vue and vue-tsc call: it hands the compiler a
-// lazy loader for the real `typescript` package, which resolves the specifier via
-// `ts.resolveModuleName` and self-supplies `ts.sys` as the fs fallback.
+// A bare-specifier type import (`import type { X } from '@symbiote-native/navigation/vue'`) needs
+// real node_modules resolution to turn the specifier into a file path - compileScript's own `fs`
+// option only reads paths it's already given, it can't resolve. registerTS (the same hook
+// @vitejs/plugin-vue and vue-tsc use) hands the compiler a lazy `typescript` loader that resolves
+// via `ts.resolveModuleName` and self-supplies `ts.sys` as the fs fallback.
 registerTS(() => require('typescript'));
-// @symbiote-native/css-parser is a real dependency of THIS package, so requiring it directly here
-// (rather than through the ./metro-css-parser public subpath, which exists for CONSUMERS) resolves
-// straight from this package's own node_modules under pnpm.
+// Required directly (not via the ./metro-css-parser public subpath, which exists for CONSUMERS)
+// so it resolves from this package's own node_modules under pnpm.
 const {
   compile: compilePreprocessor,
   compileCssFile,
-  globalClassNamesIn,
+  compileCssModule,
+  compileCssToRules,
+  compileScopedCss,
   hashFilePath,
   isStyleFile,
-  kebabToCamel,
-  parseCSS,
   resolveUpstreamTransformer,
 } = require('@symbiote-native/css-parser');
 
 const upstreamTransformer = resolveUpstreamTransformer();
 
 // compileScript needs file system access to resolve a type-only `defineProps<ISomeProps>()`
-// where ISomeProps is imported from another file — without it, Metro's worker process (a real
-// Node process, but one @vue/compiler-sfc doesn't auto-detect as Node unless the consumer calls
-// its `registerTS` hook) throws "No fs option provided ... in non-Node environment". Wiring
-// Node's own `fs` module straight through is simpler than registering the `typescript` package
-// as a loader (registerTS), and this file already runs in Node at Metro build time.
+// imported from another file - without it, Metro's worker process (a real Node process, but one
+// @vue/compiler-sfc doesn't auto-detect without registerTS) throws "No fs option provided ...
+// in non-Node environment". Wiring Node's own `fs` straight through is simpler than a second
+// registerTS-style loader.
 const compileScriptFs = {
-  fileExists: (file) => nodeFs.existsSync(file),
-  readFile: (file) => {
+  fileExists: file => nodeFs.existsSync(file),
+  readFile: file => {
     try {
       return nodeFs.readFileSync(file, 'utf-8');
     } catch {
@@ -58,47 +51,43 @@ const compileScriptFs = {
   },
 };
 
-// Rewrites a Vue template AST so every `class`/`:class` binding on an element resolves
-// against this file's scoped class names at the compiled call site, via @symbiote-native/engine's
-// scopeClassName(value, localNames, scopeId). This runs at the AST level rather than as a
-// raw-text regex: Vue itself merges a static `class=`
-// and a dynamic `:class=` on the same element into ONE codegen entry, and text substitution
-// can't reproduce that merge safely; letting Vue's own transformElement do the merge on our
-// already-rewritten nodes reuses that logic instead of reimplementing it).
+// Rewrites a Vue template AST so every `class`/`:class` binding names a class by the name
+// lightningcss RENAMED it to. AST-level, not a raw-text regex: Vue merges a static class= and a
+// dynamic :class= on the same element into ONE codegen entry, and text substitution can't
+// reproduce that merge safely - letting Vue's own transformElement do the merge on our rewritten
+// nodes reuses that logic.
+//
+// `renames` is compileScopedCss's own name map (authored name -> renamed name), NOT a set of
+// names this file re-suffixes. That is the point of the migration: the rewriter and the style
+// compiler used to derive the scoped name independently, so any disagreement between them was
+// silent. Now there is one source and this half only reads it. One entry per class, keyed as
+// AUTHORED — `class="section-label"` is the lookup, `sectionLabel` is not a second spelling of it.
 //
-// A static class="foo bar" attribute is a plain AttributeNode (prop.type === 6): its value is
-// resolved to the final string directly here, at compile time — no runtime call needed for the
-// purely-static case, since every token is already known. Each token is normalized kebab->camel
-// FIRST (kebabToCamel) — a template may write class="section-label" (idiomatic CSS) instead of
-// class="sectionLabel"; the css-parser always registers the CAMEL form, and localNames (built
-// from that same registration) is camelCase-keyed, so the scoping check below only recognizes a
-// token once it is in that form. The emitted string is always camelCase, suffixed or not.
+// A static class="foo bar" (AttributeNode, prop.type === 6) resolves to its final string here
+// at compile time - no runtime call needed. A token the map does not carry belongs to another
+// file (App.css, a `:global()` escape hatch, a parent's class) and passes through untouched.
 //
-// A dynamic :class="expr" is a `bind` DirectiveNode (prop.type === 7) targeting the `class`
-// arg. Vue's own transformExpression has ALREADY run by the time our transform sees it (node
-// transforms are appended after the built-in preset, per @vue/compiler-core's TransformOptions
-// merge order), so prop.exp is usually a COMPOUND_EXPRESSION (type 8, a `children` array mixing
-// literal source chunks with resolved identifier nodes), not a plain string — a bare identifier
-// binding (`:class="dynamicClass"`) is the one case that stays a SIMPLE_EXPRESSION (type 4).
-// Either way, `createCompoundExpression` wraps the ORIGINAL exp node (whichever shape it is) as
-// a single child inside `scopeClassName(<original>, __localScopedClassNames, __scopeId)`, so
-// codegen emits the call with the original expression source reproduced unchanged inside it —
-// this needs no per-shape branching, and correctly defers even a fully opaque runtime value
-// (`:class="dynamicClass"`) to scopeClassName's own runtime token-matching, so there is no
-// unresolved gap for dynamic scoped classes.
-function createScopeClassNodeTransform(localNames, scopeId) {
+// A dynamic :class="expr" (bind DirectiveNode, prop.type === 7) targeting `class`: by the time
+// our transform runs, Vue's own transformExpression has already turned prop.exp into either a
+// COMPOUND_EXPRESSION (type 8) or, for a bare identifier binding, a SIMPLE_EXPRESSION (type 4).
+// createCompoundExpression wraps the original exp node as-is inside
+// renameClassTokens(<original>, __scopedClassNames), so codegen reproduces the original
+// expression unchanged - no per-shape branching needed, and a fully opaque runtime value
+// (`:class="dynamicClass"`) still resolves against the same map at runtime.
+function createScopeClassNodeTransform(renames) {
   return function scopeClassNodeTransform(node) {
     if (node.type !== 1 /* NodeTypes.ELEMENT */) return;
 
     for (const prop of node.props) {
-      if (prop.type === 6 /* NodeTypes.ATTRIBUTE */ && prop.name === 'class' && prop.value) {
+      if (
+        prop.type === 6 /* NodeTypes.ATTRIBUTE */ &&
+        prop.name === 'class' &&
+        prop.value
+      ) {
         prop.value.content = prop.value.content
           .split(/\s+/)
           .filter(Boolean)
-          .map((token) => {
-            const camelToken = kebabToCamel(token);
-            return localNames.has(camelToken) ? `${camelToken}__${scopeId}` : camelToken;
-          })
+          .map(token => renames.get(token) ?? token)
           .join(' ');
         continue;
       }
@@ -112,7 +101,7 @@ function createScopeClassNodeTransform(localNames, scopeId) {
         prop.exp
       ) {
         prop.exp = createCompoundExpression(
-          ['__scopeClass(', prop.exp, ', __localScopedClassNames, __scopeId)'],
+          ['__scopeClass(', prop.exp, ', __scopedClassNames)'],
           prop.exp.loc,
         );
       }
@@ -120,14 +109,42 @@ function createScopeClassNodeTransform(localNames, scopeId) {
   };
 }
 
-// A short, stable id per file, used as the SFC scope id (compileScript wants one regardless of
-// whether the file has scoped styles) — Vue's own `data-v-hash` naming convention, built on
-// @symbiote-native/css-parser's shared hashFilePath so the algorithm isn't duplicated against the
-// standalone .module.css compiler's identical need (metro-css-module.ts).
+// A short, stable id per file, used as the SFC scope id regardless of whether the file has
+// scoped styles - built on css-parser's shared hashFilePath so the algorithm isn't duplicated
+// against the standalone .module.css compiler's identical need.
 function scopeIdFor(filename) {
   return 'data-v-' + hashFilePath(filename);
 }
 
+// The local the compiled component lands in when a <style module> block needs __cssModules hung
+// off it (compileScript's genDefaultAs). Same role as @vitejs/plugin-vue's own `_sfc_main`.
+const SFC_COMPONENT_VAR = '__sfc__';
+
+// Blocks CONCATENATE - each is compiled on its own, so every block's rules restart at order 0 and
+// a later block would tie with an earlier one on the cascade's source-order tie-break, silently
+// reordering equally-specific rules. Renumbering on append gives the file one monotonic sequence,
+// which is what a single stylesheet holding the concatenated blocks would have produced.
+function appendRules(target, rules) {
+  for (const rule of rules) {
+    target.push({ ...rule, order: target.length });
+  }
+}
+
+// `combinators` is compile-time-only - the registry matches a rule by token SUBSET and never reads
+// it - so it is stripped rather than shipped in every app bundle. Twin of css-parser's own
+// serializeRules (core/css-parser/src/metro-css-module/index.ts), which does this for a standalone
+// style file.
+function serializeRules(rules) {
+  return JSON.stringify(
+    rules.map(({ tokens, specificity, order, style }) => ({
+      tokens,
+      specificity,
+      order,
+      style,
+    })),
+  );
+}
+
 // An SFC style block's `lang` attribute names a preprocessor language directly (`lang="scss"`),
 // unlike a standalone file, which is identified by its extension — so this is its own small
 // lookup rather than reusing detectLanguage(), which is extension-keyed.
@@ -139,15 +156,15 @@ const SFC_STYLE_LANG_TO_PREPROCESSOR = new Map([
 ]);
 
 // Reduces one <style> block down to plain CSS text. A lang-less or lang="css" block passes
-// through unchanged, exactly as before. Anything outside the four recognized preprocessor langs
-// (a typo, or a genuinely unsupported lang) still throws, same message as before this feature
-// existed.
+// through unchanged. Anything outside the four recognized preprocessor langs throws.
 async function compileStyleBlockContent(style, filename) {
   if (style.lang == null || style.lang === 'css') return style.content;
 
   const preprocessorLang = SFC_STYLE_LANG_TO_PREPROCESSOR.get(style.lang);
   if (!preprocessorLang) {
-    throw new Error(`SFC style lang="${style.lang}" not supported yet — plain CSS only`);
+    throw new Error(
+      `SFC style lang="${style.lang}" not supported yet — plain CSS only`,
+    );
   }
 
   // Sass' `.sass` indented syntax and `.scss` syntax share one compiler entry point that picks
@@ -162,172 +179,173 @@ async function compileStyleBlockContent(style, filename) {
 async function compileSfc(src, filename) {
   const { descriptor, errors } = parse(src, { filename });
   if (errors && errors.length > 0) {
-    throw new Error(`Vue SFC parse error in ${filename}:\n${errors.map(String).join('\n')}`);
+    throw new Error(
+      `Vue SFC parse error in ${filename}:\n${errors.map(String).join('\n')}`,
+    );
   }
   if (descriptor.scriptSetup == null && descriptor.script == null) {
-    throw new Error(`Vue SFC ${filename} has no <script> / <script setup> block`);
+    throw new Error(
+      `Vue SFC ${filename} has no <script> / <script setup> block`,
+    );
   }
 
   const scopeId = scopeIdFor(filename);
 
-  // `descriptor.styles` is already parsed by @vue/compiler-sfc itself (one entry per <style>
-  // block, `.content` pre-trimmed, `.scoped` already a plain boolean flag), so there's no need
-  // to re-extract style blocks with a regex.
+  // descriptor.styles is already parsed by @vue/compiler-sfc (one entry per <style> block,
+  // content pre-trimmed, scoped as a plain boolean) - no need to re-extract with a regex.
   //
-  // A scoped block's classes get their key SUFFIXED with this file's scopeId before
-  // registration (`card` -> `card__data-v-xxxxxxxx`), so two components can each define their
-  // own `.card` without colliding in the shared global registry — mirroring what Vue's own
-  // `data-v-hash` attribute does for DOM targets, just as a name suffix instead of an attribute
-  // selector (we have neither DOM nor attribute-selector matching). An unscoped block's classes
-  // register exactly as before: no suffix, globally shared. `:global(...)` selectors inside a
-  // scoped block are the one exception — @symbiote-native/css-parser already unwraps them to their
-  // plain class name (`:global(.reset)` parses like `.reset`), so `globalClassNamesIn` re-scans
-  // the block's own raw text to find which specific keys should be exempted from suffixing.
+  // Both scoped forms are ONE mechanism, lightningcss's CSS-Modules renaming, differing only in
+  // the pattern string (core/css-parser/src/scoped-classes.ts):
   //
-  // Cascade multiple blocks last-block-wins, same as CSS — this holds across scoped/unscoped
-  // blocks too: only each block's OWN css-parser output is scoped independently, then merged.
+  //   <style scoped>   [local]__data-v-<hash>    compileScopedCss - `.card` -> `card__data-v-h`
+  //   <style module>   [local]__module__<hash>   compileCssModule - the same call a standalone
+  //                                              .module.css takes, so the two cannot diverge
+  //   <style>          not renamed at all        compileCssToRules, classes register globally
   //
-  // <style module> (CSS Modules) reuses this exact suffixing machinery instead of a separate
-  // pipeline: `.card` still goes through parseCSS unchanged and still registers via the same
-  // registerStyles() call, just under a suffixed key — the only new output is a plain name->
-  // scopedName object (`$style` by default, or the block's `module="name"` value) emitted as a
-  // preamble const, so `:class="$style.card"` passes the already-scoped string straight to
-  // resolveClassName's existing exact-match path (no registry changes needed). Unlike `scoped`, a module block's classes are NEVER
-  // auto-applied to a literal class="..." attribute — CSS Modules is opt-in per usage via
-  // `$style.x`, so module classes are kept out of `localScopedNames` (the nodeTransform only
-  // rewrites literal class strings for `scoped` blocks). The registry key gets an extra
-  // `module` tag (`card__module__<scopeId>`, vs scoped's plain `card__<scopeId>`) so a file
-  // that happens to mix `<style scoped>` and `<style module>` with the same class name can't
-  // collide in the shared registry.
-  const styles = {};
-  const localScopedNames = new Set();
+  // Renaming is our equivalent of Vue's `data-v-hash` ATTRIBUTE (we have no DOM and no
+  // attribute-selector matching, so a scope can only be expressed in the name), and `:global(...)`
+  // needs no handling here at all: a name lightningcss did not rename is global by definition.
+  //
+  // Multiple blocks cascade last-block-wins, same as CSS, after each block is scoped
+  // independently — carried by the rules' `order`, which appendRules renumbers across blocks.
+  //
+  // A module block's classes are NEVER auto-applied to a literal class="..." (opt-in via $style.x
+  // only), so they stay out of the template rewriter's name map; its output is the name->scopedName
+  // map instead, emitted as a preamble const AND attached to the component as __cssModules.
+  const rules = [];
+  const scopedClassNames = new Map();
   const cssModuleBindings = new Map();
 
   for (const style of descriptor.styles) {
-    // Reduces a preprocessor block down to plain CSS text BEFORE any of the 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 lang-less/lang="css" block. Anything other
-    // than the four recognized preprocessor langs (a typo, or a genuinely unsupported lang)
-    // still throws, unchanged from before.
+    // Reduces a preprocessor block to plain CSS BEFORE the renaming below runs - the renaming is
+    // language-agnostic, it only ever sees plain CSS.
     const content = await compileStyleBlockContent(style, filename);
-    const parsed = parseCSS(content, { filename });
 
     if (style.module) {
-      const bindingName = typeof style.module === 'string' ? style.module : '$style';
-      // Scanned against the COMPILED content, not style.content: :global(...) isn't native
-      // SCSS/Less/Stylus syntax (each preprocessor passes an unrecognized selector through
-      // unchanged), but scanning the compiler's actual output can't drift under nesting/
-      // interpolation the way assuming source-and-output stay textually identical could.
-      const exemptFromScope = globalClassNamesIn(content);
-      const classMap = cssModuleBindings.get(bindingName) ?? {};
-      for (const [className, props] of Object.entries(parsed)) {
-        const isExempt = exemptFromScope.has(className);
-        const registeredName = isExempt ? className : `${className}__module__${scopeId}`;
-        classMap[className] = registeredName;
-        styles[registeredName] = { ...styles[registeredName], ...props };
-      }
-      cssModuleBindings.set(bindingName, classMap);
+      const bindingName =
+        typeof style.module === 'string' ? style.module : '$style';
+      const compiled = compileCssModule(content, filename);
+      appendRules(rules, compiled.rules);
+      cssModuleBindings.set(bindingName, {
+        ...cssModuleBindings.get(bindingName),
+        ...compiled.classMap,
+      });
     } else if (style.scoped) {
-      const exemptFromScope = globalClassNamesIn(content);
-      for (const [className, props] of Object.entries(parsed)) {
-        const isExempt = exemptFromScope.has(className);
-        const registeredName = isExempt ? className : `${className}__${scopeId}`;
-        if (!isExempt) localScopedNames.add(className);
-        styles[registeredName] = { ...styles[registeredName], ...props };
-      }
+      const compiled = compileScopedCss(content, {
+        filename,
+        pattern: `[local]__${scopeId}`,
+      });
+      appendRules(rules, compiled.rules);
+      for (const [name, renamed] of compiled.names)
+        scopedClassNames.set(name, renamed);
     } else {
-      for (const [className, props] of Object.entries(parsed)) {
-        styles[className] = { ...styles[className], ...props };
-      }
+      appendRules(rules, compileCssToRules(content, { filename }).rules);
     }
   }
 
-  // The nodeTransform rewrites every class/:class binding's compiled output to route through
-  // scopeClassName() at the scoped names this file actually defines — skipped entirely (not
-  // even passed to the compiler) when nothing in this file is scoped, so a .vue with only
-  // unscoped/no styles compiles exactly as before, zero added runtime cost or behavior change.
+  // Skipped entirely (not even passed to the compiler) when nothing in this file is scoped, so
+  // a .vue with only unscoped/no styles compiles with zero added runtime cost.
   const templateOptions =
-    localScopedNames.size > 0
+    scopedClassNames.size > 0
       ? {
           compilerOptions: {
-            nodeTransforms: [createScopeClassNodeTransform(localScopedNames, scopeId)],
+            nodeTransforms: [createScopeClassNodeTransform(scopedClassNames)],
           },
         }
       : undefined;
 
   // inlineTemplate folds the <template> render fn into setup(): one module, one `export
   // default`. Only valid with <script setup>, which the canary uses.
+  //
+  // genDefaultAs turns that `export default {...}` into `const __sfc__ = {...}`, so a <style
+  // module> block can hang __cssModules off the component OPTIONS object before the module
+  // exports it (the same thing @vitejs/plugin-vue does). Vue resolves a template's `$style` /
+  // `classes` off `instance.type.__cssModules`, NOT off module scope, so without this the
+  // emitted const is unreachable from the template and `$style.card` throws at render. Only
+  // requested when a module block exists, so every other .vue file keeps identical output.
+  const hasCssModules = cssModuleBindings.size > 0;
   const compiled = compileScript(descriptor, {
     id: scopeId,
     inlineTemplate: true,
     templateOptions,
     fs: compileScriptFs,
+    ...(hasCssModules ? { genDefaultAs: SFC_COMPONENT_VAR } : {}),
   });
-  // Point every Vue import (the compiler's injected helpers AND the user's own
-  // `import { ref } from 'vue'`) at the runtime-helpers shim, which re-exports the same
-  // @vue/runtime-core singleton the @symbiote-native/vue adapter builds its custom renderer on, plus
-  // our own directive implementations. No vue/runtime-dom in a native bundle.
-  const code = compiled.content.replace(/from\s*(['"])vue\1/g, 'from "@symbiote-native/vue/runtime-helpers"');
+  // Retargets every Vue import (compiler-injected helpers AND the user's own `from 'vue'`) at
+  // the runtime-helpers shim - no vue/runtime-dom in a native bundle.
+  const code = compiled.content.replace(
+    /from\s*(['"])vue\1/g,
+    'from "@symbiote-native/vue/runtime-helpers"',
+  );
 
-  if (Object.keys(styles).length === 0) return code;
+  if (rules.length === 0 && !hasCssModules) return code;
 
-  // Only a scoped file needs scopeClassName + its two per-file constants — the nodeTransform
-  // above only ever emits calls to `__scopeClass`/`__localScopedClassNames`/`__scopeId` when
-  // localScopedNames is non-empty, so these stay unimported/undeclared (and absent from the
-  // bundle) for every non-scoped .vue file.
+  // Only a scoped file needs the runtime rename helper and its per-file map, so these stay
+  // unimported for every non-scoped .vue file.
   const engineImports =
-    localScopedNames.size > 0 ? 'registerStyles, scopeClassName as __scopeClass' : 'registerStyles';
+    scopedClassNames.size > 0
+      ? 'registerRules, renameClassTokens as __scopeClass'
+      : 'registerRules';
 
-  const preamble = [`registerStyles(${JSON.stringify(styles)});`];
-  if (localScopedNames.size > 0) {
+  const preamble = [
+    `import { ${engineImports} } from '@symbiote-native/engine';`,
+    `registerRules(${serializeRules(rules)});`,
+  ];
+  if (scopedClassNames.size > 0) {
     preamble.push(
-      `const __localScopedClassNames = new Set(${JSON.stringify([...localScopedNames])});`,
-      `const __scopeId = ${JSON.stringify(scopeId)};`,
+      `const __scopedClassNames = ${JSON.stringify(Object.fromEntries(scopedClassNames))};`,
     );
   }
-  // Each <style module> binding becomes a plain top-level const holding its name->scopedName
-  // map. Placed before the compiled `export default {...}`, so it's just a closed-over module
-  // scope variable inside setup() — same trick registerStyles/__scopeId already rely on — and
-  // usable both from the inlined template (`:class="$style.card"`) and from <script setup> code
-  // itself (`$style.card`), no extra wiring needed on either side.
+  // Each <style module> binding becomes a top-level const holding its name->scopedName map,
+  // placed before the component so it's a closed-over module-scope variable usable from
+  // <script setup> code itself; the __cssModules tail below is what makes the TEMPLATE see it.
   for (const [bindingName, classMap] of cssModuleBindings) {
     preamble.push(`const ${bindingName} = ${JSON.stringify(classMap)};`);
   }
 
-  return [`import { ${engineImports} } from '@symbiote-native/engine';`, ...preamble, code].join('\n') + '\n';
+  const parts = [...preamble, code];
+  if (hasCssModules) {
+    const bindings = [...cssModuleBindings.keys()]
+      .map(name => `${JSON.stringify(name)}: ${name}`)
+      .join(', ');
+    parts.push(
+      `${SFC_COMPONENT_VAR}.__cssModules = { ${bindings} };`,
+      `export default ${SFC_COMPONENT_VAR};`,
+    );
+  }
+
+  return parts.join('\n') + '\n';
 }
 
 // Exported separately from `transform` so tests can assert on the compiled SFC output
-// (imports, injected `registerStyles` call) without driving the full upstream RN Babel preset.
+// (imports, injected `registerRules` call) without driving the full upstream RN Babel preset.
 module.exports.compileSfc = compileSfc;
 
-// Async uniformly, including the `.vue` and plain-passthrough branches that never touch a
-// preprocessor: compileSfc() itself is async now (a scss/sass/less/stylus <style> block awaits
-// preprocessors.ts's compile()), and Metro's own metro-transform-worker already
-// `await transformer.transform(...)` before touching the result (confirmed by reading the
-// installed metro-transform-worker source), so returning a Promise here is a supported,
-// exercised shape, not a hack. A sync fast-path for
-// the no-preprocessor branches would fork this function into two shapes to save a single
-// microtask on a call that only ever runs at Metro build time, content-hash-cached — not worth
-// the duplication.
+// Async uniformly, including branches that never touch a preprocessor: compileSfc() itself is
+// async now (a scss/sass/less/stylus block awaits preprocessors.ts's compile()), and Metro's own
+// metro-transform-worker already awaits transformer.transform(...), so this is a supported
+// shape - not worth forking a sync fast-path to save one microtask on a build-time,
+// content-hash-cached call.
 module.exports.transform = async function transform(params) {
   if (params.filename.endsWith('.vue')) {
     const code = await compileSfc(params.src, params.filename);
-    // Re-label as .tsx so RN's transformer strips any TS from <script setup lang="ts"> and
-    // processes the module exactly like app source. Metro tracks the real path separately.
+    // Re-label as .tsx so RN's transformer strips TS from <script setup lang="ts">. Metro
+    // tracks the real path separately.
     return upstreamTransformer.transform({
       ...params,
       src: code,
       filename: params.filename + '.tsx',
     });
   }
-  // A standalone style file (as opposed to a `.vue` file's own inline <style> block above) —
-  // the framework-agnostic path (core/css-parser's compileCssFile), usable from this example's
-  // .vue files exactly like from any other adapter's example. isStyleFile recognizes
-  // .css/.scss/.sass/.less/.styl/.stylus (+ each .module.* twin).
+  // A standalone style file (not a .vue file's inline <style> block) via the framework-agnostic
+  // compileCssFile path. isStyleFile recognizes .css/.scss/.sass/.less/.styl/.stylus (+ .module.* twins).
   if (isStyleFile(params.filename)) {
     const { code } = await compileCssFile(params.src, params.filename);
-    return upstreamTransformer.transform({ ...params, src: code, filename: params.filename + '.js' });
+    return upstreamTransformer.transform({
+      ...params,
+      src: code,
+      filename: params.filename + '.js',
+    });
   }
   return upstreamTransformer.transform(params);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "0.3.8",
+  "version": "0.5.0",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
   "license": "MIT",
   "repository": {
@@ -46,8 +46,8 @@
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "0.3.0",
-    "@symbiote-native/css-parser": "0.2.3"
+    "@symbiote-native/components": "0.5.0",
+    "@symbiote-native/css-parser": "0.4.0"
   },
   "peerDependencies": {
     "@symbiote-native/engine": ">=0.1.7",
@@ -55,8 +55,8 @@
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@symbiote-native/engine": "0.1.7",
-    "@symbiote-native/test-utils": "0.1.6"
+    "@symbiote-native/engine": "0.3.0",
+    "@symbiote-native/test-utils": "0.2.0"
   },
   "scripts": {
     "typecheck": "tsc --build",