css2class 2.0.0

package/bin/class2css.js

@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const Class2CSS = require('../src/index');
+const DocsServer = require('../src/docs/DocsServer');
+
+// 命令行参数解析
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const options = {
+    config: './class2css.config.js',
+    watch: true,
+    help: false,
+    version: false,
+    inputPath: null,
+    outputPath: null,
+    outputFileName: null,
+    outputType: null,
+    docs: false,
+    docsPort: 5173,
+    docsHost: '127.0.0.1',
+    docsOpen: false,
+    docsOnly: false,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    switch (arg) {
+      case '--config':
+      case '-c':
+        options.config = args[++i];
+        break;
+      case '--no-watch':
+        options.watch = false;
+        break;
+      case '--input':
+      case '-i':
+        options.inputPath = args[++i];
+        break;
+      case '--output':
+      case '-o':
+        options.outputPath = args[++i];
+        break;
+      case '--output-file':
+      case '-f':
+        options.outputFileName = args[++i];
+        break;
+      case '--output-type':
+      case '-t':
+        options.outputType = args[++i];
+        break;
+      case '--docs':
+        options.docs = true;
+        break;
+      case '--docs-port':
+        options.docsPort = parseInt(args[++i], 10);
+        break;
+      case '--docs-host':
+        options.docsHost = args[++i];
+        break;
+      case '--docs-open':
+        options.docsOpen = true;
+        break;
+      case '--docs-only':
+        options.docsOnly = true;
+        options.docs = true;
+        break;
+      case '--help':
+      case '-h':
+        options.help = true;
+        break;
+      case '--version':
+      case '-v':
+        options.version = true;
+        break;
+      default:
+        if (arg.startsWith('-')) {
+          console.error(`Unknown option: ${arg}`);
+          process.exit(1);
+        }
+    }
+  }
+
+  if (Number.isNaN(options.docsPort)) {
+    console.error('❌ Invalid --docs-port value. It must be a number.');
+    process.exit(1);
+  }
+
+  return options;
+}
+
+function openUrl(url) {
+  try {
+    if (process.platform === 'win32') {
+      // Use "start" via cmd
+      const child = spawn('cmd', ['/c', 'start', '""', url], { stdio: 'ignore', detached: true });
+      child.unref();
+    } else if (process.platform === 'darwin') {
+      const child = spawn('open', [url], { stdio: 'ignore', detached: true });
+      child.unref();
+    } else {
+      const child = spawn('xdg-open', [url], { stdio: 'ignore', detached: true });
+      child.unref();
+    }
+  } catch (_) {
+    // ignore
+  }
+}
+
+// 显示帮助信息
+function showHelp() {
+  console.log(`
+Class2CSS - Dynamic CSS Generator for WeChat Mini Program
+
+Usage: class2css [options]
+
+Options:
+  -c, --config <path>         Configuration file path (default: ./class2css.config.js)
+  -i, --input <path>         Override input directory path (runtime override)
+  -o, --output <path>        Override output directory path (runtime override)
+  -f, --output-file <name>   Override output file name (runtime override)
+  -t, --output-type <type>   Override output type: filePath or uniFile (runtime override)
+  --no-watch                 Disable file watching mode
+  --docs                     Start VitePress docs server alongside Class2CSS
+  --docs-port <port>         Docs server port (default: 5173; auto-increment if occupied)
+  --docs-host <host>         Docs server host (default: 127.0.0.1)
+  --docs-open                Open docs URL in browser after start (default: off)
+  --docs-only                Only start docs server (no Class2CSS run)
+  -h, --help                 Show this help message
+  -v, --version              Show version information
+
+Examples:
+  class2css                                    # Run with default config
+  class2css -c ./config.js                     # Run with custom config
+  class2css --no-watch                         # Run without file watching
+  class2css -i ./src -o ./dist                 # Override input and output directories
+  class2css -i ./pages -o ./styles -f app.wxss # Override input, output and filename
+  class2css -i ./src -o ./dist -t uniFile     # Override input, output and output type
+  class2css --docs                             # Run and start docs server
+  class2css --docs-only --docs-open            # Only start docs and open browser
+
+Configuration:
+  The tool reads configuration from class2css.config.js by default.
+  Runtime overrides (--input, --output, etc.) will override values in the config file.
+  See documentation for configuration options.
+`);
+}
+
+// 显示版本信息
+function showVersion() {
+  const packagePath = path.join(__dirname, '../package.json');
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+    console.log(`Class2CSS v${packageJson.version || '1.0.0'}`);
+  } catch (error) {
+    console.log('Class2CSS v1.0.0');
+  }
+}
+
+// 检查配置文件是否存在
+function checkConfig(configPath) {
+  const absolutePath = path.resolve(configPath);
+  if (!fs.existsSync(absolutePath)) {
+    console.error(`Configuration file not found: ${absolutePath}`);
+    console.error('Please create a class2css.config.js file or specify a valid config path.');
+    process.exit(1);
+  }
+  return absolutePath;
+}
+
+// 主函数
+async function main() {
+  let docsServer = null;
+  let class2css = null;
+  let shuttingDown = false;
+
+  const shutdown = async (signal, exitCode = 0, error = null) => {
+    if (shuttingDown) return;
+    shuttingDown = true;
+
+    if (error) {
+      console.error(`\n❌ ${signal}:`, error);
+    } else {
+      console.log(`\n🛑 Received ${signal}, stopping...`);
+    }
+
+    try {
+      if (class2css) {
+        await class2css.stop();
+      }
+    } catch (_) {}
+
+    try {
+      if (docsServer) {
+        await docsServer.stop();
+      }
+    } catch (_) {}
+
+    process.exit(exitCode);
+  };
+
+  // 兜底：异常/拒绝时也清理 docs 子进程
+  process.on('uncaughtException', (err) => shutdown('uncaughtException', 1, err));
+  process.on('unhandledRejection', (reason) => shutdown('unhandledRejection', 1, reason));
+
+  try {
+    const options = parseArgs();
+
+    // 处理特殊命令
+    if (options.help) {
+      showHelp();
+      return;
+    }
+
+    if (options.version) {
+      showVersion();
+      return;
+    }
+
+    // docs-only mode: only start docs server
+    if (options.docsOnly) {
+      docsServer = new DocsServer();
+      const { url } = await docsServer.start({ port: options.docsPort, host: options.docsHost });
+      console.log(`📚 Docs: ${url}`);
+      if (options.docsOpen) {
+        openUrl(url);
+      }
+
+      process.once('SIGINT', () => shutdown('SIGINT', 0));
+      process.once('SIGTERM', () => shutdown('SIGTERM', 0));
+
+      console.log('🎯 Docs server is running...');
+      console.log('Press Ctrl+C to stop');
+      return;
+    }
+
+    // 检查配置文件
+    const configPath = checkConfig(options.config);
+
+    console.log('🚀 Starting Class2CSS...');
+    console.log(`📁 Config: ${configPath}`);
+    console.log(`👀 Watch mode: ${options.watch ? 'enabled' : 'disabled'}`);
+
+    // 创建Class2CSS实例
+    class2css = new Class2CSS({
+      configPath: configPath,
+      cacheSize: 1000,
+      logger: {
+        level: 'info',
+        enableDebug: true,
+        enableTimestamp: true,
+      },
+    });
+
+    // 应用运行时配置覆盖
+    if (options.inputPath || options.outputPath || options.outputFileName || options.outputType) {
+      const overrides = {};
+      
+      // 解析输入路径为绝对路径
+      if (options.inputPath) {
+        overrides.inputPath = path.isAbsolute(options.inputPath)
+          ? path.normalize(options.inputPath)
+          : path.resolve(process.cwd(), options.inputPath);
+      }
+      
+      // 解析输出路径为绝对路径
+      if (options.outputPath) {
+        overrides.outputPath = path.isAbsolute(options.outputPath)
+          ? path.normalize(options.outputPath)
+          : path.resolve(process.cwd(), options.outputPath);
+      }
+      
+      if (options.outputFileName) {
+        overrides.outputFileName = options.outputFileName;
+      }
+      
+      if (options.outputType) {
+        if (options.outputType !== 'filePath' && options.outputType !== 'uniFile') {
+          console.error(`❌ Invalid output type: ${options.outputType}. Must be 'filePath' or 'uniFile'`);
+          process.exit(1);
+        }
+        overrides.outputType = options.outputType;
+      }
+      
+      class2css.configManager.overrideConfig(overrides);
+      
+      // 如果输出类型改变，更新统一文件模式状态
+      if (options.outputType) {
+        const isUnifiedMode = options.outputType === 'uniFile';
+        class2css.stateManager.setUnifiedFileMode(isUnifiedMode);
+      }
+      
+      // 显示运行时覆盖信息
+      console.log('⚙️  Runtime overrides applied:');
+      if (overrides.inputPath) console.log(`   Input: ${overrides.inputPath}`);
+      if (overrides.outputPath) console.log(`   Output: ${overrides.outputPath}`);
+      if (overrides.outputFileName) console.log(`   Output file: ${overrides.outputFileName}`);
+      if (overrides.outputType) console.log(`   Output type: ${overrides.outputType}`);
+    }
+
+    // 获取事件总线用于监听事件
+    const eventBus = class2css.getEventBus();
+
+    // docs mode: start docs server alongside
+    if (options.docs) {
+      docsServer = new DocsServer(eventBus);
+      const { url } = await docsServer.start({ port: options.docsPort, host: options.docsHost });
+      console.log(`📚 Docs: ${url}`);
+      if (options.docsOpen) {
+        openUrl(url);
+      }
+    }
+
+    // 监听重要事件
+    eventBus.on('class2css:started', () => {
+      console.log('✅ Class2CSS started successfully');
+    });
+
+    eventBus.on('class2css:stopped', () => {
+      console.log('🛑 Class2CSS stopped');
+    });
+
+    eventBus.on('config:loaded', (config) => {
+      console.log('📋 Configuration loaded successfully');
+    });
+
+    eventBus.on('parser:completed', (stats) => {
+      // console.log(`🔍 Parsing completed: ${stats.totalCount} classes found`);
+    });
+
+    eventBus.on('generator:dynamic:completed', (stats) => {
+      console.log(`🎨 Dynamic CSS generated: ${stats.generatedCount} classes`);
+    });
+
+    eventBus.on('log:error', (data) => {
+      console.error('❌ Error:', data);
+    });
+
+    // 启动Class2CSS
+    await class2css.start();
+
+    // 如果不是监听模式，执行一次扫描后退出
+    if (!options.watch) {
+      console.log('🔍 Performing one-time scan...');
+      await class2css.performFullScan();
+      console.log('✅ Scan completed, exiting...');
+      await shutdown('no-watch', 0);
+    }
+
+    // 监听模式：处理进程信号
+    process.once('SIGINT', () => shutdown('SIGINT', 0));
+
+    process.once('SIGTERM', () => shutdown('SIGTERM', 0));
+
+    // 显示状态信息
+    // console.log('\n📊 Current Status:');
+    const status = class2css.getStatus();
+    // console.log(JSON.stringify(status, null, 2));
+
+    console.log('\n🎯 Class2CSS is running in watch mode...');
+    console.log('Press Ctrl+C to stop');
+  } catch (error) {
+    console.error('❌ Failed to start Class2CSS:', error.message);
+    if (error.stack) console.error(error.stack);
+    await shutdown('startup-error', 1, error);
+  }
+}
+
+// 运行主函数
+if (require.main === module) {
+  main().catch((error) => {
+    console.error('❌ Unhandled error:', error);
+    process.exit(1);
+  });
+}
+
+module.exports = { main, parseArgs, showHelp, showVersion };

