@shijiu/jsview 2.0.1021 → 2.0.1073

package/dom/bin/jsview-forge-define.min.js

@@ -1 +1 @@
-/* eslint-disable */ void 0===window.Forge?(window.Forge={},console.log("Define forge browser")):console.log("Define using JsView forge engine-js");var e=window.Forge;class t{constructor(e,t){if(!e)return;if(!0===e.startsWith("url")){let t=e.indexOf("(")+1,i=e.lastIndexOf(")");if("undefined"===(e=e.substring(t,i).trim())||"null"===e||0===e.length)return}if(!0===e.startsWith("data:"))return void(this.href=e);let i=e.indexOf("://");if(!(i<0||i>10)||e.startsWith("./")||e.startsWith("/")||(e="./"+e),!0===e.startsWith("/"))e=document.location.origin+e;else if(!0===e.startsWith("./")&&void 0!==window.JsView&&void 0!==window.JsView.Dom.JsSubPath){if(void 0===window.JsView.Dom.MainPath||"undefined"===window.JsView.Dom.MainPathRef||window.JsView.Dom.MainPathRef!==document.location.href){window.JsView.Dom.JsSubPath.startsWith("/")||(window.JsView.Dom.JsSubPath="/"+window.JsView.Dom.JsSubPath),window.JsView.Dom.JsSubPath.endsWith("/")||(window.JsView.Dom.JsSubPath=window.JsView.Dom.JsSubPath+"/"),window.JsView.Dom.MainPathRef=document.location.href;let e=document.location.pathname.lastIndexOf(window.JsView.Dom.JsSubPath);window.JsView.Dom.MainPath=document.location.origin+document.location.pathname.substring(0,e)}e=window.JsView.Dom.MainPath+e.substring(1)}if(this.href=e,!t)return;let o=this.href,n=o.indexOf("#");n>0&&(this.hash=o.substring(n),o=o.substring(0,n));let r=o.indexOf("?");r>1&&(this.search=o.substring(r),o=o.substring(0,r));let s=o,a=s.indexOf("://");this.protocol=a>0?s.substring(0,a+1):"";let d=a>1?s.substring(a+3):"";a=d.indexOf("/"),this.host=a>0?d.substring(0,a):"",this.pathname=a>=1?d.substring(a):"",this.origin=this.protocol+"//"+this.host,a=this.host.indexOf(":"),this.hostname=a>0?this.host.substring(0,a):this.host,this.port=a>1?this.host.substring(a+1):""}replace(e){this.href=e}href="";origin="";protocol="";host="";hostname="";port="";pathname="";search="";hash=""}class i{static SetBackgroundColor(t,i,o){const n=window.JsvCode.ForgeHandles.TextureManager.GetColorTextureCached(i);let r;o&&(r=new e.ViewRoundCornerMask(o.topLeft,o.topRight,o.bottomLeft,o.bottomRight));const s=new e.ExternalTextureSetting(n,r);t.ResetTexture(s)}static SetBackgroundImage(i,o,n,r,s,a,d){let l,g={};if("string"==typeof o){const e=new t(o);if(e instanceof t==!1)throw Error("Bad Argument.",e);g.url=e.href}else"linear-gradient"==o?.type&&(g.gradient=o);if(g.gradient)if(g.gradient.colors?.length>2){const e=g.gradient.colors,t=[e[0],e[e.length-1]],i=e.slice(1,e.length-1);l=window.JsvCode.ForgeHandles.TextureManager.CreateLinearGradientTexture(t,i)}else 2==g.gradient.colors?.length?l=window.JsvCode.ForgeHandles.TextureManager.CreateMiniGradientTexture(!0,g.gradient.colors[0],g.gradient.colors[1],g.gradient.rawValue):console.warn("Failed to create backgroundImage gradient, bad colors.",g.gradient.colors);else g.url&&(l=g.url.includes(".gif")||g.url.includes(".webp")?window.JsvCode.ForgeHandles.TextureManager.GetGifImage(g.url,!1,null,d):window.JsvCode.ForgeHandles.TextureManager.GetImage2(g.url,!1,s,a||e.ColorSpace.RGBA_8888));if(l){let t;n&&(t=new e.ViewRoundCornerMask(n.topLeft,n.topRight,n.bottomLeft,n.bottomRight));const o=new e.ExternalTextureSetting(l,t);if(i.ResetTexture(o),r){let e=l.RegisterLoadImageCallback(null,(function(){r({width:l.Width,height:l.Height})}));i.RegisterDetachCallback((()=>{l.UnregisterLoadImageCallback(e)}))}}}static SetMaskedBackgroundImage(i,o,n,r){if("string"==typeof o&&(o=new t(o)),o instanceof t==!1)throw Error("Bad Argument.",o);if("string"==typeof n&&(n=new t(n)),n instanceof t==!1)throw Error("Bad Argument(MaskURL).",n);const s=window.JsvCode.ForgeHandles.TextureManager.GetImage2(o.href,!1,null,r||e.ColorSpace.RGBA_8888);if(s){const t=window.JsvCode.ForgeHandles.TextureManager.GetImage2(n.href,!1,null,e.ColorSpace.RGBA_8888),o=new e.ExternalTextureSetting(s,new e.ViewTextureMask(t));i.ResetTexture(o)}}}export{e as Forge,i as ForgeExtension};
+/* eslint-disable */ void 0===window.Forge?(window.Forge={},console.log("Define forge browser")):console.log("Define using JsView forge engine-js");var e=window.Forge;class t{constructor(e,t){if(!e)return;if(!0===e.startsWith("url")){let t=e.indexOf("(")+1,i=e.lastIndexOf(")");if("undefined"===(e=e.substring(t,i).trim())||"null"===e||0===e.length)return}if(!0===e.startsWith("data:"))return void(this.href=e);let i=e.indexOf("://");if(!(i<0||i>10)||e.startsWith("./")||e.startsWith("/")||(e="./"+e),!0===e.startsWith("/"))e=document.location.origin+e;else if(!0===e.startsWith("./")&&void 0!==window.JsView&&void 0!==window.JsView.Dom.JsSubPath){if(void 0===window.JsView.Dom.MainPath||"undefined"===window.JsView.Dom.MainPathRef||window.JsView.Dom.MainPathRef!==document.location.href){window.JsView.Dom.JsSubPath.startsWith("/")||(window.JsView.Dom.JsSubPath="/"+window.JsView.Dom.JsSubPath),window.JsView.Dom.JsSubPath.endsWith("/")||(window.JsView.Dom.JsSubPath=window.JsView.Dom.JsSubPath+"/"),window.JsView.Dom.MainPathRef=document.location.href;let e=document.location.pathname.lastIndexOf(window.JsView.Dom.JsSubPath);window.JsView.Dom.MainPath=document.location.origin+document.location.pathname.substring(0,e)}e=window.JsView.Dom.MainPath+e.substring(1)}if(this.href=e,!t)return;let o=this.href,n=o.indexOf("#");n>0&&(this.hash=o.substring(n),o=o.substring(0,n));let s=o.indexOf("?");s>1&&(this.search=o.substring(s),o=o.substring(0,s));let r=o,a=r.indexOf("://");this.protocol=a>0?r.substring(0,a+1):"";let d=a>1?r.substring(a+3):"";a=d.indexOf("/"),this.host=a>0?d.substring(0,a):"",this.pathname=a>=1?d.substring(a):"","file:"==this.protocol&&(this.host="",this.pathname=d),this.origin=this.protocol+"//"+this.host,a=this.host.indexOf(":"),this.hostname=a>0?this.host.substring(0,a):this.host,this.port=a>1?this.host.substring(a+1):""}replace(e){this.href=e}href="";origin="";protocol="";host="";hostname="";port="";pathname="";search="";hash=""}class i{static SetBackgroundColor(t,i,o){const n=window.JsvCode.ForgeHandles.TextureManager.GetColorTextureCached(i);let s;o&&(s=new e.ViewRoundCornerMask(o.topLeft,o.topRight,o.bottomLeft,o.bottomRight));const r=new e.ExternalTextureSetting(n,s);t.ResetTexture(r)}static SetBackgroundImage(i,o,n,s,r,a,d){let h,l={};if("string"==typeof o){const e=new t(o);if(e instanceof t==!1)throw Error("Bad Argument.",e);l.url=e.href}else"linear-gradient"==o?.type&&(l.gradient=o);if(l.gradient)if(l.gradient.colors?.length>2){const e=l.gradient.colors,t=[e[0],e[e.length-1]],i=e.slice(1,e.length-1);h=window.JsvCode.ForgeHandles.TextureManager.CreateLinearGradientTexture(t,i)}else 2==l.gradient.colors?.length?h=window.JsvCode.ForgeHandles.TextureManager.CreateMiniGradientTexture(!0,l.gradient.colors[0],l.gradient.colors[1],l.gradient.rawValue):console.warn("Failed to create backgroundImage gradient, bad colors.",l.gradient.colors);else l.url&&(h=l.url.includes(".gif")||l.url.includes(".webp")?window.JsvCode.ForgeHandles.TextureManager.GetGifImage(l.url,!1,null,d):window.JsvCode.ForgeHandles.TextureManager.GetImage2(l.url,!1,r,a||e.ColorSpace.RGBA_8888));if(h){let t;n&&(t=new e.ViewRoundCornerMask(n.topLeft,n.topRight,n.bottomLeft,n.bottomRight));const o=new e.ExternalTextureSetting(h,t);if(i.ResetTexture(o),s){let e=h.RegisterLoadImageCallback(null,(function(){s({width:h.Width,height:h.Height})}));i.RegisterDetachCallback((()=>{h.UnregisterLoadImageCallback(e)}))}}}static SetMaskedBackgroundImage(i,o,n,s){if("string"==typeof o&&(o=new t(o)),o instanceof t==!1)throw Error("Bad Argument.",o);if("string"==typeof n&&(n=new t(n)),n instanceof t==!1)throw Error("Bad Argument(MaskURL).",n);const r=window.JsvCode.ForgeHandles.TextureManager.GetImage2(o.href,!1,null,s||e.ColorSpace.RGBA_8888);if(r){const t=window.JsvCode.ForgeHandles.TextureManager.GetImage2(n.href,!1,null,e.ColorSpace.RGBA_8888),o=new e.ExternalTextureSetting(r,new e.ViewTextureMask(t));i.ResetTexture(o)}}}export{e as Forge,i as ForgeExtension};

