@plumeria/webpack-plugin 0.10.0 → 0.11.0

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/dist/index.d.ts

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

package/dist/index.js

@@ -5,53 +5,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlumeriaPlugin = void 0;
 const webpack_1 = require("webpack");
-const path_1 = __importDefault(require("path"));
-const fs_1 = __importDefault(require("fs"));
+const webpack_virtual_modules_1 = __importDefault(require("webpack-virtual-modules"));
 const PLUGIN_NAME = 'PlumeriaPlugin';
 class PlumeriaPlugin {
-    outputFileName;
     stylesByFile = new Map();
-    outFile;
-    constructor(outputFileName = 'zero-virtual.css') {
-        this.outputFileName = outputFileName;
-    }
+    virtualModules;
     apply(compiler) {
-        this.outFile = path_1.default.resolve(__dirname, '..', this.outputFileName);
+        this.virtualModules = new webpack_virtual_modules_1.default();
+        this.virtualModules.apply(compiler);
         compiler.hooks.compile.tap(PLUGIN_NAME, () => {
             this.stylesByFile.clear();
         });
-        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;
-                }
-            });
-        });
         compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-            compilation.hooks.processAssets.tap({
+            compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
-            }, () => {
-                this.writeCSS();
+            }, async () => {
+                const css = this.generateOrderedCSS(this.stylesByFile);
+                compilation.emitAsset('plumeria.css', new webpack_1.sources.RawSource(css));
             });
         });
     }
-    registerFileStyles(filePath, styles) {
-        const prev = this.stylesByFile.get(filePath) || {
-            filePath,
-            globalStyles: '',
-            keyframeStyles: '',
-            varStyles: '',
-            themeStyles: '',
-            baseStyles: '',
-        };
-        this.stylesByFile.set(filePath, { ...prev, ...styles });
-        this.writeCSS();
+    registerStyle(virtualFileName, styles) {
+        this.stylesByFile.set(virtualFileName, styles);
+        const css = this.generateOrderedCSS(this.stylesByFile);
+        this.virtualModules?.writeModule(virtualFileName, css);
     }
-    generateOrderedCSS() {
-        const allStyles = Array.from(this.stylesByFile.values());
+    generateOrderedCSS(styles) {
+        const allStyles = Array.from(styles.values());
         const globalStyles = [];
         const keyframeStylesSet = new Set();
         const varStylesSet = new Set();
@@ -79,10 +60,5 @@ class PlumeriaPlugin {
             .filter(Boolean)
             .join('\n');
     }
-    writeCSS() {
-        const css = this.generateOrderedCSS();
-        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,6 +44,7 @@ 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 = {
@@ -542,6 +543,7 @@ function isCSSDefineFile(filePath, target) {
 }
 function loader(source) {
     const callback = this.async();
+    this.clearDependencies();
     this.addDependency(this.resourcePath);
     constTable = scanForDefineConsts.call(this);
     const { keyframesHashTableLocal, keyframesObjectTableLocal } = scanForKeyframes.call(this);
@@ -629,34 +631,29 @@ function loader(source) {
             .styleSheet)
             .join('\n');
     }
-    const VIRTUAL_CSS_PATH = require.resolve(path_1.default.resolve(__dirname, '..', 'zero-virtual.css'));
-    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 virtualCssFileName = loader_utils_1.default.interpolateName(this, '[path][name].[hash:base64:8].virtual.css', {
+        content: JSON.stringify(fileStyles),
+        context: this.rootContext,
     });
-    const virtualCssRequest = stringifyRequest(this, `${VIRTUAL_CSS_PATH}?${urlParams.toString()}`);
-    const postfix = `\nimport ${virtualCssRequest};`;
+    const absVirtualCssFileName = path_1.default.resolve(this.rootContext, virtualCssFileName);
     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(virtualCssRequest)) {
-            cache.add(virtualCssRequest);
-            pluginInstance?.registerFileStyles(virtualCssRequest, fileStyles);
+        if (!cache.has(absVirtualCssFileName)) {
+            cache.add(absVirtualCssFileName);
+            pluginInstance.registerStyle(absVirtualCssFileName, 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)
-        callback(null, source + postfix);
-    return source + postfix;
+        return callback(null, resultSource);
+    return resultSource;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",
@@ -12,26 +12,28 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist/",
-    "zero-virtual.css"
+    "dist/"
   ],
-  "scripts": {
-    "build": "rimraf dist && pnpm cjs",
-    "cjs": "tsc --project tsconfig.cjs.json"
-  },
   "dependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@babel/types": "^7.28.2"
+    "@babel/types": "^7.28.2",
+    "loader-utils": "^3.3.1",
+    "webpack-virtual-modules": "^0.6.2"
   },
   "devDependencies": {
     "@rust-gear/glob": "^0.2.2",
     "@types/babel__core": "^7.20.5",
+    "@types/loader-utils": "^2.0.6",
     "webpack": "^5.101.0",
     "zss-engine": "^0.2.75"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "rimraf dist && pnpm cjs",
+    "cjs": "tsc --project tsconfig.cjs.json"
   }
-}
+}