fix vue2 css match error

Tencent · Oct 14, 2024 · 9a62008 · 9a62008
1 parent 26a9d93
commit 9a62008
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 32 deletions.
diff --git a/driver/js/packages/hippy-vue-css-loader/src/css-loader.ts b/driver/js/packages/hippy-vue-css-loader/src/css-loader.ts
@@ -32,14 +32,17 @@ let sourceId = 0;
 function hippyVueCSSLoader(this: any, source: any) {
   const options = getOptions(this);
   const parsed = parseCSS(source, { source: sourceId });
-  const hash = crypto.createHash('shake256', { outputLength: 3 });
+
+  const majorNodeVersion = parseInt(process.versions.node.split('.')[0], 10);
+  const hashType = majorNodeVersion >= 17 ? 'md5' : 'md4';
+  const hash = crypto.createHash(hashType);
   const contentHash = hash.update(source).digest('hex');
   sourceId += 1;
-  const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ([
-    contentHash,
-    n.selectors,
-    // filter comment declaration and empty declaration
-    n.declarations.filter(dec => dec.type !== 'comment').map((dec: any) => {
+  const rulesAst = parsed.stylesheet.rules.filter((n: any) => n.type === 'rule').map((n: any) => ({
+    hash: contentHash,
+    selectors: n.selectors,
+
+    declarations: n.declarations.map((dec: any) => {
       let { value } = dec;
       const isVariableColor = dec.property?.startsWith('-') && typeof value === 'string'
         && (
@@ -52,14 +55,18 @@ function hippyVueCSSLoader(this: any, source: any) {
       if (dec.property && (dec.property.toLowerCase().indexOf('color') > -1 || isVariableColor)) {
         value = translateColor(value);
       }
-      return [dec.property, value];
+      return {
+        type: dec.type,
+        property: dec.property,
+        value,
+      };
     }),
-  ])).filter(rule => rule[2].length > 0);
-  const code = `(function(n) {
-    if (!global[n]) {
-      global[n] = [];
+  }));
+  const code = `(function() {
+    if (!global['${GLOBAL_STYLE_NAME}']) {
+      global['${GLOBAL_STYLE_NAME}'] = [];
     }
-    global[n] = global[n].concat(${JSON.stringify(rulesAst)});
+    global['${GLOBAL_STYLE_NAME}'] = global['${GLOBAL_STYLE_NAME}'].concat(${JSON.stringify(rulesAst)});
 
     if(module.hot) {
       module.hot.dispose(() => {
@@ -70,7 +77,7 @@ function hippyVueCSSLoader(this: any, source: any) {
         global['${GLOBAL_DISPOSE_STYLE_NAME}'] = global['${GLOBAL_DISPOSE_STYLE_NAME}'].concat('${contentHash}');
       })
     }
-  })('${GLOBAL_STYLE_NAME}')`;
+  })()`;
   return `module.exports=${code}`;
 }
 

diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
@@ -34,9 +34,6 @@ import { SelectorsMap } from './css-selectors-match';
 import { parseSelector } from './parser';
 import { HIPPY_GLOBAL_STYLE_NAME, HIPPY_GLOBAL_DISPOSE_STYLE_NAME } from './';
 
-type Declaration = [property: string, value: string | number];
-export type ASTRule = [hash: string, selectors: string[], declarations: Declaration[]];
-
 // style load hook
 const beforeLoadStyleHook: Function = (declaration: Function): Function => declaration;
 
@@ -73,7 +70,7 @@ function createSimpleSelectorFromAst(ast) {
         ? new AttributeSelector(ast.property, ast.test, ast.value)
         : new AttributeSelector(ast.property);
     default:
-      return new InvalidSelector(new Error('Unknown selector.'));;
+      return null;
   }
 }
 
@@ -128,23 +125,10 @@ function createSelector(sel) {
  * @param beforeLoadStyle
  */
 export function fromAstNodes(
-  astRules: Array<CssAttribute | ASTRule> = [],
+  astRules: CssAttribute[] = [],
   beforeLoadStyle?: Function,
 ): RuleSet[] {
-  const rules = astRules.map(rule => {
-    if (!Array.isArray(rule)) return rule;
-    const [hash, selectors, declarations] = rule as ASTRule;
-    return {
-      hash,
-      selectors,
-      declarations: declarations.map(([property, value]) => ({
-        type: 'declaration',
-        property,
-        value,
-      })),
-    };
-  });
-  return rules.map((rule) => {
+  return astRules.map((rule) => {
     const declarations = rule.declarations
       .filter(isDeclaration)
       // use default hook when there is no hook passed in