@atomicsmash/compiler 0.2.4 → 0.4.0

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAqBA,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,MAAM,CAAC;QAEhB,UAAU,UAAU;YACnB,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;SAC5D;KACD;CACD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAsBA,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,MAAM,CAAC;QAEhB,UAAU,UAAU;YACnB,QAAQ,EAAE,YAAY,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;SAC5D;KACD;CACD"}

package/dist/index.js

@@ -4,6 +4,8 @@ import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-
 import CopyPlugin from "copy-webpack-plugin";
 import cssNano from "cssnano";
 import glob from "fast-glob";
+import postCSSIncreaseSpecificity from "postcss-increase-specificity";
+import postCSSContext from "postcss-plugin-context";
 import postCSSPresetEnv from "postcss-preset-env";
 import SVGSpritemapPlugin from "svg-spritemap-webpack-plugin";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
@@ -42,16 +44,24 @@ const MODE = process.env.NODE_ENV === "development" || process.env.NODE_ENV ===
     : "production";
 const srcFolder = resolvePath(argv.in);
 const distFolder = resolvePath(argv.out);
-// @ts-expect-error -- Module doesn't need to be installed in compiler package.
+// Add optional support for Tailwind if tailwind postcss plugin is installed
 const tailwindPostCSSPlugin = await import("@tailwindcss/postcss")
-    .then((tailwindPostCSS) => [
-    tailwindPostCSS.default,
-])
-    .catch(async () => 
-// @ts-expect-error -- Module doesn't need to be installed in compiler package.
-await import("tailwindcss")
+    .then((tailwindPostCSS) => [tailwindPostCSS.default])
+    .catch(async () => await import("tailwindcss")
     .then((tailwindcss) => [tailwindcss.default])
     .catch(() => []));
+// Add optional support for Vue if vue-loader is installed
+const vueConfig = await import("vue-loader")
+    .then((vueLoaderModule) => ({
+    loader: [
+        {
+            test: /\.vue$/,
+            loader: "vue-loader",
+        },
+    ],
+    plugin: [new vueLoaderModule.VueLoaderPlugin()],
+}))
+    .catch(() => ({ loader: [], plugin: [] }));
 const postCSSConfig = [
     [
         ...tailwindPostCSSPlugin,
@@ -61,6 +71,12 @@ const postCSSConfig = [
                 "custom-media-queries": true,
             },
         }),
+        postCSSContext({
+            wordpressEditor: postCSSIncreaseSpecificity({
+                repeat: 1,
+                stackableRoot: ".is-root-container",
+            }),
+        }),
     ],
     ...(MODE === "production" ? [cssNano] : []),
 ];
@@ -73,13 +89,10 @@ const compiler = webpack({
     },
     devtool: MODE === "development" ? "source-map" : false,
     mode: MODE,
-    experiments: {
-        outputModule: true,
-    },
     entry: await glob([
-        `${srcFolder}/js/*.{js,ts}`,
+        `${srcFolder}/js/*.{js,ts,jsx,tsx}`,
         `${srcFolder}/css/*.css`,
-        `${srcFolder}/css/*.s[ac]ss`,
+        `${srcFolder}/css/**/[^_]*.s[ac]ss`,
     ]).then((paths) => {
         const entryPoints = {};
         paths.forEach((path) => {
@@ -95,10 +108,8 @@ const compiler = webpack({
         filename: "js/[name].[contenthash].js",
         clean: true,
         library: {
-            type: "modern-module",
+            type: "umd",
         },
-        libraryTarget: "module",
-        module: true,
         path: distFolder,
     },
     resolve: {
@@ -107,15 +118,30 @@ const compiler = webpack({
     },
     module: {
         rules: [
+            ...vueConfig.loader,
             {
                 test: /\.[jt]sx?$/,
                 use: {
                     loader: "babel-loader",
                     options: {
-                        presets: ["@babel/preset-typescript", "@babel/preset-env"],
+                        presets: [
+                            "@babel/preset-typescript",
+                            [
+                                "@babel/preset-react",
+                                {
+                                    runtime: "automatic",
+                                },
+                            ],
+                            "@babel/preset-env",
+                        ],
                     },
                 },
-                exclude: /node_modules/,
+                exclude: (file) => {
+                    if (vueConfig.loader.length > 0) {
+                        return file.includes("node_modules") && !file.includes(".vue.js");
+                    }
+                    return file.includes("node_modules");
+                },
             },
             {
                 test: /\.s[ac]ss$/i,
@@ -214,6 +240,7 @@ const compiler = webpack({
         new DependencyExtractionWebpackPlugin({
             combineAssets: true,
         }),
+        ...vueConfig.plugin,
     ],
 });
 if (argv.watch) {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atomicsmash/compiler",
 	"type": "module",
-	"version": "0.2.4",
+	"version": "0.4.0",
 	"description": "A universal compiler for all Atomic Smash projects.",
 	"keywords": [
 		"cli",
@@ -53,7 +53,9 @@
 		"cssnano": "^7.0.6",
 		"fast-glob": "^3.3.2",
 		"postcss": "^8.4.49",
+		"postcss-increase-specificity": "^0.6.0",
 		"postcss-loader": "^8.1.1",
+		"postcss-plugin-context": "^2.0.0",
 		"postcss-preset-env": "^10.1.3",
 		"sass": "^1.83.1",
 		"sass-loader": "^16.0.4",
@@ -66,10 +68,13 @@
 		"yargs": "^17.7.2"
 	},
 	"devDependencies": {
+		"@tailwindcss/postcss": "^4.0.9",
 		"@types/svg-spritemap-webpack-plugin": "^4.4.4",
 		"@types/webpack": "^5.28.5",
 		"@types/webpack-assets-manifest": "^5.1.4",
 		"@types/webpack-bundle-analyzer": "^4.7.0",
-		"@types/yargs": "^17.0.33"
+		"@types/yargs": "^17.0.33",
+		"tailwindcss": "^4.0.9",
+		"vue-loader": "^17.4.2"
 	}
 }