css2class 2.0.0 → 2.0.1

package/docs/index.md

@@ -1,68 +1,71 @@
----
-home: true
-title: Class2CSS
-titleTemplate: false
-
-hero:
-  name: Class2CSS
-  text: 面向微信小程序的原子化 CSS 生成器
-  tagline: 扫描 WXML/HTML 类名 → 生成 wxss/css。内置单位策略、配置校验、缓存与增量模式，让“写类名”变成稳定的工程能力。
-  actions:
-    - theme: brand
-      text: 开始使用
-      link: /guide/getting-started
-    - theme: alt
-      text: 查看配置
-      link: /guide/config
-
-features:
-  - title: 类名即规则
-    details: 用 `m-10`、`w-100` 这类表达直接生成样式，避免手写重复 CSS，保持风格一致。
-  - title: 智能单位策略
-    details: 支持 rpx/px 等单位；可自动检测用户单位，并按属性设置默认单位与转换比例。
-  - title: 增量只增不删
-    details: 统一文件模式支持“只增不删”与 `appendDelta` 追加写入，兼顾性能与可控性。
-  - title: 配置诊断与兼容
-    details: 新旧配置无缝兼容；冲突检测、健康检查与建议，减少“配置写错但没发现”的成本。
----
-
-## Quick start
-
-安装：
-
-```bash
-npm install css2class --save-dev
-```
-
-创建 `class2css.config.js`（最小可用示例）：
-
-```js
-module.exports = {
-  system: { baseUnit: 'rpx', unitConversion: 2, cssFormat: 'compressed' },
-  output: { path: '../dist', fileName: 'styles.wxss' },
-  cssName: {
-    m: { classArr: ['margin'], unit: 'rpx' },
-    w: { classArr: ['width'], unit: 'rpx' },
-    h: { classArr: ['height'], unit: 'rpx' },
-  },
-};
-```
-
-启动（监听模式）：
-
-```bash
-npm run start
-```
-
-在模板里使用类名：
-
-```html
-<view class="m-10 w-100 h-200"></view>
-```
-
-## 下一步
-
-- **从零跑通一次**：阅读 [快速开始](./guide/getting-started.md)
-- **了解命令**：查看 [CLI](./guide/cli.md)
-- **把配置写“正确且可维护”**：阅读 [配置指南](./guide/config.md)
-- **大型项目优化**：了解 [增量模式（只增不删）](./guide/incremental.md)
+---
+home: true
+title: Class2CSS
+titleTemplate: false
+
+hero:
+  name: Class2CSS
+  text: 面向微信小程序的原子化 CSS 生成器
+  tagline: 扫描 WXML/HTML 类名 → 生成 wxss/css。内置单位策略、配置校验、缓存与增量模式，让“写类名”变成稳定的工程能力。
+  actions:
+    - theme: brand
+      text: 开始使用
+      link: /guide/getting-started
+    - theme: alt
+      text: 查看配置
+      link: /guide/config
+
+features:
+  - title: 类名即规则
+    details: 用 `m-10`、`w-100` 这类表达直接生成样式，避免手写重复 CSS，保持风格一致。
+  - title: 智能单位策略
+    details: 支持 rpx/px 等单位；可自动检测用户单位，并按属性设置默认单位与转换比例。
+  - title: 直接颜色值
+    details: 支持 `bg-hex-fff`、`color-rgb-255-0-0` 等直接颜色值写法，无需预先配置颜色映射即可使用。
+  - title: 增量只增不删
+    details: 统一文件模式支持“只增不删”与 `appendDelta` 追加写入，兼顾性能与可控性。
+  - title: 配置诊断与兼容
+    details: 新旧配置无缝兼容；冲突检测、健康检查与建议，减少“配置写错但没发现”的成本。
+---
+
+## Quick start
+
+安装：
+
+```bash
+npm install css2class --save-dev
+```
+
+复制示例配置（推荐）：
+
+- **小程序（wxss / rpx）**：`examples/weapp/class2css.config.js` + `examples/weapp/styles.config.js`
+- **Web（css / px）**：`examples/web/class2css.config.js` + `examples/web/styles.config.js`
+
+你可以直接用 `-c` 指定示例配置启动：
+
+```bash
+class2css -c ./examples/weapp/class2css.config.js
+# 或
+class2css -c ./examples/web/class2css.config.js
+```
+
+启动（监听模式）：
+
+```bash
+npm run start            # 默认使用根目录配置：./class2css.config.js
+npm run example:web      # 显式跑 web 示例
+npm run example:weapp    # 显式跑 weapp 示例
+```
+
+在模板里使用类名：
+
+```html
+<view class="m-10 w-100 h-200 bg-hex-fff color-rgb-0-0-0"></view>
+```
+
+## 下一步
+
+- **从零跑通一次**：阅读 [快速开始](./guide/getting-started.md)
+- **了解命令**：查看 [CLI](./guide/cli.md)
+- **把配置写“正确且可维护”**：阅读 [配置指南](./guide/config.md)
+- **大型项目优化**：了解 [增量模式（只增不删）](./guide/incremental.md)

