138 lines
3.8 KiB
JavaScript
138 lines
3.8 KiB
JavaScript
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
// 从本地文件读取CSS
|
|
const cssFilePath = path.resolve(__dirname, 'style.css');
|
|
const css = fs.readFileSync(cssFilePath, 'utf-8');
|
|
|
|
// 用于存储变量及其值的对象
|
|
const cssVariables = {};
|
|
|
|
// 正则表达式用于匹配CSS变量及其值
|
|
const cssVarRegex = /--\w+[^:]*:\s*([^;]*);/g;
|
|
const cssVarReferenceRegex = /var\((--\w+)\)/g;
|
|
|
|
// 解析CSS变量及其值
|
|
let match;
|
|
while ((match = cssVarRegex.exec(css))) {
|
|
const variable = match[0].split(':')[0].trim();
|
|
const value = match[1].trim();
|
|
cssVariables[variable] = value;
|
|
}
|
|
|
|
// 对变量进行排序，确保被引用的变量在引用它的变量之前
|
|
const sortedVariables = Object.keys(cssVariables);
|
|
|
|
// 按类别对变量进行分组
|
|
const groups = {
|
|
colors: [],
|
|
typography: [],
|
|
spacing: [],
|
|
border: [],
|
|
boxShadow: [],
|
|
body: [],
|
|
block: [],
|
|
panel: [],
|
|
button: [],
|
|
checkbox: [],
|
|
input: [],
|
|
table: [],
|
|
other: [],
|
|
};
|
|
|
|
sortedVariables.forEach((variable) => {
|
|
const value = cssVariables[variable];
|
|
const isColor =
|
|
value.startsWith('#') ||
|
|
value.includes('rgb') ||
|
|
value.includes('color') ||
|
|
variable.includes('color') ||
|
|
variable.includes('fill') ||
|
|
variable.includes('neutral');
|
|
const isTypography =
|
|
variable.includes('text') ||
|
|
variable.includes('font') ||
|
|
variable.includes('prose') ||
|
|
variable.includes('link');
|
|
const isSpacing =
|
|
variable.includes('spacing') ||
|
|
variable.includes('padding') ||
|
|
variable.includes('gap') ||
|
|
variable.includes('margin');
|
|
value.includes('padding') || value.includes('margin');
|
|
const isBorder = variable.includes('radius') || variable.includes('border');
|
|
const isBoxShadow = variable.includes('shadow');
|
|
if (variable.includes('--body')) {
|
|
groups.body.push(variable);
|
|
} else if (variable.includes('--block')) {
|
|
groups.block.push(variable);
|
|
} else if (variable.includes('--panel')) {
|
|
groups.panel.push(variable);
|
|
} else if (variable.includes('--button')) {
|
|
groups.button.push(variable);
|
|
} else if (variable.includes('--checkbox')) {
|
|
groups.checkbox.push(variable);
|
|
} else if (variable.includes('--input')) {
|
|
groups.input.push(variable);
|
|
} else if (variable.includes('--table')) {
|
|
groups.table.push(variable);
|
|
} else if (isBorder) {
|
|
groups.border.push(variable);
|
|
} else if (isBoxShadow) {
|
|
groups.boxShadow.push(variable);
|
|
} else if (isColor) {
|
|
groups.colors.push(variable);
|
|
} else if (isTypography) {
|
|
groups.typography.push(variable);
|
|
} else if (isSpacing) {
|
|
groups.spacing.push(variable);
|
|
} else {
|
|
groups.other.push(variable);
|
|
}
|
|
});
|
|
|
|
// 生成排序后的CSS变量
|
|
const generateGroupCss = (groupName) => {
|
|
const cache = groups[groupName].map(
|
|
(variable) => `${variable}: ${cssVariables[variable]};`,
|
|
);
|
|
const firstPart = cache.filter((item) => item.includes('var'));
|
|
const secondPart = cache.filter((item) => !item.includes('var'));
|
|
return [...secondPart, ...firstPart].join('\n');
|
|
};
|
|
|
|
const sortedCss =
|
|
'#output {\n' +
|
|
`/* Colors */\n` +
|
|
generateGroupCss('colors') +
|
|
`\n\n/* Typography */\n` +
|
|
generateGroupCss('typography') +
|
|
`\n\n/* Spacing */\n` +
|
|
generateGroupCss('spacing') +
|
|
`\n\n/* Border */\n` +
|
|
generateGroupCss('border') +
|
|
`\n\n/* BoxShadow */\n` +
|
|
generateGroupCss('boxShadow') +
|
|
`\n\n/* Body */\n` +
|
|
generateGroupCss('body') +
|
|
`\n\n/* Block */\n` +
|
|
generateGroupCss('block') +
|
|
`\n\n/* Panel */\n` +
|
|
generateGroupCss('panel') +
|
|
`\n\n/* Button */\n` +
|
|
generateGroupCss('button') +
|
|
`\n\n/* Checkbox */\n` +
|
|
generateGroupCss('checkbox') +
|
|
`\n\n/* Input */\n` +
|
|
generateGroupCss('input') +
|
|
`\n\n/* Table */\n` +
|
|
generateGroupCss('table') +
|
|
`\n\n/* Other */\n` +
|
|
generateGroupCss('other') +
|
|
'}';
|
|
|
|
console.log(sortedCss);
|
|
|
|
// 将排序后的CSS变量写入文件
|
|
fs.writeFileSync('sorted-css-variables.css', sortedCss);
|