使用Node.js读取CSS样式值，生成含最值的新CSS文件

没问题，我来帮你搞定这个需求！下面是一套完整的Node.js实现方案，能自动遍历你的样式目录、提取目标width值、找出最小/最大值，最后生成包含这两个极值的新CSS文件。

步骤1：准备依赖 #

我们会用到glob来批量匹配CSS文件（比原生fs更方便处理多文件），先安装它：

npm install glob

如果你不想额外安装包，后面也有原生fs的替代方案。

步骤2：编写Node.js脚本 #

创建一个名为generate-table-widths.js的文件，内容如下：

const fs = require('fs').promises;
const path = require('path');
const glob = require('glob');

// 配置项：修改为你的样式目录路径
const STYLES_DIR = './path/to/your/styles';
// 目标选择器的正则：精准匹配table[my-type="myStyle"]的width行
const WIDTH_REGEX = /table\[my-type="myStyle"\]\s*\{\s*width:\s*([\d.]+)px\s*!important;\s*\}/;

async function extractWidthValues() {
  // 1. 获取目录下所有CSS文件路径
  const cssFiles = await new Promise((resolve, reject) => {
    glob(path.join(STYLES_DIR, '*.css'), (err, files) => {
      if (err) reject(err);
      else resolve(files);
    });
  });

  const widthValues = [];

  // 2. 遍历每个CSS文件，提取width值
  for (const file of cssFiles) {
    try {
      const content = await fs.readFile(file, 'utf8');
      const match = content.match(WIDTH_REGEX);
      if (match && match[1]) {
        // 将匹配到的字符串转为数字，避免字符串排序的坑
        const widthNum = parseFloat(match[1]);
        if (!isNaN(widthNum)) {
          widthValues.push(widthNum);
          console.log(`从文件 ${path.basename(file)} 提取到width值：${widthNum}px`);
        }
      } else {
        console.warn(`文件 ${path.basename(file)} 中未找到目标样式规则`);
      }
    } catch (err) {
      console.error(`读取文件 ${path.basename(file)} 失败：`, err);
    }
  }

  if (widthValues.length === 0) {
    console.error('未提取到任何有效的width值！');
    return;
  }

  // 3. 计算最小和最大值
  const minWidth = Math.min(...widthValues);
  const maxWidth = Math.max(...widthValues);
  console.log(`\n计算完成：最小width = ${minWidth}px，最大width = ${maxWidth}px`);

  // 4. 生成新的CSS内容
  const newCssContent = `/* 自动生成的表格宽度极值样式 */
table[my-type="myStyle-min"] { width: ${minWidth}px !important; }
table[my-type="myStyle-max"] { width: ${maxWidth}px !important; }

/* 如果需要给同一个选择器设置min/max-width，可以用下面的规则 */
/* table[my-type="myStyle"] { 
  min-width: ${minWidth}px !important;
  max-width: ${maxWidth}px !important;
} */
`;

  // 5. 写入新CSS文件
  const outputFile = path.join(STYLES_DIR, 'table-width-extremes.css');
  await fs.writeFile(outputFile, newCssContent, 'utf8');
  console.log(`新CSS文件已生成：${outputFile}`);
}

// 执行脚本
extractWidthValues().catch(err => console.error('脚本执行失败：', err));

脚本说明： #

• 配置项：先修改STYLES_DIR为你的实际样式目录路径
• 正则匹配：WIDTH_REGEX专门匹配你指定的样式规则，确保不会误提取其他width值
• 错误处理：包含了文件读取失败、未找到目标规则等情况的提示，方便排查问题
• 生成逻辑：默认生成两个带后缀的选择器（-min和-max），你也可以注释掉下面的规则，改为给同一个选择器设置min-width和max-width

步骤3：运行脚本 #

在终端执行：

node generate-table-widths.js

执行后会在你的样式目录下生成table-width-extremes.css文件，里面包含了最小和最大width的样式规则。

原生fs替代方案（无需安装glob） #

如果你不想用glob，可以用原生fs.readdir来遍历文件，替换脚本中的文件匹配部分：

// 替换原来的glob部分
const files = await fs.readdir(STYLES_DIR);
const cssFiles = files
  .filter(file => path.extname(file).toLowerCase() === '.css')
  .map(file => path.join(STYLES_DIR, file));

这样就不需要安装额外依赖了，功能完全一致。

内容的提问来源于stack exchange，提问作者OutForCode