package/examples/weapp/README.md

@@ -0,0 +1,15 @@
+# 小程序示例（配置模板）
+
+该目录主要用于提供可复制的配置模板。
+
+## 运行（一次）
+
+在仓库根目录执行：
+
+```bash
+node bin/class2css.js --no-watch --config ./examples/weapp/class2css.config.js
+```
+
+生成结果：`examples/weapp/dist/styles.wxss`
+
+> 你需要把 `multiFile.entry.path` 改成你的小程序项目源码目录（wxml 所在目录），才会扫描到真实的 class。

package/examples/weapp/class2css.config.js

@@ -0,0 +1,70 @@
+// ========== 工具配置（小程序示例）==========
+// 用法：
+// 1) 推荐直接复制 `examples/weapp` 目录到你的项目根目录
+// 2) 然后执行：`class2css -c ./examples/weapp/class2css.config.js`
+// 3) 或者把本文件重命名为根目录的 `class2css.config.js`，即可用默认配置启动
+
+const path = require('path');
+const stylesConfig = require('./styles.config.js');
+
+module.exports = {
+  system: {
+    cssFormat: 'compressed', // 'multiLine' | 'singleLine' | 'compressed'
+    baseUnit: 'rpx',
+    unitConversion: 2,
+    compression: true,
+    sortClasses: true,
+    unitStrategy: {
+      autoDetect: true,
+      propertyUnits: {
+        'font-size': 'rpx',
+        'width|height': 'rpx',
+        opacity: '',
+        'z-index': '',
+        'line-height': '',
+        'border-radius': 'rpx',
+      },
+    },
+  },
+
+  // 单文件输出（非 multiFile 模式时使用；当前版本运行时通常会走 multiFile）
+  output: {
+    path: path.join(__dirname, 'dist'),
+    fileName: 'styles.wxss',
+    // commonCssPath: './common.css', // 可选：公共基础样式（相对路径基于配置文件所在目录）
+  },
+
+  importantFlags: stylesConfig.importantFlags,
+
+  // 当前版本建议启用 multiFile（用于扫描/监听入口 + 输出策略）
+  multiFile: {
+    entry: {
+      // 扫描/监听入口：string | string[]
+      // 注意：工具内部会直接按“运行目录”解释相对路径，因此示例这里显式转绝对路径，保证开箱即用
+      path: path.join(__dirname, 'src'),
+      // 小程序：wxml；同时支持 html（便于混合模板或组件库）
+      fileType: ['wxml', 'html'],
+    },
+    output: {
+      // uniFile：统一输出单文件；filePath：输出到每个文件同目录（同名）
+      cssOutType: 'uniFile',
+      path: path.join(__dirname, 'dist'),
+      fileName: 'styles.wxss',
+      fileType: 'wxss', // cssOutType=filePath 时生效
+
+      // 增量模式（可选）：只增不删（大型项目可开启）
+      incrementalOnlyAdd: false,
+      incrementalBaseline: 'fromOutputFile',
+      rebuildOnStart: true,
+      unusedReportLimit: 200,
+
+      // uniFile 写入策略（可选）：'rewrite' | 'appendDelta'
+      uniFileWriteMode: 'rewrite',
+    },
+  },
+
+  atomicRules: stylesConfig.atomicRules,
+  baseClassName: stylesConfig.baseClassName,
+  variants: stylesConfig.variants,
+  breakpoints: stylesConfig.breakpoints,
+};

