Merge pull request #193 from charlotteForever/feat/20240426_import_styles

feat(plugin-compiler-web): 样式文件中@import内容可写入样式文件

Author: hwaphon

packages/plugin-compiler-web/package.json

@@ -34,6 +34,7 @@
     "@morjs/plugin-compiler-alipay": "1.0.106",
     "@morjs/runtime-web": "1.0.108",
     "@morjs/utils": "1.0.71",
-    "postcss": "7.0.39"
+    "postcss": "7.0.39",
+    "postcss-import-sync": "7.1.4"
   }
 }

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]

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导入的样式
 }

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
            */

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()