@aiot-toolkit/aiotpack 2.1.0-prender.10 → 2.1.0-prender.12

package/lib/compiler/javascript/TemplateCompiler.js

@@ -35,6 +35,81 @@ function hasApplicableMediaRule(styleSheet, tagName, classTokens) {
   }
   return false;
 }
+// Parse a simple/compound selector like ".a", ".a.b", "text", "text.a", ".a #id"
+// (id treated as a class token for build-time approximation).
+function parseCompoundSelector(part) {
+  const out = {
+    classes: []
+  };
+  const re = /(\.[\w-]+)|(#[\w-]+)|(\*)|([a-zA-Z][\w-]*)/g;
+  let m;
+  let matched = false;
+  while ((m = re.exec(part)) !== null) {
+    matched = true;
+    if (m[1]) out.classes.push(m[1].slice(1));else if (m[2]) out.classes.push(m[2].slice(1));else if (m[4]) out.tag = m[4];
+  }
+  return matched ? out : null;
+}
+function matchesCompound(comp, tag, classes) {
+  if (comp.tag && comp.tag !== tag) return false;
+  for (const c of comp.classes) if (!classes.has(c)) return false;
+  return true;
+}
+
+// Match a CSS selector against an element + its ancestor chain (root...parent).
+// Supports descendant, child (>), and compound (.a.b) selectors. Sibling
+// combinators (+, ~) require sibling context and are treated as non-match here.
+function selectorMatchesElement(selector, tag, classes, ancestors) {
+  const parts = [];
+  const combinators = [];
+  let cur = '';
+  for (let i = 0; i < selector.length; i++) {
+    const ch = selector[i];
+    if (ch === '>' || ch === '+' || ch === '~') {
+      if (cur.trim()) parts.push(cur.trim());
+      combinators.push(ch);
+      cur = '';
+    } else if (ch === ' ' || ch === '\t') {
+      if (cur.trim()) {
+        parts.push(cur.trim());
+        combinators.push(' ');
+        cur = '';
+      }
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur.trim()) parts.push(cur.trim());
+  if (parts.length === 0) return false;
+  const rightMost = parseCompoundSelector(parts[parts.length - 1]);
+  if (!rightMost) return false;
+  if (!matchesCompound(rightMost, tag, classes)) return false;
+  let idx = ancestors.length - 1;
+  for (let i = parts.length - 2; i >= 0; i--) {
+    const combinator = combinators[i];
+    const simple = parseCompoundSelector(parts[i]);
+    if (!simple) return false;
+    if (combinator === ' ') {
+      let found = false;
+      while (idx >= 0) {
+        if (matchesCompound(simple, ancestors[idx].tag, ancestors[idx].classes)) {
+          idx--;
+          found = true;
+          break;
+        }
+        idx--;
+      }
+      if (!found) return false;
+    } else if (combinator === '>') {
+      if (idx < 0) return false;
+      if (!matchesCompound(simple, ancestors[idx].tag, ancestors[idx].classes)) return false;
+      idx--;
+    } else {
+      return false;
+    }
+  }
+  return true;
+}
 
 // vivo blueos-pack's aggressive camelCase applied to transition-property values.
 // Every letter that follows a non-letter character (separator or digit) is upper-cased,
@@ -469,6 +544,7 @@ function emitTextValueAttr(rawText) {
   };
 }
 function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
+  let ancestors = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];
   const tagName = el.tagName === 'img' ? 'image' : el.tagName;
   const node = {
     type: tagName
@@ -493,9 +569,7 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
       name = name.slice(1);
       if (!value.includes('{{')) value = `{{${value}}}`;
     }