package/examples/weapp/styles.config.js

@@ -0,0 +1,201 @@
+// ========== 样式规则配置（小程序示例）==========
+// 说明：
+// - 该示例更偏向小程序（rpx），你可以直接复制到项目根目录使用
+// - 如需 Web 示例（px），请参考 examples/web/styles.config.js
+
+const DEFAULT_UNIT = 'rpx';
+
+// ========== 原子化规则配置 ==========
+const atomicRules = {
+  spacing: {
+    m: { properties: ['margin'], defaultUnit: DEFAULT_UNIT },
+    mt: { properties: ['margin-top'], defaultUnit: DEFAULT_UNIT },
+    mr: { properties: ['margin-right'], defaultUnit: DEFAULT_UNIT },
+    mb: { properties: ['margin-bottom'], defaultUnit: DEFAULT_UNIT },
+    ml: { properties: ['margin-left'], defaultUnit: DEFAULT_UNIT },
+    mx: { properties: ['margin-left', 'margin-right'], defaultUnit: DEFAULT_UNIT },
+    my: { properties: ['margin-top', 'margin-bottom'], defaultUnit: DEFAULT_UNIT },
+    p: { properties: ['padding'], defaultUnit: DEFAULT_UNIT },
+    pt: { properties: ['padding-top'], defaultUnit: DEFAULT_UNIT },
+    pr: { properties: ['padding-right'], defaultUnit: DEFAULT_UNIT },
+    pb: { properties: ['padding-bottom'], defaultUnit: DEFAULT_UNIT },
+    pl: { properties: ['padding-left'], defaultUnit: DEFAULT_UNIT },
+    px: { properties: ['padding-left', 'padding-right'], defaultUnit: DEFAULT_UNIT },
+    py: { properties: ['padding-top', 'padding-bottom'], defaultUnit: DEFAULT_UNIT },
+    gap: { properties: ['gap'], defaultUnit: DEFAULT_UNIT },
+  },
+  sizing: {
+    w: { properties: ['width'], defaultUnit: DEFAULT_UNIT },
+    h: { properties: ['height'], defaultUnit: DEFAULT_UNIT },
+    'max-w': { properties: ['max-width'], defaultUnit: DEFAULT_UNIT },
+    'max-h': { properties: ['max-height'], defaultUnit: DEFAULT_UNIT },
+    'min-w': { properties: ['min-width'], defaultUnit: DEFAULT_UNIT },
+    'min-h': { properties: ['min-height'], defaultUnit: DEFAULT_UNIT },
+    size: { properties: ['width', 'height'], defaultUnit: DEFAULT_UNIT },
+  },
+  typography: {
+    'text-size': { properties: ['font-size'], defaultUnit: DEFAULT_UNIT },
+    text: { properties: ['font-size'], defaultUnit: DEFAULT_UNIT },
+    font: { properties: ['font-weight'], defaultUnit: '' },
+    leading: { properties: ['line-height'], defaultUnit: '' },
+    lh: { properties: ['line-height'], defaultUnit: DEFAULT_UNIT, skipSpecialProcessing: true },
+    tracking: { properties: ['letter-spacing'], defaultUnit: DEFAULT_UNIT },
+  },
+  positioning: {
+    top: { properties: ['top'], defaultUnit: DEFAULT_UNIT },
+    right: { properties: ['right'], defaultUnit: DEFAULT_UNIT },
+    bottom: { properties: ['bottom'], defaultUnit: DEFAULT_UNIT },
+    left: { properties: ['left'], defaultUnit: DEFAULT_UNIT },
+    inset: { properties: ['top', 'right', 'bottom', 'left'], defaultUnit: DEFAULT_UNIT },
+    'inset-x': { properties: ['left', 'right'], defaultUnit: DEFAULT_UNIT },
+    'inset-y': { properties: ['top', 'bottom'], defaultUnit: DEFAULT_UNIT },
+  },
+  borders: {
+    rounded: { properties: ['border-radius'], defaultUnit: DEFAULT_UNIT },
+    border: { properties: ['border-width'], defaultUnit: DEFAULT_UNIT },
+    bordert: { properties: ['border-top-width'], defaultUnit: DEFAULT_UNIT },
+    borderr: { properties: ['border-right-width'], defaultUnit: DEFAULT_UNIT },
+    borderb: { properties: ['border-bottom-width'], defaultUnit: DEFAULT_UNIT },
+    borderl: { properties: ['border-left-width'], defaultUnit: DEFAULT_UNIT },
+    b_r: { properties: ['border-radius'], defaultUnit: DEFAULT_UNIT },
+  },
+  effects: {
+    opacity: { properties: ['opacity'], defaultUnit: '' },
+    transition: { properties: ['transition'], defaultUnit: 'ms', skipConversion: true },
+    op: { properties: ['opacity'], defaultUnit: '' },
+    z: { properties: ['z-index'], defaultUnit: '' },
+  },
+};
+
+// ========== Tailwind 风格静态 class 配置 ==========
+const baseClassName = {
+  // 颜色族（会在下面把 baseColor 注入进来）
+  color: { ABBR: 'color' },
+  bg: { ABBR: 'background-color' },
+  bcolor: { ABBR: 'border-color' },
+
+  // display / layout
+  block: 'display: block;',
+  inline: 'display: inline;',
+  'inline-block': 'display: inline-block;',
+  flex: 'display: flex;',
+  'inline-flex': 'display: inline-flex;',
+  grid: 'display: grid;',
+  'inline-grid': 'display: inline-grid;',
+  table: 'display: table;',
+  hidden: 'display: none;',
+
+  // sizing
+  'w-full': 'width: 100%;',
+  'h-full': 'height: 100%;',
+  'w-screen': 'width: 100vw;',
+  'h-screen': 'height: 100vh;',
+
+  // flex helpers
+  'flex-1': 'flex: 1;',
+  'shrink-0': 'flex-shrink: 0;',
+  'flex-row': 'flex-direction: row;',
+  'flex-col': 'flex-direction: column;',
+  'flex-wrap': 'flex-wrap: wrap;',
+  'flex-nowrap': 'flex-wrap: nowrap;',
+  'items-start': 'align-items: flex-start;',
+  'items-center': 'align-items: center;',
+  'items-end': 'align-items: flex-end;',
+  'items-stretch': 'align-items: stretch;',
+  'justify-start': 'justify-content: flex-start;',
+  'justify-center': 'justify-content: center;',
+  'justify-end': 'justify-content: flex-end;',
+  'justify-between': 'justify-content: space-between;',
+  'justify-around': 'justify-content: space-around;',
+  'justify-evenly': 'justify-content: space-evenly;',
+  // 注意：不包含 display:flex，通常配合 `flex` 一起用
+  'flex-cen': 'align-items: center;justify-content: center;',
+
+  // position
+  static: 'position: static;',
+  fixed: 'position: fixed;',
+  absolute: 'position: absolute;',
+  relative: 'position: relative;',
+  sticky: 'position: sticky;',
+
+  // overflow
+  'overflow-auto': 'overflow: auto;',
+  'overflow-hidden': 'overflow: hidden;',
+  'overflow-visible': 'overflow: visible;',
+  'overflow-scroll': 'overflow: scroll;',
+
+  // text
+  underline: 'text-decoration: underline;',
+  'line-through': 'text-decoration: line-through;',
+  ellipsis: 'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;',
+  'text-left': 'text-align: left;',
+  'text-center': 'text-align: center;',
+  'text-right': 'text-align: right;',
+  'text-justify': 'text-align: justify;',
+
+  // box
+  'box-border': 'box-sizing: border-box;',
+  'box-content': 'box-sizing: content-box;',
+
+  // border styles
+  'border-solid': 'border-style: solid;',
+  'border-dashed': 'border-style: dashed;',
+  'border-dotted': 'border-style: dotted;',
+  'border-none': 'border: none;',
+};
+
+// ========== 变体规则（响应式、伪类等） ==========
+const variants = {
+  responsive: ['sm', 'md', 'lg', 'xl', '2xl'],
+  states: ['hover', 'focus', 'active', 'disabled', 'first', 'last', 'odd', 'even'],
+  darkMode: ['dark'],
+};
+
+// ========== 响应式断点配置（可选） ==========
+const breakpoints = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+};
+
+// ========== 颜色配置（示例，可按项目裁剪） ==========
+const baseColor = {
+  white: '#ffffff',
+  black: '#000000',
+  transparent: 'transparent',
+  gray: '#6b7280',
+  red: '#ef4444',
+  green: '#22c55e',
+  sky: '#0ea5e9',
+  violet: '#8b5cf6',
+};
+
+// ========== Important 标识配置 ==========
+const importantFlags = {
+  // prefix: ['!', '$$'],
+  suffix: ['-i', '_i'],
+  // custom: ['--important'],
+};
+
+function processStyles() {
+  const processedBaseClassName = { ...baseClassName };
+
+  // 将颜色 token 合并到具有 ABBR 的类族中（color/bg/bcolor）
+  Object.values(processedBaseClassName).forEach((item) => {
+    if (item && item.ABBR) {
+      Object.assign(item, baseColor);
+    }
+  });
+
+  return {
+    atomicRules,
+    baseClassName: processedBaseClassName,
+    variants,
+    breakpoints,
+    importantFlags,
+  };
+}
+
+module.exports = processStyles();

