Merge webpack and stylepack configs into a single 'weballpacka' task

.github/workflows/tests.yml

@@ -0,0 +1,29 @@
+name: Tests
+
+on:
+    push:
+        branches: [ master ]
+    pull_request:
+    pull_request_target:
+
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
+
+jobs:
+    JSUnit:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [ 20.x ]
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'npm'
+            -   run: yarn install --immutable --immutable-cache --check-cache
+            -   run: yarn test

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn-error.log

jest.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+    testEnvironment: 'node',
+    snapshotFormat: {
+        escapeString: false,
+    },
+};

package.json

@@ -9,7 +9,7 @@
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "babel-loader": "^10.0.0",
     "browser-sync": "^2.26.7",
-    "browserslist-config-webfactory": "^1.0.0",
+    "browserslist-config-webfactory": "^2.0.0",
     "css-loader": "^7.1.2",
     "dotenv": "^10.0.0",
     "fancy-log": "^1.3.3",
@@ -43,5 +43,13 @@
   },
   "browserslist": [
     "extends browserslist-config-webfactory/default"
-  ]
+  ],
+  "devDependencies": {
+    "jest": "^30.2.0",
+    "jquery": "^3.7.1",
+    "sass-embedded": "^1.97.1"
+  },
+  "scripts": {
+    "test": "jest"
+  }
 }

tasks/weballpacka.js

