@lcap/nasl
Version:
NetEase Application Specific Language
269 lines (268 loc) • 10.8 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.transformStyle = exports.transformTheme = void 0;
const postcss = __importStar(require("postcss"));
const postcss_values_parser_1 = require("postcss-values-parser");
const utils_1 = require("./utils");
const lodash_1 = require("lodash");
/**
* "map": {
":root": {
"--brand-primary-disabled": "#b4c7e4",
"--brand-primary-opacity-20": "#355b9733",
"--brand-primary-lightest": "#e6ecf6",
"--brand-primary-lighter": "#b4c7e4",
"--brand-primary-light": "#3e6ab0",
"--brand-primary-dark": "#2f5186",
"--brand-primary-darker": "#121e32",
"--brand-primary-darkest": "#060a11",
"--brand-primary": "#355b97",
"--panel-background": "#bbb5b5"
},
".el-card": {
"--el-card-border-color": "#28498c"
}
},
*/
function transformTheme(css, parseState) {
const root = postcss.parse(css);
const map = {};
root.nodes.forEach((node) => {
if (node.type === 'comment')
return;
if (node.type === 'rule') {
// 获取选择器，支持多个选择器用逗号分隔
const selectors = node.selector.split(',').map(s => s.trim());
selectors.forEach(selector => {
// 初始化选择器对应的变量映射
if (!map[selector]) {
map[selector] = {};
}
node.nodes.forEach((decl) => {
if (decl.type === 'comment')
return;
if (decl.type === 'decl') {
// 只处理 CSS 变量（以 -- 开头的属性）
if (decl.prop.startsWith('--')) {
map[selector][decl.prop] = decl.value.trim();
}
else {
return (0, utils_1.throwError)(parseState, '$theme 中只支持 CSS 变量，不支持其他属性：' + decl.prop);
}
}
else {
return (0, utils_1.throwError)(parseState, '不支持的节点类型：' + decl.type);
}
});
});
}
else {
return (0, utils_1.throwError)(parseState, '不支持的节点类型：' + node.type);
}
});
return map;
}
exports.transformTheme = transformTheme;
function transformStyle(css, parseState) {
const root = postcss.parse(css);
const cssRules = [];
root.nodes.forEach((node) => {
if (node.type === 'comment')
return;
if (node.type === 'rule') {
const selector = node.selector;
const declarations = {};
node.nodes.forEach((decl) => {
if (decl.type === 'comment')
return;
if (decl.type === 'decl') {
Object.assign(declarations, getChildrenDeclaration(decl));
}
else {
return (0, utils_1.throwError)(parseState, '不支持的节点类型：' + decl.type);
}
});
cssRules.push({
concept: 'CSSRule',
selector,
declarations,
});
}
else {
return (0, utils_1.throwError)(parseState, '不支持的节点类型：' + node.type);
}
});
return cssRules.map((cssRule) => new utils_1.naslTypes.CSSRule(cssRule));
}
exports.transformStyle = transformStyle;
function getChildrenValue(val) {
return val.nodes.map((node) => node.toString());
}
/**
* @ref https://github.com/netease-lcap/ui-libraries/blob/test/packages/builder/src/build/build-css-info.ts#L206
*/
function getChildrenDeclaration(decl) {
let match;
const value = decl.value;
const declarations = {};
if (decl.prop === 'background') {
declarations.backgroundColor = decl.value;
}
else if (decl.prop === 'border') {
if (value === undefined || value === null)
return;
const parseVal = (0, postcss_values_parser_1.parse)(value);
const arr = getChildrenValue(parseVal);
// const arr = value.split(/\s+/);
if (arr.length < 3)
return;
const [borderWidth, borderStyle, borderColor] = arr;
declarations.borderLeftWidth = borderWidth;
declarations.borderLeftStyle = borderStyle;
declarations.borderLeftColor = borderColor;
declarations.borderRightWidth = borderWidth;
declarations.borderRightStyle = borderStyle;
declarations.borderRightColor = borderColor;
declarations.borderTopWidth = borderWidth;
declarations.borderTopStyle = borderStyle;
declarations.borderTopColor = borderColor;
declarations.borderBottomWidth = borderWidth;
declarations.borderBottomStyle = borderStyle;
declarations.borderBottomColor = borderColor;
}
else if ((match = decl.prop.match(/^border-(left|right|top|bottom)$/))) {
const borderProp = match[1];
if (value === undefined || value === null)
return;
const parseVal = (0, postcss_values_parser_1.parse)(value);
const arr = getChildrenValue(parseVal);
// const arr = value.split(/\s+/);
if (arr.length < 3)
return;
const [borderWidth, borderStyle, borderColor] = arr;
declarations[`border${(0, lodash_1.capitalize)(borderProp)}Width`] = borderWidth;
declarations[`border${(0, lodash_1.capitalize)(borderProp)}Style`] = borderStyle;
declarations[`border${(0, lodash_1.capitalize)(borderProp)}Color`] = borderColor;
}
else if (decl.prop === 'margin') {
if (value === undefined || value === null)
return;
const parseVal = (0, postcss_values_parser_1.parse)(value);
const arr = getChildrenValue(parseVal);
// const arr = value.split(/\s+/);
if (arr.length === 1) {
declarations.marginTop = arr[0];
declarations.marginRight = arr[0];
declarations.marginBottom = arr[0];
declarations.marginLeft = arr[0];
}
else if (arr.length === 2) {
declarations.marginTop = arr[0];
declarations.marginRight = arr[1];
declarations.marginBottom = arr[0];
declarations.marginLeft = arr[1];
}
else if (arr.length === 3) {
declarations.marginTop = arr[0];
declarations.marginRight = arr[1];
declarations.marginBottom = arr[2];
declarations.marginLeft = arr[1];
}
else if (arr.length === 4) {
declarations.marginTop = arr[0];
declarations.marginRight = arr[1];
declarations.marginBottom = arr[2];
declarations.marginLeft = arr[3];
}
}
else if (decl.prop === 'padding') {
if (value === undefined || value === null)
return;
const parseVal = (0, postcss_values_parser_1.parse)(value);
const arr = getChildrenValue(parseVal);
// const arr = value.split(/\s+/);
if (arr.length === 1) {
declarations.paddingTop = arr[0];
declarations.paddingRight = arr[0];
declarations.paddingBottom = arr[0];
declarations.paddingLeft = arr[0];
}
else if (arr.length === 2) {
declarations.paddingTop = arr[0];
declarations.paddingRight = arr[1];
declarations.paddingBottom = arr[0];
declarations.paddingLeft = arr[1];
}
else if (arr.length === 3) {
declarations.paddingTop = arr[0];
declarations.paddingRight = arr[1];
declarations.paddingBottom = arr[2];
declarations.paddingLeft = arr[1];
}
else if (arr.length === 4) {
declarations.paddingTop = arr[0];
declarations.paddingRight = arr[1];
declarations.paddingBottom = arr[2];
declarations.paddingLeft = arr[3];
}
}
else if (decl.prop === 'border-radius') {
if (value === undefined || value === null)
return;
const parseVal = (0, postcss_values_parser_1.parse)(value);
const arr = getChildrenValue(parseVal);
// const arr = value.split(/\s+/);
if (arr.length === 1) {
declarations.borderTopLeftRadius = arr[0];
declarations.borderTopRightRadius = arr[0];
declarations.borderBottomRightRadius = arr[0];
declarations.borderBottomLeftRadius = arr[0];
}
else if (arr.length === 2) {
declarations.borderTopLeftRadius = arr[0];
declarations.borderTopRightRadius = arr[1];
declarations.borderBottomRightRadius = arr[0];
declarations.borderBottomLeftRadius = arr[1];
}
else if (arr.length === 3) {
declarations.borderTopLeftRadius = arr[0];
declarations.borderTopRightRadius = arr[1];
declarations.borderBottomRightRadius = arr[2];
declarations.borderBottomLeftRadius = arr[1];
}
else if (arr.length === 4) {
declarations.borderTopLeftRadius = arr[0];
declarations.borderTopRightRadius = arr[1];
declarations.borderBottomRightRadius = arr[2];
declarations.borderBottomLeftRadius = arr[3];
}
}
else {
declarations[(0, lodash_1.camelCase)(decl.prop)] = decl.value;
}
return declarations;
}
//# sourceMappingURL=transformThemeAndStyle.js.map