zgene
6bed393c12
Backend Tests / backend-unit-test (push) Has been cancelled
Backend Tests / benchmark-test (push) Has been cancelled
CI@main / Node.js v22 (ubuntu-latest) (push) Has been cancelled
Thrift Syntax Validation / validate-thrift (push) Has been cancelled
License Check / License Check (push) Has been cancelled
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
/*
|
|
* Copyright 2025 coze-dev Authors
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
/**
|
|
* PostCSS 插件：为 Semi 组件类名和 CSS 变量添加前缀
|
|
* 解决 coze-design 里 hardcode 的 .semi-xxx 类名与 prefixCls 不匹配导致样式失效问题
|
|
* 兼容多类名、嵌套、伪类、组合选择器等复杂情况
|
|
*
|
|
* 注意：本插件应在 coze-design 的样式被引入后生效，确保所有 .semi-xxx 都能被正确加前缀
|
|
*
|
|
* 已添加调试代码，可通过环境变量 DEBUG_SEMI_CSS_VAR_PLUGIN 控制输出
|
|
*/
|
|
|
|
import type { PluginCreator } from 'postcss';
|
|
|
|
export const PREFIX_CLASS = 'coze-chat-sdk-semi';
|
|
const CSS_VAR_PREFIX = `${PREFIX_CLASS}-`;
|
|
const SEMI_CLASS_PREFIX = 'semi-';
|
|
const CUSTOM_CLASS_PREFIX = `${PREFIX_CLASS}-`;
|
|
|
|
// 处理选择器，将 .semi-xxx 替换为 .coze-chat-sdk-semi-xxx
|
|
function processSelector(selector: string): string {
|
|
// 只处理 .semi-xxx（不管前面有无其它类名、伪类、组合等）
|
|
// 例如：.semi-button、.semi-button-primary:hover、.foo .semi-button.bar
|
|
// 注意：不要重复加前缀
|
|
// 兼容 :is(.semi-button), :not(.semi-button), .semi-button:hover, .semi-button.foo
|
|
// 兼容多个选择器用逗号分隔的情况
|
|
const replaced = selector.replace(
|
|
/\.semi-([a-zA-Z0-9_-]+)/g,
|
|
(match, className) => {
|
|
// 已经有前缀的不处理
|
|
if (match.includes(`.${CUSTOM_CLASS_PREFIX}`)) {
|
|
return match;
|
|
}
|
|
return `.${CUSTOM_CLASS_PREFIX}${className}`;
|
|
},
|
|
);
|
|
return replaced;
|
|
}
|
|
|
|
const semiCssVarPrefixPlugin: PluginCreator<void> = () => ({
|
|
postcssPlugin: 'semi-css-var-prefix',
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
Rule(rule) {
|
|
// 只要选择器里有 .semi-，就处理
|
|
if (rule.selector && rule.selector.includes(`.${SEMI_CLASS_PREFIX}`)) {
|
|
rule.selector = processSelector(rule.selector);
|
|
}
|
|
},
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
Declaration(decl) {
|
|
// 处理 CSS 变量定义
|
|
if (decl.prop && decl.prop.startsWith('--semi-')) {
|
|
decl.prop = decl.prop.replace(/^--semi-/, `--${CSS_VAR_PREFIX}`);
|
|
}
|
|
|
|
// 处理 CSS 变量引用
|
|
if (decl.value && decl.value.includes('var(--semi-')) {
|
|
decl.value = decl.value.replace(
|
|
/var\(--semi-([a-zA-Z0-9_-]+)\)/g,
|
|
`var(--${CSS_VAR_PREFIX}$1)`,
|
|
);
|
|
}
|
|
|
|
// 处理 rgba(var(--semi-xxx), ...)
|
|
if (decl.value && decl.value.includes('rgba(var(--semi-')) {
|
|
decl.value = decl.value.replace(
|
|
/rgba\(var\(--semi-([a-zA-Z0-9_-]+)\)/g,
|
|
`rgba(var(--${CSS_VAR_PREFIX}$1)`,
|
|
);
|
|
}
|
|
},
|
|
});
|
|
|
|
semiCssVarPrefixPlugin.postcss = true;
|
|
|
|
export default semiCssVarPrefixPlugin;
|