mm

packages/css/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@defgov/css",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "./dist/index.es.js",
+  "main": "./dist/index.cjs.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "gen-index": "ts-node scripts/gen-index.ts",
+    "gen-dts": "tsc -p tsconfig.build.json",
+    "dev": "pnpm gen-index && vite build --watch",
+    "build": "pnpm gen-index && vite build && pnpm gen-dts"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "glob": "^13.0.6",
+    "ts-node": "^10.9.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}

packages/css/scripts/gen-index.ts

@@ -0,0 +1,147 @@
+import fs from "fs";
+import path from "path";
+import { globSync } from "glob";
+
+interface Config {
+  outputDir: string;
+  outputFilenameWithExt: string;
+  scanDirs: string[];
+  importPrefix: string;
+  predefineStatements: string[];
+  includeExtensions: string[];
+  excludeDirs: string[];
+  excludeFileExtensions: string[];
+  excludePatterns: RegExp[];
+}
+
+const cssConfig: Config = {
+  outputDir: "src",
+  outputFilenameWithExt: "index.css",
+  scanDirs: ["src"],
+  importPrefix: "@import",
+  predefineStatements: [],
+  includeExtensions: [".css"],
+  excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
+  excludeFileExtensions: [],
+  excludePatterns: [/^index\.(css)$/, /\.(test|spec)\./, /\.(story|stories)\./],
+};
+
+const tsConfig: Config = {
+  outputDir: "src",
+  outputFilenameWithExt: "index.ts",
+  scanDirs: ["src"],
+  importPrefix: "export * from",
+  predefineStatements: ["import './index.css'"],
+  includeExtensions: [".ts", "tsx", "js", "jsx"],
+  excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
+  excludeFileExtensions: [".d.ts"],
+  excludePatterns: [
+    /^index\.(ts|tsx|js|jsx)$/,
+    /\.(test|spec)\./,
+    /\.(story|stories)\./,
+  ],
+};
+
+const normalizePath = (p: string) => p.replace(/\\/g, "/");
+
+const isExcludeDir = (filePath: string, excludeDirs: string[]) => {
+  const normalized = normalizePath(filePath);
+  return excludeDirs.some((dir) => normalized.includes(`/${dir}/`));
+};
+
+const isExcludeFileExtensions = (
+  filePath: string,
+  excludeFileExtensions: string[],
+) => excludeFileExtensions.some((ext) => filePath.endsWith(ext));
+
+const isExcludePattern = (fileName: string, excludePatterns: RegExp[]) =>
+  excludePatterns.some((pattern) => pattern.test(fileName));
+
+// ----------------------------------------
+function isValidFile(filePath: string, config: Config): boolean {
+  const fileName = filePath.split(/[\\/]/).pop()!;
+
+  if (isExcludeDir(filePath, config.excludeDirs)) return false;
+  if (isExcludeFileExtensions(filePath, config.excludeFileExtensions))
+    return false;
+  if (isExcludePattern(fileName, config.excludePatterns)) return false;
+
+  const ext = path.extname(filePath);
+  return config.includeExtensions.includes(ext);
+}
+// -----------------------------------------
+function generateIndexFile(config: Config) {
+  const currentPath = process.cwd();
+  const outputPath = path.resolve(currentPath, config.outputDir);
+  let exportStatements: string[] = [];
+
+  // ------ scanDirs forEach start ------------------------
+  config.scanDirs.forEach((dir) => {
+    const scanPattern = path.resolve(currentPath, dir, "**", "*.*");
+
+    const allFilePath = globSync(scanPattern, {
+      absolute: true,
+      windowsPathsNoEscape: true,
+      dot: false,
+      follow: true,
+    });
+
+    const validFiles = allFilePath.filter((filePath) => {
+      return isValidFile(filePath, config);
+    });
+
+    if (validFiles.length === 0) {
+      console.log(
+        `⚠️ 未找到符合条件的文件，跳过生成 ${config.outputFilenameWithExt}`,
+      );
+      return;
+    }
+
+    validFiles.sort();
+
+    validFiles.forEach((file) => {
+      const relativePath = path.relative(outputPath, file);
+      const importPath = `./${relativePath.replace(/\\/g, "/")}`;
+      exportStatements.push(`${config.importPrefix} '${importPath}';`);
+    });
+  });
+
+  // --------- scanDirs forEach end ----------------
+
+  const indexFileContent = `
+${config.predefineStatements.join("\n")}
+${exportStatements.join("\n")}
+`.trim();
+
+  const indexFilePath = path.resolve(
+    currentPath,
+    config.outputDir,
+    config.outputFilenameWithExt,
+  );
+
+  // ✅ 内容比对，避免重复写入
+  if (fs.existsSync(indexFilePath)) {
+    const old = fs.readFileSync(indexFilePath, "utf8");
+    if (old === indexFileContent) {
+      console.log(
+        `✅ ${config.outputFilenameWithExt} 内容无变化，无需重新生成`,
+      );
+      return;
+    }
+  }
+
+  fs.writeFileSync(indexFilePath, indexFileContent, "utf8");
+  console.log(`✅ 成功生成 ${config.outputFilenameWithExt}: ${indexFilePath}`);
+}
+
+// --------------------------------------------------
+
+try {
+  console.log(`🚀 [gen-index] 开始扫描`);
+  generateIndexFile(cssConfig);
+  generateIndexFile(tsConfig);
+} catch (err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  console.error(`❌ [gen-index] 执行失败: ${msg}`);
+  process.exit(1);
+}