package/examples/web/README.md

@@ -0,0 +1,25 @@
+# Web 示例（可直接看效果）
+
+## 1) 生成 CSS（一次）
+
+在仓库根目录执行：
+
+```bash
+node bin/class2css.js --no-watch --config ./examples/web/class2css.config.js
+```
+
+生成结果：`examples/web/dist/styles.css`
+
+## 2) 打开示例页面
+
+直接用浏览器打开：`examples/web/demo.html`
+
+你会看到页面里使用的 class（例如 `p-24` / `text-20` / `bg-red`）已经生效。
+
+## 3) 开发模式（推荐）
+
+```bash
+node bin/class2css.js --config ./examples/web/class2css.config.js
+```
+
+然后修改 `demo.html` 里的 class，刷新页面即可看到效果更新。

package/examples/web/class2css.config.js

@@ -0,0 +1,70 @@
+// ========== 工具配置（Web 示例）==========
+// 用法：
+// 1) 推荐直接复制 `examples/web` 目录到你的项目根目录
+// 2) 然后执行：`class2css -c ./examples/web/class2css.config.js`
+// 3) 或者把本文件重命名为根目录的 `class2css.config.js`，即可用默认配置启动
+//
+// 注意：
+// - 当前解析器默认只提取 `class="..."`（适用于 HTML / Vue 模板里的 class）
+// - React/JSX 常见的 `className="..."` 当前不会被提取（如需支持可扩展解析器/正则）
+
+const path = require('path');
+const stylesConfig = require('./styles.config.js');
+
+module.exports = {
+  system: {
+    cssFormat: 'compressed',
+    baseUnit: 'px',
+    unitConversion: 1,
+    compression: true,
+    sortClasses: true,
+    unitStrategy: {
+      autoDetect: true,
+      propertyUnits: {
+        'font-size': 'px',
+        'width|height': 'px',
+        opacity: '',
+        'z-index': '',
+        'line-height': '',
+        'border-radius': 'px',
+      },
+    },
+  },
+
+  output: {
+    path: path.join(__dirname, 'dist'),
+    fileName: 'styles.css',
+    // commonCssPath: './common.css', // 可选：公共基础样式（相对路径基于配置文件所在目录）
+  },
+
+  importantFlags: stylesConfig.importantFlags,
+
+  multiFile: {
+    entry: {
+      // 注意：工具内部会直接按“运行目录”解释相对路径，因此示例这里显式转绝对路径，保证开箱即用
+      // - 扫描 demo.html（可直接在浏览器看到效果）
+      // - 同时扫描 src 目录（给你放更多示例文件用）
+      path: [path.join(__dirname, 'demo.html'), path.join(__dirname, 'src')],
+      // Web：html/vue（你也可以追加 svelte、astro 等模板文件扩展名）
+      fileType: ['html', 'vue'],
+    },
+    output: {
+      cssOutType: 'uniFile',
+      path: path.join(__dirname, 'dist'),
+      fileName: 'styles.css',
+      fileType: 'css',
+
+      incrementalOnlyAdd: false,
+      incrementalBaseline: 'fromOutputFile',
+      rebuildOnStart: true,
+      unusedReportLimit: 200,
+
+      uniFileWriteMode: 'rewrite',
+    },
+  },
+
+  atomicRules: stylesConfig.atomicRules,
+  baseClassName: stylesConfig.baseClassName,
+  variants: stylesConfig.variants,
+  breakpoints: stylesConfig.breakpoints,
+};

