@symbiote-native/css-parser 0.1.0 → 0.2.0

package/README.md

@@ -1,19 +1,29 @@
 # @symbiote-native/css-parser
 
-The **build-time CSS compiler** of [SymbioteJS](../../README.md) — turns a Vue SFC `<style>` block,
+The **build-time CSS compiler** of [SymbioteNative](../../README.md) — turns a Vue SFC `<style>` block,
 or a standalone `.css`/`.module.css` file, into a React Native style object at build time, resolved
 back at render time through a class-name registry shared by every adapter (React's `className`,
 Vue's `class`/`:class`, Angular's `addClass`/`removeClass`). It also compiles SCSS/Sass, Less, and
 Stylus sources down to plain CSS before the same pipeline runs, so scoped styles, `:global()`, and
 CSS Modules all work identically regardless of source language.
 
-> New to SymbioteJS? The [root README](../../README.md) has the architecture. Styling with CSS
+> New to SymbioteNative? The [root README](../../README.md) has the architecture. Styling with CSS
 > classes (instead of `StyleSheet.create`) is the supported convention across every example app —
 > this package is what makes it work at build time; [`@symbiote-native/engine`](../engine)'s
 > `style-registry` is what resolves it at runtime.
 
 ---
 
+## 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:
+
+```bash
+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
@@ -107,7 +117,7 @@ import {
   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 SymbioteJS today).
+  exists in SymbioteNative today).
 
 ## Related packages
 

package/build/index.d.ts

@@ -5,7 +5,7 @@ export { hashFilePath } from './file-scope-id.ts';
 export { compileCssFile, isCssModuleFile } from './metro-css-module.ts';
 export type { ICompiledCssFile } from './metro-css-module.ts';
 export { classNamesToDtsSource, generateModuleDts } from './generate-dts.ts';
-export { createCssMetroTransformer } from './metro-transformer.ts';
+export { createCssMetroTransformer, resolveUpstreamTransformer } from './metro-transformer.ts';
 export type { IMetroTransformer, IMetroTransformParams } from './metro-transformer.ts';
 export { compileScss, compileSass, compileLess, compileStylus, compile, detectLanguage, isStyleFile, } from './preprocessors.ts';
 export type { IPreprocessorLanguage } from './preprocessors.ts';

package/build/index.js

@@ -3,5 +3,5 @@ export { globalClassNamesIn } from "./global-selectors.js";
 export { hashFilePath } from "./file-scope-id.js";
 export { compileCssFile, isCssModuleFile } from "./metro-css-module.js";
 export { classNamesToDtsSource, generateModuleDts } from "./generate-dts.js";
-export { createCssMetroTransformer } from "./metro-transformer.js";
+export { createCssMetroTransformer, resolveUpstreamTransformer } from "./metro-transformer.js";
 export { compileScss, compileSass, compileLess, compileStylus, compile, detectLanguage, isStyleFile, } from "./preprocessors.js";

package/build/metro-transformer.d.ts

@@ -7,4 +7,5 @@ export interface IMetroTransformer {
     transform: (params: IMetroTransformParams) => unknown;
     getCacheKey?: (...args: unknown[]) => string;
 }
-export declare function createCssMetroTransformer(upstreamTransformer: IMetroTransformer): IMetroTransformer;
+export declare function resolveUpstreamTransformer(): IMetroTransformer;
+export declare function createCssMetroTransformer(upstreamTransformer?: IMetroTransformer): IMetroTransformer;

package/build/metro-transformer.js

@@ -1,12 +1,12 @@
 // A ready-made Metro babel transformer wrapper for .css/.scss/.sass/.less/.styl (+ their
-// .module.* twins) support, so a consuming app's own metro.config.js needs only a 3-line wiring
-// file instead of hand-rolling the "compile a style file, delegate everything else to upstream"
-// boilerplate three times (once per adapter's example, before this existed). @symbiote-native/css-parser
-// is a regular `dependency` of every adapter package (@symbiote-native/react, @symbiote-native/vue,
-// @symbiote-native/angular), so this is transitively resolvable from any app that already depends on one
-// of them — this repo's shamefully-hoist pnpm config (.npmrc) makes that resolvable without the
-// app adding @symbiote-native/css-parser to its own package.json. See the symbiote-sfc-style-compiler
-// skill.
+// .module.* twins) support, so a consuming app's own metro.config.js needs only
+// `babelTransformerPath: require.resolve('@symbiote-native/<adapter>/metro-css-parser')` instead of
+// hand-rolling the "compile a style file, delegate everything else to upstream" boilerplate once
+// per adapter's example. @symbiote-native/css-parser is a regular `dependency` of every adapter
+// package (@symbiote-native/react, @symbiote-native/vue, @symbiote-native/angular), so this is
+// transitively resolvable from any app that already depends on one of them — this repo's
+// shamefully-hoist pnpm config (.npmrc) makes that resolvable without the app adding
+// @symbiote-native/css-parser to its own package.json. See the symbiote-sfc-style-compiler skill.
 //
 // Sync vs async: `transform()` is async uniformly, for every recognized style extension
 // including plain `.css`. Metro's own `metro-transform-worker` already does
@@ -22,9 +22,22 @@
 // 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.
+import { createRequire } from 'node:module';
 import { compileCssFile } from "./metro-css-module.js";
 import { isStyleFile } from "./preprocessors.js";
-export function createCssMetroTransformer(upstreamTransformer) {
+// @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.
+export function resolveUpstreamTransformer() {
+    const require = createRequire(import.meta.url);
+    return require('@react-native/metro-babel-transformer');
+}
+export function createCssMetroTransformer(upstreamTransformer = resolveUpstreamTransformer()) {
     return {
         async transform(params) {
             if (!isStyleFile(params.filename))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@symbiote-native/css-parser",
-  "version": "0.1.0",
-  "description": "Build-time CSS/SCSS/Less/Stylus compiler for SymbioteJS — compiles stylesheets to React Native style objects, resolved at runtime via a cross-adapter class-name registry.",
+  "version": "0.2.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.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
@@ -39,6 +39,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@react-native/metro-babel-transformer": "0.86.0",
     "postcss": "^8.4.49",
     "postcss-value-parser": "^4.2.0"
   },