package/dom/target_core_revision.mjs

@@ -3,11 +3,11 @@
  */
 
 const TargetRevision = {
-  "CoreRevision": 1021336,
-  "CoreRevisionAndBranch": "1021336",
-  "JseRevision": "1.0.882",
+  "CoreRevision": 1021367,
+  "CoreRevisionAndBranch": "1021367",
+  "JseRevision": "1.0.885",
   "JseUrl":
-    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_js2c_r882.jsv.1f7c4fd1.js"
+    "http://cdn.release.qcast.cn/forge_js/master/JsViewES6_js2c_r885.jsv.fa4a843c.js"
 };
 
 // 版本是否存在测试方法

package/loader/jsview-loader.js

@@ -147,16 +147,6 @@ export default class JsViewLoader {
       console.error("JsView Error: Load designed map failed");
     }
 
-    // 设置播放器的屏幕坐标尺寸
-    if (window.JsView) {
-      window.JsView.setVideoDesignMapWidth?.(designMap.width);
-    } else {
-      // 借助Audio标签设置基类BaseMedia的屏幕尺寸配置，绕开react的unref语法检测
-      if (Audio.setDesignMapWidth) {
-        Audio.setDesignMapWidth(designMap.width);
-      }
-    }
-
     return designMap;
   }
 

