css2class 2.0.0 → 2.0.1

package/examples/web/styles.config.js

@@ -0,0 +1,201 @@
+// ========== 样式规则配置（Web 示例）==========
+// 说明：
+// - 该示例更偏向 Web（px）
+// - 如需小程序示例（rpx），请参考 examples/weapp/styles.config.js
+
+const DEFAULT_UNIT = 'px';
+
+// ========== 原子化规则配置 ==========
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css2class",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Enterprise-grade Atomic CSS Generator for WeChat Mini Program",
   "main": "src/index.js",
   "bin": {
@@ -8,8 +8,13 @@
   },
   "scripts": {
     "start": "node bin/class2css.js --docs",
+    "dev": "node bin/class2css.js",
     "build": "node bin/class2css.js --no-watch",
-    "dev": "node bin/class2css.js --config ./class2css.config.js",
+    "example:weapp": "node bin/class2css.js --config ./examples/weapp/class2css.config.js",
+    "example:weapp:build": "node bin/class2css.js --no-watch --config ./examples/weapp/class2css.config.js",
+    "example:weapp:docs": "node bin/class2css.js --docs --config ./examples/weapp/class2css.config.js",
+    "example:web": "node bin/class2css.js --config ./examples/web/class2css.config.js",
+    "example:web:build": "node bin/class2css.js --no-watch --config ./examples/web/class2css.config.js",
     "docs:dev": "vitepress dev docs",
     "test": "node src/example.js",
     "help": "node bin/class2css.js --help",

package/src/README.md

@@ -362,6 +362,72 @@ module.exports = getConfig();
 - 便于维护和扩展
 - 支持热重载
 
+### 直接颜色值写法
+
+除了使用预设的颜色映射（如 `bg-red`、`color-white`），现在支持直接在 class 中写入颜色值。该功能适用于所有带 `ABBR` 的颜色族（`bg`、`color`、`bcolor` 等）。
+
+#### Hex 颜色格式
+```html
+<!-- 3位 hex -->
+<div class="bg-hex-fff">白色背景</div>
+<div class="color-hex-000">黑色文字</div>
+
+<!-- 4位 hex（含 alpha） -->
+<div class="bg-hex-ffff">不透明白色背景</div>
+
+<!-- 6位 hex -->
+<div class="bg-hex-112233">深色背景</div>
+<div class="color-hex-ff0000">红色文字</div>
+
+<!-- 8位 hex（含 alpha） -->
+<div class="bg-hex-ffffffff">完全不透明白色背景</div>
+```
+
+#### RGB 颜色格式
+```html
+<div class="bg-rgb-255-0-0">红色背景</div>
+<div class="color-rgb-0-128-255">蓝色文字</div>
+```
+
+#### RGBA 颜色格式
+```html
+<!-- alpha 值支持多种写法：
+     - 两位数字 < 10：除以 10（如 05 → 0.5, 08 → 0.8）
+     - 两位数字 >= 10：除以 100 作为百分比（如 50 → 0.5, 99 → 0.99）
+     - 下划线分隔：直接替换为点（如 0_5 → 0.5）
+     - 其他格式：直接解析（如 1 → 1.0, 0.5 → 0.5）
+-->
+<div class="bg-rgba-0-0-0-05">半透明黑色背景（05 → 0.5）</div>
+<div class="bg-rgba-255-0-0-0_5">半透明红色背景（0_5 → 0.5）</div>
+<div class="bg-rgba-0-0-0-50">50% 不透明度黑色背景（50 → 0.5）</div>
+<div class="color-rgba-0-0-0-08">80% 不透明度黑色文字（08 → 0.8）</div>
+<div class="bg-rgba-255-0-0-99">99% 不透明度红色背景（99 → 0.99）</div>
+```
+
+#### 与响应式和 Important 组合使用
+```html
+<!-- 响应式变体 -->
+<div class="sm:bg-hex-fff md:bg-rgb-255-0-0">响应式背景色</div>
+
+<!-- Important 标识 -->
+<div class="bg-hex-fff_i">强制白色背景</div>
+<div class="!color-rgb-0-0-0">强制黑色文字</div>
+
+<!-- 组合使用 -->
+<div class="sm:bg-rgba-255-0-0-05_i">响应式 + Important</div>
+```
+
+#### 优先级说明
+- **映射优先**：如果配置中存在对应的颜色映射（如 `bg-red`），优先使用映射值
+- **直接值后备**：只有当映射不存在时，才会尝试解析为直接颜色值
+- **解析失败**：如果既不是映射值，也无法解析为有效颜色值，则不会生成 CSS 规则
+
+#### 兼容性
+- ✅ 完全兼容 Web（HTML/CSS）
+- ✅ 完全兼容小程序（WXML/WXSS）
+- ✅ 只使用字母、数字、下划线、短横线，无需转义
+- ✅ 与现有颜色映射方案完全兼容，不会产生冲突
+
 ## CLI 工具
 
 项目提供了多种启动方式：
@@ -432,6 +498,32 @@ class2css --no-watch  # 不监听文件变化
 - 事件驱动设计
 - 依赖注入支持
 
+### 🆕 直接颜色值写法
+支持在 class 中直接写入颜色值，无需预先配置颜色映射：
+
+```html
+<!-- Hex 颜色 -->
+<div class="bg-hex-fff">白色背景</div>
+<div class="color-hex-ff0000">红色文字</div>
+
+<!-- RGB 颜色 -->
+<div class="bg-rgb-255-0-0">红色背景</div>
+
+<!-- RGBA 颜色 -->
+<div class="bg-rgba-0-0-0-05">半透明黑色背景</div>
+<div class="color-rgba-255-0-0-0_5">半透明红色文字</div>
+
+<!-- 与响应式和 Important 组合 -->
+<div class="sm:bg-hex-fff">响应式背景</div>
+<div class="bg-hex-fff_i">强制白色背景</div>
+```
+
+**特性：**
+- ✅ 支持 hex（3/4/6/8位）、rgb、rgba 格式
+- ✅ 映射优先：现有颜色映射（如 `bg-red`）优先使用
+- ✅ 完全兼容 Web 和小程序
+- ✅ 与现有颜色映射方案无冲突
+
 ## 优势
 
 ### 1. 可维护性
@@ -531,6 +623,13 @@ const yourModule = new YourModule(eventBus, dependencies);
 
 ## 版本历史
 
+### v2.1.0 (2025-01-20)
+- ✨ **新功能**：直接颜色值写法
+  - 支持 hex、rgb、rgba 格式的直接颜色值
+  - 无需预先配置颜色映射即可使用
+  - 完全兼容现有颜色映射方案（映射优先）
+  - 支持与响应式变体和 Important 标识组合使用
+
 ### v2.0.0 (2025-01-30)
 - 🚀 **重大更新**：完全模块化架构重构
 - ✨ **新功能**：统一文件模式 (uniFile)