package/examples/web/demo.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>css2class Web Demo</title>
+    <!-- 由 class2css 生成：examples/web/dist/styles.css -->
+    <link rel="stylesheet" href="./dist/styles.css" />
+    <style>
+      /* 仅用于 demo 的基础页面样式（与工具无关） */
+      body {
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC",
+          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+        background: #f6f7fb;
+        margin: 0;
+      }
+      .container {
+        max-width: 980px;
+        margin: 0 auto;
+        padding: 24px;
+      }
+      .card {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
+      }
+      .row {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .chip {
+        border: 1px solid #e6e8f0;
+        border-radius: 999px;
+      }
+      .muted {
+        color: #667085;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="card p-24">
+        <div class="row items-center justify-between">
+          <div>
+            <div class="text-20 font-700">css2class - Web 示例页面</div>
+            <div class="text-14 muted mt-8">
+              这个页面里的 class 会被工具扫描并生成到 <code>dist/styles.css</code>，打开页面即可看到效果。
+            </div>
+          </div>
+          <div class="row">
+            <div class="chip px-12 py-8 text-14">m / p</div>
+            <div class="chip px-12 py-8 text-14">w / h</div>
+            <div class="chip px-12 py-8 text-14">rounded / border</div>
+          </div>
+        </div>
+
+        <div class="mt-24">
+          <div class="text-16 font-600 mb-12">间距（spacing）</div>
+          <div class="row">
+            <div class="p-12 bg-sky color-white rounded-12">p-12</div>
+            <div class="p-16 bg-violet color-white rounded-12">p-16</div>
+            <div class="p-20 bg-green color-white rounded-12">p-20</div>
+          </div>
+        </div>
+
+        <div class="mt-24">
+          <div class="text-16 font-600 mb-12">尺寸（sizing）</div>
+          <div class="row">
+            <div class="w-120 h-60 bg-gray rounded-12"></div>
+            <div class="w-160 h-60 bg-gray rounded-12"></div>
+            <div class="w-200 h-60 bg-gray rounded-12"></div>
+            <div class="w-full h-60 bg-gray rounded-12"></div>
+          </div>
+
+          <!-- 响应式示例：确保 @media 在 base 规则之后输出，避免被覆盖导致“看起来失效” -->
+          <div class="mt-8 muted text-12">响应式：w-120 + sm:w-200（≥640px 时应变宽）</div>
+          <div class="w-120 sm:w-200 h-60 bg-sky rounded-12 lg:w-333 w-222"></div>
+        </div>
+
+        <div class="mt-24">
+          <div class="text-16 font-600 mb-12">文字（typography）</div>
+          <div class="text-12 muted">text-12</div>
+          <div class="text-14 mt-8">text-14</div>
+          <div class="text-18 mt-8 font-700">text-18 font-700</div>
+        </div>
+
+        <div class="mt-24">
+          <div class="text-16 font-600 mb-12">颜色族（color / bg / bcolor）</div>
+          <div class="row">
+            <div class="px-16 py-12 bg-red color-white rounded-12">bg-red + color-white</div>
+            <div class="px-16 py-12 bg-black color-white rounded-12">bg-black + color-white</div>
+            <div class="px-16 py-12 bg-transparent bcolor-gray border-1 rounded-12">
+              bg-transparent + bcolor-gray + border-1
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-16 muted text-12">
+        提示：修改本文件里的 class 后，重新运行/保持运行 class2css，即可看到 CSS 更新。
+      </div>
+    </div>
+  </body>
+</html>

package/examples/web/src/placeholder.html

@@ -0,0 +1,5 @@
+<!--
+  这个文件仅用于保证 examples/web 的默认 entry.path（./src）有内容可扫描。
+  实际可视化 demo 请打开 examples/web/demo.html
+-->
+<div class="p-1"></div>