@atomicsmash/compiler 0.4.1 → 0.5.1

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAuBA,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

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
-import { sep as pathSeparator, extname, resolve as resolvePath, } from "node:path";
+import { sep as pathSeparator, extname, resolve as resolvePath, relative, } from "node:path";
 import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+import browserslistToEsbuild from "browserslist-to-esbuild";
 import CopyPlugin from "copy-webpack-plugin";
 import cssNano from "cssnano";
+import { EsbuildPlugin } from "esbuild-loader";
 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";
@@ -64,34 +64,38 @@ const vueConfig = await import("vue-loader")
     .catch(() => ({ loader: [], plugin: [] }));
 const postCSSConfig = [
     [
+        // Support tailwind if package is found
         ...tailwindPostCSSPlugin,
         postCSSPresetEnv({
+            // Support all CSS that is considered stable.
             stage: 2,
             features: {
+                // Polyfill support for custom media queries
                 "custom-media-queries": true,
             },
         }),
-        postCSSContext({
-            wordpressEditor: postCSSIncreaseSpecificity({
-                repeat: 1,
-                stackableRoot: ".is-root-container",
-            }),
-        }),
     ],
     ...(MODE === "production" ? [cssNano] : []),
 ];
 const compiler = webpack({
     resolveLoader: {
         modules: [
+            // Get modules from project node_modules folder
             "node_modules",
+            // Get modules from this package's internal node modules folder once installed
             resolvePath(import.meta.dirname, "../", "node_modules"),
         ],
     },
+    // Add sourcemaps in dev mode
     devtool: MODE === "development" ? "source-map" : false,
+    // Set the environment mode from NODE_ENV.
     mode: MODE,
     entry: await glob([
+        // Parse all direct children of the JS folder, as long as they are JS & TS files
         `${srcFolder}/js/*.{js,ts,jsx,tsx}`,
+        // Parse all direct children of the CSS folder, as long as they are CSS files
         `${srcFolder}/css/*.css`,
+        // Parse all nested children of the CSS folder, as long as they are non-partial SCSS files
         `${srcFolder}/css/**/[^_]*.s[ac]ss`,
     ]).then((paths) => {
         const entryPoints = {};
@@ -99,43 +103,45 @@ const compiler = webpack({
             const entryName = path.replace(srcFolder, "").replace(extname(path), "");
             entryPoints[entryName] = {
                 import: path,
+                // Output filenames with content hash for fingerprinting
                 filename: `${path.replace(`${srcFolder}${pathSeparator}`, "").replace(extname(path), "")}${MODE === "production" ? `.[contenthash]` : ""}.js`,
             };
         });
         return entryPoints;
     }),
     output: {
+        // Output filenames with content hash for fingerprinting
         filename: "js/[name].[contenthash].js",
+        // Clear files between runs
         clean: true,
         library: {
+            // Output JS files with Universal Module Definition
             type: "umd",
         },
+        // Set the output folder
         path: distFolder,
     },
     resolve: {
+        // support TSConfig paths as aliases
         plugins: [new TsconfigPathsPlugin()],
+        // resolve TS extensions
         extensions: [".tsx", ".ts", ".js", ".jsx"],
     },
     module: {
         rules: [
+            // Support Vue files if vue-loader is present
             ...vueConfig.loader,
+            // Use ESBuild loader to transpile JS & TS files
             {
                 test: /\.[jt]sx?$/,
                 use: {
-                    loader: "babel-loader",
+                    loader: "esbuild-loader",
                     options: {
-                        presets: [
-                            "@babel/preset-typescript",
-                            [
-                                "@babel/preset-react",
-                                {
-                                    runtime: "automatic",
-                                },
-                            ],
-                            "@babel/preset-env",
-                        ],
+                        // Set target to match the browserslist config
+                        target: browserslistToEsbuild(),
                     },
                 },
+                // Exclude node_modules files from transpilation unless they are vue files and the vue-loader is present
                 exclude: (file) => {
                     if (vueConfig.loader.length > 0) {
                         return file.includes("node_modules") && !file.includes(".vue.js");
@@ -143,6 +149,7 @@ const compiler = webpack({
                     return file.includes("node_modules");
                 },
             },
+            // Transpile SCSS files and run the result through postcss
             {
                 test: /\.s[ac]ss$/i,
                 exclude: /node_modules/,
@@ -169,6 +176,7 @@ const compiler = webpack({
                     },
                 ],
             },
+            // Run the css files through postcss
             {
                 test: /\.css$/i,
                 exclude: /node_modules/,
@@ -192,7 +200,9 @@ const compiler = webpack({
         ],
     },
     plugins: [
+        // Output progress information when compiling
         new webpack.ProgressPlugin(),
+        // Generate a manifest file of assets to make it possible to target fingerprinted files
         new WebpackAssetsManifest({
             writeToDisk: true,
             output: `${distFolder}/assets-manifest.json`,
@@ -211,6 +221,7 @@ const compiler = webpack({
                 return entry;
             },
         }),
+        // Create an SVG sprite from a folder of provided icons
         new SVGSpritemapPlugin(`${srcFolder}/icons/*.svg`, {
             output: {
                 filename: "icons/sprite.[contenthash].svg",
@@ -222,26 +233,44 @@ const compiler = webpack({
                 },
             },
         }),
+        // Copy fonts and images from the src folder to assets (available for backwards compatibility, not recommended)
         new CopyPlugin({
             patterns: [
                 {
-                    from: `${srcFolder}/fonts`,
-                    to: "[path]fonts/[name][ext]",
+                    from: "**/*",
+                    context: resolvePath(srcFolder, "fonts"),
+                    to({ context, absoluteFilename }) {
+                        return `fonts/${relative(context, absoluteFilename ?? "")}`;
+                    },
                     noErrorOnMissing: true,
                 },
                 {
-                    from: `${srcFolder}/images`,
-                    to: "[path]images/[name][ext]",
+                    from: "**/*",
+                    context: resolvePath(srcFolder, "images"),
+                    to({ context, absoluteFilename }) {
+                        return `images/${relative(context, absoluteFilename ?? "")}`;
+                    },
                     noErrorOnMissing: true,
                 },
             ],
         }),
+        // Output a bundle analysis if flag was provided
         ...(argv.analyse ? [new BundleAnalyzerPlugin({})] : []),
+        // Extract wordpress dependencies from js files and output a wordpress assets file for enqueues
         new DependencyExtractionWebpackPlugin({
             combineAssets: true,
         }),
+        // Support Vue files if vue-loader is present
         ...vueConfig.plugin,
     ],
+    optimization: {
+        minimizer: [
+            // Minify JS files
+            new EsbuildPlugin({
+                target: browserslistToEsbuild(),
+            }),
+        ],
+    },
 });
 if (argv.watch) {
     const watching = compiler.watch({

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atomicsmash/compiler",
 	"type": "module",
-	"version": "0.4.1",
+	"version": "0.5.1",
 	"description": "A universal compiler for all Atomic Smash projects.",
 	"keywords": [
 		"cli",
@@ -44,19 +44,15 @@
 		"lint:types": "tsc"
 	},
 	"dependencies": {
-		"@babel/preset-env": "^7.26.0",
-		"@babel/preset-react": "^7.26.3",
-		"@babel/preset-typescript": "^7.26.0",
 		"@wordpress/dependency-extraction-webpack-plugin": "^6.15.0",
-		"babel-loader": "^9.2.1",
+		"browserslist-to-esbuild": "^2.1.1",
 		"copy-webpack-plugin": "^12.0.2",
 		"css-loader": "^7.1.2",
 		"cssnano": "^7.0.6",
+		"esbuild-loader": "^4.3.0",
 		"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",