package/class2css.config.js

@@ -0,0 +1,124 @@
+// ========== 工具配置文件 ==========
+// 此文件包含工具运行相关的配置（系统设置、输出路径等）
+// 样式规则配置请查看 styles.config.js
+
+// 引入样式规则配置
+const stylesConfig = require('./styles.config.js');
+
+const config = {
+  // ========== 系统基础配置 ==========
+  system: {
+    // 基础单位设置
+    cssFormat: 'compressed', // 'multiLine' | 'singleLine' | 'compressed'
+    baseUnit: 'rpx',
+    // 单位转换比例 生成样式单位=设置单位*比例
+    unitConversion: 2,
+    // 是否压缩CSS
+    compression: true,
+    // 是否对生成的CSS类进行字母排序
+    sortClasses: true, // true | false，启用后会将CSS规则按选择器名称进行字母排序
+    // 智能单位处理策略
+    unitStrategy: {
+      // 自动检测：如果用户写了单位，保持原单位；如果没写，使用默认单位
+      autoDetect: true,
+      // 属性默认单位映射
+      propertyUnits: {
+        'font-size': 'rpx',
+        'width|height': 'rpx',
+        opacity: '', // 无单位
+        'z-index': '', // 无单位
+        'line-height': '', // 可以无单位
+        'border-radius': 'rpx',
+      },
+    },
+  },
+
+  // ========== 输出配置 ==========
+  output: {
+    //文件输出目录
+    path: 'D:/code/membership-weapp/subpackages/portal/lib',
+    // 输出文件信息 可设置文件名，扩展名
+    fileName: 'commom12.wxss',
+    commonCssPath: 'D:/code/css2class/common.css', // 共用CSS文件路径
+  },
+
+  // ========== Important标识配置（从样式配置引入） ==========
+  importantFlags: stylesConfig.importantFlags,
+  // 多文件构建 如果存在该字段 则覆盖 cssOutPath fileName
+  multiFile: {
+    entry: {
+      // 扫描/监听入口：
+      // - string：单目录/单文件
+      // - string[]：多目录/多文件（目录与文件可混用）
+      path: 'D:/code/membership-weapp/subpackages/portal',
+      // 需要监听的文件名
+      // fileName:[
+      //     'index1.html'
+      // ],
+      // 文件类型 需要监听的文件扩展名用逗号隔开
+      fileType: ['html', 'wxml'],
+    },
+    // 多文件监听时的导出配置
+    output: {
+      // css文件导出目录
+      // filePath：将css文件导出到监听文件对应的目录下，并且生成同名的样式文件
+      //uniFile:将所有样式导出到单文件中
+      cssOutType: 'uniFile',
+      //文件输出目录
+      // 如果填写该目录 css文件就会生成到该目录下
+      path: 'D:/code/membership-weapp/subpackages/portal/lib',
+      // 输出文件名 cssOutType为uniFile的情况下生效
+      fileName: 'index.wxss',
+      // 输出文件格式 在cssOutType为filePath的情况下生效
+      fileType: 'wxss',
+      
+      // ========== 增量模式配置 ==========
+      // incrementalOnlyAdd: 是否启用"只增不删"增量模式
+      // 当设置为 true 时：
+      // 1. 启动时会从输出文件（uniFile）中解析已存在的 class 作为基线
+      // 2. 后续文件变更时，只会新增 class，不会删除已存在的 class（包括基线中的 class）
+      // 3. 初次扫描后会提示输出文件中存在但当前项目未使用的 class，由用户决定是否清理
+      // 默认值: false（标准模式：会删除不再使用的 class）
+      // 注意：启用此模式后，输出文件可能会随时间增长，建议定期检查未使用的 class
+      incrementalOnlyAdd: true,
+      
+      // incrementalBaseline: 增量基线来源策略（当前仅支持 'fromOutputFile'）
+      // 'fromOutputFile': 从输出文件（uniFile）中解析已存在的 class
+      incrementalBaseline: 'fromOutputFile',
+      
+      // rebuildOnStart: 是否在启动时重建输出文件（仅在 incrementalOnlyAdd=true 时生效）
+      // 当设置为 true 时：
+      // 1. 每次启动都会先执行全量扫描，清理上一次运行累积的多余规则
+      // 2. 重新生成并排序/格式化输出文件，确保输出文件只包含当前扫描到的 class
+      // 3. 然后进入 watch 增量模式（运行期只增不删）
+      // 默认值: true（推荐开启，保证每次启动输出文件都是干净且排序好的）
+      rebuildOnStart: true,
+      
+      // unusedReportLimit: 未使用 class 报告的最大显示数量
+      // 启动重建时，如果发现上一版输出文件中存在但当前项目未使用的 class，会在控制台打印
+      // 此配置限制打印的示例数量，避免输出过长
+      // 默认值: 200
+      unusedReportLimit: 200,
+      
+      // ========== uniFile 写入模式配置 ==========
+      // uniFileWriteMode: uniFile 模式的写入策略
+      // 'rewrite': 每次写入全量重算并覆盖写文件（默认，保持兼容）
+      // 'appendDelta': 启动时全量重建写入基础段（已压缩/排序），运行期只把新增 class 的规则追加到文件末尾
+      // 注意：当 uniFileWriteMode='appendDelta' 时，rebuildOnStart 必须为 true（否则历史垃圾无法自动清理）
+      // 默认值: 'rewrite'
+      uniFileWriteMode: 'appendDelta',
+    },
+  },
+
+  // ========== 样式规则配置（从 styles.config.js 引入） ==========
+  atomicRules: stylesConfig.atomicRules,
+  baseClassName: stylesConfig.baseClassName,
+  variants: stylesConfig.variants,
+  breakpoints: stylesConfig.breakpoints,
+};
+
+function getConfig() {
+  return config;
+}
+
+module.exports = getConfig();