package/loader/jsview-main.mjs

@@ -1,10 +1,10 @@
-import AppData from '/src/appConfig/app.config.mjs'
-import JsViewVendorConfig from "/src/appConfig/jsview.config.mjs"
-
 async function main() {
+  const { default: appConfig } = await import("/src/appConfig/app.config.mjs");
+  const { default: jsviewVendorConfig } = await import("/src/appConfig/jsview.config.mjs");
+
   let JsViewLoader = null;
   // 根据JsViewConfig, 判断厂商是否设置了使用远程loader启动
-  const remoteLoader = JsViewVendorConfig.jsviewConfig.remoteLoader;
+  const remoteLoader = jsviewVendorConfig.jsviewConfig.remoteLoader;
   if (remoteLoader) {
     JsViewLoader = (await import(remoteLoader)).default;
   } else {
@@ -13,7 +13,7 @@ async function main() {
   const jsviewLoader = new JsViewLoader();
 
   // 使用vendor配置值覆盖默认配置。
-  const config = jsviewLoader.mergeConfig(JsViewVendorConfig);
+  const config = jsviewLoader.mergeConfig(jsviewVendorConfig);
   console.log("JsView config: " + JSON.stringify(config));
 
   jsviewLoader.initForgeEnv();
@@ -23,7 +23,7 @@ async function main() {
     // JsView环境加载完毕后，加载vue/react的main.js文件。
     import('/src/main.tsx');
   };
-  jsviewLoader.initJsViewEnv(AppData.AppName, onInitJsViewEnv);
+  jsviewLoader.initJsViewEnv(appConfig.AppName, onInitJsViewEnv);
 }
 
 // webpack/vite运行入口

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview",
-  "version": "2.0.1021",
+  "version": "2.0.1073",
   "bin": {
     "jsview-post-build": "./tools/jsview-post-build.js",
     "jsview-post-install": "./tools/jsview-post-install.js"

package/patches/node_modules/@vitejs/plugin-vue/dist/index.mjs

@@ -260,7 +260,19 @@ function resolveScript(descriptor, options, ssr) {
     return null;
   }
   const cacheToUse = ssr ? ssrCache : clientCache;
-  const cached = cacheToUse.get(descriptor);
+// JsView Added >>>
+// 解决@import的css文件没有被热更新问题。
+  // const cached = cacheToUse.get(descriptor);
+  let cached = cacheToUse.get(descriptor);
+  if (descriptor.filename?.endsWith('.vue') && descriptor.styles) {
+    for (const style of descriptor.styles) {
+      if (style.content?.includes('@import')) {
+        cached = null; 
+        break;
+      }
+    }
+  }
+// JsView Added <<<
   if (cached) {
     return cached;
   }

package/patches/node_modules/@vue/compiler-sfc/dist/jsview-css-to-js.js

@@ -10,9 +10,10 @@ const fs = require('fs');
 const path = require('path');
 const postCss = require('postcss');
 const postCssJs = require('postcss-js');
-const styleChecker = require("./jsview-style-checker");
+const styleChecker = require('./jsview-style-checker');
+const Logger = require('@shijiu/jsview/tools/jsview-logger');
 
-const compilerSfc = require("./compiler-sfc.cjs");
+const compilerSfc = require('./compiler-sfc.cjs');
 const processorLangList = [
     'less',
     'sass',
@@ -26,9 +27,8 @@ const cachedCssStyles = {};
 function ensureSfcDescriptor(descriptor) {
     try {
         ensureSfcDescriptorImpl(descriptor)
-
     } catch (exception) {
-        console.error("JsView Error: Failed to call ensureSfcDescriptor()! Exception:\n", exception);
+        Logger.ErrorAndThrow(Logger.GetFileTag(descriptor.filename), 'Failed to call ensureSfcDescriptor()!');
     }
 }
 
@@ -36,12 +36,12 @@ function compileCssToJs(sfc, options) {
     try {
         // 必须在此处parse css，否则npm run build时进入不到js代码中。
         // const styleJsFilePath = getStyleJsFilePath(sfc.filename);
-        // return `\nimport "${styleJsFilePath}";`
+        // return `\nimport '${styleJsFilePath}';`
 
         const compiledJsContent = compileCssToJsImpl(sfc, options)
         return compiledJsContent;
     } catch (exception) {
-        console.error("JsView Error: Failed to call compileCssToJs()! Exception:\n", exception);
+        Logger.ErrorAndThrow(Logger.GetFileTag(sfc.filename), 'Failed to call compileCssToJs()!');
     }
 }
 
@@ -50,10 +50,9 @@ function compileCssToJsImpl(sfc, options) {
     let cachedStyleSheets = {};
     for (const style of sfc.styles) {
         if(!!style.module) {
-            let errMsg = "JsView Error: style module is not released by Vue3!\n";
+            let errMsg = 'style module is not released by Vue3!\n';
             errMsg += style;
-            console.error(errMsg + " errors =", errors);
-            throw new Error(errMsg)
+            Logger.ErrorAndThrow(Logger.GetFileTag(sfc.filename), errMsg + ' errors =', errors);
         }
 
         const compileStyleOptions = {
@@ -70,17 +69,16 @@ function compileCssToJsImpl(sfc, options) {
             preprocessLang: style.attrs.lang,
         };
 
-        if(!!style.attrs.src) { // 处理<style [scoped] src="xxx">
+        if(!!style.attrs.src) { // 处理<style [scoped] src='xxx'>
             const baseDir = path.dirname(sfc.filename);
             const cssSrcPath = path.resolve(baseDir, style.attrs.src);
-            compileStyleOptions.source = fs.readFileSync(cssSrcPath, "utf8");
+            compileStyleOptions.source = fs.readFileSync(cssSrcPath, 'utf8');
         }
 
         const { rawResult, errors } = compilerSfc.compileStyle(compileStyleOptions)
         if(errors.length) {
-            const errMsg = "JsView Error: Failed to compile style when convert css to js!";
-            console.error(errMsg + " errors =", errors);
-            throw new Error(errMsg)
+            const errMsg = 'Failed to compile style when convert css to js!';
+            Logger.ErrorAndThrow(Logger.GetFileTag(sfc.filename), errMsg + ' errors =', errors);
         }
         
         const {styleImports, styleSheets } = compileAndSaveImportedNode(rawResult.result.root.nodes);
@@ -90,7 +88,7 @@ function compileCssToJsImpl(sfc, options) {
 
     const styleJsContents = serializeStyleJsFile(cachedStyleImports, cachedStyleSheets);
 
-    // console.log("jsview-css-to-js.compileCssToJsImpl() styleJsContents=", styleJsContents);
+    // Logger.Debug(Logger.GetFileTag(sfc.filename), 'styleJsContents=', styleJsContents);
 
     return styleJsContents;
 }
@@ -109,12 +107,12 @@ function ensureSfcDescriptorImpl(descriptor) {
 
     // 为了触发compiler-sfc.cjs.compileScript()
     // 如果script和scriptSetup都不存在，就做一个空的
-    // console.log("JsView: insert a empty script.");
+    // Logger.Debug('insert a empty script.');
     descriptor.script = {
         type: 'script',
-        content: "export default {}\n",
+        content: 'export default {}\n',
         loc: {
-            source: "",
+            source: '',
             start: { column: 0, line: 0, offset: 0 },
             end: { column: 0, line: 0, offset: 0}
         },
@@ -141,9 +139,9 @@ function checkSelectors(node, styleFilePath, styleSelectors) {
         for(let selector of cachedSelectors) {
             if(styleSelectors.has(selector)) { // 发现重复的selector
                 if (selector.includes['['] && selector.includes[']']) { // scoped style
-                    let errMsg = "JsView Warn: Multi defined CSS selector '" + selector + "' from " + node.source.input.file + ".\n";
-                    errMsg += "It has been defined in " + cachedFilePath + ".\n";
-                    console.warn(errMsg);
+                    let errMsg = 'Multi defined CSS selector "' + selector + '" from ' + node.source.input.file + '.\n';
+                    errMsg += 'It has been defined in ' + cachedFilePath + '.\n';
+                    Logger.Warn(Logger.GetFileTag(node.source.input.file), errMsg);
                 }
                 return false;
             }
@@ -161,11 +159,10 @@ function checkSelectors(node, styleFilePath, styleSelectors) {
     return true;
 }
 
-function check(expr, source, errMsg) {
+function check(expr, node, source, errMsg) {
     if(!expr) {
-        errMsg += ("\n source is: \n" + source);
-        console.error(errMsg);
-        throw new Error(errMsg);
+        errMsg += ('\n source is: \n' + source);
+        Logger.ErrorAndThrow(Logger.GetFileTag(node.source.input.file), errMsg);
     }
 }
 
@@ -174,22 +171,21 @@ function compileAndSaveImportedNode(styleNodes) {
     let styleSheets = {};
 
     for(const node of styleNodes) {
-        if (node.type === "comment"
-        || node.name === "-webkit-keyframes"
-        || node.name === "charset") {
+        if (node.type === 'comment'
+        || node.name === '-webkit-keyframes'
+        || node.name === 'charset') {
                 // DO NOTHING
-        } else if(node.name === "import") {
+        } else if(node.name === 'import') {
             const importContent = compileImportNodeRecursive(node);
             if (importContent && styleImports.includes(importContent) == false) {
                 styleImports.push(importContent);
             }
-        } else if(node.name === "keyframes") {
+        } else if(node.name === 'keyframes') {
             const styleFilePath = node.source.input.file;
             const styleSelectors = new Set([node.params]);
             const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
             if (checked == false) {
-                let errMsg = "JsView Warn: Multi defined CSS keyframes '" + node.params + "'.\n";
-                console.warn(errMsg);
+                Logger.Warn(Logger.GetFileTag(node.source.input.file), 'Multi defined CSS keyframes "' + node.params + '".\n');
             }
 
             const subStyleSheets = compileKeyframesNode(node);
@@ -201,8 +197,7 @@ function compileAndSaveImportedNode(styleNodes) {
             const styleSelectors = new Set([node.selector]);
             const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
             if (checked == false) {
-                let errMsg = "JsView Warn: Multi defined CSS selector '" + node.selector + "'.\n";
-                console.warn(errMsg);
+                Logger.Warn(Logger.GetFileTag(node.source.input.file), 'Multi defined CSS selector "' + node.selector + '".\n');
             }
 
             const subStyleSheets = compileSelectorNode(node);
@@ -216,17 +211,17 @@ function compileAndSaveImportedNode(styleNodes) {
                 styleSheets[scopedId] = mergedStyleRules;
             }
             styleSelectors.add(node.selector);
-        } else if (node.name === "-moz-keyframes"
-        || node.name === "-o-keyframes"
-        || node.name === "-webkit-keyframes") {
+        } else if (node.name === '-moz-keyframes'
+        || node.name === '-o-keyframes'
+        || node.name === '-webkit-keyframes') {
             // Stylus 添加的keyframes，忽略，只处理@keyframes
         } else {
-            console.log("Unsupported css node: ", node);
-            check(false, node.source.input.css, "JsView Error: Unsupported css node from import css file.");
+            Logger.Info(Logger.GetFileTag(node.source.input.file), 'Unsupported css node: ', node);
+            check(false, node, node.source.input.css, 'Unsupported css node from import css file.');
         }
     }
 
-    // console.log('jsview-css-to-js.compileAndSaveImportedNode() styleSheets=', styleImports, styleSheets);
+    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'jsview-css-to-js.compileAndSaveImportedNode() styleSheets=', styleImports, styleSheets);
     return {
         styleImports,
         styleSheets,
@@ -234,7 +229,7 @@ function compileAndSaveImportedNode(styleNodes) {
 }
 
 function serializeStyleJsFile(styleImports, styleSheets) {
-    let styleJsContent = "\n";
+    let styleJsContent = '\n';
 
     if (styleImports.length > 0) {
         const styleImportsContent = styleImports.join('\n');
@@ -243,9 +238,9 @@ function serializeStyleJsFile(styleImports, styleSheets) {
 
     if (Object.keys(styleSheets).length > 0) {
         const styleSheetsContent = JSON.stringify(styleSheets);
-        styleJsContent += "\nconst styleSheetsContent = ";
+        styleJsContent += '\nconst styleSheetsContent = ';
         styleJsContent += styleSheetsContent;
-        styleJsContent += ";\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);";
+        styleJsContent += ';\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);';
     }
 
     return styleJsContent;
@@ -275,9 +270,9 @@ function getStyleJsFilePath(styleFilePath) {
     return styleJsFilePath;
 }
 
-function getStringOffset(source, line, column) {
-    check(!isNaN(line), source, "JsView Error: Failed to get string offset, line is NaN.");
-    check(!isNaN(column), source, "JsView Error: Failed to get string offset, column is NaN.");
+function getStringOffset(node, source, line, column) {
+    check(!isNaN(line), node, source, 'Failed to get string offset, line is NaN.');
+    check(!isNaN(column), node, source, 'Failed to get string offset, column is NaN.');
 
     line -= 1;
     column -= 1;
@@ -285,7 +280,7 @@ function getStringOffset(source, line, column) {
     var offset = 0;
     for (var idx = 0; idx < line; idx++) {
         offset = source.indexOf('\n', offset + 1);
-        check(offset >= 0, source, "JsView Error: Failed to get string offset, line=" + line + ", column=" + column);
+        check(offset >= 0, node, source, 'Failed to get string offset, line=' + line + ', column=' + column);
     }
     offset += column;
 
@@ -294,7 +289,7 @@ function getStringOffset(source, line, column) {
 
 function compileImportNodeRecursive(node, parsedImports = []) {
     const name = node.name;
-    check(name === "import", node.source.input.css, "JsView Error: @import name is not found!");
+    check(name === 'import', node, node.source.input.css, '@import name is not found!');
 
     let cssFilePath = node.params.replaceAll('"', '');
     cssFilePath = cssFilePath.replaceAll("'", '');
@@ -304,13 +299,13 @@ function compileImportNodeRecursive(node, parsedImports = []) {
 
     // 解死循环
     if (parsedImports.includes(cssFileFullPath)) {
-        console.log('JsView Info: Ignore to parse file in dead loop: ' + cssFileFullPath);
+        Logger.Info(Logger.GetFileTag(node.source.input.file), 'Ignore to parse file in dead loop: ' + cssFileFullPath);
         return null;
     }
     parsedImports.push(cssFileFullPath);
 
     try {
-        const content = fs.readFileSync(cssFileFullPath, "utf8");;
+        const content = fs.readFileSync(cssFileFullPath, 'utf8');;
         const options = {
             from: cssFileFullPath
         };
@@ -321,7 +316,7 @@ function compileImportNodeRecursive(node, parsedImports = []) {
         const importNodeIndexs = [];
         for (let idx = 0; idx < styleNodes.length; idx++) {
             const node = styleNodes[idx];
-            if (node.name !== "import") {
+            if (node.name !== 'import') {
                 continue;
             }
 
@@ -346,63 +341,73 @@ function compileImportNodeRecursive(node, parsedImports = []) {
         const { _, styleSheets } = compileAndSaveImportedNode(styleNodes);
         const styleJsContents = serializeStyleJsFile(styleImports, styleSheets);
 
-        fs.writeFileSync(styleJsFilePath, styleJsContents, "utf8");;
+        fs.writeFileSync(styleJsFilePath, styleJsContents, 'utf8');;
     } catch (e) {
-        console.log('JsView Error: Failed to compile css import node.', e);
-        throw e;
+        Logger.ErrorAndThrow(Logger.GetFileTag(node.source.input.file), 'Failed to compile css import node.', e);
     }
 
     let styleJsFileRelativePath = path.relative(baseDir, styleJsFilePath);
     styleJsFileRelativePath = styleJsFileRelativePath.replaceAll('\\', '/');
-    const styleImportContent = `\nimport "${styleJsFileRelativePath}";`;
+    const styleImportContent = `\nimport '${styleJsFileRelativePath}';`;
 
-    // console.log('jsview-css-to-js.compileImportNodeRecursive() return ', styleImportContent);
+    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleImportContent);
     return styleImportContent;
 }
 
 function compileKeyframesNode(node) {
     const name = node.name;
-    check(name, node.source.input.css, "JsView Error: name is not found!");
-
-    check(name === "keyframes", node.source.input.css, "JsView Error: @keyframes name is not found!");
-
-    let startOffset = node.source.start.offset;
-    let endOffset = node.source.end.offset;
-    if (typeof (startOffset) == 'undefined') {
-        startOffset = getStringOffset(node.source.input.css, node.source.start.line, node.source.start.column);
-    }
-    if (typeof (endOffset) == 'undefined') {
-        endOffset = getStringOffset(node.source.input.css, node.source.end.line, node.source.end.column);
+    check(name, node, node.source.input.css, 'name is not found!');
+
+    check(name === 'keyframes', node, node.source.input.css, '@keyframes name is not found!');
+
+    // let startOffset = node.source.start.offset;
+    // let endOffset = node.source.end.offset;
+    // if (typeof (startOffset) == 'undefined') {
+    //     startOffset = getStringOffset(node.source.input.css, node.source.start.line, node.source.start.column);
+    // }
+    // if (typeof (endOffset) == 'undefined') {
+    //     endOffset = getStringOffset(node.source.input.css, node.source.end.line, node.source.end.column);
+    // }
+    // const content = node.source.input.css.slice(startOffset, endOffset + 1);
+    // Logger.Debug(Logger.GetFileTag(node.source.input.file), startOffset, endOffset, content);
+
+    let content = '{';
+    for (const ident of node.nodes) {
+        content += ident.selector;
+        content += '{';
+        for (const declaration of ident.nodes) {
+            content += declaration.prop + ':' + declaration.value + ';';
+        }
+        content += '}';
     }
-    const content = node.source.input.css.slice(startOffset, endOffset + 1);
-    // console.log('jsview-css-to-js.compileKeyframesNode() \n', startOffset, endOffset, content);
+    content += '}';
+    content = content.replaceAll('\\', ''); // 去掉var()里面的 \\
 
     const kfName = node.params;
-    let kfValue = content.replace(/(\r|\n|\r\n)/g, " ");
-    kfValue = kfValue.replace(/@keyframes .*? {/g, "@keyframes " + kfName + " {");
-    kfValue = styleChecker.GetFormattedKeyframe(kfName, kfValue);
+    let kfValue = '@keyframes ' + kfName + ' ' + content;
+    kfValue = styleChecker.GetFormattedKeyframe(node.source.input.file, kfName, kfValue);
 
     const scopedId = '0'; // CSS规范中，keyframes没有继承, 放在glabol中
     const kfRule = { [kfName]: kfValue };
 
     const styleSheets = { [scopedId]: kfRule };
 
-    // console.log('jsview-css-to-js.compileKeyframesNode() return ', styleSheets);
+    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleSheets);
     return styleSheets;
 }
 
 function compileSelectorNode(node) {
     const selector = node.selector;
-    check(selector, node.source.input.css, "JsView Error: Selector is not found!");
+    check(selector, node, node.source.input.css, 'Selector is not found!');
 
-    let errMsg = "JsView Error: Only class selector is supported!\n";
-    errMsg += "JsView Error: Please use css like `.classname { property: value; }`";
-    check(selector.startsWith('.'), node.source.input.css, errMsg);
+    let errMsg = 'Only class selector is supported!\n';
+    errMsg += 'Please use css like `.classname { property: value; }`';
+    check(selector.startsWith('.'), node, node.source.input.css, errMsg);
 
     const declarations = postCssJs.objectify(node);
     const styleSheets = parsePostCssJs(node, selector, declarations);
 
-    // console.log('jsview-css-to-js.compileSelectorNode() return ', styleSheets);
+    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleSheets);
     return styleSheets;
 }
 
@@ -414,9 +419,9 @@ function parsePostCssJs(node, selector, declarations) {
     for (let selector of selectorArray) {
         selector = selector.trim();
         
-        let scopedId = selector.substring(selector.indexOf("[") + 1, selector.lastIndexOf("]"));
+        let scopedId = selector.substring(selector.indexOf('[') + 1, selector.lastIndexOf(']'));
         if (scopedId) {
-            selector = selector.substring(0, selector.indexOf("["));
+            selector = selector.substring(0, selector.indexOf('['));
             scopedId = scopedId.replace('data-v-', '');
         } else {
             scopedId = '0';
@@ -437,8 +442,7 @@ function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
 
     for (let [name, value] of Object.entries(declarations)) {
         if (value instanceof Array) { // 同一个name定义了多次
-            let errMsg = "JsView Warn: Multi defined CSS name '" + name + "' from " + selector + ".\n";
-            console.warn(errMsg);
+            Logger.Warn(Logger.GetFileTag(node.source.input.file), 'Multi defined CSS name "' + name + '" from ' + selector + '.\n');
             value = value[value.length - 1];
         }
 
@@ -448,7 +452,7 @@ function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
         }
 
         if (name.startsWith('@keyframes')) { // keyframes解嵌套处理
-            check(false, node.source.input.css, "JsView Error: Nested keyframes is not supported!");
+            check(false, node, node.source.input.css, 'Nested keyframes is not supported!');
             delete declarations[name];
             continue;
         } else if (value instanceof Object) { // css class解嵌套处理
@@ -459,13 +463,13 @@ function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
             continue;
         }
 
-        const formattedValue = styleChecker.GetFormattedValue(name, value);
+        const formattedValue = styleChecker.GetFormattedValue(node.source.input.file, name, value);
         declarations[name] = formattedValue;
     }
 
     styleRules[selector] = JSON.stringify(declarations);
 
-    // console.log('jsview-css-to-js.parseUnscopedStyleSheets() return ', styleRules);
+    // Logger.Debug(Logger.GetFileTag(node.source.input.file), 'return ', styleRules);
     return styleRules;
 }