css2class 2.0.0

package/configs/spacing.config.js

@@ -0,0 +1,37 @@
+// 间距配置模块
+module.exports = {
+  // Margin 配置
+  margin: {
+    m: 'margin',
+    mt: 'margin-top',
+    mr: 'margin-right',
+    mb: 'margin-bottom',
+    ml: 'margin-left',
+    mx: {
+      classArr: ['margin-left', 'margin-right'],
+    },
+    my: {
+      classArr: ['margin-top', 'margin-bottom'],
+    },
+  },
+
+  // Padding 配置
+  padding: {
+    p: 'padding',
+    pt: 'padding-top',
+    pr: 'padding-right',
+    pb: 'padding-bottom',
+    pl: 'padding-left',
+    px: {
+      classArr: ['padding-left', 'padding-right'],
+    },
+    py: {
+      classArr: ['padding-top', 'padding-bottom'],
+    },
+  },
+
+  // Gap 配置
+  gap: {
+    gap: 'gap',
+  },
+};

package/configs/typography.config.js

@@ -0,0 +1,41 @@
+// 字体排版配置模块
+module.exports = {
+  // 字体大小
+  fontSize: {
+    text: 'font-size',
+  },
+
+  // 字体粗细
+  fontWeight: {
+    font: 'font-weight',
+    'font-thin': 'font-weight: 100;',
+    'font-extralight': 'font-weight: 200;',
+    'font-light': 'font-weight: 300;',
+    'font-normal': 'font-weight: 400;',
+    'font-medium': 'font-weight: 500;',
+    'font-semibold': 'font-weight: 600;',
+    'font-bold': 'font-weight: 700;',
+    'font-extrabold': 'font-weight: 800;',
+    'font-black': 'font-weight: 900;',
+    bold: 'font-weight: bold;',
+  },
+
+  // 行高
+  lineHeight: {
+    leading: 'line-height',
+  },
+
+  // 字间距
+  letterSpacing: {
+    spacing: 'letter-spacing',
+    tracking: 'letter-spacing',
+  },
+
+  // 文本对齐
+  textAlign: {
+    'text-left': 'text-align: left;',
+    'text-center': 'text-align: center;',
+    'text-right': 'text-align: right;',
+    'text-justify': 'text-align: justify;',
+  },
+};

package/docs/.vitepress/config.mjs

@@ -0,0 +1,65 @@
+/*
+ * @LastEditors: biz
+ */
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  title: 'Class2CSS',
+  description: '企业级原子化CSS生成工具，支持智能单位处理、配置验证、性能缓存和向后兼容',
+  lang: 'zh-CN',
+
+  themeConfig: {
+    nav: [
+      { text: '文档', link: '/guide/getting-started' },
+      { text: '参考', link: '/guide/config' },
+      { text: 'FAQ', link: '/guide/faq' },
+    ],
+
+    sidebar: {
+      '/guide/': [
+        {
+          text: '开始',
+          items: [
+            { text: '快速开始', link: '/guide/getting-started' },
+          ],
+        },
+        {
+          text: '核心概念',
+          items: [
+            { text: '类名语法与生成规则', link: '/guide/concepts' },
+            { text: '单位与转换策略', link: '/guide/units' },
+            { text: 'Important 与静态类', link: '/guide/important-and-static' },
+          ],
+        },
+        {
+          text: '参考',
+          items: [
+            { text: 'CLI', link: '/guide/cli' },
+            { text: '规则参考', link: '/guide/rules-reference' },
+            { text: '配置模板（可复制）', link: '/guide/config-template' },
+            { text: '配置', link: '/guide/config' },
+          ],
+        },
+        {
+          text: '进阶',
+          items: [
+            { text: '增量模式（只增不删）', link: '/guide/incremental' },
+          ],
+        },
+        {
+          text: '帮助',
+          items: [{ text: '常见问题', link: '/guide/faq' }],
+        },
+      ],
+    },
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/wnagchi/css2class' }],
+
+    search: {
+      provider: 'local',
+    },
+
+    outline: { level: [2, 3] },
+  },
+});
+

