@shijiu/jsview 1.9.887 → 1.9.909

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

@@ -1 +1 @@
-/* eslint-disable */ void 0===window.Forge&&(window.Forge={});var e=window.Forge;class t{constructor(e,t){if(this.href="",this.origin="",this.protocol="",this.host="",this.hostname="",this.port="",this.pathname="",this.search="",this.hash="",!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("./")||!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)+"/"}let t=window.JsView.Dom.__MainPath;e=e.startsWith("./")?t+e.substring(2):t+e}if(this.href=e,!t)return;let n=this.href,r=n.indexOf("#");r>0&&(this.hash=n.substring(r),n=n.substring(0,r));let s=n.indexOf("?");s>1&&(this.search=n.substring(s),n=n.substring(0,s));let o=n,a=o.indexOf("://");this.protocol=a>0?o.substring(0,a+1):"";let u=a>1?o.substring(a+3):"";if(a=u.indexOf("/"),this.host=a>0?u.substring(0,a):"",this.pathname=a>1?u.substring(a):"",this.origin=a>0?this.protocol+"//"+this.host:"",this.host.startsWith("[")){let e=this.host.indexOf("]");this.hostname=this.host.substring(0,e+1),e=this.host.substring(e+1).indexOf(":"),this.port=e>1?this.host.substring(e+1):""}else{let e=this.host.indexOf(":");this.hostname=e>0?this.host.substring(0,e):this.host,this.port=e>1?this.host.substring(e+1):""}}replace(e){this.href=e}}window.JsView&&window.JsView.registerUriConverter?.((e=>new t(e,!1).href));class i{static SetBackgroundColor(t,n,r){const s=i.TextureManager.GetColorTextureCached(n);let o;r&&(o=new e.ViewRoundCornerMask(r.topLeft,r.topRight,r.bottomLeft,r.bottomRight));const a=new e.ExternalTextureSetting(s,o);t.ResetTexture(a)}static SetBackgroundImage(n,r,s,o,a,u,h){let l,d={};if("string"==typeof r){const e=new t(r);if(e instanceof t==!1)throw Error("Bad Argument.",e);d.url=e.href}else"linear-gradient"==r?.type&&(d.gradient=r);if(d.gradient)if(d.gradient.colors?.length>2){const e=d.gradient.colors,t=[e[0],e[e.length-1]],n=e.slice(1,e.length-1);l=i.TextureManager.CreateLinearGradientTexture(t,n)}else 2==d.gradient.colors?.length?l=i.TextureManager.CreateMiniGradientTexture(!0,d.gradient.colors[0],d.gradient.colors[1],d.gradient.rawValue):console.warn("Failed to create backgroundImage gradient, bad colors.",d.gradient.colors);else d.url&&(l=d.url.includes(".gif")||d.url.includes(".webp")?i.TextureManager.GetGifImage(d.url,!1,null,h):i.TextureManager.GetImage2(d.url,!1,a,u||e.ColorSpace.RGBA_8888));if(l){let t;s&&(t=new e.ViewRoundCornerMask(s.topLeft,s.topRight,s.bottomLeft,s.bottomRight));const i=new e.ExternalTextureSetting(l,t);if(n.ResetTexture(i),o){let e=l.RegisterLoadImageCallback(null,(function(){o({width:l.Width,height:l.Height})}));n.RegisterDetachCallback((()=>{l.UnregisterLoadImageCallback(e)}))}}}static SetMaskedBackgroundImage(n,r,s,o){if("string"==typeof r&&(r=new t(r)),r instanceof t==!1)throw Error("Bad Argument.",r);if("string"==typeof s&&(s=new t(s)),s instanceof t==!1)throw Error("Bad Argument(MaskURL).",s);const a=i.TextureManager.GetImage2(r.href,!1,null,o||e.ColorSpace.RGBA_8888);if(a){const t=i.TextureManager.GetImage2(s.href,!1,null,e.ColorSpace.RGBA_8888),r=new e.ExternalTextureSetting(a,new e.ViewTextureMask(t));n.ResetTexture(r)}}static SetVideoTexture(t,n,r){const s=i.TextureManager.GetColorTexture(n);let o;r&&(o=new e.ViewRoundCornerMask(r.topLeft,r.topRight,r.bottomLeft,r.bottomRight));const a=new e.TextureSetting(s,o);t.ResetTexture(a)}static GetTextWidth(t){return t.str||(t.str=""),t.font||(t.font=e.TextUtils._sDefaultFont),t.size||(t.size=e.TextUtils._sDefaultFontSize),"italic"!==t.italic&&(t.italic=""),"bold"!==t.bold&&(t.bold=""),window.PlatformUtils.GetTextWidth(t)}static RequestSwap(){e.sRenderBridge.RequestSwap()}static SetImgTexSize(e,t){let n={size:t,refNum:0};i.TextureInfo.Cache[e.Source]=n}static RefImgTexSize(e,t){let n=i.TextureInfo.Cache[e.Source];n?(n.refNum>0?n.refNum++:n.refNum=1,t(n.size)):e.RegisterLoadImageCallback(null,(function(){const n={width:e.Width,height:e.Height};t(n);let r=i.TextureInfo.Cache[e.Source];if(r)r.refNum>0?r.refNum++:r.refNum=1;else{let t={size:n,refNum:1};i.TextureInfo.Cache[e.Source]=t}}))}static UnrefImgTexSize(e){if(!e)return;let t=i.TextureInfo.Cache[e.Source];t&&(t.refNum--,t.refNum<=0&&i.TextureInfo.Unused.add(e.Source))}static ClearUnusedTexSize(){for(let e of i.TextureInfo.Unused){let t=i.TextureInfo.Cache[e];t.refNum<-2?(delete i.TextureInfo.Cache[e],i.TextureInfo.Unused.delete(e)):t.refNum<=0?t.refNum--:i.TextureInfo.Unused.delete(e)}}}i.TextureInfo={Cache:{},Unused:new Set},i.TextureManager=null,i.RootView=null,i.RootActivity=null,i.HaltKeyEvent=!1,window.JsView&&(window.JsView.ForgeExtension||(window.JsView.ForgeExtension=i),i=window.JsView.ForgeExtension);var n=i;export{e as Forge,n 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 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 u=a>1?s.substring(a+3):"";a=u.indexOf("/"),this.host=a>0?u.substring(0,a):"",this.pathname=a>1?u.substring(a):"",this.origin=a>0?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,o,n){const r=i.TextureManager.GetColorTextureCached(o);let s;n&&(s=new e.ViewRoundCornerMask(n.topLeft,n.topRight,n.bottomLeft,n.bottomRight));const a=new e.ExternalTextureSetting(r,s);t.ResetTexture(a)}static SetBackgroundImage(o,n,r,s,a,u,l){let d,h={};if("string"==typeof n){const e=new t(n);if(e instanceof t==!1)throw Error("Bad Argument.",e);h.url=e.href}else"linear-gradient"==n?.type&&(h.gradient=n);if(h.gradient)if(h.gradient.colors?.length>2){const e=h.gradient.colors,t=[e[0],e[e.length-1]],o=e.slice(1,e.length-1);d=i.TextureManager.CreateLinearGradientTexture(t,o)}else 2==h.gradient.colors?.length?d=i.TextureManager.CreateMiniGradientTexture(!0,h.gradient.colors[0],h.gradient.colors[1],h.gradient.rawValue):console.warn("Failed to create backgroundImage gradient, bad colors.",h.gradient.colors);else h.url&&(d=h.url.includes(".gif")||h.url.includes(".webp")?i.TextureManager.GetGifImage(h.url,!1,null,l):i.TextureManager.GetImage2(h.url,!1,a,u||e.ColorSpace.RGBA_8888));if(d){let t;r&&(t=new e.ViewRoundCornerMask(r.topLeft,r.topRight,r.bottomLeft,r.bottomRight));const i=new e.ExternalTextureSetting(d,t);if(o.ResetTexture(i),s){let e=d.RegisterLoadImageCallback(null,(function(){s({width:d.Width,height:d.Height})}));o.RegisterDetachCallback((()=>{d.UnregisterLoadImageCallback(e)}))}}}static SetMaskedBackgroundImage(o,n,r,s){if("string"==typeof n&&(n=new t(n)),n instanceof t==!1)throw Error("Bad Argument.",n);if("string"==typeof r&&(r=new t(r)),r instanceof t==!1)throw Error("Bad Argument(MaskURL).",r);const a=i.TextureManager.GetImage2(n.href,!1,null,s||e.ColorSpace.RGBA_8888);if(a){const t=i.TextureManager.GetImage2(r.href,!1,null,e.ColorSpace.RGBA_8888),n=new e.ExternalTextureSetting(a,new e.ViewTextureMask(t));o.ResetTexture(n)}}static SetVideoTexture(t,o,n){const r=i.TextureManager.GetColorTexture(o);let s;n&&(s=new e.ViewRoundCornerMask(n.topLeft,n.topRight,n.bottomLeft,n.bottomRight));const a=new e.TextureSetting(r,s);t.ResetTexture(a)}static GetTextWidth(t){return t.str||(t.str=""),t.font||(t.font=e.TextUtils._sDefaultFont),t.size||(t.size=e.TextUtils._sDefaultFontSize),"italic"!==t.italic&&(t.italic=""),"bold"!==t.bold&&(t.bold=""),window.PlatformUtils.GetTextWidth(t)}static RequestSwap(){e.sRenderBridge.RequestSwap()}static SetImgTexSize(e,t){let o={size:t,refNum:0};i.TextureInfo.Cache[e.Source]=o}static RefImgTexSize(e,t){let o=i.TextureInfo.Cache[e.Source];o?(o.refNum>0?o.refNum++:o.refNum=1,t(o.size)):e.RegisterLoadImageCallback(null,(function(){const o={width:e.Width,height:e.Height};t(o);let n=i.TextureInfo.Cache[e.Source];if(n)n.refNum>0?n.refNum++:n.refNum=1;else{let t={size:o,refNum:1};i.TextureInfo.Cache[e.Source]=t}}))}static UnrefImgTexSize(e){if(!e)return;let t=i.TextureInfo.Cache[e.Source];t&&(t.refNum--,t.refNum<=0&&i.TextureInfo.Unused.add(e.Source))}static ClearUnusedTexSize(){for(let e of i.TextureInfo.Unused){let t=i.TextureInfo.Cache[e];t.refNum<-2?(delete i.TextureInfo.Cache[e],i.TextureInfo.Unused.delete(e)):t.refNum<=0?t.refNum--:i.TextureInfo.Unused.delete(e)}}}i.TextureInfo={Cache:{},Unused:new Set},i.TextureManager=null,i.RootView=null,i.RootActivity=null,i.HaltKeyEvent=!1,window.JsvCode.ForgeExtension||(window.JsvCode.ForgeExtension=i);var o=i=window.JsvCode.ForgeExtension;export{e as Forge,o as ForgeExtension};

