@dsh-workbench/module-tools 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-workbench/module-tools",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "模块包的构建与门禁工具：build（单文件 ESM 宿主侧 + 套 loader 壳的浏览器侧）、check（契约/产物边界/源码边界/卡片渲染）。模块包不再各带一份构建脚本。",
   "license": "MIT",
   "type": "module",

package/src/build.mjs

@@ -1,7 +1,8 @@
 
 import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
 import { builtinModules } from 'node:module';
-import { join } from 'node:path';
+import { isAbsolute, join, relative } from 'node:path';
 import { build as esbuild } from 'esbuild';
 import { SEED_SPECIFIERS } from './seed.mjs';
 
@@ -46,6 +47,11 @@ function aliasResolver({ root, unit }) {
               `模块自己的文件用 @/modules/${unit ?? '<unit>'}/… 或相对路径`,
           );
         }
+        // `@/…/X.module.css` 这类：把解析结果直接交给 CSS 落点（namespace 由 cssInjector 接管），
+        // 不要按 .ts/.tsx 去找 —— 否则别名插件的候选表把样式文件挡在外面。
+        if (base.endsWith('.css') && existsSync(base)) {
+          return { path: base, namespace: 'dsh-wb-css' };
+        }
         for (const candidate of [`${base}.ts`, `${base}.tsx`, `${base}/index.ts`, `${base}/index.tsx`]) {
           if (existsSync(candidate)) return { path: candidate };
         }
@@ -55,6 +61,64 @@ function aliasResolver({ root, unit }) {
   };
 }
 
+function cssInjector({ root }) {
+  return {
+    name: 'dsh-wb-module:css',
+    setup(context) {
+      context.onResolve({ filter: /\.css$/ }, (args) => ({
+        path: isAbsolute(args.path) ? args.path : join(args.resolveDir === '' ? root : args.resolveDir, args.path),
+        namespace: 'dsh-wb-css',
+      }));
+      context.onLoad({ filter: /.*/, namespace: 'dsh-wb-css' }, (args) => {
+        const raw = readFileSync(args.path, 'utf8');
+        const key = relative(root, args.path).split('/').reverse()[0] + ':' + args.path;
+        const scoped = /\.module\.css$/.test(args.path);
+        // `*.module.css` 按 CSS Modules 处理：类名哈希后写回 CSS，同时把映射交给调用点
+        // （`import styles from './X.module.css'` → `styles.foo`）。哈希取"模块内相对路径"，
+        // 同一个类在同一次构建里稳定，跨模块不同名。非 module 的 .css 原样注入（依赖里的就是这种）。
+        let css = raw;
+        let map = '{}';
+        if (scoped) {
+          const hash = createHash('sha1').update(relative(root, args.path)).digest('hex').slice(0, 6);
+          // `:global(...)` 里的类名**不许哈希** —— 那是外壳的契约类（比如 `.wb-iconButton`），
+          // 模块借用它时只能这样写：`.wb-envRefresh:global(.wb-iconButton)`。先把这些片段挖出来存着，
+          // 哈希完再放回去。
+          const globals = [];
+          const guarded = raw.replace(/:global\([^)]*\)/g, (piece) => {
+            globals.push(piece.slice(':global('.length, -1));
+            return `@dshwb-global-${globals.length - 1}@`;
+          });
+          const names = [
+            ...new Set([...guarded.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g)].map((match) => match[1])),
+          ].sort((a, b) => b.length - a.length);
+          // 类名**不能以数字开头**：哈希是十六进制，直接接在 `.` 后面会写出 `.3a0f86_x` 这种
+          // 非法选择器 —— 浏览器会把整条规则丢掉（实测：20 条规则只解析出 1 条，界面整屏掉样式）。
+          // 前面加一个下划线，保持 CSS Modules 的老习惯（`._3a0f86_x`）。
+          const pairs = names.map((name) => [name, `_${hash}_${name}`]);
+          css = guarded;
+          for (const [from, to] of pairs) css = css.split(`.${from}`).join(`.${to}`);
+          css = css.replace(/@dshwb-global-(\d+)@/g, (_whole, at) => globals[Number(at)] ?? '');
+          map = JSON.stringify(Object.fromEntries(pairs));
+        }
+        return {
+          loader: 'js',
+          contents: [
+            `const css = ${JSON.stringify(css)};`,
+            `const key = ${JSON.stringify(key)};`,
+            "if (typeof document !== 'undefined' && document.querySelector('style[data-dsh-wb-css=\"' + key + '\"]') === null) {",
+            "  const style = document.createElement('style');",
+            "  style.setAttribute('data-dsh-wb-css', key);",
+            "  style.textContent = css;",
+            "  document.head.appendChild(style);",
+            "}",
+            `export default ${map};`,
+          ].join('\n'),
+        };
+      });
+    },
+  };
+}
+
 export async function build({ root }) {
   const manifest = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
   const id = manifest.name;
@@ -96,7 +160,7 @@ export async function build({ root }) {
     jsxFactory: 'h',
     jsxFragment: 'Fragment',
     resolveExtensions: RESOLVE_EXTENSIONS,
-    plugins,
+    plugins: [...plugins, cssInjector({ root })],
     write: false,
     logLevel: 'warning',
   });

package/src/checks/style.mjs

@@ -1,5 +1,5 @@
 import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
-import { join, relative } from 'node:path';
+import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { discoverModulePackages } from '../discover.mjs';
 
@@ -68,6 +68,42 @@ for (const pkg of modules) {
   }
 }
 
+const bindings = [];
+for (const pkg of modules) {
+  const defined = new Map();
+  for (const file of walk(pkg.dir)) {
+    if (!/\.module\.css$/.test(file)) continue;
+    const text = readFileSync(file, 'utf8').replace(/:global\([^)]*\)/g, '');
+    defined.set(file, new Set(Array.from(text.matchAll(/\.([A-Za-z][\w-]*)/g), (m) => m[1])));
+  }
+  for (const file of walk(pkg.dir)) {
+    if (!/\.tsx?$/.test(file) || isTestSource(file)) continue;
+    const text = readFileSync(file, 'utf8');
+    for (const hit of text.matchAll(/import\s+([A-Za-z_$][\w$]*)\s+from\s+'([^']*\.module\.css)'/g)) {
+      const bind = hit[1];
+      const names = defined.get(resolve(dirname(file), hit[2]));
+      if (names === undefined) continue;
+      for (const use of text.matchAll(new RegExp(`\\b${bind}\\.([A-Za-z_$][\\w$]*)`, 'g'))) {
+        if (names.has(use[1])) continue;
+        bindings.push(
+          `${pkg.manifest.name}: ${relative(pkg.dir, file)} 用了 ${bind}.${use[1]}，` +
+            `${relative(pkg.dir, resolve(dirname(file), hit[2]))} 里没有这个类`,
+        );
+      }
+    }
+  }
+}
+
+if (bindings.length > 0) {
+  console.error(`✖ 样式绑定指向了 CSS 里不存在的类：${bindings.length} 处`);
+  for (const one of bindings) console.error(`  · ${one}`);
+  console.error(
+    '  （CSS Modules 的哈希类名靠"同一份文件、同一个导出"配对：调用点拿到的会是 undefined，' +
+      '真机上渲染成 class="undefined" —— 元素整片没样式，而且控制台一声不响）',
+  );
+  process.exit(1);
+}
+
 if (problems.length > 0) {
   console.error(`✖ 模块不许定义外壳前缀的 CSS 规则：${problems.length} 处`);
   for (const problem of problems) console.error(`  · ${problem}`);