package/docs/.vitepress/theme/custom.css

@@ -0,0 +1,74 @@
+:root {
+  /* Tailwind-ish brand */
+  --vp-c-brand-1: #0ea5e9; /* sky-500 */
+  --vp-c-brand-2: #38bdf8; /* sky-400 */
+  --vp-c-brand-3: #0284c7; /* sky-600 */
+
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(120deg, #38bdf8 30%, #a78bfa);
+  --vp-home-hero-image-background-image: radial-gradient(
+    circle at 50% 50%,
+    rgba(56, 189, 248, 0.35) 0%,
+    rgba(167, 139, 250, 0.25) 35%,
+    rgba(2, 132, 199, 0.15) 70%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --vp-home-hero-image-filter: blur(60px);
+}
+
+/* Make home look more like "product docs" */
+.VPHome {
+  padding-bottom: 48px;
+}
+
+.VPHomeHero .name {
+  letter-spacing: -0.02em;
+}
+
+.VPHomeHero .text {
+  max-width: 46rem;
+}
+
+.VPHomeHero .tagline {
+  max-width: 52rem;
+}
+
+.VPFeatures .VPFeature {
+  border: 1px solid var(--vp-c-divider);
+  background: color-mix(in srgb, var(--vp-c-bg-soft) 85%, transparent);
+}
+
+.VPFeatures .VPFeature:hover {
+  border-color: color-mix(in srgb, var(--vp-c-brand-1) 45%, var(--vp-c-divider));
+}
+
+/* Code blocks: slightly closer to Tailwind docs vibe */
+.vp-doc div[class*='language-'] {
+  border: 1px solid var(--vp-c-divider);
+  box-shadow: none;
+}
+
+.vp-doc :not(pre) > code {
+  border: 1px solid var(--vp-c-divider);
+  background: color-mix(in srgb, var(--vp-c-bg-soft) 78%, transparent);
+  padding: 0.15em 0.35em;
+  border-radius: 6px;
+}
+
+/* Callouts */
+.vp-doc .custom-block {
+  border: 1px solid var(--vp-c-divider);
+}
+
+.vp-doc .custom-block.tip {
+  border-color: color-mix(in srgb, var(--vp-c-brand-1) 40%, var(--vp-c-divider));
+}
+
+.vp-doc .custom-block.warning {
+  border-color: color-mix(in srgb, #f59e0b 45%, var(--vp-c-divider));
+}
+
+.vp-doc .custom-block.danger {
+  border-color: color-mix(in srgb, #ef4444 45%, var(--vp-c-divider));
+}
+

package/docs/.vitepress/theme/index.js

@@ -0,0 +1,7 @@
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
+
+export default {
+  extends: DefaultTheme,
+};
+

package/docs/guide/cli.md

@@ -0,0 +1,97 @@
+# CLI 使用说明
+
+CLI 适合在 CI 或本地快速覆盖配置（例如临时换输入/输出目录）。你可以直接运行 `class2css`，或者在项目里通过 npm scripts 间接运行。
+
+## 基本用法
+
+```bash
+class2css [options]
+```
+
+:::tip
+如果你是通过本项目自带脚本运行（例如 `npm run start`），本质上也是把参数传给 `class2css`。
+:::
+
+## 参数一览
+
+### 配置与模式
+
+- **`-c, --config <path>`**：指定配置文件路径（默认 `./class2css.config.js`）
+- **`--no-watch`**：关闭监听模式（执行一次扫描后退出）
+
+### 运行时覆盖（覆盖配置文件）
+
+- **`-i, --input <path>`**：覆盖输入目录（扫描/监听入口）
+  - 目前该参数为**单路径**覆盖（对应 `multiFile.entry.path` 的单值用法）
+  - 如需多目录/多文件入口，请在配置中使用 `multiFile.entry.path: string[]`
+- **`-o, --output <path>`**：覆盖输出目录
+- **`-f, --output-file <name>`**：覆盖输出文件名
+- **`-t, --output-type <type>`**：覆盖输出类型（`filePath` 或 `uniFile`）
+
+### 文档服务
+
+- **`--docs`**：启用文档服务（与主程序并行运行）
+- **`--docs-port <port>`**：指定文档服务端口（默认 5173；若占用则自动寻找下一个可用端口）
+- **`--docs-host <host>`**：指定文档服务主机（默认 `127.0.0.1`）
+- **`--docs-open`**：启动后自动打开浏览器
+- **`--docs-only`**：只启动文档服务，不启动 class2css 主流程
+
+### 其他
+
+- **`-h, --help`**：显示帮助信息
+- **`-v, --version`**：显示版本信息
+
+## 使用示例
+
+### 基本使用
+
+```bash
+# 默认配置启动（监听模式）
+class2css
+
+# 使用自定义配置文件
+class2css -c ./my-config.js
+
+# 单次构建（不监听）
+class2css --no-watch
+```
+
+### 运行时覆盖
+
+```bash
+# 覆盖输入和输出目录
+class2css -i ./src -o ./dist
+
+# 覆盖输入、输出和文件名
+class2css -i ./pages -o ./styles -f app.wxss
+
+# 覆盖输出类型
+class2css -i ./src -o ./dist -t uniFile
+```
+
+### 文档服务
+
+```bash
+# 启动工具并同时开启文档服务
+class2css --docs
+
+# 启动文档服务并自动打开浏览器
+class2css --docs --docs-open
+
+# 指定文档服务端口
+class2css --docs --docs-port 8080
+
+# 只启动文档服务（不运行主程序）
+class2css --docs-only
+```
+
+## 注意事项
+
+1. 运行时覆盖的参数会覆盖配置文件中的对应设置
+2. 文档服务默认监听 `127.0.0.1`，只能本地访问
+3. 如果指定端口被占用，工具会自动寻找下一个可用端口
+4. 使用 `--docs-only` 时，不会执行任何 CSS 生成操作
+
+## 下一步
+
+- 了解配置结构与最佳实践：阅读 [配置指南](./config.md)

package/docs/guide/concepts.md

@@ -0,0 +1,63 @@
+# 类名语法与生成规则
+
+Class2CSS 的核心是：**把“类名”解析成一条 CSS 规则**。你只需要定义“前缀 → CSS 属性”的映射（`cssName`），剩下的值解析、单位策略、Important、排序/压缩等由工具处理。
+
+## 基本语法
+
+最常用的形式是：
+
+`<key>-<value>`
+
+- **`key`**：在 `cssName` 里定义的前缀（例如 `m`、`w`、`text`）
+- **`value`**：数值 / 特殊值 / 带单位值（例如 `10`、`50px`、`auto`）
+
+示例：
+
+```html
+<view class="m-10 w-100 h-200"></view>
+```
+
+对应（以 `baseUnit=rpx`、`unitConversion=2` 为例）：
+
+```css
+.m-10 { margin: 20rpx; }
+.w-100 { width: 200rpx; }
+.h-200 { height: 400rpx; }
+```
+
+## 带单位值 vs 自动单位
+
+在 `unitStrategy.autoDetect=true` 时：
+
+- **写了单位**：保持你写的单位（例如 `w-50px` → `50px`）
+- **没写单位**：使用配置的默认单位和转换比例（例如 `w-100` → `200rpx`）
+
+```html
+<view class="w-50px h-auto"></view>
+```
+
+## 重要性（Important）
+
+可以通过后缀标识生成 `!important`，例如：
+
+```html
+<view class="m-10-i p-20-i"></view>
+```
+
+具体后缀规则由 `importantFlags.suffix` 控制，详见 [Important 与静态类](./important-and-static.md)。
+
+## 静态类（预设片段）
+
+你也可以把一段固定 CSS 作为“静态类”注册到 `baseClassName`，例如：
+
+```html
+<view class="container flex-center"></view>
+```
+
+详见 [Important 与静态类](./important-and-static.md)。
+
+## 下一步
+
+- 想把单位处理写得更稳：阅读 [单位与转换策略](./units.md)
+- 想系统了解所有配置：阅读 [配置指南](./config.md)
+