feat: add css scope plugin

Author: imtaotao

packages/runtime/core/src/interface/index.ts

@@ -38,7 +38,6 @@ export namespace interfaces {
     name: string;
     entry: string;
     cache?: boolean; // Whether the cache
-    cssScope?: boolean;
     activeWhen?: string | ((path: string) => boolean);
     hooks?: Hooks;
   }
@@ -85,7 +84,10 @@ export namespace interfaces {
 
   export interface Config {
     appID?: string;
+    nested?: boolean;
     basename?: string;
+    cssScope?: boolean;
+    domGetter?: DomGetter;
     apps?: Array<AppInfo>;
     sandbox?: SandboxConfig;
     plugins?: Array<(context: Garfish) => Plugin>;
@@ -94,8 +96,6 @@ export namespace interfaces {
     disablePreloadApp?: boolean;
     // onNotMatchRouter?: (path: string) => Promise<void> | void;
     // autoRefreshApp?: boolean;
-    domGetter?: DomGetter;
-    nested?: boolean;
   }
 
   export declare type MountLifeCycleFn = (

packages/runtime/core/src/module/app.ts

@@ -475,7 +475,6 @@ export class App {
         const text = node.children[0] as Text;
         if (text) {
           const styleManager = new StyleManager(text.content, baseUrl);
-          styleManager.setScope(this.name);
           return styleManager.renderAsStyleElement();
         }
         return DOMApis.createElement(node);

packages/runtime/core/src/utils.ts

@@ -100,7 +100,6 @@ export const fetchStaticResources = (
             .load<StyleManager>(appName, fetchUrl)
             .then(({ resourceManager: styleManager }) => {
               styleManager.setDep(node);
-              styleManager.setScope(appName);
               return styleManager;
             });
         }

packages/runtime/css-scope/src/index.ts

@@ -1,4 +1,25 @@
+import { interfaces } from '@garfish/core';
+import { StyleManager } from '@garfish/loader';
 import { parse } from './parser';
 import { stringify } from './stringify';
 
 export { parse, stringify };
+
+export default function CssScope() {
+  return function (Garfish: interfaces.Garfish): interfaces.Plugin {
+    return {
+      name: 'css-scope',
+      version: __VERSION__,
+
+      beforeBootstrap() {
+        Garfish.loader.lifecycle.loaded.add((data) => {
+          if (data.value.fileType === 'css') {
+            const manager = data.value.resourceManager as StyleManager;
+            console.log(manager);
+          }
+          return data;
+        });
+      },
+    };
+  };
+}

packages/runtime/css-scope/src/parser.ts

@@ -10,7 +10,7 @@ export interface CssParserOptions {
   silent?: boolean;
 }
 
-// 1M 文本耗时约 150ms
+// 1M text takes about 150ms
 export function parse(css: string, options?: CssParserOptions) {
   options = options || {};
   let line = 1;

packages/runtime/garfish/src/index.ts

@@ -1,5 +1,6 @@
 import { Garfish } from '@garfish/core';
 import GarfishRouter from '@garfish/router';
+import GarfishCssScope from '@garfish/css-scope';
 import GarfishBrowserVm from '@garfish/browser-vm';
 import GarfishBrowserSnapshot from '@garfish/browser-snapshot';
 import {
@@ -51,7 +52,12 @@ export function createContext(): Garfish {
     errorMountApp: (err) => error(err),
     errorUnmountApp: (err) => error(err),
     onNotMatchRouter: () => {},
-    plugins: [GarfishRouter(), GarfishBrowserVm(), GarfishBrowserSnapshot()],
+    plugins: [
+      GarfishRouter(),
+      GarfishCssScope(),
+      GarfishBrowserVm(),
+      GarfishBrowserSnapshot(),
+    ],
   });
 
   type globalValue = boolean | Garfish | Record<string, unknown>;

packages/runtime/loader/src/managers/style.ts

@@ -4,6 +4,17 @@ import { warn, Node, isAbsolute, transformUrl } from '@garfish/utils';
 // Match url in css
 const MATCH_CSS_URL = /url\(['"]?([^\)]+?)['"]?\)/g;
 
+const correctPath = (manager) => {
+  const { url, styleCode } = manager;
+  if (url && typeof styleCode === 'string') {
+    // The relative path is converted to an absolute path according to the path of the css file
+    manager.styleCode = styleCode.replace(MATCH_CSS_URL, (k1, k2) => {
+      if (isAbsolute(k2)) return k1;
+      return `url("${transformUrl(url, k2)}")`;
+    });
+  }
+};
+
 export class StyleManager {
   public url: string | null;
   public styleCode: string;
@@ -15,32 +26,7 @@ export class StyleManager {
     this.url = url || null;
     this.scopeString = '';
     this.styleCode = styleCode;
-    this.correctPath();
-  }
-
-  private correctPath() {
-    const { url, styleCode } = this;
-    if (url && typeof styleCode === 'string') {
-      // The relative path is converted to an absolute path according to the path of the css file
-      this.styleCode = styleCode.replace(MATCH_CSS_URL, (k1, k2) => {
-        if (isAbsolute(k2)) return k1;
-        return `url("${transformUrl(url, k2)}")`;
-      });
-    }
-  }
-
-  setScope(_scope: string) {
-    // if (scope !== this.scopeString) {
-    //   try {
-    //     const astTree = parse(this.styleCode, {
-    //       source: `Css parser: ${this.url}`,
-    //     });
-    //     this.styleCode = stringify(astTree, scope);
-    //     this.scopeString = scope;
-    //   } catch (err) {
-    //     warn(err);
-    //   }
-    // }
+    correctPath(this);
   }
 
   setDep(node: Node) {
@@ -51,15 +37,16 @@ export class StyleManager {
     return this.depsStack.has(node);
   }
 
+  getStyleCode() {
+    return this.styleCode;
+  }
+
   renderAsStyleElement(extraCode = '') {
+    const styleCode = this.getStyleCode();
     const node = document.createElement('style');
     node.setAttribute('type', 'text/css');
-    // prettier-ignore
-    node.textContent = extraCode + (
-      this.styleCode
-        ? this.styleCode
-        : '/**empty style**/'
-    );
+    node.textContent =
+      extraCode + (styleCode ? styleCode : '/**empty style**/');
     return node;
   }
 

packages/runtime/loader/src/pluginSystem.ts

@@ -48,7 +48,7 @@ export class PluginManager<T> {
         const tempResult = fn(result as any);
         if (fn._onceFlag === ONCE_FLAG) this.remove(fn);
         for (const key in result) {
-          if (!hasOwn(key, tempResult)) {
+          if (!hasOwn(tempResult, key)) {
             illegalResult = true;
             break;
           }