From 935871af633322410a734537d7af90b0e37caffa Mon Sep 17 00:00:00 2001 From: "wang.wrc" Date: Fri, 26 Apr 2024 16:47:27 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(plugin-compiler-web):=20=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6=E4=B8=AD@import=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E5=8F=AF=E5=86=99=E5=85=A5=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-compiler-web/package.json | 3 ++- .../src/compiler/core/acss/index.ts | 26 +++++++++++++++++++ .../src/compiler/core/acss/options.ts | 1 + packages/plugin-compiler-web/src/constants.ts | 4 +++ .../src/plugins/commonConfigPlugin.ts | 2 +- 5 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/plugin-compiler-web/package.json b/packages/plugin-compiler-web/package.json index 147cee5d..99ec7424 100644 --- a/packages/plugin-compiler-web/package.json +++ b/packages/plugin-compiler-web/package.json @@ -34,6 +34,7 @@ "@morjs/plugin-compiler-alipay": "1.0.95", "@morjs/runtime-web": "1.0.101", "@morjs/utils": "1.0.71", - "postcss": "7.0.39" + "postcss": "7.0.39", + "postcss-import-sync": "7.1.4" } } diff --git a/packages/plugin-compiler-web/src/compiler/core/acss/index.ts b/packages/plugin-compiler-web/src/compiler/core/acss/index.ts index fb4f8910..08ac267c 100644 --- a/packages/plugin-compiler-web/src/compiler/core/acss/index.ts +++ b/packages/plugin-compiler-web/src/compiler/core/acss/index.ts @@ -1,4 +1,6 @@ +import path from 'path' import postcss from 'postcss' +import atImport from 'postcss-import-sync' import { defCondition, isEndIf, isIfDef } from '../../utils/comment' import { getExternalComponent, isEnableStyleScope } from '../../utils/index' import { globalComponentName, randomHash } from '../option' @@ -38,6 +40,13 @@ export default function (source: string, options: AcssOptions) { ) } + if (options.enableCombineImportStyles) { + plugins.unshift( + PostcssStylePathPlugin({ path: options.resourcePath }), + atImport() + ) + } + if (syntax && typeof syntax === 'object') { config.syntax = syntax } @@ -131,6 +140,23 @@ const ComponentNameMapPlugin = postcss.plugin( } ) +interface PostcssStylePathOptions { + path: string +} +const PostcssStylePathPlugin = postcss.plugin( + 'postcss-style-path-plugin', + function (options: PostcssStylePathOptions) { + return function (root) { + root.nodes.forEach((rule) => { + if (rule.type === 'atrule') { + const dirname = path.dirname(options.path) + return (rule.params = path.resolve(dirname, JSON.parse(rule.params))) + } + }) + } + } +) + function mapComponentName(selector, options: AcssOptions) { const arr = selector.split(':') const name = arr[0] diff --git a/packages/plugin-compiler-web/src/compiler/core/acss/options.ts b/packages/plugin-compiler-web/src/compiler/core/acss/options.ts index 3ef9434b..c49f0583 100644 --- a/packages/plugin-compiler-web/src/compiler/core/acss/options.ts +++ b/packages/plugin-compiler-web/src/compiler/core/acss/options.ts @@ -4,4 +4,5 @@ export interface AcssOptions extends BuildOptions { plugins?: string[] needRpx?: boolean // 是否需要rpx 转换。默认true syntax?: any // 自定义语法处理程序 + enableCombineImportStyles?: boolean // 是否需要解析@import导入的样式 } diff --git a/packages/plugin-compiler-web/src/constants.ts b/packages/plugin-compiler-web/src/constants.ts index ddc49f58..1693d14e 100644 --- a/packages/plugin-compiler-web/src/constants.ts +++ b/packages/plugin-compiler-web/src/constants.ts @@ -162,6 +162,10 @@ export const UserConfigSchema = z.object({ // 供运行时获取及消费 appConfig: z .object({ + /** + * 用于将样式文件中 @import 样式的内容写入到样式文件中 + */ + enableCombineImportStyles: z.boolean().default(false), /** * 用于传递业务对某个组件的特殊配置, 比如 map 组件传递 key */ diff --git a/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts b/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts index b000d40f..c4b5fe24 100644 --- a/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts +++ b/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts @@ -245,7 +245,7 @@ export class CommonConfigPlugin implements Plugin { .test(/\.(wx|a?c)ss$/) .use('web-style') .loader(WEB_COMPILER_LOADERS.style) - .options(WEB_LOADER_OPTIONS) + .options({ enableCombineImportStyles: web.appConfig.enableCombineImportStyles, ...WEB_LOADER_OPTIONS }) .before('style') .end() From bf976083bade3cf78821cfb339e09ec6c841cdac Mon Sep 17 00:00:00 2001 From: "wang.wrc" Date: Fri, 26 Apr 2024 17:04:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(plugin-compiler-web):=20=E5=8F=96?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=85=8D=E7=BD=AE=E7=A9=BA=E5=80=BC=E5=85=9C?= =?UTF-8?q?=E5=BA=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts b/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts index c4b5fe24..631955b7 100644 --- a/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts +++ b/packages/plugin-compiler-web/src/plugins/commonConfigPlugin.ts @@ -245,7 +245,7 @@ export class CommonConfigPlugin implements Plugin { .test(/\.(wx|a?c)ss$/) .use('web-style') .loader(WEB_COMPILER_LOADERS.style) - .options({ enableCombineImportStyles: web.appConfig.enableCombineImportStyles, ...WEB_LOADER_OPTIONS }) + .options({ enableCombineImportStyles: web?.appConfig?.enableCombineImportStyles, ...WEB_LOADER_OPTIONS }) .before('style') .end()