npm - @symbiote-native/css-parser - Versions diffs - 0.1.0 - Mend

@symbiote-native/css-parser 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/LICENSE +21 -0
package/README.md +126 -0
package/build/file-scope-id.d.ts +1 -0
package/build/file-scope-id.js +14 -0
package/build/generate-dts-cli.d.ts +2 -0
package/build/generate-dts-cli.js +101 -0
package/build/generate-dts.d.ts +2 -0
package/build/generate-dts.js +43 -0
package/build/global-selectors.d.ts +1 -0
package/build/global-selectors.js +22 -0
package/build/index.d.ts +11 -0
package/build/index.js +7 -0
package/build/metro-css-module.d.ts +6 -0
package/build/metro-css-module.js +70 -0
package/build/metro-transformer.d.ts +10 -0
package/build/metro-transformer.js +41 -0
package/build/parser.d.ts +22 -0
package/build/parser.js +223 -0
package/build/preprocessors.d.ts +20 -0
package/build/preprocessors.js +128 -0
package/build/properties.d.ts +24 -0
package/build/properties.js +144 -0
package/build/values.d.ts +27 -0
package/build/values.js +107 -0
package/package.json +65 -0
package/typescript-plugin.cjs +181 -0
package/typescript-plugin.d.ts +8 -0

package/build/values.js ADDED Viewed

