@atomicsmash/compiler 0.1.0

package/dist/css.d.ts

@@ -0,0 +1,36 @@
+export declare const cssEntries = "css/*.css";
+export declare const scssEntries = "css/*.s[ac]ss";
+export declare const cssRules: (MODE: "production" | "development") => {
+    loader: string;
+    options: {
+        postcssOptions: {
+            sourceMap: boolean;
+            plugins: (string | (string | {
+                stage: number;
+                features: {
+                    "custom-media-queries": boolean;
+                };
+            })[])[];
+        };
+    };
+}[];
+export declare const scssRules: (MODE: "production" | "development") => ({
+    loader: string;
+    options: {
+        postcssOptions: {
+            sourceMap: boolean;
+            plugins: (string | (string | {
+                stage: number;
+                features: {
+                    "custom-media-queries": boolean;
+                };
+            })[])[];
+        };
+    };
+} | {
+    loader: string;
+    options: {
+        sourceMap: boolean;
+    };
+})[];
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,cAAc,CAAC;AACtC,eAAO,MAAM,WAAW,kBAAkB,CAAC;AAC3C,eAAO,MAAM,QAAQ,SAAU,YAAY,GAAG,aAAa;;;;;;;;;;;;;GAqB1D,CAAC;AACF,eAAO,MAAM,SAAS,SAAU,YAAY,GAAG,aAAa;;;;;;;;;;;;;;;;;;IAQ3D,CAAC"}

package/dist/css.js