@@ -0,0 +1,241 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const postcssPurgecss = require('@fullhuman/postcss-purgecss');
+
+function utilityCssExtractor(content) {
+    return content.match(/[a-zA-Z0-9-_.:@\/]+/g);
+}
+
+function createMergedWebpackConfig(gulp, $, config) {
+    const argv = require('minimist')(process.argv.slice(2));
+    const purgeCssDisabled = argv.purgecss === false;
+
+    const entry = {};
+    const entryCssMeta = {};
+
+    // ---- CSS entries ----
+    (config.styles.files || []).forEach((file) => {
+        // key must be unique and stable
+        const entryName = `css_${file.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+
+        entry[entryName] = path.resolve(config.webdir, file.inputPath);
+        entryCssMeta[entryName] = {
+            destDir: file.destDir || 'css',
+            filename: file.name,
+            inputPath: file.inputPath,
+            purgeCssConfig: file.purgeCss ?? config.styles.purgeCss ?? null,
+            postCssPresetEnvConfig: file.postCssPresetEnv || config.styles.postCssPresetEnv || {},
+        };
+    });
+
+
+    // ---- JS entries ----
+    let includeModules = config.scripts.includeModules ? '|' + config.scripts.includeModules.join('|') : '';
+    let svelteVersion = config.svelteVersion ? parseFloat(config.svelteVersion) : 3;
+
+    let resolveModulesPaths = [config.npmdir];
+    if (config.scripts.resolveModulesPaths) {
+        resolveModulesPaths = [...new Set([...(config.scripts.resolveModulesPaths), ...resolveModulesPaths])];
+    }
+
+    (config.scripts.files || []).forEach((script) => {
+        const entryName = `js_${script.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+        entry[entryName] = path.resolve(config.webdir, script.inputPath);
+    });
+
+    const webpackConfig = {
+        entry,
+        output: {
+            // js_<name> -> js/<name>.js
+            filename: (pathData) => {
+                const name = pathData.chunk && pathData.chunk.name ? pathData.chunk.name : '[name]';
+                if (name.startsWith('js_')) {
+                    const cleanName = name.replace(/^js_/, '');
+                    return `js/${cleanName}.js`;
+                }
+                return '[name].js';
+            },
+            path: path.resolve(config.webdir),
+        },
+        resolve: {
+            alias: {
+                svelte: svelteVersion < 4
+                    ? $.path.resolve('node_modules', 'svelte')
+                    : $.path.resolve('node_modules', 'svelte/src/runtime')
+            },
+            extensions: ['.mjs', '.js', '.svelte', '.ts'],
+            mainFields: ['svelte', 'browser', 'module', 'main'],
+            modules: resolveModulesPaths,
+        },
+        module: {
+            rules: [
+                // JS + Svelte + Typescript
+                {
+                    test: /(\.m?js?$)|(\.svelte$)/,
+                    exclude: new RegExp('node_modules\\/(?![svelte' + includeModules + '])'),
+                    use: {
+                        loader: 'babel-loader',
+                        options: {
+                            cacheDirectory: true,
+                            presets: ['@babel/preset-env'],
+                            plugins: ['@babel/plugin-transform-runtime'],
+                        }
+                    }
+                },
+                {
+                    test: /\.(html|svelte)$/,
+                    exclude: /node_modules\/(?!svelte)/,
+                    use: [
+                        'babel-loader',
+                        {
+                            loader: 'svelte-loader',
+                            options: {
+                                cacheDirectory: true,
+                                emitCss: false,
+                            },
+                        },
+                    ],
+                },
+                {
+                    // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
+                    test: /node_modules\/svelte\/.*\.mjs$/,
+                    resolve: {
+                        fullySpecified: false,
+                    }
+                },
+                {
+                    test: /\.tsx?$/,
+                    use: 'ts-loader',
+                    exclude: /node_modules/,
+                },
+
+                // Assets used from SCSS
+                {
+                    test: /\.(png|jpe?g|gif|svg|webp|avif)$/i,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'img/[name].[hash][ext]'
+                    }
+                },
+
+                // SCSS -> CSS (via MiniCssExtractPlugin)
+                {
+                    test: /\.s[ac]ss$/i,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        {
+                            loader: 'css-loader',
+                            options: { sourceMap: true }
+                        },
+                        {
+                            loader: 'resolve-url-loader',
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true,
+                                postcssOptions: (loaderContext) => {
+                                    // Match resource path to entry path from entryCssMeta
+                                    const resourcePath = loaderContext.resourcePath;
+                                    let cssEntry = null;
+
+                                    for (const [entryName, meta] of Object.entries(entryCssMeta)) {
+                                        if (meta.inputPath && resourcePath.includes(meta.inputPath)) {
+                                            cssEntry = meta;
+                                            break;
+                                        }
+                                    }
+
+                                    if (!cssEntry) {
+                                        throw new Error(
+                                            `No CSS entry metadata found for resource: ${resourcePath}\n` +
+                                            `Available entries: ${Object.keys(entryCssMeta).join(', ')}\n` +
+                                            `Ensure the SCSS file is an exact webpack entry point from config.styles.files[].inputPath`
+                                        );
+                                    }
+
+                                    const postCssPresetEnvConfig = cssEntry.postCssPresetEnvConfig || {};
+
+                                    return {
+                                        plugins: [
+                                            require('postcss-preset-env')(postCssPresetEnvConfig),
+                                            ...(cssEntry.purgeCssConfig && !purgeCssDisabled
+                                                ? [postcssPurgecss({
+                                                    content: cssEntry.purgeCssConfig.content,
+                                                    extractors: [{
+                                                        extractor: utilityCssExtractor,
+                                                        extensions: ['php', 'twig', 'js', 'svg']
+                                                    }],
+                                                    safelist: cssEntry.purgeCssConfig.safelist,
+                                                })]
+                                                : []),
+                                        ],
+                                    };
+                                },
+                            },
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                implementation: 'sass-embedded',
+                                api: 'modern',
+                                sourceMap: true,
+                                sassOptions: {
+                                    loadPaths: config.styles.includePaths
+                                        ? config.styles.includePaths
+                                        : [config.npmdir],
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        plugins: [
+            // jQuery globals for JS, as before
+            new $.webpack.ProvidePlugin({
+                $: 'jquery',
+                jQuery: 'jquery',
+            }),
+
+            // CSS extraction with per‑entry filenames
+            new MiniCssExtractPlugin({
+                filename: (pathData) => {
+                    const name = pathData.chunk && pathData.chunk.name ? pathData.chunk.name : '[name]';
+
+                    if (name.startsWith('css_')) {
+                        const meta = entryCssMeta[name];
+                        if (meta) {
+                            const dir = meta.destDir ? meta.destDir.replace(/\/+$/, '') : 'css';
+                            return `${dir}/${meta.filename}`;
+                        }
+                    }
+
+                    // fallback
+                    return 'css/[name].css';
+                },
+            }),
+        ],
+        mode: config.development && $.argv.prod !== true ? 'development' : 'production',
+        devtool: $.argv.debug === true ? 'source-map' : false,
+        stats: {
+            preset: 'normal',
+            timings: true,
+        },
+    };
+
+    return webpackConfig;
+}
+
+function webpackMerged(gulp, $, config) {
+    const webpackStream = require('webpack-stream');
+    const webpack = $.webpack;
+
+    return gulp.src(config.webdir + '/**/*.{js,scss}')
+        .pipe(webpackStream(createMergedWebpackConfig(gulp, $, config), webpack))
+        .pipe(gulp.dest(config.webdir))
+        .pipe($.browserSync.reload({ stream: true }));
+}
+
+exports.webpackMerged = webpackMerged;
+exports.createMergedWebpackConfig = createMergedWebpackConfig;

tests/__snapshots__/css.test.js.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Compiling SCSS to CSS basic: basic-print-css 1`] = `
+"/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
+  !*** css ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../../../../node_modules/resolve-url-loader/index.js!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[3]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./scss/print.scss ***!
+  \\***************************************************************************************************************************************************************************************************************************************************************************************************************************/
+@media print {
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+}
+"
+`;
+
+exports[`Compiling SCSS to CSS basic: basic-screen-css 1`] = `
+"/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
+  !*** css ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../../../../node_modules/resolve-url-loader/index.js!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[3]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./scss/screen.scss ***!
+  \\****************************************************************************************************************************************************************************************************************************************************************************************************************************/
+:root {
+  --color-primary: blue;
+}
+
+.button {
+  display: flex;
+  color: var(--color-primary);
+}
+.button--primary {
+  color: red;
+}
+
+div {
+  margin-left: 1rem;
+}
+"
+`;
+
+exports[`Compiling SCSS to CSS with custom per-file postcss-preset-env config: postcss-preset-env-print-css 1`] = `
+"/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
+  !*** css ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../../../../node_modules/resolve-url-loader/index.js!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[3]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./scss/print.scss ***!
+  \\***************************************************************************************************************************************************************************************************************************************************************************************************************************/
+@media print {
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  div {
+    margin-top: 0;
+  }
+}
+"
+`;
+
+exports[`Compiling SCSS to CSS with custom per-file postcss-preset-env config: postcss-preset-env-screen-css 1`] = `
+"/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
+  !*** css ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../../../../node_modules/resolve-url-loader/index.js!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[3]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./scss/screen.scss ***!
+  \\****************************************************************************************************************************************************************************************************************************************************************************************************************************/
+div {
+  height: 25ch;
+  padding-bottom: 1rem;
+}
+"
+`;
+
+exports[`Compiling SCSS to CSS with purgecss: purgecss-screen-css 1`] = `
+"/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\\
+  !*** css ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../../../../node_modules/resolve-url-loader/index.js!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[3]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[4]!./scss/screen.scss ***!
+  \\****************************************************************************************************************************************************************************************************************************************************************************************************************************/
+h2 {
+  font-size: 2rem;
+}
+
+.purgecss-should-not-remove {
+  background-color: red;
+}
+"
+`;