packages/css/src/base/root.css

@@ -365,6 +365,7 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
 
   --font-sans:
     ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -379,16 +380,22 @@
   --margin-md: calc(var(--spacing) * 2);
   --margin-lg: calc(var(--spacing) * 2);
   --margin-xl: calc(var(--spacing) * 2);
+  --margin-2xl: calc(var(--spacing) * 2);
 
   --padding-long-xs: calc(var(--spacing) * 3);
   --padding-long-sm: calc(var(--spacing) * 4);
   --padding-long-md: calc(var(--spacing) * 5);
   --padding-long-lg: calc(var(--spacing) * 8);
   --padding-long-xl: calc(var(--spacing) * 2);
+  --padding-long-2xl: calc(var(--spacing) * 2);
 
   --padding-xs: calc(var(--spacing) * 2);
   --padding-sm: calc(var(--spacing) * 4);
   --padding-md: calc(var(--spacing) * 2);
   --padding-lg: calc(var(--spacing) * 2);
   --padding-xl: calc(var(--spacing) * 2);
+  --padding-2xl: calc(var(--spacing) * 2);
+
+  --drop-shadow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
+    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
 }

packages/css/src/index.css

@@ -0,0 +1,37 @@
+@import './base/root.css';
+@import './utility/size-insensitive/align-content.css';
+@import './utility/size-insensitive/align-items.css';
+@import './utility/size-insensitive/align-self.css';
+@import './utility/size-insensitive/animation.css';
+@import './utility/size-insensitive/box-decoration.css';
+@import './utility/size-insensitive/box-inside.css';
+@import './utility/size-insensitive/box-sizing.css';
+@import './utility/size-insensitive/brand.css';
+@import './utility/size-insensitive/break-after.css';
+@import './utility/size-insensitive/break-before.css';
+@import './utility/size-insensitive/cursor.css';
+@import './utility/size-insensitive/display.css';
+@import './utility/size-insensitive/drop-shadow.css';
+@import './utility/size-insensitive/flex-direction.css';
+@import './utility/size-insensitive/flex-wrap.css';
+@import './utility/size-insensitive/font-family.css';
+@import './utility/size-insensitive/justify-content.css';
+@import './utility/size-insensitive/justify-items.css';
+@import './utility/size-insensitive/justify-self.css';
+@import './utility/size-insensitive/overflow.css';
+@import './utility/size-insensitive/overscroll-behavior.css';
+@import './utility/size-insensitive/position.css';
+@import './utility/size-insensitive/screen-reader.css';
+@import './utility/size-insensitive/theme.css';
+@import './utility/size-insensitive/user-select.css';
+@import './utility/size-insensitive/z-index.css';
+@import './utility/size-sensitive/border-radius.css';
+@import './utility/size-sensitive/font-size.css';
+@import './utility/size-sensitive/font-weight.css';
+@import './utility/size-sensitive/gap.css';
+@import './utility/size-sensitive/height.css';
+@import './utility/size-sensitive/margin-block.css';
+@import './utility/size-sensitive/margin-inline.css';
+@import './utility/size-sensitive/padding-long.css';
+@import './utility/size-sensitive/padding-short.css';
+@import './utility/size-sensitive/width.css';

packages/css/src/index.ts

@@ -0,0 +1,4 @@
+import './index.css'
+export * from './utils/cpm.ts';
+export * from './utils/cvr.ts';
+export * from './utils/prefix-list.ts';

packages/css/src/types/env.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}

packages/css/src/utility/size-insensitive/drop-shadow.css

@@ -0,0 +1,5 @@
+@layer utility {
+  .drop-shadow {
+    filter: var(--drop-shadow);
+  }
+}

packages/css/src/utility/size-insensitive/user-select.css

@@ -0,0 +1,14 @@
+@layer utility {
+  .select-none {
+    user-select: none;
+  }
+  .select-text {
+    user-select: text;
+  }
+  .select-all {
+    user-select: all;
+  }
+  .select-auto {
+    user-select: auto;
+  }
+}

packages/css/src/utility/size-sensitive/border-radius.css

@@ -20,4 +20,7 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
 }

packages/css/src/utility/size-sensitive/gap.css

@@ -17,4 +17,7 @@
   .gap-xl {
     gap: calc(var(--spacing) * 2.5);
   }
+  .gap-2xl {
+    gap: calc(var(--spacing) * 2.5);
+  }
 }

packages/css/src/utility/size-sensitive/height.css

