feat: add setScope method on styleManager

Author: imtaotao

dev/app-main/package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "garfish": "workspace:*",
     "@garfish/es-module": "workspace:*",
+    "@garfish/css-scope": "workspace:*",
     "babel-runtime": "^6.26.0",
     "history": "^5.1.0",
     "mobx": "^6.3.6",

dev/app-main/src/config.ts

@@ -1,5 +1,6 @@
 import GarfishInstance from 'garfish';
 import { GarfishEsModule } from '@garfish/es-module';
+import { GarfishCssScope } from '@garfish/css-scope';
 import { store } from './store';
 import { basename, localApps } from './constant';
 
@@ -57,7 +58,7 @@ let defaultConfig: RunInfo = {
   },
 
   // 插件列表
-  plugins: [GarfishEsModule()],
+  plugins: [GarfishEsModule(), GarfishCssScope()],
 
   // 开始加载子应用前触发该函数，支持异步函数，可以在该函数中执行异步操作，
   // 当返回 false 时表示中断子应用的加载以及后续流程，所有子应用加载都会触发该函数的调用

packages/browser-vm/src/dynamicNode/index.ts

@@ -23,9 +23,10 @@ function injector(current: Function, methodName: string) {
     const originProcess = () => current.apply(this, arguments);
 
     if (this?.tagName?.toLowerCase() === 'style') {
-      const baseUrl = sandbox && sandbox.options.baseUrl;
+      const { baseUrl, namespace } = sandbox?.options || {};
       if (baseUrl) {
         const manager = new StyleManager(el.textContent);
+        manager.setScope(namespace);
         manager.correctPath(baseUrl);
         this.textContent = manager.styleCode;
         return originProcess();

packages/browser-vm/src/dynamicNode/processor.ts

@@ -230,7 +230,7 @@ export class DynamicNodeProcessor {
   append(context: Element, args: IArguments, originProcess: Function) {
     let convertedNode;
     let parentNode = context;
-    const { baseUrl } = this.sandbox.options;
+    const { baseUrl, namespace } = this.sandbox.options;
 
     // Deal with some static resource nodes
     if (sourceListTags.includes(this.tagName)) {
@@ -247,6 +247,7 @@ export class DynamicNodeProcessor {
       parentNode = this.findParentNodeInApp(context, 'head');
       if (baseUrl) {
         const manager = new StyleManager(this.el.textContent);
+        manager.setScope(namespace);
         manager.correctPath(baseUrl);
         this.el.textContent = manager.styleCode;
       }

packages/core/src/module/app.ts

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

packages/css-scope/src/index.ts

@@ -1,33 +1,42 @@
-import { warn } from '@garfish/utils';
-import { interfaces } from '@garfish/core';
+import type { interfaces } from '@garfish/core';
+import type { StyleManager } from '@garfish/loader';
 import { parse } from './parser';
 import { stringify } from './stringify';
 
-export { parse, stringify };
+export interface Options {
+  excludes?: Array<string> | ((name: string) => boolean);
+}
+
+const pluginName = 'css-scope';
+
+export function GarfishCssScope(options: Options = {}) {
+  return function (Garfish: interfaces.Garfish): interfaces.Plugin {
+    const disable = (appName: string) => {
+      const { excludes } = options;
+      if (Array.isArray(excludes)) return excludes.includes(appName);
+      if (typeof excludes === 'function') return excludes(appName);
+      return true;
+    };
 
-export default function CssScope() {
-  return function (_Garfish: interfaces.Garfish): interfaces.Plugin {
-    let changed = false;
     return {
-      name: 'css-scope',
+      name: pluginName,
       version: __VERSION__,
 
       beforeBootstrap() {
-        if (changed) return;
-        changed = true;
-        // const proto = Garfish.loader.StyleManager.prototype;
-
-        // proto.parseStyleCode = function() {
-        //   try {
-        //     this.styleCode = parse(this.styleCode);
-        //   } catch(e) {
-        //     warn(e);
-        //   }
-        // }
+        const loader = Garfish.loader;
+        loader.hooks.usePlugin({
+          name: pluginName,
 
-        // proto.getStyleCode = function() {
-        //   return ''
-        // }
+          loaded(data) {
+            const { scope, fileType } = data.value;
+            console.log(scope, fileType);
+            if (fileType === 'css' && !disable(scope)) {
+              const manager = data.value.resourceManager as StyleManager;
+              console.log(manager);
+            }
+            return data;
+          },
+        });
       },
     };
   };

packages/loader/src/index.ts

@@ -34,6 +34,7 @@ export interface CacheValue<T extends Manager> {
   url: string;
   code: string;
   size: number;
+  scope: string;
   fileType: FileTypes | '';
   resourceManager: T | null;
 }
@@ -167,15 +168,21 @@ export class Loader {
 
         // Use result.url, resources may be redirected
         const resourceManager: Manager | null = managerCtor
-          ? new managerCtor(code, result.url)
+          ? new managerCtor(code, result.url, scope)
           : null;
 
+        // Set css scope
+        if (fileType === FileTypes.css) {
+          (resourceManager as StyleManager).setScope(scope);
+        }
+
         // The results will be cached this time.
         // So, you can transform the request result.
         const data = this.hooks.lifecycle.loaded.emit({
           result,
           value: {
             url,
+            scope,
             resourceManager,
             fileType: fileType || '',
             // For performance reasons, take an approximation

packages/loader/src/managers/style.ts

@@ -4,12 +4,14 @@ import { Node, isAbsolute, transformUrl } from '@garfish/utils';
 const MATCH_CSS_URL = /url\(['"]?([^\)]+?)['"]?\)/g;
 
 export class StyleManager {
-  public url: string | null;
   public styleCode: string;
+  public url: string | null;
+  public scope: string | null;
 
   private depsStack = new Set();
 
   constructor(styleCode: string, url?: string) {
+    this.scope = null;
     this.url = url || null;
     this.styleCode = styleCode;
   }
@@ -26,27 +28,33 @@ export class StyleManager {
     }
   }
 
-  setScope(_scope: string) {
-    // Process css cope
+  // Provided to plugins to override this method
+  transformCode(code: string) {
+    return code;
   }
 
   setDep(node: Node) {
     this.depsStack.add(node);
   }
 
+  setScope(scope: string) {
+    this.scope = scope;
+  }
+
   isSameOrigin(node: Node) {
     return this.depsStack.has(node);
   }
 
   renderAsStyleElement(extraCode = '') {
     const node = document.createElement('style');
-    node.setAttribute('type', 'text/css');
     // prettier-ignore
-    node.textContent = extraCode + (
+    const code = extraCode + (
       this.styleCode
         ? this.styleCode
         : '/**empty style**/'
     );
+    node.setAttribute('type', 'text/css');
+    node.textContent = this.transformCode(code);
     return node;
   }