@plumeria/webpack-plugin 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 import type { Compiler } from 'webpack';
 export declare class PlumeriaPlugin {
+    private outputFileName;
     private stylesByFile;
-    private virtualModules?;
+    private outFile;
+    constructor(outputFileName?: string);
     apply(compiler: Compiler): void;
-    registerStyle(virtualFileName: string, styles: any): void;
+    registerFileStyles(filePath: string, styles: Partial<any>): void;
     private generateOrderedCSS;
+    private writeCSS;
 }

package/dist/index.js

@@ -4,43 +4,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlumeriaPlugin = void 0;
-const webpack_1 = require("webpack");
-const webpack_virtual_modules_1 = __importDefault(require("webpack-virtual-modules"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
 const PLUGIN_NAME = 'PlumeriaPlugin';
 class PlumeriaPlugin {
+    outputFileName;
     stylesByFile = new Map();
-    virtualModules;
+    outFile;
+    constructor(outputFileName = 'zero-virtual.css') {
+        this.outputFileName = outputFileName;
+    }
     apply(compiler) {
-        this.virtualModules = new webpack_virtual_modules_1.default();
-        this.virtualModules.apply(compiler);
+        this.outFile = path_1.default.resolve(__dirname, '..', this.outputFileName);
         compiler.hooks.compile.tap(PLUGIN_NAME, () => {
             this.stylesByFile.clear();
         });
-        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-            compilation.hooks.processAssets.tapPromise({
-                name: PLUGIN_NAME,
-                stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-            }, async () => {
-                const css = this.generateOrderedCSS(this.stylesByFile);
-                compilation.emitAsset('plumeria.css', new webpack_1.sources.RawSource(css));
+        compiler.hooks.normalModuleFactory.tap(PLUGIN_NAME, (nmf) => {
+            nmf.hooks.createModule.tap(PLUGIN_NAME, (createData) => {
+                const modPath = createData.matchResource ?? createData.resourceResolveData?.path;
+                if (modPath && modPath.includes('zero-virtual.css')) {
+                    createData.settings ??= {};
+                    createData.settings.sideEffects = true;
+                }
             });
         });
     }
-    registerStyle(virtualFileName, styles) {
-        this.stylesByFile.set(virtualFileName, styles);
-        const css = this.generateOrderedCSS(this.stylesByFile);
-        this.virtualModules?.writeModule(virtualFileName, css);
+    registerFileStyles(filePath, styles) {
+        const prev = this.stylesByFile.get(filePath) || {
+            filePath,
+            globalStyles: '',
+            keyframeStyles: '',
+            varStyles: '',
+            themeStyles: '',
+            baseStyles: '',
+        };
+        this.stylesByFile.set(filePath, { ...prev, ...styles });
+        this.writeCSS();
     }
-    generateOrderedCSS(styles) {
-        const allStyles = Array.from(styles.values());
-        const globalStyles = [];
+    generateOrderedCSS() {
+        const allStyles = Array.from(this.stylesByFile.values());
+        const globalStylesSet = new Set();
         const keyframeStylesSet = new Set();
         const varStylesSet = new Set();
         const themeStylesSet = new Set();
-        const baseStyles = [];
+        const baseStylesSet = new Set();
         for (const s of allStyles) {
             if (s.globalStyles)
-                globalStyles.push(s.globalStyles);
+                globalStylesSet.add(s.globalStyles);
             if (s.keyframeStyles)
                 keyframeStylesSet.add(s.keyframeStyles);
             if (s.varStyles)
@@ -48,17 +58,24 @@ class PlumeriaPlugin {
             if (s.themeStyles)
                 themeStylesSet.add(s.themeStyles);
             if (s.baseStyles)
-                baseStyles.push(s.baseStyles);
+                baseStylesSet.add(s.baseStyles);
         }
         return [
-            ...globalStyles,
+            ...Array.from(globalStylesSet),
             ...Array.from(keyframeStylesSet),
             ...Array.from(varStylesSet),
             ...Array.from(themeStylesSet),
-            ...baseStyles,
+            ...Array.from(baseStylesSet),
         ]
             .filter(Boolean)
             .join('\n');
     }
+    writeCSS() {
+        const css = this.generateOrderedCSS();
+        if (css.trim().length > 0) {
+            fs_1.default.mkdirSync(path_1.default.dirname(this.outFile), { recursive: true });
+            fs_1.default.writeFileSync(this.outFile, css, 'utf-8');
+        }
+    }
 }
 exports.PlumeriaPlugin = PlumeriaPlugin;

package/dist/virtual-css-loader.js

@@ -44,7 +44,6 @@ const fs_1 = __importDefault(require("fs"));
 const create_1 = require("./create");
 const glob_1 = require("@rust-gear/glob");
 const zss_engine_1 = require("zss-engine");
-const loader_utils_1 = __importDefault(require("loader-utils"));
 const PROJECT_ROOT = process.cwd().split('node_modules')[0];
 const PATTERN_PATH = path_1.default.join(PROJECT_ROOT, '**/*.{js,jsx,ts,tsx}');
 const GLOB_OPTIONS = {
@@ -543,8 +542,11 @@ function isCSSDefineFile(filePath, target) {
 }
 function loader(source) {
     const callback = this.async();
-    this.clearDependencies();
     this.addDependency(this.resourcePath);
+    const files = (0, glob_1.globSync)(PATTERN_PATH, GLOB_OPTIONS);
+    for (const file of files) {
+        this.addDependency(file);
+    }
     constTable = scanForDefineConsts.call(this);
     const { keyframesHashTableLocal, keyframesObjectTableLocal } = scanForKeyframes.call(this);
     keyframesHashTable = keyframesHashTableLocal;
@@ -631,29 +633,35 @@ function loader(source) {
             .styleSheet)
             .join('\n');
     }
-    const virtualCssFileName = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].virtual.css', {
-        content: JSON.stringify(fileStyles),
-        context: this.rootContext,
+    const VIRTUAL_FILE_PATH = path_1.default.resolve(__dirname, '..', 'zero-virtual.css');
+    const VIRTUAL_CSS_PATH = require.resolve(VIRTUAL_FILE_PATH);
+    function stringifyRequest(loaderContext, request) {
+        return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
+    }
+    const virtualCssImportPath = path_1.default.posix.join(path_1.default.posix.relative(path_1.default.dirname(this.resourcePath), path_1.default.resolve(__dirname, '..', VIRTUAL_CSS_PATH)));
+    let importPath = virtualCssImportPath;
+    if (!importPath.startsWith('.')) {
+        importPath = './' + importPath;
+    }
+    const serializedStyleRules = JSON.stringify(fileStyles);
+    const urlParams = new URLSearchParams({
+        from: this.resourcePath,
+        plumeria: serializedStyleRules,
     });
-    const absVirtualCssFileName = path_1.default.resolve(this.rootContext, virtualCssFileName);
+    const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
+    const postfix = `\nimport ${virtualCssRequest};`;
     const pluginInstance = this._compiler?.options?.plugins.find((p) => p?.constructor?.name === 'PlumeriaPlugin');
     if (pluginInstance) {
         if (!pluginInstance.__plumeriaRegistered) {
             pluginInstance.__plumeriaRegistered = new Set();
         }
         const cache = pluginInstance.__plumeriaRegistered;
-        if (!cache.has(absVirtualCssFileName)) {
-            cache.add(absVirtualCssFileName);
-            pluginInstance.registerStyle(absVirtualCssFileName, fileStyles);
+        if (!cache.has(virtualCssRequest)) {
+            cache.add(virtualCssRequest);
+            pluginInstance?.registerFileStyles(virtualCssRequest, fileStyles);
         }
     }
-    let importPath = path_1.default.posix.relative(path_1.default.dirname(this.resourcePath), absVirtualCssFileName);
-    if (!importPath.startsWith('.')) {
-        importPath = './' + importPath;
-    }
-    importPath = importPath.replace(/\\/g, '/');
-    const resultSource = source + `\nimport ${JSON.stringify(importPath)};`;
     if (callback)
-        return callback(null, resultSource);
-    return resultSource;
+        callback(null, source + postfix);
+    return source + postfix;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",
@@ -12,8 +12,13 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist/"
+    "dist/",
+    "zero-virtual.css"
   ],
+  "scripts": {
+    "build": "rimraf dist && pnpm cjs",
+    "cjs": "tsc --project tsconfig.cjs.json"
+  },
   "dependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
@@ -31,9 +36,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "build": "rimraf dist && pnpm cjs",
-    "cjs": "tsc --project tsconfig.cjs.json"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) zss-in-js contributer
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.