package/common.css

@@ -0,0 +1,3 @@
+.bg{
+    background-color: #f00;
+}

package/configs/colors.config.js

@@ -0,0 +1,62 @@
+// 颜色配置模块
+const baseColors = {
+  // 自定义颜色
+  466580: '#466580',
+  818182: '#818182',
+  595959: '#595959',
+  333333: '#333333',
+  666666: '#666666',
+  fffffe: '#fffffe',
+  B10A32: '#B10A32',
+  f4: '#F4F4F4',
+  cc: '#CCCCCC',
+
+  // 基础颜色
+  white: '#ffffff',
+  black: '#000000',
+  transparent: 'transparent',
+
+  // 灰度色
+  slate: '#64748b',
+  gray: '#6b7280',
+  gray1: '',
+  zinc: '#71717a',
+
+  // 暖色系
+  red: '#ef4444',
+  orange: '#f97316',
+  amber: '#f59e0b',
+  yellow: '#eab308',
+  lime: '#84cc16',
+
+  // 冷色系
+  green: '#22c55e',
+  emerald: '#10b981',
+  teal: '#14b8a6',
+  cyan: '#06b6d4',
+  sky: '#0ea5e9',
+  blue: '#142640',
+  indigo: '#6366f1',
+  violet: '#8b5cf6',
+  purple: '#a855f7',
+  fuchsia: '#d946ef',
+  pink: '#ec4899',
+  rose: '#f43f5e',
+};
+
+module.exports = {
+  baseColors,
+
+  // 颜色相关的class配置
+  colorClasses: {
+    color: {
+      ABBR: 'color',
+    },
+    bg: {
+      ABBR: 'background-color',
+    },
+    bcolor: {
+      ABBR: 'border-color',
+    },
+  },
+};