@@ -0,0 +1,33 @@
+export const cssEntries = `css/*.css`;
+export const scssEntries = `css/*.s[ac]ss`;
+export const cssRules = (MODE) => [
+    {
+        loader: "postcss-loader",
+        options: {
+            postcssOptions: {
+                sourceMap: MODE === "development",
+                plugins: [
+                    [
+                        "postcss-preset-env",
+                        {
+                            stage: 2,
+                            features: {
+                                "custom-media-queries": true,
+                            },
+                        },
+                    ],
+                    ...(MODE === "production" ? ["cssnano"] : []),
+                ],
+            },
+        },
+    },
+];
+export const scssRules = (MODE) => [
+    ...cssRules(MODE),
+    {
+        loader: "sass-loader",
+        options: {
+            sourceMap: MODE === "development",
+        },
+    },
+];

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+declare global {
+    namespace NodeJS {
+        interface ProcessEnv {
+            NODE_ENV: "production" | "development" | "test" | undefined;
+        }
+    }
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

@@ -0,0 +1,257 @@
+#!/usr/bin/env node
+import { sep as pathSeparator, extname, resolve as resolvePath, } from "node:path";
+import DependencyExtractionWebpackPlugin from "@wordpress/dependency-extraction-webpack-plugin";
+import CopyPlugin from "copy-webpack-plugin";
+import glob from "fast-glob";
+import SVGSpritemapPlugin from "svg-spritemap-webpack-plugin";
+import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
+import webpack from "webpack";
+import WebpackAssetsManifest from "webpack-assets-manifest";
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+const argv = await yargs(hideBin(process.argv))
+    .options({
+    in: {
+        demandOption: true,
+        describe: "The directory where the source files can be found. Relative to cwd.",
+        type: "string",
+    },
+    out: {
+        demandOption: true,
+        describe: "The directory where the compiled files will out output. Relative to cwd.",
+        type: "string",
+    },
+    watch: {
+        boolean: true,
+        default: false,
+        describe: "Whether to watch the files in the source folder for changes and compile.",
+    },
+    analyse: {
+        boolean: true,
+        default: false,
+        describe: "See a report of the generated bundle once built.",
+    },
+})
+    .showHelpOnFail(false, "Specify --help for available options")
+    .parse();
+const MODE = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test"
+    ? "development"
+    : "production";
+const srcFolder = resolvePath(argv.in);
+const distFolder = resolvePath(argv.out);
+const postCSSConfig = [
+    [
+        "postcss-preset-env",
+        {
+            stage: 2,
+            features: {
+                "custom-media-queries": true,
+            },
+        },
+    ],
+    ...(MODE === "production" ? ["cssnano"] : []),
+];
+const compiler = webpack({
+    devtool: MODE === "development" ? "source-map" : false,
+    mode: MODE,
+    experiments: {
+        outputModule: true,
+    },
+    entry: await glob([
+        `${srcFolder}/js/*.{js,ts}`,
+        `${srcFolder}/css/*.css`,
+        `${srcFolder}/css/*.s[ac]ss`,
+    ]).then((paths) => {
+        const entryPoints = {};
+        paths.forEach((path) => {
+            const entryName = path.replace(srcFolder, "").replace(extname(path), "");
+            entryPoints[entryName] = {
+                import: path,
+                filename: `${path.replace(`${srcFolder}${pathSeparator}`, "").replace(extname(path), "")}${MODE === "production" ? `.[contenthash]` : ""}.js`,
+            };
+        });
+        return entryPoints;
+    }),
+    output: {
+        filename: "js/[name].[contenthash].js",
+        clean: true,
+        library: {
+            type: "modern-module",
+        },
+        module: true,
+        path: distFolder,
+    },
+    resolve: {
+        plugins: [new TsconfigPathsPlugin()],
+        extensions: [".tsx", ".ts", ".js", ".jsx"],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.[jt]sx?$/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [["@babel/preset-typescript"], ["@babel/preset-env"]],
+                    },
+                },
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                exclude: /node_modules/,
+                type: "asset/resource",
+                generator: {
+                    binary: false,
+                    filename: "css/[name].[contenthash].css",
+                },
+                use: [
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            postcssOptions: {
+                                sourceMap: MODE === "development",
+                                plugins: postCSSConfig,
+                            },
+                        },
+                    },
+                    {
+                        loader: "sass-loader",
+                        options: {
+                            sourceMap: MODE === "development",
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.css$/i,
+                exclude: /node_modules/,
+                type: "asset/resource",
+                generator: {
+                    binary: false,
+                    filename: "css/[name].[contenthash].css",
+                },
+                use: [
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            postcssOptions: {
+                                sourceMap: MODE === "development",
+                                plugins: postCSSConfig,
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new webpack.ProgressPlugin(),
+        new WebpackAssetsManifest({
+            writeToDisk: true,
+            output: `${distFolder}/assets-manifest.json`,
+            customize(entry) {
+                if (entry.key === "spritemap.svg") {
+                    return { key: "icons/sprite.svg", value: entry.value };
+                }
+                if (entry.key.startsWith("/")) {
+                    return { key: entry.key.slice(1), value: entry.value };
+                }
+                if (entry.key === "assets.php" ||
+                    entry.key.startsWith("fonts") ||
+                    entry.key.startsWith("images")) {
+                    return false;
+                }
+                return entry;
+            },
+        }),
+        new SVGSpritemapPlugin(`${srcFolder}/icons/*.svg`, {
+            output: {
+                filename: "icons/sprite.[contenthash].svg",
+            },
+            sprite: {
+                prefix: "",
+                generate: {
+                    title: false,
+                },
+            },
+        }),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: `${srcFolder}/fonts`,
+                    to: "[path]fonts/[name][ext]",
+                    noErrorOnMissing: true,
+                },
+                {
+                    from: `${srcFolder}/images`,
+                    to: "[path]images/[name][ext]",
+                    noErrorOnMissing: true,
+                },
+            ],
+        }),
+        ...(argv.analyse ? [new BundleAnalyzerPlugin({})] : []),
+        new DependencyExtractionWebpackPlugin({
+            combineAssets: true,
+        }),
+    ],
+    optimization: {
+        splitChunks: {
+            chunks: "all",
+        },
+    },
+});
+if (argv.watch) {
+    const watching = compiler.watch({
+        // Example
+        aggregateTimeout: 300,
+        poll: undefined,
+    }, (error, stats) => {
+        if (error) {
+            console.error(error.stack ?? error);
+            process.exitCode = 1;
+            watching.close((closeError) => {
+                console.error(closeError);
+            });
+        }
+        else if (stats) {
+            const info = stats.toJson();
+            if (stats.hasErrors()) {
+                console.error(info.errors);
+            }
+            if (stats.hasWarnings()) {
+                console.warn(info.warnings);
+            }
+        }
+    });
+    process.on("SIGINT", function () {
+        watching.close((closeError) => {
+            console.error(closeError);
+        });
+    });
+}
+else {
+    compiler.run((error, stats) => {
+        if (error) {
+            console.error(error);
+            process.exitCode = 1;
+        }
+        else if (stats) {
+            const info = stats.toJson();
+            if (stats.hasErrors()) {
+                console.error(info.errors);
+                process.exitCode = 1;
+            }
+            if (stats.hasWarnings()) {
+                console.warn(info.warnings);
+                process.exitCode = 2;
+            }
+        }
+        compiler.close((closeError) => {
+            if (closeError) {
+                process.exitCode = 1;
+            }
+        });
+    });
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+	"name": "@atomicsmash/compiler",
+	"type": "module",
+	"version": "0.1.0",
+	"description": "A universal compiler for all Atomic Smash projects.",
+	"keywords": [
+		"cli",
+		"compiler",
+		"webpack"
+	],
+	"homepage": "https://www.atomicsmash.co.uk/",
+	"license": "GPL-3.0-or-later",
+	"author": {
+		"name": "Atomic Smash",
+		"email": "npm@atomicsmash.co.uk",
+		"url": "https://www.atomicsmash.co.uk/"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/AtomicSmash/packages",
+		"directory": "packages/compiler"
+	},
+	"files": [
+		"./dist/**/*"
+	],
+	"main": "index",
+	"bin": {
+		"smash-compile": "./dist/index.js"
+	},
+	"types": "index",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "tsc --build --watch tsconfig.build.json",
+		"build": "npm-run-all clean compile",
+		"clean": "del-cli ./dist/ *.tsbuildinfo",
+		"compile": "tsc --build tsconfig.build.json",
+		"test": "TZ=\"Europe/Istanbul\" vitest run",
+		"test:ui": "TZ=\"Europe/Istanbul\" vitest --ui",
+		"test:coverage": "TZ=\"Europe/Istanbul\" vitest run --coverage",
+		"lint": "run-p lint:*",
+		"lint:eslint": "eslint --cache --cache-location ./node_modules/.cache/eslint . --ext .js,.ts,.jsx,.tsx",
+		"lint:types": "tsc"
+	},
+	"dependencies": {
+		"@babel/preset-env": "^7.26.0",
+		"@babel/preset-typescript": "^7.26.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.15.0",
+		"babel-loader": "^9.2.1",
+		"copy-webpack-plugin": "^12.0.2",
+		"css-loader": "^7.1.2",
+		"cssnano": "^7.0.6",
+		"fast-glob": "^3.3.2",
+		"postcss": "^8.4.49",
+		"postcss-loader": "^8.1.1",
+		"postcss-preset-env": "^10.1.3",
+		"sass": "^1.83.1",
+		"sass-loader": "^16.0.4",
+		"style-loader": "^4.0.0",
+		"svg-spritemap-webpack-plugin": "^4.7.0",
+		"tsconfig-paths-webpack-plugin": "^4.2.0",
+		"webpack": "^5.97.1",
+		"webpack-assets-manifest": "^5.2.1",
+		"webpack-bundle-analyzer": "^4.10.2",
+		"yargs": "^17.7.2"
+	},
+	"devDependencies": {
+		"@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"
+	}
+}