@symbiote-native/css-parser 0.2.0 → 0.2.2

package/build/{generate-dts.js → generate-dts/index.js}

@@ -1,16 +1,16 @@
 // Generates a real on-disk `.d.ts` for a `.module.css` (or `.module.scss`/`.module.less`/
-// `.module.styl`) file — the follow-up the symbiote-sfc-style-compiler skill records as
-// deliberately deferred when CSS Modules shipped. Unlike Volar's built-in `<style module>`
+// `.module.styl`) file, giving CSS Modules imports real compile-time type checking.
+// Unlike Volar's built-in `<style module>`
 // typing for inline Vue SFC blocks (which synthesizes `Record<string, string> & {known keys}` —
 // an index signature that still accepts any key, so it never catches a typo), the type emitted
 // here has NO index signature: a typo in `styles.typo` is a genuine `error TS2339` under `tsc`/
 // `vue-tsc`, not a silent runtime miss. Named `<file>.d.ts` (full original filename, extension
 // appended rather than replaced — e.g. `Card.module.css.d.ts`) so TypeScript's own module
-// resolution picks it up for `import styles from './Card.module.css'` without a separate
+// resolution picks it up for a default import of `Card.module.css` without a separate
 // registration step, the same convention typed-css-modules uses.
-import { parseCSS } from "./parser.js";
-import { compile, detectLanguage } from "./preprocessors.js";
-import { isCssModuleFile } from "./metro-css-module.js";
+import { parseCSS } from "../parser/index.js";
+import { compile, detectLanguage } from "../preprocessors/index.js";
+import { isCssModuleFile } from "../metro-css-module/index.js";
 const IDENTIFIER_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
 function formatKey(className) {
     return IDENTIFIER_RE.test(className) ? className : JSON.stringify(className);

package/build/generate-dts-cli.js

@@ -14,9 +14,9 @@
 // `--watch` mode for live autocomplete while actively editing styles.
 import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
-import { isStyleFile } from "./preprocessors.js";
-import { isCssModuleFile } from "./metro-css-module.js";
-import { generateModuleDts } from "./generate-dts.js";
+import { isStyleFile } from "./preprocessors/index.js";
+import { isCssModuleFile } from "./metro-css-module/index.js";
+import { generateModuleDts } from "./generate-dts/index.js";
 const SKIPPED_DIR_NAMES = new Set(['node_modules', 'build', '.git']);
 async function collectModuleStyleFiles(root) {
     const stat = await fs.stat(root);

package/build/global-selectors.js

@@ -7,7 +7,7 @@
 // exempt these names, so it re-derives it here with its own minimal regex, independent of the
 // full CSS-to-style pipeline. Only the single-class form (`:global(.name)`) is recognized,
 // matching extractClassName's own documented narrower gap for partial/nested :global() wrapping.
-import { kebabToCamel } from "./parser.js";
+import { kebabToCamel } from "./parser/index.js";
 const GLOBAL_SELECTOR_PATTERN = /:global\(\s*\.([a-zA-Z0-9_-]+)\s*\)/g;
 export function globalClassNamesIn(css) {
     const names = new Set();

package/build/index.d.ts

@@ -1,11 +1,11 @@
-export { parseCSS, extractClassName, kebabToCamel } from './parser.ts';
-export type { ICssParserOptions } from './parser.ts';
+export { parseCSS, extractClassName, kebabToCamel } from './parser/index.ts';
+export type { ICssParserOptions } from './parser/index.ts';
 export { globalClassNamesIn } from './global-selectors.ts';
 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, 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';
+export { compileCssFile, isCssModuleFile } from './metro-css-module/index.ts';
+export type { ICompiledCssFile } from './metro-css-module/index.ts';
+export { classNamesToDtsSource, generateModuleDts } from './generate-dts/index.ts';
+export { createCssMetroTransformer, resolveUpstreamTransformer, } from './metro-transformer/index.ts';
+export type { IMetroTransformer, IMetroTransformParams } from './metro-transformer/index.ts';
+export { compileScss, compileSass, compileLess, compileStylus, compile, detectLanguage, isStyleFile, } from './preprocessors/index.ts';
+export type { IPreprocessorLanguage } from './preprocessors/index.ts';

package/build/index.js

@@ -1,7 +1,7 @@
-export { parseCSS, extractClassName, kebabToCamel } from "./parser.js";
+export { parseCSS, extractClassName, kebabToCamel } from "./parser/index.js";
 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, resolveUpstreamTransformer } from "./metro-transformer.js";
-export { compileScss, compileSass, compileLess, compileStylus, compile, detectLanguage, isStyleFile, } from "./preprocessors.js";
+export { compileCssFile, isCssModuleFile } from "./metro-css-module/index.js";
+export { classNamesToDtsSource, generateModuleDts } from "./generate-dts/index.js";
+export { createCssMetroTransformer, resolveUpstreamTransformer, } from "./metro-transformer/index.js";
+export { compileScss, compileSass, compileLess, compileStylus, compile, detectLanguage, isStyleFile, } from "./preprocessors/index.js";

package/build/{metro-css-module.d.ts → metro-css-module/index.d.ts}

@@ -1,4 +1,4 @@
-import { type ICssParserOptions } from './parser.ts';
+import { type ICssParserOptions } from '../parser/index.ts';
 export interface ICompiledCssFile {
     code: string;
 }

package/build/{metro-css-module.js → metro-css-module/index.js}

@@ -1,8 +1,8 @@
 // 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:
-// `import styles from './Card.module.scss'` works the same from a React .tsx, a Vue <script>, or
-// an Angular .ts. See the symbiote-sfc-style-compiler skill.
+// 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.*`
@@ -20,10 +20,10 @@
 // logic is entirely language-agnostic, it only ever sees `parseCSS`'s plain-CSS output, same as
 // it always did for a `.css` file.
 import * as path from 'node:path';
-import { parseCSS } from "./parser.js";
-import { globalClassNamesIn } from "./global-selectors.js";
-import { hashFilePath } from "./file-scope-id.js";
-import { compile, detectLanguage } from "./preprocessors.js";
+import { parseCSS } from "../parser/index.js";
+import { globalClassNamesIn } from "../global-selectors.js";
+import { hashFilePath } from "../file-scope-id.js";
+import { compile, detectLanguage } from "../preprocessors/index.js";
 export function isCssModuleFile(filename) {
     const ext = path.extname(filename);
     if (!ext)

package/build/{metro-transformer.js → metro-transformer/index.js}

@@ -6,7 +6,7 @@
 // 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.
+// @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
@@ -23,8 +23,8 @@
 // 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";
+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

package/build/{parser.js → parser/index.js}

@@ -1,14 +1,12 @@
-// CSS → React Native style-object compiler. Ported from wolf-tui's
-// `internal/css-parser/src/parser.ts`: `extractClassName` and the CSS-custom-property/`var()`
-// resolution machinery are framework/target-agnostic and carry over near-verbatim. `evaluateCalc`
-// drops wolf-tui's terminal-cell scaling (`1rem = 4 cells`, `4px = 1 cell`) — RN has no cell grid,
-// so `px` is identity and `rem`/`em` use the same {@link REM_TO_PX} constant as a bare value
-// (see values.ts). `mapCSSProperty` (properties.ts) targets RN's `ViewStyle`/`TextStyle` instead
-// of wolfie's `Styles`.
+// CSS → React Native style-object compiler. `extractClassName` and the CSS-custom-property/
+// `var()` resolution machinery are framework/target-agnostic. `evaluateCalc` treats `px` as
+// identity (RN has no cell grid to scale against) and `rem`/`em` as scaled by the same
+// {@link REM_TO_PX} constant as a bare value (see values.ts). `mapCSSProperty` (properties.ts)
+// targets RN's `ViewStyle`/`TextStyle`.
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
-import { mapCSSProperty } from "./properties.js";
-import { REM_TO_PX } from "./values.js";
+import { mapCSSProperty } from "../properties.js";
+import { REM_TO_PX } from "../values.js";
 //#region Selector utilities
 // Exported: the SFC style compiler (metro-vue-transformer.js) reuses this exact conversion to
 // normalize a template's kebab-case class="section-label" authoring to the camelCase key this
@@ -148,9 +146,9 @@ function resolveVariables(value, variables) {
 const CALC_TERM_PATTERN = /calc\(([^)]+)\)/g;
 const NUMBER_WITH_UNIT_PATTERN = /(-?\d+(?:\.\d+)?)(rem|em|px)?/g;
 /**
- * Evaluates the narrow shape of `calc()` wolf-tui supported (a single multiplication, or the
- * first numeric term as a fallback) — ported verbatim minus the terminal-cell unit scale.
- * `px` is identity; `rem`/`em` scale by {@link REM_TO_PX}, matching a bare dimension value.
+ * Evaluates a narrow shape of `calc()`: a single multiplication, or the first numeric term
+ * as a fallback. `px` is identity; `rem`/`em` scale by {@link REM_TO_PX}, matching a bare
+ * dimension value.
  */
 function evaluateCalc(value) {
     if (!value.includes('calc('))

package/build/{preprocessors.js → preprocessors/index.js}

@@ -1,9 +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. Ported from
-// wolf-tui's `internal/css-parser/src/preprocessors.ts` (the SCSS/Less/Stylus shape only — that
-// file's Tailwind branch is a separate, out-of-scope concern here, see the
-// symbiote-sfc-style-compiler skill).
+// downstream consumer of that text, exactly as it always was 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
 // devDependencies of THIS package ONLY (never a `dependency`, see package.json) — a project that

package/build/properties.js

@@ -1,8 +1,6 @@
-// CSS property → React Native ViewStyle/TextStyle prop mapping. Unlike wolf-tui's
-// `properties.ts` (which maps onto a terminal-cell `Styles` type with TUI-only concepts like
-// `borderStyle: 'round'`), 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.
+// 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";
 /**
  * kebab-case CSS property → { RN camelCase prop, value-conversion kind }.

package/build/values.js

@@ -1,6 +1,5 @@
 // CSS → React Native value conversion. RN style props take plain numbers for `px` / unitless
-// values (there is no terminal-cell or DP grid to scale onto, unlike wolf-tui's TUI target), so
-// unlike wolf-tui's `values.ts` there is no unit-to-cell division here — `px` is identity.
+// 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`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/css-parser",
-  "version": "0.2.0",
+  "version": "0.2.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.",
   "repository": {
     "type": "git",

package/typescript-plugin.cjs

@@ -7,18 +7,13 @@
 // live-editing case; generate-dts-cli.ts (`css-dts`, wired to `pretypecheck`) remains the
 // separate, on-disk source of truth for `tsc`/`vue-tsc` CLI runs — plugins never load there.
 //
-// Ported from wolf-tui's `@wolf-tui/typescript-plugin` (wolf-tui/packages/typescript-plugin/
-// src/index.ts) — same core mechanism (override getScriptSnapshot + resolveModuleNameLiterals to
-// synthesize a virtual .d.ts for the import), fixing two real bugs found by reading that source
-// directly: (1) its class extractor never converts kebab-case to camelCase, so a suggested key
-// like `section-tight` does NOT match the ACTUAL exported key our runtime produces
-// (@symbiote-native/css-parser's parseCSS always camelCases — see src/generate-dts.ts's
-// classNamesToDtsSource, which this plugin's dts shape mirrors); (2) its dts cache never
-// invalidates, so autocomplete goes stale after editing the CSS file until the IDE restarts
-// tsserver — this version keys the cache on the file's mtime instead. wolf-tui's package.json
-// also lists a real dependency on `@wolf-tui/css-parser` that its index.ts never actually
-// imports — a leftover of an abandoned attempt to reuse it directly, for the same reason
-// explained below.
+// Core mechanism: override getScriptSnapshot + resolveModuleNameLiterals to synthesize a virtual
+// .d.ts for the import. Two things worth calling out: (1) the class extractor converts kebab-case
+// to camelCase, so a suggested key like `section-tight` matches the ACTUAL exported key our
+// runtime produces (@symbiote-native/css-parser's parseCSS always camelCases — see
+// src/generate-dts.ts's classNamesToDtsSource, which this plugin's dts shape mirrors); (2) the dts
+// cache is keyed on the file's mtime, so autocomplete doesn't go stale after editing the CSS file
+// and wait for the IDE to restart tsserver.
 //
 // SCOPE: plain `.module.css` only, not `.module.scss`/`.module.less`/`.module.styl` —
 // getScriptSnapshot must be fully SYNCHRONOUS (tsserver's plugin protocol has no async hook), and
@@ -31,14 +26,13 @@
 // SCOPE, second cut: only a SIMPLE `.foo { ... }` class selector is recognized correctly — a
 // compound (`.btn.primary`) or descendant (`.card .title`) selector, which the real
 // src/parser.ts's extractClassName merges into ONE key (`btnPrimary`/`cardTitle`), gets
-// extracted here as TWO separate (wrong, non-existent) keys instead. Same accepted limitation
-// wolf-tui's own README documents for its regex approach ("complex selectors may not be
-// detected").
+// extracted here as TWO separate (wrong, non-existent) keys instead. This is an accepted
+// limitation of the regex-based approach — complex selectors may not be detected correctly.
 //
 // Hand-written plain CommonJS, NOT compiled from a `.ts`/`.cts` source — same convention already
-// used for each adapter's metro-css-parser.cjs shim (see the symbiote-sfc-style-compiler skill's
-// "Distribution" section). tsserver loads a plugin via a synchronous `require()`, which cannot
-// load this package's own ESM build output; a `.cts` source was tried first and rejected because
+// used for each adapter's metro-css-parser.cjs shim. tsserver loads a plugin via a synchronous
+// `require()`, which cannot load this package's own ESM build output; a `.cts` source was tried
+// first and rejected because
 // this package's shared tsconfig (`moduleResolution: "Bundler"`, needed for the rest of the
 // package) doesn't apply the classic .cts→CJS format-forcing TypeScript otherwise gives Node16/
 // NodeNext projects — carving out a second tsconfig/project reference just for one file was more