@@ -16,7 +16,7 @@
     height: var(--height-item-lg);
   }
   .h-item-xl {
-    /* 64px navigation bar */
+    /* 56px section-header bar */
     height: var(--height-item-xl);
   }
   .h-item-2xl {

packages/css/src/utility/size-sensitive/margin-block.css

@@ -17,6 +17,9 @@
   .my-e-xl {
     margin-block-end: var(--margin-xl);
   }
+  .my-e-2xl {
+    margin-block-end: var(--margin-2xl);
+  }
   /* ------------------ */
   .my-s-none {
     margin-block-start: 0;
@@ -36,6 +39,9 @@
   .my-s-xl {
     margin-block-start: var(--margin-xl);
   }
+  .my-s-2xl {
+    margin-block-start: var(--margin-2xl);
+  }
   /* --------------------- */
   .my-none {
     margin-block: 0;
@@ -55,4 +61,7 @@
   .my-xl {
     margin-block: var(--margin-xl);
   }
+  .my-2xl {
+    margin-block: var(--margin-2xl);
+  }
 }

packages/css/src/utility/size-sensitive/margin-inline.css

@@ -17,6 +17,9 @@
   .mx-e-xl {
     margin-inline-end: var(--margin-xl);
   }
+  .mx-e-2xl {
+    margin-inline-end: var(--margin-2xl);
+  }
   /* ------------------ */
   .mx-s-none {
     margin-inline-start: 0;
@@ -36,6 +39,9 @@
   .mx-s-xl {
     margin-inline-start: var(--margin-xl);
   }
+  .mx-s-2xl {
+    margin-inline-start: var(--margin-2xl);
+  }
   /* --------------------- */
   .mx-none {
     margin-inline: 0;
@@ -55,4 +61,7 @@
   .mx-xl {
     margin-inline: var(--margin-xl);
   }
+  .mx-2xl {
+    margin-inline: var(--margin-2xl);
+  }
 }

packages/css/src/utility/size-sensitive/padding-long.css

@@ -18,4 +18,7 @@
   .px-long-xl {
     padding-inline: var(--padding-long-xl);
   }
+  .px-long-2xl {
+    padding-inline: var(--padding-long-2xl);
+  }
 }

packages/css/src/utility/size-sensitive/padding-short.css

@@ -21,6 +21,9 @@
   .px-xl {
     padding-inline: var(--padding-xl);
   }
+  .px-2xl {
+    padding-inline: var(--padding-2xl);
+  }
   /* ------------------------ */
   .py-none {
     padding-block: 0px;
@@ -40,4 +43,7 @@
   .py-xl {
     padding-block: var(--padding-xl);
   }
+  .py-2xl {
+    padding-block: var(--padding-2xl);
+  }
 }

packages/css/src/utility/size-sensitive/width.css

@@ -16,6 +16,10 @@
     width: var(--height-item-lg);
   }
   .w-item-xl {
+    /* 56px section-header bar */
+    width: var(--height-item-xl);
+  }
+  .w-item-2xl {
     /* 64px navigation bar */
     width: var(--height-item-xl);
   }
@@ -35,4 +39,7 @@
   .w-inline-xl {
     width: calc(var(--font-size-xl) * var(--line-height-xl));
   }
+  .w-inline-xl {
+    width: calc(var(--font-size-2xl) * var(--line-height-2xl));
+  }
 }

packages/css/src/utils/prefix-list.ts

@@ -33,6 +33,8 @@ export const defaultPrefixList = [
   "theme",
   "w",
   "z",
+  "drop-shadow",
+  "select",
 ];
 
 // map 里面 key 是 prefix，value 是完整 class。

packages/css/tsconfig.build.json

@@ -0,0 +1,41 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declarationDir": "./dist"
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".turbo/**/*",
+    ".cache/**/*",
+    ".vite/**/*",
+    "vite.config.ts",
+    "*.config.ts",
+    "*.config.js",
+    "tsconfig.*.json",
+    "__tests__/**/*",
+    "test/**/*",
+    "tests/**/*",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    ".storybook/**/*",
+    "stories/**/*",
+    "example/**/*",
+    "examples/**/*",
+    "scripts/**/*",
+    ".env",
+    ".env.*",
+    "public/**/*",
+    "docs/**/*",
+    "README.md",
+    "LICENSE"
+  ]
+}

packages/css/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2025",
+    "lib": ["ES2025", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["node", "vite/client"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "scripts", "vite.config.ts"]
+}

packages/css/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  // d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json
+  // 转换由 oxc 完成
+  // 打包由 rolldown 完成
+  plugins: [react()],
+
+  build: {
+    cssMinify: false,
+    lib: {
+      entry: path.resolve(import.meta.dirname, "src/index.ts"),
+      // 不写 vite 默认是 index.mjs 和 index.js，不方便识别
+      formats: ["es", "cjs"],
+      // package.json 管别人怎么使用，
+      // build.lib 管怎么打包，生成什么
+      // 如果不一致，就会报错，指向文件不存在
+      fileName: (format) => `index.${format}.js`,
+    },
+    rolldownOptions: {
+      // 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      // 专门给 UMD / IIFE​ 的映射表
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+
+    emptyOutDir: true, // 防止旧产物残留
+    sourcemap: true, // 方便调试
+    cssCodeSplit: false, // 合并成一个css文件
+    outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录
+  },
+});