package/configs/layout.config.js

@@ -0,0 +1,110 @@
+// 布局配置模块
+module.exports = {
+  // 显示属性
+  display: {
+    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;',
+  },
+
+  // 定位
+  position: {
+    static: 'position: static;',
+    fixed: 'position: fixed;',
+    absolute: 'position: absolute;',
+    relative: 'position: relative;',
+    sticky: 'position: sticky;',
+    position: {
+      re: 'relative',
+      ab: 'absolute',
+      fi: 'fixed',
+      sta: 'static',
+      sti: 'sticky',
+    },
+  },
+
+  // Flexbox
+  flexbox: {
+    'flex-1': 'flex: 1;',
+    'shrink-0': 'flex-shrink: 0;',
+    'flex-cen': 'align-items: center;justify-content: center;',
+    '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;',
+    flex_tb_cen: 'align-items: center;',
+    flex_lr: 'justify-content: space-between;',
+    flex_lr_end: 'justify-content: flex-end;',
+    flex_lr_cen: 'justify-content: center;',
+    flex_cen: 'align-items: center;justify-content: center;',
+  },
+
+  // 尺寸
+  sizing: {
+    'w-full': 'width: 100%;',
+    'h-full': 'height: 100%;',
+    'w-screen': 'width: 100vw;',
+    'h-screen': 'height: 100vh;',
+  },
+
+  // 溢出
+  overflow: {
+    'overflow-auto': 'overflow: auto;',
+    'overflow-hidden': 'overflow: hidden;',
+    'overflow-visible': 'overflow: visible;',
+    'overflow-scroll': 'overflow: scroll;',
+    'overflow-x-auto': 'overflow-x: auto;',
+    'overflow-x-hidden': 'overflow-x: hidden;',
+    'overflow-x-scroll': 'overflow-x: scroll;',
+    'overflow-y-auto': 'overflow-y: auto;',
+    'overflow-y-hidden': 'overflow-y: hidden;',
+    'overflow-y-scroll': 'overflow-y: scroll;',
+    overflow: ['hidden', 'auto', 'scroll'],
+    overflow_x: ['hidden', 'auto', 'scroll'],
+    overflow_y: ['hidden', 'auto', 'scroll'],
+  },
+
+  // 盒模型
+  boxModel: {
+    'box-border': 'box-sizing: border-box;',
+    'box-content': 'box-sizing: content-box;',
+    box_sizing: 'box-sizing:border-box;',
+  },
+
+  // 边框
+  borders: {
+    'border-solid': 'border-style: solid;',
+    'border-dashed': 'border-style: dashed;',
+    'border-dotted': 'border-style: dotted;',
+    'border-none': 'border: none;',
+    border_no: ' border:none !important;',
+  },
+
+  // 光标
+  cursor: {
+    'cursor-auto': 'cursor: auto;',
+    'cursor-default': 'cursor: default;',
+    'cursor-pointer': 'cursor: pointer;',
+    'cursor-wait': 'cursor: wait;',
+    'cursor-text': 'cursor: text;',
+    'cursor-move': 'cursor: move;',
+    'cursor-not-allowed': 'cursor: not-allowed;',
+    cursor: ['pointer', 'auto', 'move'],
+  },
+};