package/dom/index.mjs

@@ -5,10 +5,10 @@ function getCodeDebugConfig() {
     // TODO: 进行编译(yarn build)时，需要设置为fasle。
     enableDebug: false,
 
-    domBrowserPath: './code/src/dom-browser-hook/index.js',
-    domNativePath: './code/src/dom-wrapper/index.js',
-    engineBrowserPath: './code/src/engine-js/browser/index.js',
-    forgeDefinePath: './code/src/engine-js/index.js',
+    domBrowserPath: './code/src/dom-2.0/dom-env/browser/index.ts',
+    domNativePath: './code/src/dom-2.0/dom-env/native/index.ts',
+    engineBrowserPath: './code/src/dom-2.0/engine-js/browser/index.ts',
+    forgeDefinePath: './code/src/dom-2.0/engine-js/index.ts',
   };
 
   return codeDebug;
@@ -19,7 +19,7 @@ async function loadJsViewDomNative(codeDebugConfig)
   let domNative = null;
 
   if (codeDebugConfig.enableDebug == false) {
-    domNative = await import('./bin/jsview-dom.min.js');
+    domNative = await import('./bin/jsview-dom-native.min.js');
   } else {
     // 兼容webpack写法
     domNative = await import(
@@ -45,17 +45,18 @@ async function loadJsViewDomBrowserDebug(codeDebugConfig)
   }
 
   // 加载jsv-dom的调试版本
+  let domBrowser = null;
   if (codeDebugConfig.enableDebug == false) {
-    await import('./bin/jsview-browser-debug-dom.min.js');
+    domBrowser = await import('./bin/jsview-dom-browser.min.js');
   } else {
     // 兼容webpack写法
-    await import(
+    domBrowser = await import(
       /* webpackExclude: /@shijiu\/jsview\/dom\/code\/node_modules\// */
       `${codeDebugConfig.domBrowserPath}`
     );
   }
 
-  return null;
+  return domBrowser;
 }
 
 async function getForgeDefineAsync() {
@@ -89,6 +90,8 @@ async function loadJsViewDomAsync(nativeOrBrowserDebug)
   if (nativeOrBrowserDebug) {
     jsviewDom = await loadJsViewDomNative(codeDebugConfig);
   } else {
+    window.JsvCode = {}; // native 在java中定义
+
     jsviewDom = await loadJsViewDomBrowserDebug(codeDebugConfig);
   }
 

package/loader/jsview-loader.js

@@ -1,5 +1,4 @@
 import JsViewDefConfig from "./jsview.config.default"
-import JsViewBrowserForgeApp from './jsview-browser-forgeapp'
 import { loadJsViewDomAsync } from '../dom'
 import TargetRevision from "../dom/target_core_revision"
 
@@ -27,13 +26,15 @@ export default class JsViewLoader {
     const jsviewDom = await loadJsViewDomAsync(window.JsView);
 
     // 加载Forge
+    jsviewDom.InitEnv();
+
     if (window.JsView) {
-      this.#forgeAppClass = jsviewDom.JsViewForgeApp;
+      this.#forgeAppClass = jsviewDom.NativeForgeApp;
 
       // /static/js/: (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，用于image/import.then的相对寻址
       window.JsView.Dom.JsSubPath = this.#config.jsviewConfig.jsSubPath;
     } else {
-      this.#forgeAppClass = JsViewBrowserForgeApp;
+      this.#forgeAppClass = jsviewDom.BrowserForgeApp;
     }
 
     this.#loadJsViewEnvAsync(appName, onLoaded);
@@ -103,7 +104,7 @@ export default class JsViewLoader {
         onLoaded()
       };
     } else {
-      JsViewBrowserForgeApp.setRender(function () {
+      this.#forgeAppClass.SetRender(function () {
         onLoaded();
       })
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview",
-  "version": "1.9.887",
+  "version": "1.9.909",
   "bin": {
     "jsview-post-build": "./tools/jsview-post-build.js",
     "jsview-post-install": "./tools/jsview-post-install.js"
@@ -17,7 +17,6 @@
   ],
   "dependencies": {
     "gifuct-js": "2.1.2",
-    "postcss-import-sync": "7.1.4",
     "postcss-js": "4.0.0"
   },
   "devDependencies": {},

package/patches/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js

@@ -17669,14 +17669,24 @@ function doCompileStyle(options) {
         // In async mode, return a promise.
         if (options.isAsync) {
             return result
-                .then(result => ({
+// JsView Modified >>>
+// CSS文件异步变动时触发文件更新
+                // .then(result => ({
+              .then(result => {
+                jsvCssToJs.compileAndSaveImportedNode(filename, result.root.nodes)
+                return {
+// JsView Modified <<<
                 code: result.css || '',
                 map: result.map && result.map.toJSON(),
                 errors,
                 modules: cssModules,
                 rawResult: result,
                 dependencies: recordPlainCssDependencies(result.messages)
-            }))
+// JsView Modified >>>
+// CSS文件异步变动时触发文件更新
+            // }))
+            }})
+// JsView Modified <<<
                 .catch(error => ({
                 code: '',
                 map: undefined,
@@ -17689,6 +17699,11 @@ function doCompileStyle(options) {
         // force synchronous transform (we know we only have sync plugins)
         code = result.css;
         outMap = result.map;
+
+// JsView Added >>>
+// CSS文件同步变动时触发文件更新
+        jsvCssToJs.compileAndSaveImportedNode(filename, result.result.root.nodes)
+// JsView Added <<<
     }
     catch (e) {
         errors.push(e);

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

@@ -1,21 +1,17 @@
 /*
- * JsView Added
+ * QCode Added
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const crypto = require('crypto');
-var fs = require('fs');
-var path = require('path');
-var postCss = require('postcss');
-var postCssJs = require('postcss-js');
-var postCssImport = require('postcss-import-sync');
-const compilerSfc = require("./compiler-sfc.cjs");
+const fs = require('fs');
+const path = require('path');
+const postCssJs = require('postcss-js');
 const styleFormat = require("./jsview-style-format");
 
-var nodeModulesDir = path.resolve(process.cwd(), 'node_modules')
-var cachedCssStyles = {}
+const cachedCssStyles = {};
 
 function ensureSfcDescriptor(descriptor) {
     try {
@@ -27,7 +23,9 @@ function ensureSfcDescriptor(descriptor) {
 
 function compileCssToJs(sfc, options) {
     try {
-        return compileCssToJsImpl(sfc, options)
+        const styleJsFilePath = getStyleJsFilePath(sfc.filename);
+        return `\nimport "${styleJsFilePath}";`
+        // return compileCssToJsImpl(sfc, options)
     } catch (exception) {
         console.error("Failed to call compileCssToJs()! Exception:\n", exception);
     }
@@ -77,96 +75,6 @@ function ensureSfcDescriptorImpl(descriptor) {
     };
 }
 
-function compileCssToJsImpl(sfc, options) {
-    if(sfc.styles.length <= 0) {
-        return ""
-    }
-
-    let compileStyleOptions = {
-        filename: sfc.filename,
-        id: `data-v-${options.id}`,
-        // map: null,
-        trim: true,
-        isProd: options.isProd,
-
-        source: null,
-        scoped: false,
-        modules: false,
-    };
-    // let styleCodeContainer = new Set();
-    let styleContentContainer = "";
-    let styleImportContainer = "";
-    sfc.styles.forEach(style => {
-        if(!!style.module) {
-            let errMsg = "JsView: style module is not released by Vue3!\n";
-            errMsg += style;
-            console.error(errMsg + " errors =", errors);
-            throw new Error(errMsg)
-        }
-        compileStyleOptions.source = style.content
-        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.scoped = style.scoped
-        compileStyleOptions.modules = style.module
-        const { rawResult, errors } = compilerSfc.compileStyle(compileStyleOptions)
-        if(errors.length) {
-            const errMsg = "JsView: Failed to compile style when convert css to js!";
-            console.error(errMsg + " errors =", errors);
-            throw new Error(errMsg)
-        }
-        
-        const styleNodes = rawResult.result.root.nodes;
-        styleNodes.forEach(node => {
-            // console.log('node=', node)
-            // console.log('node.type=', node.type, "node.name=", node.name, "node.selector=", node.selector);
-
-            if (node.type === "comment") {
-                // DO NOTHING
-            } else if(node.name === "import") {
-                const styleInfo = compileImportNode(node);
-                // styleCodeContainer.add(styleCode);
-
-                checkSelectors(node, styleInfo.styleFilePath, styleInfo.styleSelectors); // 检测selector是否已经处理过
-                let styleJsFilePath = path.relative(nodeModulesDir, styleInfo.styleJsFilePath);
-                styleJsFilePath = styleJsFilePath.replace(/\\/g, '/');
-                styleImportContainer += `\nimport "/${path.basename(nodeModulesDir)}/${styleJsFilePath}";`
-            } else if(node.name === "keyframes") {
-                const styleFilePath = node.source.input.file;
-                const styleSelectors = new Set([node.params]);
-                const styleContent = compileKeyframesNode(node);
-
-                checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
-                styleContentContainer += styleContent;
-            } else if(!!node.selector) {
-                const styleFilePath = node.source.input.file;
-                const styleSelectors = new Set([node.selector]);
-                const styleContent = compileSelectorNode(node);
-
-                checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
-                styleContentContainer += styleContent;
-            } else {
-                check(false, node.source.input.css, "JsView Error: Unsupported css node.");
-            }
-        })
-    })
-
-    let jsvStyleSheets = styleImportContainer;
-    jsvStyleSheets += "\nObject.assign(window.JsvCode.Dom.StyleSheets, {";
-    jsvStyleSheets += styleContentContainer;
-    jsvStyleSheets += "});\n";
-
-    // 用于@import的css hotload，但是没有生效
-    // styleCodeContainer.forEach(styleCode => {
-    //     jsvStyleSheets += styleCode + "\n";
-    // });
-
-    // console.log('jsview-css-to-js.compileCssToJs() jsvStyleSheets=' + jsvStyleSheets)
-    return jsvStyleSheets;
-}
-
 function checkSelectors(node, styleFilePath, styleSelectors) {
     for(let cachedFilePath in cachedCssStyles) {
         if(cachedFilePath == styleFilePath) {
@@ -176,9 +84,12 @@ function checkSelectors(node, styleFilePath, styleSelectors) {
         const cachedSelectors = cachedCssStyles[cachedFilePath];
         for(let selector of cachedSelectors) {
             if(styleSelectors.has(selector)) { // 发现重复的selector
-                let errMsg = "JsView Warn: Multi defined CSS selector '" + selector + "' from " + node.source.input.file + ".\n";
-                errMsg += "It has been defined in " + cachedFilePath + ".\n";
-                check(false, node.source.input.css, errMsg);
+                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);
+                }
+                return false;
             }
         }
     }
@@ -190,79 +101,148 @@ function checkSelectors(node, styleFilePath, styleSelectors) {
     }
     cachedSelectors = new Set([...cachedSelectors, ...styleSelectors]);
     cachedCssStyles[styleFilePath] = cachedSelectors;
+
+    return true;
 }
 
 function check(expr, source, errMsg) {
     if(!expr) {
-        errMsg += (" source is: \n" + source);
-        console.error("\n" + errMsg);
+        errMsg += ("\n source is: \n" + source);
+        console.error(errMsg);
         throw new Error(errMsg);
     }
 }
 
-function compileImportNode(node) {
-    const name = node.name;
-    check(name, node.source.input.css, "JsView Error: name is not found!");
+function compileAndSaveImportedNodeImpl(styleFilePath, styleNodes) {
+    const { styleImports, styleSheets } = deserializeStyleJsFile(styleFilePath);
+
+    styleNodes.forEach(node => {
+        if (node.type === "comment"
+        || node.name === "-webkit-keyframes"
+        || node.name === "charset") {
+                // DO NOTHING
+        } else if(node.name === "import") {
+            const importContent = compileImportNode(node);
+            if (styleImports.includes(importContent) == false) {
+                styleImports.push(importContent);
+            }
+        } 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) {
+                // 已经处理过，直接返回了，优化@import被展开问题。
+                return;
+            }
 
-    check(name === "import", node.source.input.css, "JsView Error: @import name is not found!");
+            const subStyleSheets = compileKeyframesNode(node);
+            for (const [scopedId, styleRules] of Object.entries(subStyleSheets)) {
+                styleSheets[scopedId] = Object.assign(styleSheets[scopedId] ?? {}, styleRules);
+            }
+        } else if(!!node.selector) {
+            const styleFilePath = node.source.input.file;
+            const styleSelectors = new Set([node.selector]);
+            const checked = checkSelectors(node, styleFilePath, styleSelectors); // 检测selector是否已经处理过
+            if (checked == false) {
+                // 已经处理过，直接返回了，优化@import被展开问题。
+                return;
+            }
 
-    let result = null;
-    try {
-        const plugins = [].slice();
-        plugins.push(postCssImport)
+            const subStyleSheets = compileSelectorNode(node);
+            for (const [scopedId, styleRules] of Object.entries(subStyleSheets)) {
+                const mergedStyleRules = styleSheets[scopedId] ?? {};
+                for (const [selector, declarations] of Object.entries(styleRules)) {
+                    let mergedDeclarations = mergedStyleRules[selector] ?? '{}';
+                    mergedDeclarations = Object.assign(JSON.parse(mergedDeclarations), JSON.parse(declarations));
+                    mergedStyleRules[selector] = JSON.stringify(mergedDeclarations);
+                }
+                styleSheets[scopedId] = mergedStyleRules;
+            }
+            styleSelectors.add(node.selector);
+        } 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.");
+        }
+    })
+
+    // console.log('jsview-css-to-js.compileAndSaveImportedNodeImpl() styleFilePath=', styleFilePath, ', styleSheets=', styleSheets);
+    serializeStyleJsFile(styleFilePath, { styleImports, styleSheets });
+}
+
+function  deserializeStyleJsFile(styleFilePath) {
+    const styleJsFilePath = getStyleJsFilePath(styleFilePath);
 
-        const content = node.source.input.css.slice(node.source.start.offset, node.source.end.offset + 1);
-        check(content.endsWith(";"), "JsView Error: Failed to parse @import, please end with ';'")
+    let styleImports = [];
+    let styleSheets = {};
 
-        const options = {
-            from: node.source.input.file
-        };
+    let styleJsContent = fs.readFileSync(styleJsFilePath, "utf8");
+    if (styleJsContent) {
+        const styleSheetsFlags = getStyleSheetsDeclaredFlags();
+        const styleImportsContent = styleJsContent.substring(0, styleJsContent.indexOf(styleSheetsFlags.start));
+        let styleSheetsContent = styleJsContent.substring(0, styleJsContent.indexOf(styleSheetsFlags.end));
+        styleSheetsContent = styleSheetsContent.substring(styleJsContent.indexOf(styleSheetsFlags.start) + styleSheetsFlags.start.length);
 
-        result = postCss(plugins).process(content, options);
-    } catch (e) {
-        console.log('JsView Error: Failed to compile css import node.', e);
-        throw e;
+        styleImports = styleImportsContent.split('\n');
+        styleSheets = JSON.parse(styleSheetsContent.length != 0 ? styleSheetsContent : '{}');
     }
 
-    const sourceDir = path.dirname(node.source.input.file);
-    let styleFileName = node.params.replace(/^["'](.+(?=["']$))["']$/, '$1')
-    const styleFilePath = path.resolve(sourceDir, styleFileName);
-    return compileAndSaveImportedNodeImpl(styleFilePath, result.root.nodes);
+
+    return {
+        styleImports,
+        styleSheets,
+    }
 }
 
-function compileAndSaveImportedNodeImpl(styleFilePath, styleNodes) {
-    let styleSelectors = new Set();
-    let styleContent = "";
+function serializeStyleJsFile(styleFilePath, { styleImports, styleSheets }) {
+    const styleJsFilePath = getStyleJsFilePath(styleFilePath);
 
-    styleNodes.forEach(node => {
-        if(node.name === "keyframes") {
-            styleContent += compileKeyframesNode(node);
-        } else if(!!node.selector) {
-            styleContent += compileSelectorNode(node);
-            styleSelectors.add(node.selector);
-        } else {
-            check(false, node.source.input.css, "JsView Error: Unsupported css node from import css file.");
-        }
-    })
+    const styleSheetsFlags = getStyleSheetsDeclaredFlags();
+    const styleImportsContent = styleImports.join('\n');
+    const styleSheetsContent = JSON.stringify(styleSheets);
+
+    let styleJsContent = "";
+    styleJsContent += styleImportsContent;
+    styleJsContent += styleSheetsFlags.start;
+    styleJsContent += styleSheetsContent;
+    styleJsContent += styleSheetsFlags.end;
 
     // 保存到js文件并import到script中
-    const cacheDir = path.resolve(nodeModulesDir, '@shijiu', '.cache')
+    fs.writeFileSync(styleJsFilePath, styleJsContent, "utf8");
+}
+
+function getStyleSheetsDeclaredFlags() {
+    return {
+        start: "\nconst styleSheetsContent = ",
+        end: ";\nwindow.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);",
+    }
+}
+
+function getStyleJsCacheDir() {
+    const nodeModulesDir = path.resolve(process.cwd(), 'node_modules');
+    const cacheDir = path.resolve(nodeModulesDir, '@shijiu', '.cache', 'css-to-js'); // 不能放在.vite文件夹，否则有网络缓存，文件改变后不更新
     if (!fs.existsSync(cacheDir)) {
-        fs.mkdirSync(cacheDir);
+        fs.mkdirSync(cacheDir, { recursive: true });
     }
+
+    return cacheDir;
+}
+
+function getStyleJsFilePath(styleFilePath) {
+    // 保存到js文件并import到script中
+    const cacheDir = getStyleJsCacheDir()
+
     const styleFilePathHash = crypto.createHash('md5').update(styleFilePath).digest('hex').substring(0, 8);
-    const styleJsFileName = path.basename(styleFilePath) + '.' + styleFilePathHash + '.js';
+    const styleJsFileName = styleFilePathHash + '.' + path.basename(styleFilePath) + '.js';
     const styleJsFilePath = path.join(cacheDir, styleJsFileName);
+    if (!fs.existsSync(styleJsFilePath)) {
+        fs.closeSync(fs.openSync(styleJsFilePath, 'w'));
+    }
 
-    styleContent = "\nObject.assign(window.JsvCode.Dom.StyleSheets, {" + styleContent;
-    styleContent += "});\n";
-    fs.writeFileSync(styleJsFilePath, styleContent, "utf8");
-
-    return {
-        styleFilePath,
-        styleSelectors,
-        styleJsFilePath
-    };
+    return styleJsFilePath;
 }
 
 function getStringOffset(source, line, column) {
@@ -282,6 +262,15 @@ function getStringOffset(source, line, column) {
     return offset;
 }
 
+function compileImportNode(node) {
+    const baseDir = path.dirname(node.source.input.file);
+    const cssFilePath = path.resolve(baseDir, node.params.replaceAll('"', ''));
+    const styleJsFilePath = getStyleJsFilePath(cssFilePath);
+    const styleImportContent = `\nimport "${styleJsFilePath}";`;
+
+    return styleImportContent;
+}
+
 function compileKeyframesNode(node) {
     const name = node.name;
     check(name, node.source.input.css, "JsView Error: name is not found!");
@@ -299,12 +288,17 @@ function compileKeyframesNode(node) {
     const content = node.source.input.css.slice(startOffset, endOffset + 1);
     // console.log('jsview-css-to-js.compileKeyframesNode() \n', startOffset, endOffset, content);
 
-    let styleContent = "'" + node.params + "':'";
-    styleContent += content.replace(/(\r|\n|\r\n)/g, " ");
-    styleContent += "',";
+    const kfName = node.params;
+    let kfValue = content.replace(/(\r|\n|\r\n)/g, " ");
+    kfValue = kfValue.replace(/@keyframes .*? {/g, "@keyframes " + kfName + " {");
+
+    const scopedId = '0'; // CSS规范中，keyframes没有继承, 放在glabol中
+    const kfRule = { [kfName]: kfValue };
 
-    // console.log('jsview-css-to-js.compileKeyframesNode() return ' + styleContent);
-    return styleContent
+    const styleSheets = { [scopedId]: kfRule };
+
+    // console.log('jsview-css-to-js.compileKeyframesNode() return ', styleSheets);
+    return styleSheets;
 }
 
 function compileSelectorNode(node) {
@@ -316,20 +310,64 @@ function compileSelectorNode(node) {
     check(selector.startsWith('.'), node.source.input.css, errMsg);
 
     const declarations = postCssJs.objectify(node);
-    for (const name in declarations) {
-        const value = declarations[name];
+    const styleSheets = parsePostCssJs(node, selector, declarations);
+
+    // console.log('jsview-css-to-js.compileSelectorNode() return ', styleSheets);
+    return styleSheets;
+}
+
+function parsePostCssJs(node, selector, declarations) {
+    const styleSheets = { };
+
+    // 对 .a, .b {} 的支持
+    const selectorArray = selector.split(',');
+    for (let selector of selectorArray) {
+        selector = selector.trim();
+        
+        let scopedId = selector.substring(selector.indexOf("[") + 1, selector.lastIndexOf("]"));
+        if (scopedId) {
+            selector = selector.substring(0, selector.indexOf("["));
+            scopedId = scopedId.replace('data-v-', '');
+        } else {
+            scopedId = '0';
+        }
+
+        const styleRules = parseUnscopedStyleSheets(node, selector, declarations, scopedId);
+
+        let mergedStyleRules = styleSheets[scopedId] ?? {};
+        mergedStyleRules = Object.assign(mergedStyleRules, styleRules);
+        styleSheets[scopedId] = mergedStyleRules;
+    }
+
+    return styleSheets;
+}
+
+function parseUnscopedStyleSheets(node, selector, declarations, scopedId) {
+    let styleRules = {};
+
+    for (const [name, value] of Object.entries(declarations)) {
+        if (name.startsWith('@keyframes')) { // keyframes解嵌套处理
+            check(false, node.source.input.css, "JsView Error: Nested keyframes is not supported!");
+            delete declarations[name];
+            continue;
+        } else if (value instanceof Object) { // css class解嵌套处理
+            const unscopedName = name.replace('[data-v-' + scopedId + ']', '');
+            const nestedStyleSheets = parseUnscopedStyleSheets(node, selector + ' ' + unscopedName, value, scopedId);
+            styleRules = Object.assign(styleRules, nestedStyleSheets);
+            delete declarations[name];
+            continue;
+        }
+
         const formattedValue = styleFormat.getFormattedValue(name, value);
         declarations[name] = formattedValue;
     }
 
-    let styleContent = "'" + selector.substr(1) + "':";
-    styleContent += JSON.stringify(declarations);
-    styleContent += ",";
+    styleRules[selector] = JSON.stringify(declarations);
 
-    // console.log('jsview-css-to-js.compileSelectorNode() return ', styleContent);
-    return styleContent;
+    // console.log('jsview-css-to-js.parseUnscopedStyleSheets() return ', styleRules);
+    return styleRules;
 }
 
 exports.ensureSfcDescriptor = ensureSfcDescriptor;
 exports.compileCssToJs = compileCssToJs;
-exports.compileAndSaveImportedNode = compileAndSaveImportedNode;
+exports.compileAndSaveImportedNode = compileAndSaveImportedNode;