-    if (name === 'is' && tagName === 'component') {
-      continue; // is attribute handled at runtime
-    } else if (name === 'class') {
+    if (name === 'class') {
       className = value.replace(/\s+/g, ' ').trim();
     } else if (name.startsWith('@') || name.startsWith('on') && name.length > 2) {
       const rawEvtName = name.startsWith('@') ? name.slice(1) : name.replace(/^on/, '');
@@ -595,7 +669,7 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
       }
     } else if (name === 'style') {
       if (/^\{\{[^}]+\}\}$/.test(value.trim())) {
-        // Pure dynamic style binding: style="{{variable}}"
+        // style="{{variable}}" — whole style bound to a single variable.
         const inner = value.replace(/\{\{|\}\}/g, '').trim();
         if (/^[a-zA-Z_$][\w$.]*$/.test(inner)) {
           node['$style'] = inner;
@@ -604,46 +678,51 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
         }
         hasBind = true;
       } else {
-        // Static or per-property dynamic inline style
-        // Static values get merged into node.style (alongside tag/class selectors)
-        // Dynamic values ($key: function) stay in inlineStyle
-        // Only set hasBind if there are dynamic values
-        const inlineStyle = {};
+        // Per-property scan. Any dynamic entry promotes the whole attribute
+        // to $style-as-object, merging static and dynamic keys together
+        // (dynamic → `$key: function`, static → `key: value`). All-static
+        // falls back to staticInlineStyle for the pure-static merge path.
+        const dynEntries = {};
+        const staticEntries = {};
         let hasDynamicInlineStyle = false;
         value.split(';').forEach(decl => {
           const [prop, ...vals] = decl.split(':');
-          if (prop && vals.length) {
-            const key = prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-            const propVal = vals.join(':').trim();
-            if (/\{\{[\s\S]*?\}\}/.test(propVal)) {
-              // Dynamic value — emit as $key: function() {...}
-              const parts = propVal.split(/(\{\{[\s\S]*?\}\})/);
-              const exprs = parts.filter(Boolean).map(p => {
-                const m = p.match(/^\{\{([\s\S]*?)\}\}$/);
-                if (m) return addThisPrefix(m[1].trim());
-                return `'${p.replace(/'/g, "\\'")}'`;
-              });
-              const fullExpr = exprs.length === 1 ? exprs[0] : `'' + ${exprs.join(' + ')}`;
-              inlineStyle['$' + key] = `function () { return ${fullExpr}; }`;
-              hasDynamicInlineStyle = true;
-            } else {
-              // Static value — accumulate to staticInlineStyle for merging into node.style later
-              if (key === 'transform') {
-                staticInlineStyle[key] = normalizeCssTransform(propVal) ?? propVal;
-              } else if (key === 'transitionProperty') {
-                staticInlineStyle[key] = normalizeTransitionPropertyValue(propVal);
-              } else if (key === 'animationTimingFunction' || key === 'transitionTimingFunction') {
-                const normalized = normalizeAnimationTimingFunction(propVal);
-                if (normalized !== null) staticInlineStyle[key] = normalized;
-                // else drop — invalid inline value; class-level rule (or default) applies
-              } else {
-                staticInlineStyle[key] = propVal;
-              }
+          if (!prop || !vals.length) return;
+          const key = prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+          const propVal = vals.join(':').trim();
+          if (/\{\{[\s\S]*?\}\}/.test(propVal)) {
+            const parts = propVal.split(/(\{\{[\s\S]*?\}\})/);
+            const exprs = parts.filter(Boolean).map(p => {
+              const m = p.match(/^\{\{([\s\S]*?)\}\}$/);
+              if (m) return addThisPrefix(m[1].trim());
+              return `'${p.replace(/'/g, "\\'")}'`;
+            });
+            const fullExpr = exprs.length === 1 ? exprs[0] : `'' + ${exprs.join(' + ')}`;
+            dynEntries['$' + key] = `function () { return ${fullExpr}; }`;
+            hasDynamicInlineStyle = true;
+          } else {
+            let normalized = propVal;
+            if (key === 'transform') {
+              normalized = normalizeCssTransform(propVal) ?? propVal;
+            } else if (key === 'transitionProperty') {
+              normalized = normalizeTransitionPropertyValue(propVal);
+            } else if (key === 'animationTimingFunction' || key === 'transitionTimingFunction') {
+              const n = normalizeAnimationTimingFunction(propVal);
+              if (n === null) return;
+              normalized = n;
             }
+            staticEntries[key] = normalized;
           }
         });
-        if (Object.keys(inlineStyle).length) node['inlineStyle'] = inlineStyle;
-        if (hasDynamicInlineStyle) hasBind = true;
+        if (hasDynamicInlineStyle) {
+          node['$style'] = {
+            ...staticEntries,
+            ...dynEntries
+          };
+          hasBind = true;
+        } else {
+          for (const [k, v] of Object.entries(staticEntries)) staticInlineStyle[k] = v;
+        }
       }
     } else if (/\{\{.*\}\}/.test(value)) {
       // Dynamic binding - build expression from mixed static/dynamic parts
@@ -759,15 +838,15 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
   // @media rules are applied at runtime by SDK, not inlined here.
   // Class rules apply in stylesheet declaration order (later declarations override earlier),
   // NOT in class-attribute order.
-  if (styleSheet) {
-    const staticClassTokens = [];
-    if (className) {
-      const parts = className.split(/(\{\{[\s\S]*?\}\})/).filter(Boolean);
-      for (const p of parts) {
-        if (/^\{\{[\s\S]*?\}\}$/.test(p)) continue;
-        for (const tok of p.trim().split(/\s+/)) if (tok) staticClassTokens.push(tok);
-      }
+  const staticClassTokens = [];
+  if (className) {
+    const parts = className.split(/(\{\{[\s\S]*?\}\})/).filter(Boolean);
+    for (const p of parts) {
+      if (/^\{\{[\s\S]*?\}\}$/.test(p)) continue;
+      for (const tok of p.trim().split(/\s+/)) if (tok) staticClassTokens.push(tok);
     }
+  }
+  if (styleSheet) {
     const hasMedia = hasApplicableMediaRule(styleSheet, el.tagName, staticClassTokens);
     // Skip class-rule merge when the node has any dynamic binding OR any @media
     // rule that applies to it — runtime must resolve class chain against the
@@ -786,24 +865,22 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
           [inlined.animationName]: styleSheet['@KEYFRAMES'][inlined.animationName]
         };
       }
-      if (Object.keys(inlined).length) {
-        if (hasDynClass) {
-          const existing = node['inlineStyle'] || {};
-          node['inlineStyle'] = {
-            ...inlined,
-            ...existing
-          };
-        } else {
-          node.style = inlined;
-        }
-      }
+      if (Object.keys(inlined).length) node.style = inlined;
     } else {
       const merged = {};
-      if (styleSheet[el.tagName]) Object.assign(merged, styleSheet[el.tagName]);
-      if (staticClassTokens.length) {
-        const classSet = new Set(staticClassTokens);
-        for (const key of Object.keys(styleSheet)) {
-          if (key.length > 1 && key.startsWith('.') && classSet.has(key.slice(1))) {
+      const classSet = new Set(staticClassTokens);
+      for (const key of Object.keys(styleSheet)) {
+        if (key.startsWith('@')) continue;
+        if (key === el.tagName) {
+          Object.assign(merged, styleSheet[key]);
+          continue;
+        }
+        if (key.length > 1 && key.startsWith('.') && !/[\s>+~.]/.test(key.slice(1))) {
+          if (classSet.has(key.slice(1))) Object.assign(merged, styleSheet[key]);
+          continue;
+        }
+        if (/[\s>+~]/.test(key) || /\.[\w-]+\./.test(key)) {
+          if (selectorMatchesElement(key, el.tagName, classSet, ancestors)) {
             Object.assign(merged, styleSheet[key]);
           }
         }
@@ -828,7 +905,10 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
   const isMixedContent = hasElementChildren && hasTextChildren && (tagName === 'text' || tagName === 'span' || tagName === 'a' || tagName === 'marquee');
   for (const child of el.childNodes || []) {
     if (child.tagName) {
-      childNodes.push(elementToJson(child, styleSheet, importMap, scopeVars, pageDir));
+      childNodes.push(elementToJson(child, styleSheet, importMap, scopeVars, pageDir, [...ancestors, {
+        tag: el.tagName,
+        classes: new Set(staticClassTokens)
+      }]));
     } else if (isMixedContent && child.value?.trim()) {
       const emitted = emitTextValueAttr(child.value);
       const spanNode = {

package/lib/compiler/javascript/ViteCompiler.d.ts

@@ -11,7 +11,9 @@ declare class ViteCompiler implements ICompiler {
     clean(param: ICompileParam & IJavascriptCompileOption): Promise<void>;
 }
 declare function stripDeadDefProp(code: string): string;
+declare function mergeStyleSheets(app: any, page: any): any;
 export declare const __test: {
     stripDeadDefProp: typeof stripDeadDefProp;
+    mergeStyleSheets: typeof mergeStyleSheets;
 };
 export default ViteCompiler;

package/lib/compiler/javascript/ViteCompiler.js

@@ -246,6 +246,7 @@ class ViteCompiler {
     }
     const entryFailures = [];
     let entryAttempted = 0;
+    let appStyleSheet = {};
     for (const [entryName, entryValue] of Object.entries(entries)) {
       const entryPath = entryValue.split('?')[0];
       const resolvedEntry = _path.default.resolve(originalProjectPath, entryPath);
@@ -427,6 +428,9 @@ class ViteCompiler {
                 if (styleLiteral) {
                   styleSheet = (0, _TemplateCompiler.parseStyleArray)(styleLiteral);
                 }
+                if (isApp) {
+                  appStyleSheet = styleSheet;
+                }
                 // Write css.json
                 const cssPath = _path.default.join(buildPath, `${isApp ? 'app' : pageName}.css.json`);
                 _fsExtra.default.ensureDirSync(_path.default.dirname(cssPath));
@@ -439,7 +443,8 @@ class ViteCompiler {
                 if (templateNode && !isApp) {
                   const tplPath = _path.default.join(buildPath, `${pageName}.template.json`);
                   _fsExtra.default.ensureDirSync(_path.default.dirname(tplPath));
-                  _fsExtra.default.writeJSONSync(tplPath, (0, _TemplateCompiler.uxToTemplateJson)(templateNode, sid, styleSheet, importMap, _path.default.dirname(pageName)), param.mode === 'production' ? undefined : {
+                  const mergedSheet = mergeStyleSheets(appStyleSheet, styleSheet);
+                  _fsExtra.default.writeJSONSync(tplPath, (0, _TemplateCompiler.uxToTemplateJson)(templateNode, sid, mergedSheet, importMap, _path.default.dirname(pageName)), param.mode === 'production' ? undefined : {
                     spaces: 2
                   });
                   // Worklist BFS over nested <import> chain so transitively imported
@@ -504,7 +509,7 @@ class ViteCompiler {
                       compStyleSheet = (0, _TemplateCompiler.parseStyleArray)(csm);
                     }
                     const compSid = (0, _TemplateCompiler.getStyleObjectId)(compPath);
-                    _fsExtra.default.writeJSONSync(compTplPath, (0, _TemplateCompiler.uxToTemplateJson)(compTpl, compSid, compStyleSheet, compImportMap, _path.default.dirname(compPath)), param.mode === 'production' ? undefined : {
+                    _fsExtra.default.writeJSONSync(compTplPath, (0, _TemplateCompiler.uxToTemplateJson)(compTpl, compSid, mergeStyleSheets(appStyleSheet, compStyleSheet), compImportMap, _path.default.dirname(compPath)), param.mode === 'production' ? undefined : {
                       spaces: 2
                     });
                     const compCssPath = _path.default.join(buildPath, `${compPath}.css.json`);
@@ -630,7 +635,7 @@ class ViteCompiler {
         // Generate template.json
         if (templateNode) {
           _fsExtra.default.ensureDirSync(_path.default.dirname(outputTpl));
-          _fsExtra.default.writeJSONSync(outputTpl, (0, _TemplateCompiler.uxToTemplateJson)(templateNode, sid, styleSheet, Object.keys(importMap).length ? importMap : undefined, _path.default.dirname(relPath)), param.mode === 'production' ? undefined : {
+          _fsExtra.default.writeJSONSync(outputTpl, (0, _TemplateCompiler.uxToTemplateJson)(templateNode, sid, mergeStyleSheets(appStyleSheet, styleSheet), Object.keys(importMap).length ? importMap : undefined, _path.default.dirname(relPath)), param.mode === 'production' ? undefined : {
             spaces: 2
           });
         }
@@ -738,7 +743,33 @@ $app_define$("${defineId}", [], function($app_require$, $app_exports$, $app_modu
 $app_bootstrap$("${bootstrapId}");
 `;
 }
+function mergeStyleSheets(app, page) {
+  if (!app || !Object.keys(app).length) return page;
+  if (!page || !Object.keys(page).length) return app;
+  const merged = {
+    ...app
+  };
+  for (const [k, v] of Object.entries(page)) {
+    if (k === '@KEYFRAMES' || k === '@FONT-FACE') {
+      merged[k] = {
+        ...(merged[k] || {}),
+        ...v
+      };
+    } else if (k === '@MEDIA') {
+      merged[k] = [...(merged[k] || []), ...v];
+    } else if (typeof v === 'object' && v !== null && typeof merged[k] === 'object' && merged[k] !== null) {
+      merged[k] = {
+        ...merged[k],
+        ...v
+      };
+    } else {
+      merged[k] = v;
+    }
+  }
+  return merged;
+}
 const __test = exports.__test = {
-  stripDeadDefProp
+  stripDeadDefProp,
+  mergeStyleSheets
 };
 var _default = exports.default = ViteCompiler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiot-toolkit/aiotpack",
-  "version": "2.1.0-prender.10",
+  "version": "2.1.0-prender.12",
   "description": "The process tool for packaging aiot projects.",
   "keywords": [
     "aiotpack"
@@ -19,16 +19,16 @@
     "test": "node ./__tests__/aiotpack.test.js"
   },
   "dependencies": {
-    "@aiot-toolkit/generator": "2.1.0-prender.10",
-    "@aiot-toolkit/parser": "2.1.0-prender.10",
-    "@aiot-toolkit/shared-utils": "2.1.0-prender.10",
+    "@aiot-toolkit/generator": "2.1.0-prender.12",
+    "@aiot-toolkit/parser": "2.1.0-prender.12",
+    "@aiot-toolkit/shared-utils": "2.1.0-prender.12",
     "@hap-toolkit/aaptjs": "^2.0.0",
     "@rspack/core": "^1.3.9",
     "acorn": "^8.16.0",
     "aiot-parse5": "^1.0.2",
     "astring": "^1.9.0",
     "babel-loader": "^9.1.3",
-    "file-lane": "2.1.0-prender.10",
+    "file-lane": "2.1.0-prender.12",
     "file-loader": "^6.2.0",
     "fs-extra": "^11.2.0",
     "jsrsasign": "^11.1.0",