extractCssVariables

从 CSS 代码中提取 CSS 变量（自定义属性）的定义和引用。

函数签名

function extractCssVariables(
  text: string,
  filePath?: string
): DesignToken[]

interface DesignToken {
  name: string           // 变量名（如 '--primary-color'）
  value: string          // 变量值
  type: 'definition' | 'reference'  // 定义或引用
  line: number           // 所在行号（从 1 开始）
  file: string           // 文件路径
  context: string        // 上下文代码（该行的内容）
}

参数

参数名	类型	必填	默认值	说明
text	string	是	-	要分析的 CSS 文本内容
filePath	string	否	''	文件路径，用于在结果中标识来源

返回值

类型	说明
DesignToken[]	CSS 变量数组，包含定义和引用

工作原理

1. 按行分割文本，逐行扫描

2. 检测代码上下文：

   • 识别文件类型（CSS/SCSS/JS/TS/Vue等）
   • 判断当前行是否在样式块中
   • 跳过 JS 代码块中的非 CSS 内容

3. 提取 CSS 变量定义：

   • 使用正则匹配 --variable-name: value 模式
   • 提取变量名和变量值
   • 记录为 definition 类型

4. 提取 CSS 变量引用：

   • 使用正则匹配 var(--variable-name) 模式
   • 提取变量名
   • 记录为 reference 类型

5. 构建 DesignToken 对象：

   • 包含变量名、值（定义时）、类型、行号、文件路径和上下文
   • 行号从 1 开始计数

6. 返回所有提取的变量数组

支持多种文件格式（CSS、SCSS、Vue、JSX等），能够识别 CSS-in-JS 中的变量。