css2class 2.0.0 → 2.0.1

package/.github/workflows/deploy-docs.yml

@@ -0,0 +1,53 @@
+name: Deploy VitePress docs to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build docs
+        run: npx vitepress build docs
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

package/.head_config.mjs

@@ -0,0 +1,68 @@
+/*
+ * @LastEditors: biz
+ */
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+  // GitHub Pages（Project Pages）部署路径： https://<user>.github.io/<repo>/
+  // 所以这里必须设置为 `/<repo>/`（末尾带 /）
+  base: '/css2class/',
+  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/CONFIG.md

@@ -535,10 +535,20 @@ typography: {
   text: { properties: ['font-size'], defaultUnit: 'rpx' },
   font: { properties: ['font-weight'], defaultUnit: '' },
   leading: { properties: ['line-height'], defaultUnit: '' },
+  lh: { properties: ['line-height'], defaultUnit: 'rpx', skipSpecialProcessing: true },
   tracking: { properties: ['letter-spacing'], defaultUnit: 'rpx' }
 }
 ```
 
+> **`leading` vs `lh` 行高前缀区别：**
+>
+> | 前缀 | 示例类名 | 生成 CSS | 说明 |
+> |------|---------|---------|------|
+> | `leading` | `leading-15` | `line-height: 0.9375` | 数值 > 10 时自动除以 16，输出无单位倍数 |
+> | `leading` | `leading-1` | `line-height: 1` | 数值 ≤ 10 时直接输出无单位倍数 |
+> | `lh` | `lh-32` | `line-height: 32rpx` | 跳过倍数转换，直接输出数值 × 单位 |
+> | `lh` | `lh-48` | `line-height: 48rpx` | 适用于需要固定像素行高的场景 |
+
 #### positioning - 定位系统
 
 ```javascript
@@ -832,12 +842,39 @@ breakpoints: {
 
 ### 状态变体 (states)
 
-状态变体配置（计划中的功能，当前仅配置名称）。
+状态变体配置（Tailwind 风格伪类前缀）。当 class 以 `hover:` / `focus:` / `active:` 等前缀开头时，会生成对应的伪类选择器。
 
 ```javascript
 states: ['hover', 'focus', 'active', 'disabled', 'first', 'last', 'odd', 'even']
 ```
 
+#### 使用示例
+
+```html
+<div class="hover:bg-red hover:w-20"></div>
+<input class="focus:w-30" />
+<button class="active:opacity-50"></button>
+<div class="lg:hover:w-20"></div>
+```
+
+#### 生成的 CSS 示例
+
+```css
+.hover\:w-20:hover { width: 20px; }
+@media (min-width: 1024px) { .lg\:hover\:w-20:hover { width: 20px; } }
+```
+
+#### 伪类映射规则
+
+- `hover` → `:hover`
+- `focus` → `:focus`
+- `active` → `:active`
+- `disabled` → `:disabled`
+- `first` → `:first-child`
+- `last` → `:last-child`
+- `odd` → `:nth-child(odd)`
+- `even` → `:nth-child(even)`
+
 ### 暗色模式 (darkMode)
 
 暗色模式变体配置（计划中的功能，当前仅配置名称）。