fix: adapt for enable-extract-css option and fix for litecard h5 render in ide

Signed-off-by: lileirjyb <[email protected]>

Author: lilei946

packages/hap-dsl-xvm/src/loaders/style-loader.js

@@ -30,6 +30,7 @@ const componentId = (() => {
 
 export default function styleLoader(code) {
   const self = this
+  const options = loaderUtils.parseQuery(this.resourceQuery)
   const loaderQuery = loaderUtils.parseQuery(this.query)
   const suppresslogs = !!getWebpackOptions(this).suppresslogs
   const resourcePath = this.resourcePath // 当前文件绝对路径
@@ -40,7 +41,7 @@ export default function styleLoader(code) {
     query: loaderQuery
   })
 
-  if (compileOptionsObject.enableExtractCss) {
+  if (compileOptionsObject.enableExtractCss && !options.card) {
     componentId.add(resourcePath)
     if (jsonStyle) {
       jsonStyle[`@info`] = {

packages/hap-dsl-xvm/src/loaders/ux-fragment-utils.js

@@ -51,7 +51,7 @@ const defaultLoaders = {
  * @param uxType
  * @returns {*}
  */
-function makeLoaderString(type, config, uxType) {
+function makeLoaderString(type, config, isCard, uxType) {
   config = config || {}
   let loaders
 
@@ -146,10 +146,11 @@ function makeLoaderString(type, config, uxType) {
       }
     ]
 
-    compileOptionsObject.enableExtractCss &&
+    if (compileOptionsObject.enableExtractCss && !isCard) {
       loaders.unshift({
         name: defaultLoaders['extract-css']
       })
+    }
 
     let lang = config.lang
     if (lang && lang !== 'css') {
@@ -307,7 +308,7 @@ function processImportFrag($loader, imports, importNames, card, lite) {
       })
       let reqStr = makeRequireString(
         $loader,
-        makeLoaderString(FRAG_TYPE.IMPORT),
+        makeLoaderString(FRAG_TYPE.IMPORT, null, card),
         `${importSrc}?uxType=${ENTRY_TYPE.COMP}&name=${importName}${cardParam}${liteParam}`
       )
 
@@ -353,9 +354,13 @@ function processTemplateFrag($loader, templates, uxType, importNames, card, lite
     importNames = importNames.map((item) => 'importNames[]=' + item)
     retStr = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.TEMPLATE, {
-        alone: !!fragAttrsSrc
-      }),
+      makeLoaderString(
+        FRAG_TYPE.TEMPLATE,
+        {
+          alone: !!fragAttrsSrc
+        },
+        card
+      ),
       `${src}?uxType=${uxType}&${importNames.join(',')}${cardParam}${liteParam}${pathParam}`
     )
   }
@@ -391,10 +396,14 @@ function processStyleFrag($loader, styles, uxType, card, lite) {
     const pathParam = card ? `&uxPath=${src}` : ''
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.STYLE, {
-        alone: !!fragAttrsSrc,
-        lang: fragAttrsLang
-      }),
+      makeLoaderString(
+        FRAG_TYPE.STYLE,
+        {
+          alone: !!fragAttrsSrc,
+          lang: fragAttrsLang
+        },
+        card
+      ),
       `${src}?uxType=${uxType}${cardParam}${liteParam}${pathParam}`
     )
   }
@@ -408,7 +417,7 @@ function processStyleFrag($loader, styles, uxType, card, lite) {
  * @param uxType
  * @returns {string}
  */
-function processScriptFrag($loader, scripts, uxType) {
+function processScriptFrag($loader, scripts, uxType, card) {
   let code = 'null'
   if (scripts.length) {
     // 有且仅有一个<script>节点
@@ -427,6 +436,7 @@ function processScriptFrag($loader, scripts, uxType) {
           alone: !!fragAttrsSrc,
           path: $loader.resourcePath
         },
+        card,
         uxType
       ),
       `${src}?uxType=${uxType}`
@@ -455,7 +465,7 @@ function processDataFrag($loader, datas, uxType) {
     }
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.DATA, {}, uxType),
+      makeLoaderString(FRAG_TYPE.DATA, {}, true, uxType),
       `${src}?index=0&lite=1`
     )
   }
@@ -482,7 +492,7 @@ function processActionFrag($loader, datas, uxType) {
     }
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.ACTIONS, {}, uxType),
+      makeLoaderString(FRAG_TYPE.ACTIONS, {}, true, uxType),
       `${src}?index=0&lite=1`
     )
   }
@@ -509,7 +519,7 @@ function processPropsFrag($loader, datas, uxType) {
     }
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.PROPS, {}, uxType),
+      makeLoaderString(FRAG_TYPE.PROPS, {}, true, uxType),
       `${src}?index=0&lite=1`
     )
   }

packages/hap-dsl-xvm/src/loaders/ux-loader.js

@@ -56,7 +56,7 @@ function assemble($loader, frags, name, uxType, card, lite) {
   let content = `${importFrag}\n`
   if (!lite) {
     // process script for JS card
-    content += `var $app_script$ = ${processScriptFrag($loader, frags.script, uxType)}\n`
+    content += `var $app_script$ = ${processScriptFrag($loader, frags.script, uxType, card)}\n`
   }
   content +=
     `$app_define$('@app-component/${name}', [], function($app_require$, $app_exports$, $app_module$) {\n` +

packages/hap-packager/src/plugins/remove-modules-plugin.js

@@ -22,7 +22,7 @@ class RemoveModulesPlugin {
       compilation.hooks.optimizeModules.tap('RemoveModulesPlugin', (modules) => {
         modules.forEach((module) => {
           const { _source, request } = module
-          if (this.isCardAndCardcomp(request)) {
+          if (this.isJsCardAndCardcomp(request)) {
             const { _valueAsString, _valueAsBuffer } = _source || {}
             const moduleSource = _valueAsString || _valueAsBuffer?.toString() || ''
             const type = this.getRequestType(request)
@@ -44,7 +44,7 @@ class RemoveModulesPlugin {
 
           chunkModules.forEach((module) => {
             const { request } = module
-            if (this.isCardAndCardcomp(request)) {
+            if (this.isJsCardAndCardcomp(request)) {
               const type = this.getRequestType(request)
               const typeArr = LOADER_INFO_LIST.map((item) => item.type)
               if (
@@ -87,14 +87,15 @@ class RemoveModulesPlugin {
     })
   }
   // chunk.entryModule.rawRequest: ./src/cards/card/index.ux?uxType=card&card=1&lite=1
-  isCardAndCardcomp(requestPath) {
+  isJsCardAndCardcomp(requestPath) {
     if (requestPath && requestPath.lastIndexOf('?') > 0) {
       const pathParamIndex = requestPath.lastIndexOf('?')
       const paramStr = requestPath.substring(pathParamIndex + 1)
       const paramArr = paramStr.split('&')
       return (
         paramArr &&
         paramArr.indexOf('card=1') >= 0 &&
+        paramArr.indexOf('lite=1') < 0 &&
         (paramArr.indexOf('uxType=card') >= 0 || paramArr.indexOf('uxType=comp') >= 0)
       )
     }