@atomicsmash/compiler 0.7.4 → 0.7.5

package/dist/index.js

@@ -65,15 +65,16 @@ const tailwindPostCSSPlugin = await import("@tailwindcss/postcss")
 // Add optional support for Vue if vue-loader is installed
 const vueConfig = await import("vue-loader")
     .then((vueLoaderModule) => ({
-    loader: [
-        {
-            test: /\.vue$/,
-            loader: "vue-loader",
-        },
-    ],
+    loader: [{ test: /\.vue$/, loader: "vue-loader" }],
     plugin: [new vueLoaderModule.VueLoaderPlugin()],
+    globals: {
+        __VUE_OPTIONS_API__: "true",
+        __VUE_PROD_DEVTOOLS__: "false",
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
+    },
+    aliases: { vue: "vue/dist/vue.esm-bundler.js" },
 }))
-    .catch(() => ({ loader: [], plugin: [] }));
+    .catch(() => ({ loader: [], plugin: [], globals: {}, aliases: {} }));
 const postCSSConfig = [
     [
         // Support tailwind if package is found
@@ -167,11 +168,10 @@ const compiler = webpack({
         path: distFolder,
     },
     resolve: {
+        alias: { ...vueConfig.aliases },
         // support TSConfig paths as aliases
         plugins: [
-            new TsconfigPathsPlugin({
-                configFile: process.cwd() + "/tsconfig.json",
-            }),
+            new TsconfigPathsPlugin({ configFile: process.cwd() + "/tsconfig.json" }),
         ],
         // resolve TS extensions
         extensions: [".tsx", ".ts", ".js", ".jsx", ".vue"],
@@ -212,9 +212,31 @@ const compiler = webpack({
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "")
-                        .replace(".scss", ".[contenthash].css")
-                        .replace("styles/", "css/"),
+                    filename: (pathData) => {
+                        const fileName = pathData.filename;
+                        if (!fileName) {
+                            return;
+                        }
+                        const isVendorFile = fileName.includes("node_modules");
+                        if (isVendorFile) {
+                            const vendorPathData = fileName.split(pathSeparator);
+                            const nodeModulesPosition = vendorPathData.findIndex((value) => value.includes("node_modules"));
+                            const vendorArray = vendorPathData.slice(nodeModulesPosition + 1, nodeModulesPosition + 3);
+                            let vendor;
+                            if (vendorArray[0]?.startsWith("@")) {
+                                vendor = vendorArray.join(pathSeparator);
+                            }
+                            else {
+                                vendor = vendorArray[0] ?? "";
+                            }
+                            return ["css", "vendor", vendor, vendorPathData.at(-1)]
+                                .join(pathSeparator)
+                                .replace(".scss", ".[contenthash].css");
+                        }
+                        return relative(srcFolder, pathData.filename ?? "")
+                            .replace(".scss", ".[contenthash].css")
+                            .replace("styles/", "css/");
+                    },
                 },
                 use: [
                     {
@@ -228,9 +250,7 @@ const compiler = webpack({
                     },
                     {
                         loader: "sass-loader",
-                        options: {
-                            sourceMap: MODE === "development",
-                        },
+                        options: { sourceMap: MODE === "development" },
                     },
                 ],
             },
@@ -240,9 +260,31 @@ const compiler = webpack({
                 type: "asset/resource",
                 generator: {
                     binary: false,
-                    filename: (pathData) => relative(srcFolder, pathData.filename ?? "")
-                        .replace(".css", ".[contenthash].css")
-                        .replace("styles/", "css/"),
+                    filename: (pathData) => {
+                        const fileName = pathData.filename;
+                        if (!fileName) {
+                            return;
+                        }
+                        const isVendorFile = fileName.includes("node_modules");
+                        if (isVendorFile) {
+                            const vendorPathData = fileName.split(pathSeparator);
+                            const nodeModulesPosition = vendorPathData.findIndex((value) => value.includes("node_modules"));
+                            const vendorArray = vendorPathData.slice(nodeModulesPosition + 1, nodeModulesPosition + 3);
+                            let vendor;
+                            if (vendorArray[0]?.startsWith("@")) {
+                                vendor = vendorArray.join(pathSeparator);
+                            }
+                            else {
+                                vendor = vendorArray[0] ?? "";
+                            }
+                            return ["css", "vendor", vendor, vendorPathData.at(-1)]
+                                .join(pathSeparator)
+                                .replace(".css", ".[contenthash].css");
+                        }
+                        return relative(srcFolder, pathData.filename ?? "")
+                            .replace(".css", ".[contenthash].css")
+                            .replace("styles/", "css/");
+                    },
                 },
                 use: [
                     {
@@ -271,6 +313,7 @@ const compiler = webpack({
                 }
                 if (entry.key === "assets.php" ||
                     entry.key === "wordpress-assets-info.php" ||
+                    entry.key.endsWith(".map") ||
                     entry.key.startsWith("fonts") ||
                     entry.key.startsWith("images")) {
                     return false;
@@ -292,15 +335,8 @@ const compiler = webpack({
         }),
         // Create an SVG sprite from a folder of provided icons
         new SVGSpritemapPlugin(`${srcFolder}/icons/*.svg`, {
-            output: {
-                filename: "icons/sprite.[contenthash].svg",
-            },
-            sprite: {
-                prefix: "",
-                generate: {
-                    title: false,
-                },
-            },
+            output: { filename: "icons/sprite.[contenthash].svg" },
+            sprite: { prefix: "", generate: { title: false } },
         }),
         // Copy fonts and images from the src folder to assets (available for backwards compatibility, not recommended)
         new CopyPlugin({
@@ -342,13 +378,12 @@ const compiler = webpack({
         // Support Vue files if vue-loader is present
         ...vueConfig.plugin,
         ...(argv.experimentalBlocksSupport ? [new BlocksPlugin(srcFolder)] : []),
+        new webpack.DefinePlugin({ ...vueConfig.globals }),
     ],
     optimization: {
         minimizer: [
             // Minify JS files
-            new EsbuildPlugin({
-                target: browserslistToEsbuild(),
-            }),
+            new EsbuildPlugin({ target: browserslistToEsbuild() }),
         ],
     },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atomicsmash/compiler",
 	"type": "module",
-	"version": "0.7.4",
+	"version": "0.7.5",
 	"description": "A universal compiler for all Atomic Smash projects.",
 	"keywords": [
 		"cli",