@@ -0,0 +1,107 @@
+// 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.
+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;
+const NUMBER_WITH_UNIT_PATTERN = /^(-?\d+(?:\.\d+)?)(px|rem|em)?$/;
+const PERCENT_PATTERN = /%$/;
+/**
+ * Convert a CSS dimension to a plain number: strips `px`, scales `rem`/`em` by
+ * {@link REM_TO_PX}, and passes unitless numbers through untouched.
+ */
+export function parseNumeric(value) {
+    const trimmed = value.trim();
+    const match = trimmed.match(NUMBER_WITH_UNIT_PATTERN);
+    if (!match) {
+        const bare = parseFloat(trimmed);
+        return Number.isNaN(bare) ? 0 : bare;
+    }
+    const amount = parseFloat(match[1]);
+    const unit = match[2];
+    return unit === 'rem' || unit === 'em' ? amount * REM_TO_PX : amount;
+}
+/**
+ * Same as {@link parseNumeric}, except a percentage value is kept as a string
+ * (`'50%'`) — RN accepts percentage strings for most layout props.
+ */
+export function parseNumericOrPercent(value) {
+    const trimmed = value.trim();
+    return PERCENT_PATTERN.test(trimmed) ? trimmed : parseNumeric(trimmed);
+}
+/**
+ * Colors, font families, and CSS keyword values (`'bold'`, `'row'`, `'red'`) pass through
+ * unchanged — RN accepts the same raw strings CSS does for these props.
+ */
+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).
+ */
+export function warnOnce(warned, key, message) {
+    if (warned.has(key))
+        return;
+    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 ADDED Viewed

@@ -0,0 +1,65 @@
+{
+  "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.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "core/css-parser"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/core/css-parser#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "default": "./build/index.js"
+    },
+    "./typescript-plugin": {
+      "types": "./typescript-plugin.d.ts",
+      "default": "./typescript-plugin.cjs"
+    },
+    "./generate-dts-cli": "./build/generate-dts-cli.js"
+  },
+  "files": [
+    "build",
+    "typescript-plugin.cjs",
+    "typescript-plugin.d.ts"
+  ],
+  "bin": {
+    "css-dts": "./build/generate-dts-cli.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "postcss": "^8.4.49",
+    "postcss-value-parser": "^4.2.0"
+  },
+  "devDependencies": {
+    "sass": "^1.101.0",
+    "less": "^4.6.7",
+    "stylus": "^0.64.0",
+    "@types/less": "^3.0.8",
+    "@types/stylus": "^0.48.43",
+    "typescript": "~6.0.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=5.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}

package/typescript-plugin.cjs ADDED Viewed

@@ -0,0 +1,181 @@
+// @symbiote-native/css-parser/typescript-plugin — a TypeScript language-service plugin that gives live,
+// in-editor autocomplete AND typo-catching for a standalone `.module.css` import
+// (`import styles from './Card.module.css'`). No terminal, no watch process, no generation step
+// a developer has to remember to run: it hooks into the IDE's OWN TS server (VS Code/WebStorm),
+// so it recomputes on every keystroke the same way the rest of tsserver already does. This is
+// the piece that makes "does the user need to keep something running" a non-question for the
+// 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.
+//
+// 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
+// while Sass has a genuine sync compile API, Less and Stylus do not (see src/preprocessors.ts) —
+// a correct, non-approximated preprocessor pipeline can't run here today. Those files still get
+// basic (non-literal) type coverage from the project's ambient `.css` fallback declaration and
+// from `css-dts`'s on-disk generation at pretypecheck time — just without live per-class
+// completion in the plugin. A real follow-up, not a silent gap: recorded here, not hidden.
+//
+// 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").
+//
+// 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
+// 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
+// machinery than a ~150-line, dependency-free plugin warrants.
+'use strict';
+const fs = require('node:fs');
+const CSS_MODULE_RE = /\.module\.css$/;
+const IDENTIFIER_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function isCssModuleFile(fileName) {
+  return CSS_MODULE_RE.test(fileName);
+}
+function kebabToCamel(value) {
+  return value.replace(/-([a-z0-9])/gi, (_match, char) => char.toUpperCase());
+}
+function extractClassNames(css) {
+  const withoutComments = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  const names = new Set();
+  const classRe = /\.([a-zA-Z_][\w-]*)/g;
+  let match;
+  while ((match = classRe.exec(withoutComments))) {
+    names.add(kebabToCamel(match[1]));
+  }
+  return [...names];
+}
+function generateDts(classNames) {
+  if (classNames.length === 0) {
+    return 'declare const styles: Record<string, string>;\nexport default styles;\n';
+  }
+  const fields = [...classNames]
+    .sort()
+    .map((name) => {
+      const key = IDENTIFIER_RE.test(name) ? name : JSON.stringify(name);
+      return `  readonly ${key}: string;`;
+    })
+    .join('\n');
+  return `declare const styles: {\n${fields}\n};\nexport default styles;\n`;
+}
+function resolveRelativePath(moduleName, containingFile) {
+  const dir = containingFile.slice(0, containingFile.lastIndexOf('/'));
+  const parts = dir.split('/');
+  for (const part of moduleName.split('/')) {
+    if (part === '.') continue;
+    if (part === '..') parts.pop();
+    else parts.push(part);
+  }
+  return parts.join('/');
+}
+function init(modules) {
+  const typescript = modules.typescript;
+  function create(info) {
+    const host = info.languageServiceHost;
+    const dtsCache = new Map();
+    function getDtsForCssFile(cssPath) {
+      let mtimeMs = 0;
+      try {
+        mtimeMs = fs.statSync(cssPath).mtimeMs;
+      } catch {
+        // missing file — falls through to a fresh (empty) read below, no cache to hit anyway
+      }
+      const cached = dtsCache.get(cssPath);
+      if (cached && cached.mtimeMs === mtimeMs) return cached.dts;
+      const content = host.readFile ? (host.readFile(cssPath) ?? '') : '';
+      const dts = generateDts(extractClassNames(content));
+      dtsCache.set(cssPath, { mtimeMs, dts });
+      return dts;
+    }
+    const originalGetScriptKind = host.getScriptKind ? host.getScriptKind.bind(host) : undefined;
+    const originalGetScriptSnapshot = host.getScriptSnapshot.bind(host);
+    const originalResolveModuleNameLiterals = host.resolveModuleNameLiterals;
+    host.getScriptKind = (fileName) =>
+      isCssModuleFile(fileName)
+        ? typescript.ScriptKind.TS
+        : (originalGetScriptKind ? originalGetScriptKind(fileName) : typescript.ScriptKind.Unknown);
+    host.getScriptSnapshot = (fileName) =>
+      isCssModuleFile(fileName)
+        ? typescript.ScriptSnapshot.fromString(getDtsForCssFile(fileName))
+        : originalGetScriptSnapshot(fileName);
+    if (originalResolveModuleNameLiterals) {
+      host.resolveModuleNameLiterals = (
+        literals,
+        containingFile,
+        redirectedReference,
+        options,
+        sourceFile,
+        reusedNames,
+      ) => {
+        const resolved = originalResolveModuleNameLiterals.call(
+          host,
+          literals,
+          containingFile,
+          redirectedReference,
+          options,
+          sourceFile,
+          reusedNames,
+        );
+        return literals.map((literal, index) => {
+          const moduleName = literal.text;
+          if (isCssModuleFile(moduleName) && moduleName.startsWith('.')) {
+            const resolvedPath = resolveRelativePath(moduleName, containingFile);
+            if (host.fileExists && host.fileExists(resolvedPath)) {
+              return {
+                resolvedModule: {
+                  resolvedFileName: resolvedPath,
+                  extension: typescript.Extension.Dts,
+                  isExternalLibraryImport: false,
+                },
+              };
+            }
+          }
+          return resolved[index];
+        });
+      };
+    }
+    return info.languageService;
+  }
+  return { create };
+}
+module.exports = init;

package/typescript-plugin.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+// Ambient type for the hand-written CommonJS plugin (typescript-plugin.cjs) — deliberately loose
+// (the tsserver plugin-init shape isn't worth pulling `typescript/lib/tsserverlibrary`'s types
+// into every consumer just to describe a function no one calls directly; tsserver itself invokes
+// it by convention, matched by shape, not by this declaration).
+declare function initTypeScriptPlugin(modules: { typescript: unknown }): {
+  create: (info: unknown) => unknown;
+};
+export = initTypeScriptPlugin;