gemcss 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,178 @@
+# gemcss
+
+[![npm](https://img.shields.io/npm/v/gemcss.svg)](https://www.npmjs.com/package/gemcss)
+[![CI](https://github.com/vkalinichev/gemcss/actions/workflows/ci.yml/badge.svg)](https://github.com/vkalinichev/gemcss/actions/workflows/ci.yml)
+
+Type-safe BEM classes from CSS modules. Write a plain `*.module.css` in BEM
+notation and get back an object where every block is a modifier-combinator
+function, with types inferred from the CSS itself.
+
+`button.module.css`
+
+```css
+.button { border-radius: 6px; padding: 8px 14px; }
+.button_disabled { opacity: 0.5; pointer-events: none; }
+.button_variant_primary { background: #2563eb; color: #fff; }
+.button_variant_ghost { background: transparent; color: #2563eb; }
+.button_size_s { padding: 4px 10px; font-size: 13px; }
+.button_size_m { padding: 8px 14px; font-size: 14px; }
+.button_size_l { padding: 12px 20px; font-size: 16px; }
+```
+
+`button.tsx`
+
+```tsx
+import styles from './button.module.css';
+// styles.button: (props?: {
+//   disabled?: boolean;
+//   variant?: 'primary' | 'ghost';
+//   size?: 's' | 'm' | 'l';
+// }) => string
+
+<button className={styles.button({ variant: 'primary', size: 'l' })} />;
+```
+
+`styles.button()` returns the base class, `styles.button({ disabled: true })`
+appends the modifier class. Class names are scoped (CSS modules), types come
+from the CSS. A block with no modifiers is a no-arg call: `styles.root()`.
+
+## Naming convention
+
+The separator is a single `_`.
+
+| Class                     | Meaning                                     |
+| ------------------------- | ------------------------------------------- |
+| `.button`                 | block `button`                              |
+| `.button_disabled`        | boolean modifier: `disabled?: boolean`      |
+| `.button_variant_primary` | enum modifier: `variant?: 'primary' \| ...` |
+
+Rules:
+
+- The first segment before `_` is the block name; a block cannot contain `_`.
+- After the block comes exactly one modifier per class: 1 segment → boolean,
+  2 segments → a `key_value` pair. More than that is a build error.
+- The values of one enum key are collected from all classes of the block.
+
+> Every export is a function. The base class is a no-arg call: `styles.root()`,
+> `styles.button()`.
+
+## Install
+
+One package for everything:
+
+```sh
+pnpm add -D gemcss
+```
+
+| Entry point        | Purpose                                                      |
+| ------------------ | ------------------------------------------------------------ |
+| `gemcss/vite`      | Vite plugin                                                  |
+| `gemcss/webpack`   | Webpack loader                                               |
+| `gemcss/ts-plugin` | TS language service plugin (types in the IDE)                |
+| `gemcss` (bin)     | CLI: generates `.d.css.ts` for `tsc` / CI                    |
+| `gemcss/runtime`   | `createGems` — the tiny runtime the bundlers wire in for you |
+
+`vite`, `webpack` and `typescript` are optional peer dependencies — you only
+need the one whose entry point you actually use.
+
+## Setup
+
+### vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { gemcss } from 'gemcss/vite';
+
+export default defineConfig({
+  plugins: [gemcss()],
+});
+```
+
+### webpack
+
+`gemcss/webpack` is the loader itself:
+
+```js
+// webpack.config.mjs
+export default {
+  module: {
+    rules: [{ test: /\.module\.css$/, use: 'gemcss/webpack', type: 'javascript/auto' }],
+  },
+};
+```
+
+The rule replaces the `css-loader` + `style-loader` pair for `*.module.css` —
+do not combine them on the same test: the CSS is injected into `document.head`
+as a `<style data-gemcss="...">` tag.
+
+### Options (vite and webpack)
+
+| Option               | Type     | Default                              | What it does               |
+| -------------------- | -------- | ------------------------------------ | -------------------------- |
+| `generateScopedName` | `string` | `'[name]__[local]__[hash:base64:5]'` | Scoped class name template |
+
+Vite: `gemcss({ generateScopedName: '…' })`. Webpack:
+`use: { loader: 'gemcss/webpack', options: { generateScopedName: '…' } }`.
+
+### typescript (language server)
+
+Types for `*.module.css` in the IDE, with no declaration files on disk:
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    "plugins": [{ "name": "gemcss/ts-plugin" }],
+  },
+}
+```
+
+In VS Code pick "Use Workspace Version" for TypeScript, otherwise the editor
+runs its own tsserver and never loads the plugin.
+
+For `tsc` and CI — where language service plugins do not run — generate the
+`.d.css.ts` declarations and enable `allowArbitraryExtensions`:
+
+```jsonc
+{
+  "compilerOptions": {
+    "allowArbitraryExtensions": true,
+  },
+}
+```
+
+```sh
+gemcss                        # generate *.module.d.css.ts next to every CSS module
+gemcss "src/**/*.module.css"   # only the given patterns
+gemcss --watch                # and regenerate on change
+```
+
+| Option        | What it does                                    |
+| ------------- | ----------------------------------------------- |
+| `-w, --watch` | watch `*.module.css` under cwd and regenerate   |
+| `--cwd <dir>` | working directory (defaults to `process.cwd()`) |
+| `-h, --help`  | show help                                       |
+
+`node_modules` is always ignored. The `.d.css.ts` files are build artifacts —
+add them to `.gitignore`. On a naming convention violation the CLI fails with a
+`GemcssParseError` and a non-zero exit code, which makes it a usable CI check.
+
+Both type mechanisms coexist: in the IDE the plugin wins (it intercepts the
+`*.module.css` resolution), while compilation reads the generated `.d.css.ts`.
+
+## Development
+
+```sh
+pnpm install
+pnpm test           # vitest
+pnpm build          # tsup + builds both examples (e2e)
+pnpm check:exports  # publint + are-the-types-wrong, against the real tarball
+```
+
+Working examples: `examples/vite-react` (React), `examples/webpack` (vanilla
+TS). Requires Node >= 22.14.
+
+Releases go through [changesets](https://github.com/changesets/changesets): run
+`pnpm changeset` alongside a change, and merging the generated Release PR
+publishes to npm.

package/dist/chunk-CNXDOGPX.js

@@ -0,0 +1,89 @@
+// src/core/parser.ts
+import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
+var GemcssParseError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "GemcssParseError";
+  }
+};
+function ctx(from) {
+  return from ? ` (in ${from})` : "";
+}
+function parseCss(css, opts = {}) {
+  const root = postcss.parse(css, { from: opts.from });
+  const classNames = [];
+  const seen = /* @__PURE__ */ new Set();
+  root.walkRules((rule) => {
+    selectorParser((selectors) => {
+      selectors.walkClasses((cls) => {
+        if (!seen.has(cls.value)) {
+          seen.add(cls.value);
+          classNames.push(cls.value);
+        }
+      });
+    }).processSync(rule.selector);
+  });
+  return buildModule(classNames, opts.from);
+}
+function buildModule(classNames, from) {
+  const blocks = {};
+  for (const raw of classNames) {
+    const segments = raw.split("_");
+    const blockName = segments[0];
+    if (!blockName) {
+      throw new GemcssParseError(`Empty block name in class ".${raw}"${ctx(from)}`);
+    }
+    const block = blocks[blockName] ??= {
+      name: blockName,
+      modifiers: {}
+    };
+    const tail = segments.slice(1);
+    if (tail.length === 0) continue;
+    if (tail.length === 1) {
+      const key = tail[0];
+      if (!key) throw new GemcssParseError(`Empty modifier in class ".${raw}"${ctx(from)}`);
+      assignBool(block, key, raw, from);
+      continue;
+    }
+    if (tail.length === 2) {
+      const key = tail[0];
+      const value = tail[1];
+      if (!key || !value) {
+        throw new GemcssParseError(`Empty modifier key/value in class ".${raw}"${ctx(from)}`);
+      }
+      assignEnum(block, key, value, raw, from);
+      continue;
+    }
+    throw new GemcssParseError(
+      `Class ".${raw}" has more than one modifier segment after block "${blockName}". Allowed: block, block_bool, block_key_value.${ctx(from)}`
+    );
+  }
+  return { blocks };
+}
+function assignBool(block, key, raw, from) {
+  const existing = block.modifiers[key];
+  if (existing && existing.kind === "enum") {
+    throw new GemcssParseError(
+      `Modifier "${key}" of block "${block.name}" used as both boolean (".${raw}") and enum.${ctx(from)}`
+    );
+  }
+  block.modifiers[key] = { kind: "bool" };
+}
+function assignEnum(block, key, value, raw, from) {
+  const existing = block.modifiers[key];
+  if (existing && existing.kind === "bool") {
+    throw new GemcssParseError(
+      `Modifier "${key}" of block "${block.name}" used as both enum (".${raw}") and boolean.${ctx(from)}`
+    );
+  }
+  const mod = existing && existing.kind === "enum" ? existing : block.modifiers[key] = { kind: "enum", values: [] };
+  if (!mod.values.includes(value)) {
+    mod.values.push(value);
+  }
+}
+
+export {
+  GemcssParseError,
+  parseCss
+};

package/dist/chunk-DMYDRHTS.js

@@ -0,0 +1,31 @@
+import {
+  parseCss
+} from "./chunk-CNXDOGPX.js";
+
+// src/core/compile.ts
+import postcss from "postcss";
+import postcssModules from "postcss-modules";
+async function compile(code, id, opts = {}) {
+  let scoped = {};
+  const result = await postcss([
+    postcssModules({
+      generateScopedName: opts.generateScopedName ?? "[name]__[local]__[hash:base64:5]",
+      getJSON: (_file, json) => {
+        scoped = json;
+      }
+    })
+  ]).process(code, { from: id });
+  const module = parseCss(code, { from: id });
+  return { css: result.css, scoped, module };
+}
+
+// src/core/runtime-path.ts
+import { createRequire } from "module";
+function runtimePath() {
+  return createRequire(import.meta.url).resolve("gemcss/runtime");
+}
+
+export {
+  compile,
+  runtimePath
+};

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+import {
+  GemcssParseError,
+  parseCss
+} from "./chunk-CNXDOGPX.js";
+
+// src/cli.ts
+import { watch as fsWatch } from "fs";
+import { stat } from "fs/promises";
+import { resolve as resolve2 } from "path";
+import { parseArgs } from "util";
+
+// src/cli/gen.ts
+import { glob, readFile, rm, writeFile } from "fs/promises";
+import { resolve } from "path";
+
+// src/core/dts.ts
+var IDENT = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function propKey(name) {
+  return IDENT.test(name) ? name : JSON.stringify(name);
+}
+function strLit(value) {
+  return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+}
+function propsParam(block) {
+  const keys = Object.keys(block.modifiers);
+  if (keys.length === 0) return "";
+  const fields = keys.map((k) => {
+    const mod = block.modifiers[k];
+    const type = mod.kind === "bool" ? "boolean" : mod.values.map(strLit).join(" | ");
+    return `${propKey(k)}?: ${type}`;
+  });
+  return `props?: { ${fields.join("; ")} }`;
+}
+function generateDts(module) {
+  const lines = ["declare const gems: {"];
+  for (const block of Object.values(module.blocks)) {
+    lines.push(`  ${propKey(block.name)}(${propsParam(block)}): string;`);
+  }
+  lines.push("};");
+  lines.push("export default gems;");
+  lines.push("");
+  return lines.join("\n");
+}
+
+// src/cli/gen.ts
+var DEFAULT_PATTERNS = ["**/*.module.css"];
+function dtsPathFor(cssFile) {
+  return cssFile.replace(/\.css$/, ".d.css.ts");
+}
+async function generateOne(cssFile) {
+  const css = await readFile(cssFile, "utf8");
+  const dts = generateDts(parseCss(css, { from: cssFile }));
+  const out = dtsPathFor(cssFile);
+  await writeFile(out, dts);
+  return out;
+}
+async function removeOne(cssFile) {
+  await rm(dtsPathFor(cssFile), { force: true });
+}
+async function run(patterns, opts = {}) {
+  const cwd = opts.cwd ?? process.cwd();
+  const files = glob(patterns.length ? patterns : DEFAULT_PATTERNS, {
+    cwd,
+    exclude: ["**/node_modules/**"]
+  });
+  const written = [];
+  for await (const file of files) {
+    written.push(await generateOne(resolve(cwd, file)));
+  }
+  return written;
+}
+
+// src/cli.ts
+var USAGE = `gemcss \u2014 generate .d.css.ts declarations for CSS modules
+
+Usage:
+  gemcss [patterns...] [options]
+
+Options:
+  -w, --watch        watch and regenerate on change
+  --cwd <dir>        working directory (default: process.cwd())
+  -h, --help         show this help
+
+Default pattern: ${DEFAULT_PATTERNS.join(" ")}
+Watch mode follows every *.module.css under cwd (node_modules ignored).`;
+async function main() {
+  const { values, positionals } = parseArgs({
+    allowPositionals: true,
+    options: {
+      watch: { type: "boolean", short: "w" },
+      cwd: { type: "string" },
+      help: { type: "boolean", short: "h" }
+    }
+  });
+  if (values.help) {
+    console.log(USAGE);
+    return;
+  }
+  const cwd = resolve2(values.cwd ?? process.cwd());
+  try {
+    const written = await run(positionals, { cwd });
+    for (const file of written) console.log(`generated ${file}`);
+    console.log(`gemcss: ${written.length} file(s)`);
+  } catch (err) {
+    fail(err);
+    if (!values.watch) process.exit(1);
+  }
+  if (values.watch) watch(cwd);
+}
+function watch(cwd) {
+  fsWatch(cwd, { recursive: true }, (_event, rel) => {
+    if (!rel || !rel.endsWith(".module.css") || rel.includes("node_modules")) return;
+    void onChange(resolve2(cwd, rel));
+  });
+  console.log(`gemcss: watching ${cwd}`);
+}
+async function onChange(file) {
+  try {
+    await stat(file);
+  } catch {
+    return removeOne(file);
+  }
+  try {
+    console.log(`generated ${await generateOne(file)}`);
+  } catch (err) {
+    fail(err);
+  }
+}
+function fail(err) {
+  if (err instanceof GemcssParseError) {
+    console.error(`gemcss: ${err.message}`);
+  } else {
+    console.error(err);
+  }
+}
+void main();

package/dist/compile-Br7cHtI1.d.ts

@@ -0,0 +1,6 @@
+interface CompileOptions {
+    /** Scoped name template for postcss-modules. */
+    generateScopedName?: string;
+}
+
+export type { CompileOptions as C };

package/dist/runtime.d.ts

@@ -0,0 +1,12 @@
+/** Props passed to a gem function: boolean flags and enum values. */
+type GemProps = Record<string, string | boolean | undefined>;
+/** A block's class combinator function. */
+type Gem = (props?: GemProps) => string;
+/**
+ * Build the `gems` object from a list of block names and a `raw → scoped` map.
+ * Every block is a function: called with no arguments it returns the base class,
+ * called with props it appends the classes of the active modifiers.
+ */
+declare function createGems(blocks: string[], scoped: Record<string, string>): Record<string, Gem>;
+
+export { type Gem, type GemProps, createGems };

package/dist/runtime.js

@@ -0,0 +1,24 @@
+// src/runtime.ts
+function createGems(blocks, scoped) {
+  const gems = {};
+  for (const name of blocks) {
+    const base = scoped[name] ?? name;
+    gems[name] = (props) => {
+      if (!props) return base;
+      let out = base;
+      for (const key in props) {
+        const v = props[key];
+        if (v === true) {
+          out += " " + (scoped[`${name}_${key}`] ?? `${name}_${key}`);
+        } else if (v != null && v !== false) {
+          out += " " + (scoped[`${name}_${key}_${v}`] ?? `${name}_${key}_${v}`);
+        }
+      }
+      return out;
+    };
+  }
+  return gems;
+}
+export {
+  createGems
+};

package/dist/ts-plugin.cjs

@@ -0,0 +1,206 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/ts-plugin.ts
+var import_node_path = require("path");
+
+// src/ts-plugin/generate-dts.ts
+var import_node_fs = require("fs");
+
+// src/core/dts.ts
+var IDENT = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function propKey(name) {
+  return IDENT.test(name) ? name : JSON.stringify(name);
+}
+function strLit(value) {
+  return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+}
+function propsParam(block) {
+  const keys = Object.keys(block.modifiers);
+  if (keys.length === 0) return "";
+  const fields = keys.map((k) => {
+    const mod = block.modifiers[k];
+    const type = mod.kind === "bool" ? "boolean" : mod.values.map(strLit).join(" | ");
+    return `${propKey(k)}?: ${type}`;
+  });
+  return `props?: { ${fields.join("; ")} }`;
+}
+function generateDts(module2) {
+  const lines = ["declare const gems: {"];
+  for (const block of Object.values(module2.blocks)) {
+    lines.push(`  ${propKey(block.name)}(${propsParam(block)}): string;`);
+  }
+  lines.push("};");
+  lines.push("export default gems;");
+  lines.push("");
+  return lines.join("\n");
+}
+
+// src/core/parser.ts
+var import_postcss = __toESM(require("postcss"), 1);
+var import_postcss_selector_parser = __toESM(require("postcss-selector-parser"), 1);
+var GemcssParseError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "GemcssParseError";
+  }
+};
+function ctx(from) {
+  return from ? ` (in ${from})` : "";
+}
+function parseCss(css, opts = {}) {
+  const root = import_postcss.default.parse(css, { from: opts.from });
+  const classNames = [];
+  const seen = /* @__PURE__ */ new Set();
+  root.walkRules((rule) => {
+    (0, import_postcss_selector_parser.default)((selectors) => {
+      selectors.walkClasses((cls) => {
+        if (!seen.has(cls.value)) {
+          seen.add(cls.value);
+          classNames.push(cls.value);
+        }
+      });
+    }).processSync(rule.selector);
+  });
+  return buildModule(classNames, opts.from);
+}
+function buildModule(classNames, from) {
+  const blocks = {};
+  for (const raw of classNames) {
+    const segments = raw.split("_");
+    const blockName = segments[0];
+    if (!blockName) {
+      throw new GemcssParseError(`Empty block name in class ".${raw}"${ctx(from)}`);
+    }
+    const block = blocks[blockName] ??= {
+      name: blockName,
+      modifiers: {}
+    };
+    const tail = segments.slice(1);
+    if (tail.length === 0) continue;
+    if (tail.length === 1) {
+      const key = tail[0];
+      if (!key) throw new GemcssParseError(`Empty modifier in class ".${raw}"${ctx(from)}`);
+      assignBool(block, key, raw, from);
+      continue;
+    }
+    if (tail.length === 2) {
+      const key = tail[0];
+      const value = tail[1];
+      if (!key || !value) {
+        throw new GemcssParseError(`Empty modifier key/value in class ".${raw}"${ctx(from)}`);
+      }
+      assignEnum(block, key, value, raw, from);
+      continue;
+    }
+    throw new GemcssParseError(
+      `Class ".${raw}" has more than one modifier segment after block "${blockName}". Allowed: block, block_bool, block_key_value.${ctx(from)}`
+    );
+  }
+  return { blocks };
+}
+function assignBool(block, key, raw, from) {
+  const existing = block.modifiers[key];
+  if (existing && existing.kind === "enum") {
+    throw new GemcssParseError(
+      `Modifier "${key}" of block "${block.name}" used as both boolean (".${raw}") and enum.${ctx(from)}`
+    );
+  }
+  block.modifiers[key] = { kind: "bool" };
+}
+function assignEnum(block, key, value, raw, from) {
+  const existing = block.modifiers[key];
+  if (existing && existing.kind === "bool") {
+    throw new GemcssParseError(
+      `Modifier "${key}" of block "${block.name}" used as both enum (".${raw}") and boolean.${ctx(from)}`
+    );
+  }
+  const mod = existing && existing.kind === "enum" ? existing : block.modifiers[key] = { kind: "enum", values: [] };
+  if (!mod.values.includes(value)) {
+    mod.values.push(value);
+  }
+}
+
+// src/ts-plugin/generate-dts.ts
+var FALLBACK = "declare const gems: Record<string, (props?: Record<string, string | boolean>) => string>;\nexport default gems;\n";
+function dtsForFile(fileName, read = defaultRead) {
+  const css = read(fileName);
+  if (css == null) return FALLBACK;
+  try {
+    return generateDts(parseCss(css, { from: fileName }));
+  } catch {
+    return FALLBACK;
+  }
+}
+function defaultRead(f) {
+  try {
+    return (0, import_node_fs.readFileSync)(f, "utf8");
+  } catch {
+    return void 0;
+  }
+}
+
+// src/ts-plugin.ts
+var MODULE_CSS = /\.module\.css$/;
+function init({ typescript: ts }) {
+  function create(info) {
+    const host = info.languageServiceHost;
+    const read = (f) => host.readFile?.(f);
+    const origKind = host.getScriptKind?.bind(host);
+    host.getScriptKind = (fileName) => {
+      if (MODULE_CSS.test(fileName)) return ts.ScriptKind.TS;
+      return origKind ? origKind(fileName) : ts.ScriptKind.Unknown;
+    };
+    const origSnapshot = host.getScriptSnapshot.bind(host);
+    host.getScriptSnapshot = (fileName) => {
+      if (MODULE_CSS.test(fileName)) {
+        return ts.ScriptSnapshot.fromString(dtsForFile(fileName, read));
+      }
+      return origSnapshot(fileName);
+    };
+    if (host.resolveModuleNameLiterals) {
+      const origResolve = host.resolveModuleNameLiterals.bind(host);
+      host.resolveModuleNameLiterals = (literals, containingFile, ...rest) => {
+        const resolved = origResolve(literals, containingFile, ...rest);
+        return literals.map((literal, i) => {
+          const name = literal.text;
+          if (MODULE_CSS.test(name)) {
+            const fileName = name.startsWith(".") ? (0, import_node_path.resolve)((0, import_node_path.dirname)(containingFile), name) : name;
+            return {
+              resolvedModule: {
+                resolvedFileName: fileName,
+                extension: ts.Extension.Dts,
+                isExternalLibraryImport: false
+              }
+            };
+          }
+          return resolved[i];
+        });
+      };
+    }
+    return info.languageService;
+  }
+  return { create };
+}
+module.exports = init;

package/dist/ts-plugin.d.cts

@@ -0,0 +1,15 @@
+import tsModule from 'typescript/lib/tsserverlibrary';
+
+interface InitArgs {
+    typescript: typeof tsModule;
+}
+/**
+ * TS language service plugin: types for `import gems from './x.module.css'`
+ * without declaration files on disk. Patches the languageServiceHost:
+ *  - getScriptKind     -> TS for `*.module.css`
+ *  - getScriptSnapshot -> the generated `.d.ts`
+ *  - resolveModuleNameLiterals -> resolves the import to that virtual Dts
+ */
+declare function init({ typescript: ts }: InitArgs): tsModule.server.PluginModule;
+
+export = init;

package/dist/vite.d.ts

@@ -0,0 +1,20 @@
+import { Plugin } from 'vite';
+import { C as CompileOptions } from './compile-Br7cHtI1.js';
+
+/**
+ * Compile a CSS module into a gems JS module plus a virtual CSS id.
+ * A pure function — testable without Vite.
+ */
+declare function buildGemsModule(file: string, code: string, options?: CompileOptions, runtimeImport?: string): Promise<{
+    js: string;
+    cssId: string;
+    css: string;
+}>;
+/**
+ * gemcss Vite plugin: `*.module.css` -> a typed `gems` object.
+ * The import resolves to a virtual JS module; the CSS goes back into the Vite
+ * pipeline as a separate virtual `.css` import so it still gets injected.
+ */
+declare function gemcss(options?: CompileOptions): Plugin;
+
+export { buildGemsModule, gemcss as default, gemcss };

package/dist/vite.js

@@ -0,0 +1,60 @@
+import {
+  compile,
+  runtimePath
+} from "./chunk-DMYDRHTS.js";
+import "./chunk-CNXDOGPX.js";
+
+// src/vite.ts
+import { readFile } from "fs/promises";
+var MODULE_CSS_RE = /\.module\.css$/;
+var VIRTUAL_JS = "\0gemcss-js:";
+var VIRTUAL_CSS = "\0gemcss-css:";
+function isModuleCss(source) {
+  return MODULE_CSS_RE.test(source.split("?", 1)[0] ?? source);
+}
+var enc = (s) => Buffer.from(s).toString("base64url");
+var dec = (s) => Buffer.from(s, "base64url").toString("utf8");
+async function buildGemsModule(file, code, options = {}, runtimeImport = "gemcss/runtime") {
+  const { css, scoped, module } = await compile(code, file, options);
+  const cssId = `${VIRTUAL_CSS}${enc(file)}.css`;
+  const js = `import ${JSON.stringify(cssId)};
+import { createGems } from ${JSON.stringify(runtimeImport)};
+export default createGems(${JSON.stringify(Object.keys(module.blocks))}, ${JSON.stringify(scoped)});
+`;
+  return { js, cssId, css };
+}
+function gemcss(options = {}) {
+  const cssStore = /* @__PURE__ */ new Map();
+  return {
+    name: "gemcss",
+    enforce: "pre",
+    async resolveId(source, importer) {
+      if (source.startsWith(VIRTUAL_JS) || source.startsWith(VIRTUAL_CSS)) return source;
+      if (isModuleCss(source)) {
+        const resolved = await this.resolve(source, importer, { skipSelf: true });
+        if (resolved) return VIRTUAL_JS + enc(resolved.id);
+      }
+      return null;
+    },
+    async load(id) {
+      if (id.startsWith(VIRTUAL_CSS)) {
+        return cssStore.get(id) ?? "";
+      }
+      if (id.startsWith(VIRTUAL_JS)) {
+        const file = dec(id.slice(VIRTUAL_JS.length));
+        this.addWatchFile(file);
+        const code = await readFile(file, "utf8");
+        const { js, cssId, css } = await buildGemsModule(file, code, options, runtimePath());
+        cssStore.set(cssId, css);
+        return js;
+      }
+      return null;
+    }
+  };
+}
+var vite_default = gemcss;
+export {
+  buildGemsModule,
+  vite_default as default,
+  gemcss
+};

package/dist/webpack.d.ts

@@ -0,0 +1,13 @@
+import { LoaderContext } from 'webpack';
+import { C as CompileOptions } from './compile-Br7cHtI1.js';
+
+type GemcssLoaderOptions = CompileOptions;
+/**
+ * Build the JS module for webpack: runtime CSS injection + a `gems` default export.
+ * A pure function — testable without webpack.
+ */
+declare function buildGemsModule(code: string, resourcePath: string, options?: CompileOptions, runtimeImport?: string): Promise<string>;
+/** Webpack loader: `*.module.css` -> a `gems` JS module that injects its CSS at runtime. */
+declare function gemcssLoader(this: LoaderContext<GemcssLoaderOptions>, source: string): void;
+
+export { type GemcssLoaderOptions, buildGemsModule, gemcssLoader as default };

package/dist/webpack.js

@@ -0,0 +1,32 @@
+import {
+  compile,
+  runtimePath
+} from "./chunk-DMYDRHTS.js";
+import "./chunk-CNXDOGPX.js";
+
+// src/webpack.ts
+async function buildGemsModule(code, resourcePath, options = {}, runtimeImport = runtimePath()) {
+  const { css, scoped, module } = await compile(code, resourcePath, options);
+  return `import { createGems } from ${JSON.stringify(runtimeImport)};
+const __css = ${JSON.stringify(css)};
+if (typeof document !== 'undefined') {
+  const __el = document.createElement('style');
+  __el.setAttribute('data-gemcss', ${JSON.stringify(resourcePath)});
+  __el.textContent = __css;
+  document.head.appendChild(__el);
+}
+export default createGems(${JSON.stringify(Object.keys(module.blocks))}, ${JSON.stringify(scoped)});
+`;
+}
+function gemcssLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions?.() ?? {};
+  buildGemsModule(source, this.resourcePath, options).then(
+    (js) => callback(null, js),
+    (err) => callback(err instanceof Error ? err : new Error(String(err)))
+  );
+}
+export {
+  buildGemsModule,
+  gemcssLoader as default
+};

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "gemcss",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Typed BEM classes from CSS modules — every block becomes a modifier-combinator function, with types inferred from the CSS",
+  "keywords": [
+    "css-modules",
+    "bem",
+    "typescript",
+    "vite-plugin",
+    "webpack-loader",
+    "css",
+    "typed-css",
+    "classnames"
+  ],
+  "license": "Unlicense",
+  "author": "Vladimir Kalinichev <wrumly@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vkalinichev/gemcss.git"
+  },
+  "bugs": "https://github.com/vkalinichev/gemcss/issues",
+  "homepage": "https://github.com/vkalinichev/gemcss#readme",
+  "packageManager": "pnpm@11.12.0",
+  "engines": {
+    "node": ">=22.14"
+  },
+  "bin": {
+    "gemcss": "./dist/cli.js"
+  },
+  "exports": {
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "default": "./dist/runtime.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "default": "./dist/vite.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "default": "./dist/webpack.js"
+    },
+    "./ts-plugin": {
+      "types": "./dist/ts-plugin.d.cts",
+      "default": "./dist/ts-plugin.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "ts-plugin"
+  ],
+  "scripts": {
+    "build": "pnpm build:lib && pnpm -r --filter 'example-*' build",
+    "build:lib": "pnpm clean && tsup && node scripts/fix-ts-plugin-dts.mjs",
+    "clean": "node -e \"fs.rmSync('dist',{recursive:true,force:true})\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "check:exports": "publint --strict && attw --pack . --profile esm-only",
+    "release": "changeset publish",
+    "prepublishOnly": "pnpm build:lib"
+  },
+  "dependencies": {
+    "postcss": "^8.4.49",
+    "postcss-modules": "^6.0.1",
+    "postcss-selector-parser": "^7.0.0"
+  },
+  "peerDependencies": {
+    "typescript": "^5",
+    "vite": "^5 || ^6 || ^7",
+    "webpack": "^5"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.5",
+    "@changesets/cli": "2.31.0",
+    "@types/node": "^22.10.2",
+    "eslint": "^9.17.0",
+    "prettier": "^3.4.2",
+    "publint": "0.3.21",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.8",
+    "webpack": "^5.97.1"
+  }
+}

package/ts-plugin/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/ts-plugin.cjs",
+  "types": "../dist/ts-plugin.d.cts"
+}