@pixolith/webpack-sw6-config 11.0.8 → 12.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixolith/webpack-sw6-config",
   "public": true,
-  "version": "11.0.8",
+  "version": "12.0.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {},
@@ -21,7 +21,7 @@
     "url": "https://github.com/pixolith/webpack-plugins/issues"
   },
   "homepage": "https://github.com/pixolith/webpack-plugins/tree/master/packages/webpack-hook-plugin/#readme",
-  "gitHead": "318c5c1605244bf6835032ec86e6ee130da6aba3",
+  "gitHead": "5c29b0a4c1b2e0876f25a05f517100c83fc9a36c",
   "dependencies": {
     "@babel/cli": "7.25.9",
     "@babel/core": "^7.26.0",
@@ -29,15 +29,15 @@
     "@babel/plugin-proposal-decorators": "7.25.9",
     "@babel/preset-env": "7.26.0",
     "@babel/preset-typescript": "7.26.0",
-    "@pixolith/eslint-config-sw6": "^11.0.0",
-    "@pixolith/external-svg-sprite-loader": "^11.0.0",
-    "@pixolith/stylelint-config-standard": "^11.0.0",
-    "@pixolith/webpack-assets-copy-plugin": "^11.0.0",
-    "@pixolith/webpack-filename-linter-plugin": "^11.0.0",
-    "@pixolith/webpack-hook-plugin": "^11.0.0",
-    "@pixolith/webpack-sw6-plugin-map-emitter": "^11.0.0",
-    "@pixolith/webpack-twig-assets-emitter-plugin": "^11.0.8",
-    "@pixolith/webpack-watcher": "^11.0.5",
+    "@pixolith/eslint-config-sw6": "^12.0.0",
+    "@pixolith/external-svg-sprite-loader": "^12.0.0",
+    "@pixolith/stylelint-config-standard": "^12.0.0",
+    "@pixolith/webpack-assets-copy-plugin": "^12.0.0",
+    "@pixolith/webpack-filename-linter-plugin": "^12.0.0",
+    "@pixolith/webpack-hook-plugin": "^12.0.0",
+    "@pixolith/webpack-sw6-plugin-map-emitter": "^12.0.0",
+    "@pixolith/webpack-twig-assets-emitter-plugin": "^12.0.0",
+    "@pixolith/webpack-watcher": "^12.0.0",
     "@swc/core": "^1.9.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",

package/src/config.js

@@ -6,11 +6,22 @@ const config = {
     isProd: process.env.NODE_ENV === 'production',
     isDebug: !!process.env.DEBUG || false,
     shopwareMode: process.env.SHOPWARE_MODE,
-    shopwareVersion: process.env.SHOPWARE_VERSION || '6.6',
 
     assetUrl: process.env.ASSET_URL || '/',
     pluginPrefixes: process.env.PLUGIN_PREFIXES || 'Pxsw',
 
+    // Multi-theme build configuration (mandatory in v12+)
+    themeNames: process.env.THEME_NAMES
+        ? process.env.THEME_NAMES.split(',')
+              .map((s) => s.trim())
+              .filter(Boolean)
+        : [],
+    skipPlugins: process.env.SKIP_PLUGINS
+        ? process.env.SKIP_PLUGINS.split(',')
+              .map((s) => s.trim())
+              .filter(Boolean)
+        : [],
+
     pxSharedPath: process.env.SHARED_SCSS_PATH || '../../shared',
     scssFolder: process.env.SCSS_FOLDER || 'scss',
     jsFolder: process.env.JS_FOLDER || 'js',
@@ -32,11 +43,35 @@ const config = {
     shopwareVendorPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/vendor'),
     shopwarePluginPath: Path.join(process.cwd(), 'vendor/shopware/storefront/Resources/app/storefront/src'),
 
-    allowedExtensions: ['.ts', '.js', '.scss', '.css', '.svg']
+    allowedExtensions: ['.ts', '.js', '.scss', '.css', '.svg'],
+};
+
+// PICKED_THEME: optional filter to build/watch a single theme from THEME_NAMES
+let pickedTheme = process.env.PICKED_THEME
+    ? process.env.PICKED_THEME.trim()
+    : '';
+
+if (pickedTheme && config.themeNames.indexOf(pickedTheme) === -1) {
+    process.stderr.write(
+        `PICKED_THEME "${pickedTheme}" is not in THEME_NAMES [${config.themeNames.join(', ')}].\n`,
+    );
+    process.exit(1);
 }
 
-const pxEntryPath = process.env.PX_ENTRY_PATH || (process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private' : 'src/Resources/app/administration/src');
-const pxRouteSplitPath = process.env.PX_ROUTE_SPLIT_PATH || (process.env.SHOPWARE_MODE === 'storefront' ? 'src/Resources/app/storefront/private/scss-route-split/*' : '');
+// buildThemes: the subset of themeNames that actually get compiled
+// themeNames stays as the full list (used for _global_resources exclusion)
+config.buildThemes = pickedTheme ? [pickedTheme] : config.themeNames;
+
+const pxEntryPath =
+    process.env.PX_ENTRY_PATH ||
+    (process.env.SHOPWARE_MODE === 'storefront'
+        ? 'src/Resources/app/storefront/private'
+        : 'src/Resources/app/administration/src');
+const pxRouteSplitPath =
+    process.env.PX_ROUTE_SPLIT_PATH ||
+    (process.env.SHOPWARE_MODE === 'storefront'
+        ? 'src/Resources/app/storefront/private/scss-route-split/*'
+        : '');
 
 // Create a glob regex to match the plugin prefixes
 let prefixes = config.pluginPrefixes.split(',').map(p => `${p}*`).join('|');
@@ -49,6 +84,7 @@ const routeSplitMatch = new RegExp(`/scss-route-split\/([\\w-]*)`);
 
 module.exports = {
     ...config,
+
     pluginSrcPath: Path.join(pluginSrcPath, pxEntryPath),
     pluginScssPath: Path.join(pluginSrcPath, pxEntryPath, config.scssFolder),
     pluginJsPath: Path.join(pluginSrcPath, pxEntryPath, config.jsFolder),
@@ -70,5 +106,9 @@ module.exports = {
     pluginRouteSplitPath: Path.join(pluginSrcPath, pxRouteSplitPath),
     vendorRouteSplitPath: Path.join(vendorSrcPath, pxRouteSplitPath),
 
-    resourcesPath: process.env.RESOURCES_PATHS
-}
+    // Raw glob base paths for multi-theme resource resolution
+    pluginGlobBase: pluginSrcPath,
+    vendorGlobBase: vendorSrcPath,
+    pxEntryPath: pxEntryPath,
+    resourcesPath: process.env.RESOURCES_PATHS,
+};

package/src/index.js

@@ -1,15 +1,20 @@
+const Fs = require('fs');
+const Glob = require('glob');
 const config = require('./config');
 const production = require('./webpack.config.production');
-const storefront = require('./webpack.config.storefront');
-const dev = require('./webpack.config.dev');
-const administration = require('./webpack.config.administration');
+const createStorefrontConfig = require('./webpack.config.storefront');
+const createDevConfig = require('./webpack.config.dev');
+const createAdministrationConfig = require('./webpack.config.administration');
 const pkg = require('./../package.json');
 const watcher = require('@pixolith/webpack-watcher');
 const { merge } = require('webpack-merge');
+const ChangeCase = require('change-case');
 
 const setup = () => {
     watcher.clean(config);
-    watcher.run(null, config);
+    config.buildThemes.forEach((themeName) => {
+        watcher.compileTheme(themeName, config);
+    });
 
     if (config.isDebug) {
         console.table({
@@ -29,14 +34,207 @@ const setup = () => {
             isProd: config.isProd,
             shopwareMode: config.shopwareMode,
             assetUrl: config.assetUrl,
+            themeNames: config.themeNames.join(', ') + (config.buildThemes.length < config.themeNames.length ? ' (building: ' + config.buildThemes.join(', ') + ')' : ''),
             version: pkg.version,
         });
     }
 };
 
-setup();
+/**
+ * Build per-theme resource paths for sass-resources-loader.
+ *
+ * Each theme gets:
+ *   1. uses.scss (shared vendor utilities)
+ *   2. vendor global resources (vendor/pxsw/...)
+ *   3. all non-theme plugin _global_resources (custom/plugins + custom/static-plugins
+ *      that are NOT in THEME_NAMES)
+ *   4. this theme's _global_resources (overrides everything)
+ *
+ * Other themes' global resources are excluded to prevent style bleeding.
+ *
+ * @param {string} themeName - Theme name (e.g. 'PxswEbertTheme')
+ * @param {Object} options
+ * @param {string[]} options.uses - Paths to shared vendor uses.scss
+ * @param {string[]} options.sharedVendorResourcePaths - Paths to shared vendor _global_resources
+ * @returns {string[]} Array of SCSS resource paths
+ */
+const getResourcesPaths = (themeName, options) => {
+    let uses = options.uses || [];
+    let sharedVendorResourcePaths = options.sharedVendorResourcePaths || [];
+    let paths = [].concat(uses, sharedVendorResourcePaths);
+    let globalResourcesSuffix = '/src/Resources/app/_global_resources';
+    let scssGlob = '/**/*.scss';
+
+    // Collect base plugin global resources (plugins NOT in THEME_NAMES)
+    let pluginDirs = ['custom/plugins', 'custom/static-plugins'];
+    pluginDirs.forEach((dir) => {
+        if (!Fs.existsSync(dir)) {
+            return;
+        }
+
+        let entries = Fs.readdirSync(dir).filter((name) => {
+            // Must match plugin prefix pattern
+            let prefixes = (config.pluginPrefixes || 'Pxsw').split(',');
+            let matchesPrefix = prefixes.some((p) =>
+                name.startsWith(p.trim()),
+            );
+            if (!matchesPrefix) {
+                return false;
+            }
+            // Exclude ALL themes from base pool — prevents style bleeding
+            let isTheme = config.themeNames.some(
+                (t) => name.indexOf(t) !== -1,
+            );
+            return !isTheme;
+        });
+
+        entries.forEach((name) => {
+            let glob = dir + '/' + name + globalResourcesSuffix + scssGlob;
+            if (Glob.sync(glob).length) {
+                paths.push(glob);
+            }
+        });
+    });
+
+    // Add this theme's global resources LAST (overrides base)
+    pluginDirs.forEach((dir) => {
+        if (!Fs.existsSync(dir)) {
+            return;
+        }
+
+        let themeGlob =
+            dir + '/*' + themeName + '*' + globalResourcesSuffix + scssGlob;
+        if (Glob.sync(themeGlob).length) {
+            paths.push(themeGlob);
+        }
+    });
+
+    return paths;
+};
+
+/**
+ * Create an array of webpack configs, one per theme.
+ * Each theme gets its own dev config (with per-theme resourcesPaths for
+ * sass-resources-loader) and its own storefront config (with per-theme entry).
+ *
+ * @param {Object} options
+ * @param {string[]} options.uses - Paths to shared vendor uses.scss
+ * @param {string[]} options.sharedVendorResourcePaths - Paths to shared vendor _global_resources
+ * @returns {Object[]} Array of webpack config objects (one per theme)
+ */
+const createThemeConfigs = (options) => {
+    setup();
+
+    return config.buildThemes.map((themeName, index) => {
+        let resourcesPaths = getResourcesPaths(themeName, options);
+        let themeSlug = ChangeCase.kebabCase(themeName);
+        let themeOptions = {
+            themeName: themeName,
+            resourcesPaths: resourcesPaths,
+        };
+
+        let devCfg = createDevConfig(themeOptions);
+        let storefrontCfg = createStorefrontConfig(themeOptions);
+        let merged = merge(
+            devCfg,
+            storefrontCfg,
+            config.isProd ? production : {},
+        );
+
+        // Only the first compiler should have devServer (webpack multi-compiler limitation)
+        if (index > 0) {
+            delete merged.devServer;
+        }
+
+        // Per-theme filesystem cache to avoid collisions between compilers
+        merged.cache = {
+            type: 'filesystem',
+            name: themeSlug,
+            buildDependencies: {
+                config: [__filename],
+            },
+        };
+
+        return merged;
+    });
+};
+
+const setupAdministration = () => {
+    watcher.clean(config);
+    config.buildThemes.forEach((themeName) => {
+        watcher.compileAdministration(themeName, config);
+    });
+
+    if (config.isDebug) {
+        console.table({
+            ...config,
+
+            version: pkg.version,
+
+            pluginMatch: config.pluginMatch.toString(),
+            vendorMatch: config.vendorMatch.toString(),
+            allowedExtensions: config.allowedExtensions.toString(),
+        });
+    } else {
+        console.table({
+            isProd: config.isProd,
+            shopwareMode: config.shopwareMode,
+            assetUrl: config.assetUrl,
+            themeNames: config.themeNames.join(', ') + (config.buildThemes.length < config.themeNames.length ? ' (building: ' + config.buildThemes.join(', ') + ')' : ''),
+            version: pkg.version,
+        });
+    }
+};
+
+/**
+ * Create an array of webpack configs for administration, one per theme.
+ * Each theme gets its own dev config (with per-theme resourcesPaths for
+ * sass-resources-loader) and its own administration config (with per-theme
+ * SCSS entries for theme-specific styling).
+ *
+ * @param {Object} options
+ * @param {string[]} options.uses - Paths to shared vendor uses.scss
+ * @param {string[]} options.sharedVendorResourcePaths - Paths to shared vendor _global_resources
+ * @returns {Object[]} Array of webpack config objects (one per theme)
+ */
+const createAdminConfigs = (options) => {
+    setupAdministration();
+
+    return config.buildThemes.map((themeName, index) => {
+        let resourcesPaths = getResourcesPaths(themeName, options);
+        let themeSlug = ChangeCase.kebabCase(themeName);
+        let themeOptions = {
+            themeName: themeName,
+            resourcesPaths: resourcesPaths,
+        };
+
+        let devCfg = createDevConfig(themeOptions);
+        let adminCfg = createAdministrationConfig(themeOptions);
+        let merged = merge(
+            devCfg,
+            adminCfg,
+            config.isProd ? production : {},
+        );
+
+        // Only the first compiler should have devServer (webpack multi-compiler limitation)
+        if (index > 0) {
+            delete merged.devServer;
+        }
+
+        // Per-theme filesystem cache to avoid collisions between compilers
+        merged.cache = {
+            type: 'filesystem',
+            name: themeSlug + '-admin',
+            buildDependencies: {
+                config: [__filename],
+            },
+        };
+
+        return merged;
+    });
+};
 
 module.exports = {
-    storefront: merge(dev, storefront, config.isProd ? production : {}),
-    administration: merge(dev, administration, config.isProd ? production : {}),
+    createThemeConfigs: createThemeConfigs,
+    createAdminConfigs: createAdminConfigs,
 };

package/src/webpack.config.administration.js

@@ -5,178 +5,110 @@ const Path = require('path'),
     Entry = require('webpack-glob-entry'),
     ChangeCase = require('change-case'),
     MiniCssExtractPlugin = require('mini-css-extract-plugin'),
-    Consola = require('consola'),
-    AssetsCopyPlugin = require('@pixolith/webpack-assets-copy-plugin'),
-    SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
-    TwigAssetEmitterPlugin = require('@pixolith/webpack-twig-assets-emitter-plugin'),
-    outputConfig = {
+    Consola = require('consola');
+
+module.exports = function createAdministrationConfig(themeOptions) {
+    let themeName = themeOptions && themeOptions.themeName;
+    let themeSlug = themeName
+        ? ChangeCase.kebabCase(themeName)
+        : 'administration';
+
+    let outputConfig = {
         path: config.outputPath,
-        publicPath: config.shopwareVersion === '6.6' ? '/' : config.assetUrl,
-        filename: (chunkData) => {
-            let pluginName = chunkData.chunk.name.toLowerCase().replace('pxsw-pxsw-', 'pxsw-');
-            pluginName = config.shopwareVersion === '6.6' ? pluginName.replace('vendor-', '') : pluginName;
-            return config.shopwareVersion === '6.6' ?
-                `${pluginName.replace(/-/g, '',)}/administration/js/${pluginName}.js` :
-                `js/${chunkData.chunk.name.toLowerCase()}${
-                    config.isProd ? '.admin.[contenthash]' : ''
-                }.js`;
-        }
-    },
-    miniCssChunksConfig = {
+        publicPath: config.assetUrl,
         filename: (chunkData) => {
-            let pluginName = chunkData.chunk.name.toLowerCase().replace('pxsw-pxsw-', 'pxsw-');
-            pluginName = config.shopwareVersion === '6.6' ? pluginName.replace('vendor-', '') : pluginName;
-            return config.shopwareVersion === '6.6' ?
-                `${pluginName.replace(/-/g, '',)}/administration/css/${pluginName}.css` :
-                `css/[name]${
-                    config.isProd ? '.admin.[contenthash]' : ''
-                }.css`;
-        }
-    }
+            return `js/${chunkData.chunk.name.toLowerCase()}${
+                config.isProd ? '.admin.[contenthash]' : ''
+            }.js`;
+        },
+        uniqueName: themeSlug + '-admin',
+    };
 
-module.exports = {
-    entry: () => {
-        let entriesPlugins = Entry(
-            (filePath) =>
-                ChangeCase.kebabCase(
-                    filePath.match(config.pluginMatch)[1],
-                ),
-            Path.join(config.pluginSrcPath, 'index.js'),
-        );
+    let miniCssChunksConfig = {
+        filename: (chunkData) => {
+            return `css/[name]${
+                config.isProd ? '.admin.[contenthash]' : ''
+            }.css`;
+        },
+    };
 
-        let entriesVendor = Entry(
-            (filePath) =>
-                ChangeCase.kebabCase(
-                    filePath.match(config.vendorMatch)[1],
-                ),
-            Path.resolve(config.vendorSrcPath, 'index.js'),
-        );
+    return {
+        name: themeSlug + '-admin',
+        entry: () => {
+            let entriesPlugins = Entry(
+                (filePath) =>
+                    ChangeCase.kebabCase(filePath.match(config.pluginMatch)[2]),
+                Path.join(config.pluginSrcPath, 'index.js'),
+            );
 
-        if (process.env.DEBUG) {
-            Consola.info('[DEBUG]: Webpack entry points:');
-            console.table({...entriesPlugins, ...entriesVendor });
-        }
+            let entriesVendor = Entry(
+                (filePath) =>
+                    ChangeCase.kebabCase(filePath.match(config.vendorMatch)[1]),
+                Path.resolve(config.vendorSrcPath, 'index.js'),
+            );
 
-        return {...entriesPlugins, ...entriesVendor };
-    },
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: (file) => /node_modules/.test(file),
-                loader: 'babel-loader',
-                options: {
-                    configFile: Path.resolve(__dirname, 'babel.config.js'),
-                },
-            },
-            {
-                test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: config.shopwareVersion === '6.6' ? '../img/[name][ext]' : 'img/[name][ext]'
-                }
-            },
-            {
-                test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: config.shopwareVersion === '6.6' ? '../fonts/[name][ext]' : 'fonts/[name][ext]'
-                }
-            },
-            {
-                test: /\.svg$/,
-                use: [
-                    {
-                        loader: SvgStorePlugin.loader,
-                        options: {
-                            name: 'sprite/sprite.svg',
-                            iconName: '[name]',
-                            overrideOrder: config.spriteOrder,
-                            ignoreIconsByName: config.ignoreIcons,
-                            onlySymbols: true,
-                        },
-                    },
-                    {
-                        loader: 'svgo-loader',
-                        options: {
-                            plugins: [
-                                'cleanupAttrs',
-                                'removeDoctype',
-                                'removeXMLProcInst',
-                                'cleanupEnableBackground',
-                                'convertStyleToAttrs',
-                                'convertPathData',
-                                'cleanupIds',
-                                'minifyStyles',
-                                'removeUselessDefs',
-                                'convertShapeToPath',
-                                'removeUnusedNS',
-                                'removeDimensions',
-                                'convertTransform',
-                                'collapseGroups',
-                                'removeComments',
-                                'removeEditorsNSData',
-                                'removeUnknownsAndDefaults',
-                            ],
-                        },
-                    },
-                ],
-            },
-        ],
-    },
-    output: outputConfig,
-    plugins: [
-        new SvgStorePlugin(),
-        new MiniCssExtractPlugin(miniCssChunksConfig),
-    ].concat(
-        config.isProd && config.shopwareVersion === '6.6' ?
-            new AssetsCopyPlugin({
-                includes: ['js', 'css'],
-                ignoreFiles: [/[-\w.]*.hot-update.js/],
-                files: [
-                    {
-                        from: config.outputPath,
-                        to: '$pluginPath/$plugin/src/Resources/public',
-                        replace: async (fromPath, toPath) => {
-                            let composerPluginName = Path.basename(fromPath).replace(
-                                    Path.extname(fromPath),
-                                    '',
-                                ).replace('pxsw-', ''),
-                                pluginName = 'Pxsw' + ChangeCase.pascalCase(composerPluginName);
+            // Discover the consolidated admin SCSS entry from .theme-entries/{theme-slug}/
+            let scssEntries = {};
+            let scssEntryDir = Path.join(
+                config.outputPath,
+                '.theme-entries',
+                themeSlug,
+            );
+            let scssEntryFile = Path.join(
+                scssEntryDir,
+                themeSlug + '-admin.scss',
+            );
 
-                            let isPlugin = await Fs.existsSync(`custom/plugins/${pluginName}/src`),
-                                isStaticPlugin = await Fs.existsSync(`custom/static-plugins/${pluginName}/src`);
+            if (Fs.existsSync(scssEntryFile)) {
+                scssEntries[themeSlug + '-admin-scss'] = scssEntryFile;
+            }
 
-                            let pluginFolder = isPlugin ? 'custom/plugins' : (isStaticPlugin ? 'custom/static-plugins' : 'vendor/pxsw');
+            let allEntries = {
+                ...entriesPlugins,
+                ...entriesVendor,
+                ...scssEntries,
+            };
 
-                            toPath = toPath.replace('$pluginPath', pluginFolder);
-                            if (!isPlugin && !isStaticPlugin) {
-                                let isDoublePxswPlugin = await Fs.existsSync(`vendor/pxsw/pxsw-${composerPluginName}/src`);
-                                toPath = toPath.replace('$plugin', isDoublePxswPlugin ? `pxsw-${composerPluginName}` : composerPluginName);
-                            } else {
-                                toPath = toPath.replace('$plugin', pluginName);
-                            }
+            if (config.isDebug) {
+                Consola.info(
+                    `[${themeName || themeSlug}] Administration webpack entry points:`,
+                );
+                console.table(allEntries);
+            }
 
-                            return toPath;
-                        },
+            return allEntries;
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.js$/,
+                    exclude: (file) => /node_modules/.test(file),
+                    loader: 'babel-loader',
+                    options: {
+                        configFile: Path.resolve(__dirname, 'babel.config.js'),
                     },
-                ],
-            }) : [],
-    ).concat(
-        config.isProd && config.shopwareVersion !== '6.6' ?
-            new TwigAssetEmitterPlugin({
-                includes: ['js', 'css'],
-                ignoreFiles: [/.*icons.*\.js/],
-                template: {
-                    admin: {
-                        assetUrl: config.assetUrl,
-                        filename: 'index.html.twig',
+                },
+                {
+                    test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'img/[name][ext]',
+                    },
+                },
+                {
+                    test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'fonts/[name][ext]',
                     },
                 },
-            }) : [],
-    ),
+            ],
+        },
+        output: outputConfig,
+        plugins: [new MiniCssExtractPlugin(miniCssChunksConfig)],
 
-    optimization: {
-        splitChunks: false,
-    },
+        optimization: {
+            splitChunks: false,
+        },
+    };
 };

package/src/webpack.config.dev.js

@@ -13,188 +13,183 @@ const webpack = require('webpack'),
     Sass = require('sass'),
     TimeFixPlugin = require('time-fix-plugin');
 
-module.exports = {
-    target: 'web',
-    mode: 'development',
-    resolve: {
-        modules: [
-            'node_modules',
-            Path.resolve(config.shopwareVendorPath),
-        ],
-        alias: {
-            src: Path.resolve(config.shopwarePluginPath),
-            vendor: Path.resolve(config.shopwareVendorPath),
+module.exports = function createDevConfig(themeOptions) {
+    let resourcesPaths =
+        themeOptions && themeOptions.resourcesPaths
+            ? themeOptions.resourcesPaths
+            : JSON.parse(process.env.RESOURCES_PATHS || '[]');
+
+    let resolvedResources = resourcesPaths.filter((path) => {
+        return Glob.sync(path).length > 0;
+    });
+
+    return {
+        target: 'web',
+        mode: 'development',
+        resolve: {
+            modules: ['node_modules', Path.resolve(config.shopwareVendorPath)],
+            alias: {
+                src: Path.resolve(config.shopwarePluginPath),
+                vendor: Path.resolve(config.shopwareVendorPath),
+            },
         },
-    },
-    devtool: 'inline-cheap-module-source-map',
-    module: {
-        rules: [
-            {
-                test: /(\.scss|\.css)$/,
-                use: [
-                    config.isProd ? MiniCssExtractPlugin.loader : 'style-loader',
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            importLoaders: 1,
-                            sourceMap: !config.isProd,
+        devtool: 'inline-cheap-module-source-map',
+        module: {
+            rules: [
+                {
+                    test: /(\.scss|\.css)$/,
+                    use: [
+                        config.isProd
+                            ? MiniCssExtractPlugin.loader
+                            : 'style-loader',
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: !config.isProd,
+                            },
                         },
-                    },
-                    config.isProd && config.mediaQueries ? MediaQueryPlugin.loader : '',
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            sourceMap: !config.isProd,
-                            postcssOptions: {
-                                config: Path.resolve(__dirname, 'postcss.config.js'),
+                        config.isProd && config.mediaQueries
+                            ? MediaQueryPlugin.loader
+                            : '',
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: !config.isProd,
+                                postcssOptions: {
+                                    config: Path.resolve(
+                                        __dirname,
+                                        'postcss.config.js',
+                                    ),
+                                },
                             },
                         },
-                    },
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            sourceMap: !config.isProd,
-                            additionalData: `$asset_url: '${config.assetUrl}';`,
-                            sassOptions: {
-                                quietDeps: true,
-                                logger: Sass.Logger.silent,
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: !config.isProd,
+                                additionalData: `$asset_url: '${config.assetUrl}';`,
+                                sassOptions: {
+                                    quietDeps: true,
+                                    logger: Sass.Logger.silent,
+                                },
                             },
                         },
-                    },
-                    {
-                        loader: 'sass-resources-loader',
-                        options: {
-                            resources: JSON.parse(
-                                process.env.RESOURCES_PATHS,
-                            ).filter((path) => {
-                                return Glob.sync(path).length > 0;
-                            }),
-                            hoistUseStatements: true
+                        {
+                            loader: 'sass-resources-loader',
+                            options: {
+                                resources: resolvedResources,
+                                hoistUseStatements: true,
+                            },
                         },
-                    },
-                ],
-            },
-            {
-                test: /\.(html|twig)$/,
-                use: [
-                    {
-                        loader: 'html-loader',
-                    },
-                ],
+                    ],
+                },
+                {
+                    test: /\.(html|twig)$/,
+                    use: [
+                        {
+                            loader: 'html-loader',
+                        },
+                    ],
+                },
+            ],
+        },
+        stats: 'errors-warnings',
+        devServer: {
+            allowedHosts: 'all',
+            client: {
+                webSocketURL: {
+                    hostname: 'node.px-staging.de',
+                    protocol: 'wss',
+                    port:
+                        process.env.SHOPWARE_MODE === 'administration'
+                            ? 8080
+                            : 8081,
+                },
+                overlay: {
+                    warnings: false,
+                    errors: true,
+                },
             },
-        ],
-    },
-    stats: 'errors-warnings',
-    devServer: {
-        allowedHosts: 'all',
-        client: {
-            webSocketURL: {
-                hostname: 'node.px-staging.de',
-                protocol: 'wss',
-                port: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Methods':
+                    'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+                'Access-Control-Allow-Headers':
+                    'X-Requested-With, content-type, Authorization',
             },
-            overlay: {
-                warnings: false,
-                errors: true,
+            port: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
+            server: !config.isProd
+                ? {
+                      type: 'https',
+                      options: {
+                          ca: Fs.readFileSync(
+                              Path.join(
+                                  process.cwd() +
+                                      '/.ddev/ssl/_wildcard.px-staging.de+1-client.pem',
+                              ),
+                          ),
+                          key: Fs.readFileSync(
+                              Path.join(
+                                  process.cwd() +
+                                      '/.ddev/ssl/_wildcard.px-staging.de+1-key.pem',
+                              ),
+                          ),
+                          cert: Fs.readFileSync(
+                              Path.join(
+                                  process.cwd() +
+                                      '/.ddev/ssl/_wildcard.px-staging.de+1.pem',
+                              ),
+                          ),
+                      },
+                  }
+                : 'http',
+            devMiddleware: {
+                writeToDisk: true,
             },
-        },
-        headers: {
-            'Access-Control-Allow-Origin': '*',
-            'Access-Control-Allow-Methods':
-                'GET, POST, PUT, DELETE, PATCH, OPTIONS',
-            'Access-Control-Allow-Headers':
-                'X-Requested-With, content-type, Authorization',
-        },
-        port: process.env.SHOPWARE_MODE === 'administration' ? 8080 : 8081,
-        server: !config.isProd
-            ? {
-                type: 'https',
-                options: {
-                    ca: Fs.readFileSync(
-                        Path.join(
-                            process.cwd() +
-                            '/.ddev/ssl/_wildcard.px-staging.de+1-client.pem',
-                        ),
-                    ),
-                    key: Fs.readFileSync(
-                        Path.join(
-                            process.cwd() +
-                            '/.ddev/ssl/_wildcard.px-staging.de+1-key.pem',
-                        ),
-                    ),
-                    cert: Fs.readFileSync(
-                        Path.join(
-                            process.cwd() +
-                            '/.ddev/ssl/_wildcard.px-staging.de+1.pem',
-                        ),
-                    ),
+            setupMiddlewares: (middlewares, devServer) => {
+                if (!devServer) {
+                    throw new Error('webpack-dev-server is not defined');
                 }
-            }
-            : 'http',
-        devMiddleware: {
-            writeToDisk: true,
-        },
-        setupMiddlewares: (middlewares, devServer) => {
-            if (!devServer) {
-                throw new Error("webpack-dev-server is not defined")
-            }
-
-            Consola.success(
-                `Starting webpack in [${process.env.NODE_ENV}] with [${process.env.SHOPWARE_MODE}]`,
-            );
-
-            watcher.watch(config);
 
-            return middlewares;
-        },
-    },
-    plugins: [
-        new ESLintPlugin({
-            exclude: [
-                '**/node_modules/**',
-                'vendor'
-            ]
-        }),
-        new HookPlugin({
-            beforeCompile(compiler, callback) {
-                let path = Path.join(config.outputPath, 'sprite'),
-                    filename = 'sprite.svg',
-                    exists = Fs.existsSync(path);
+                Consola.success(
+                    `Starting webpack in [${process.env.NODE_ENV}] with [${process.env.SHOPWARE_MODE}]`,
+                );
 
-                if (!exists) {
-                    Fs.mkdirSync(path, {
-                        recursive: true,
-                    });
-                    Fs.appendFile(Path.join(path, filename), '#', (err) => {
-                        if (err) {
-                            throw err;
-                        }
-                    });
-                }
+                watcher.watch(config);
 
-                callback();
+                return middlewares;
             },
-            failed() {
-                watcher.run(null, config);
-            },
-        }),
+        },
+        plugins: [
+            new ESLintPlugin({
+                exclude: ['**/node_modules/**', 'vendor'],
+            }),
+            new HookPlugin({
+                failed() {
+                    watcher.onFileChange(null, config);
+                },
+            }),
 
-        new TimeFixPlugin(),
+            new TimeFixPlugin(),
 
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': JSON.stringify(
-                process.env.NODE_ENV || 'development',
-            ),
-            'process.env.ASSET_URL': JSON.stringify(config.assetUrl),
-            'process.env.RESOURCES_PATHS': JSON.stringify(process.env.RESOURCES_PATHS || '[]'),
-        }),
-    ].concat(
-        config.isProd && config.mediaQueries
-            ? new MediaQueryPlugin({
-                include: true,
-                queries: JSON.parse(config.mediaQueries)
-            })
-            : []
-    ),
-    watch: false,
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': JSON.stringify(
+                    process.env.NODE_ENV || 'development',
+                ),
+                'process.env.ASSET_URL': JSON.stringify(config.assetUrl),
+                'process.env.RESOURCES_PATHS': JSON.stringify(
+                    JSON.stringify(resourcesPaths),
+                ),
+            }),
+        ].concat(
+            config.isProd && config.mediaQueries
+                ? new MediaQueryPlugin({
+                      include: true,
+                      queries: JSON.parse(config.mediaQueries),
+                  })
+                : [],
+        ),
+        watch: false,
+    };
 };

package/src/webpack.config.storefront.js

@@ -1,166 +1,207 @@
 const config = require('./config');
 
 const Path = require('path'),
+    Fs = require('fs'),
     MiniCssExtractPlugin = require('mini-css-extract-plugin'),
     ChangeCase = require('change-case'),
     Consola = require('consola'),
     Sw6PluginMapEmitterPlugin = require('@pixolith/webpack-sw6-plugin-map-emitter'),
-    Entry = require('webpack-glob-entry'),
-    SvgStorePlugin = require('@pixolith/external-svg-sprite-loader'),
-    outputConfig = {
+    SvgStorePlugin = require('@pixolith/external-svg-sprite-loader');
+
+module.exports = function createStorefrontConfig(themeOptions) {
+    let themeName = themeOptions && themeOptions.themeName;
+    let themeSlug = themeName ? ChangeCase.kebabCase(themeName) : 'storefront';
+
+    let outputConfig = {
         path: config.outputPath,
         publicPath: config.assetUrl,
         chunkFilename: (chunkData) => {
-            return `js/chunk[name]${
-                config.isProd ? '.[contenthash]' : ''
-            }.js`;
+            return `js/chunk[name]${config.isProd ? '.[contenthash]' : ''}.js`;
         },
         filename: (chunkData) => {
             return `js/${chunkData.chunk.name.toLowerCase()}${
                 config.isProd ? `.[contenthash]` : ''
             }.js`;
         },
-    },
-    miniCssChunksConfig = {
-        filename: `css/[name]${
-            config.isProd ? '.[contenthash]' : ''
-        }.css`,
+        uniqueName: themeSlug,
+    };
+
+    let miniCssChunksConfig = {
+        filename: `css/[name]${config.isProd ? '.[contenthash]' : ''}.css`,
         chunkFilename: `css/[name].vendor${
             config.isProd ? '.[contenthash]' : ''
-        }.css`
+        }.css`,
     };
 
-module.exports = {
-    entry: () => {
-        let entriesPlugins = Entry(
-            (filePath) =>
-                ChangeCase.kebabCase(
-                    filePath.match(config.pluginMatch)[1],
-                ),
-            Path.resolve(config.pluginSrcPath, 'index.js'),
-        );
+    // Per-theme sprite path to avoid collisions between compilers
+    let spritePath = `sprite/${themeSlug}-sprite.svg`;
 
-        let entriesVendor = Entry(
-            (filePath) =>
-                ChangeCase.kebabCase(
-                    filePath.match(config.vendorMatch)[1],
-                ),
-            Path.resolve(config.vendorSrcPath, 'index.js'),
+    let entryFn = () => {
+        let entryDir = Path.join(
+            config.outputPath,
+            '.theme-entries',
+            themeSlug,
         );
 
-        let routeSplitEntriesPlugins = Entry(
-            (filePath) => filePath.split('/').pop().replace('.index.scss', '').replace('.', '_'),
-            Path.resolve(config.pluginRouteSplitPath, '*index.scss'),
-        );
-        let routeSplitEntriesVendor = Entry(
-            (filePath) => filePath.split('/').pop().replace('.index.scss', '').replace('.', '_'),
-            Path.resolve(config.vendorRouteSplitPath, '*index.scss'),
-        );
+        let entries = {};
+
+        // Main theme entry
+        let mainEntry = Path.join(entryDir, 'index.js');
+        if (Fs.existsSync(mainEntry)) {
+            entries[themeSlug] = mainEntry;
+        }
+
+        // Route-split SCSS entries
+        let routeSplitFiles = Fs.existsSync(entryDir)
+            ? Fs.readdirSync(entryDir).filter(
+                  (f) => f.endsWith('.index.scss') && f !== 'index.scss',
+              )
+            : [];
+
+        routeSplitFiles.forEach((file) => {
+            let routeName = file.replace('.index.scss', '');
+            let entryName = themeSlug + '_' + routeName;
+            entries[entryName] = Path.join(entryDir, file);
+        });
 
         if (config.isDebug) {
-            Consola.info('[DEBUG]: Webpack entry points:');
-            console.table({ ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor });
+            Consola.info(`[${themeName || themeSlug}] Webpack entry points:`);
+            console.table(entries);
         }
 
-        return { ...entriesPlugins, ...entriesVendor, ...routeSplitEntriesPlugins, ...routeSplitEntriesVendor };
-    },
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: (file) => {
-                    return /node_modules/.test(file);
-                },
-                use: [
-                    {
-                        loader: 'swc-loader',
-                        options: {
-                            env: {
-                                mode: 'entry',
-                                coreJs: '3.34.0',
-                                // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
-                                targets: require('browserslist').loadConfig({
-                                    config: './package.json',
-                                }),
+        return entries;
+    };
+
+    return {
+        name: themeSlug,
+        entry: entryFn,
+        // -.- hardcoded fix for zbar-wasm and issue https://github.com/webpack/webpack/issues/16878
+        resolve: {
+            conditionNames: [
+                'zbar-inlined',
+                'browser',
+                'import',
+                'require',
+                'default',
+            ],
+        },
+
+        module: {
+            rules: [
+                {
+                    // -.- hardcoded fix for zbar-wasm and issue https://github.com/webpack/webpack/issues/16878
+                    test: /\.m?js$/,
+                    include: /node_modules[\\/]@undecaf[\\/]zbar-wasm/,
+                    enforce: 'pre',
+                    use: [
+                        {
+                            loader: 'string-replace-loader',
+                            options: {
+                                search: 'new URL("./",import.meta.url)',
+                                replace: '"/"',
                             },
-                            jsc: {
-                                parser: {
-                                    syntax: 'typescript',
+                        },
+                    ],
+                },
+                {
+                    test: /\.js$/,
+                    exclude: (file) => {
+                        return /node_modules/.test(file);
+                    },
+                    use: [
+                        {
+                            loader: 'swc-loader',
+                            options: {
+                                env: {
+                                    mode: 'entry',
+                                    coreJs: '3.34.0',
+                                    // .browserlist settings are not found by swc-loader, so we load it manually: https://github.com/swc-project/swc/issues/3365
+                                    targets: require('browserslist').loadConfig(
+                                        {
+                                            config: './package.json',
+                                        },
+                                    ),
                                 },
-                                transform: {
-                                    // NEXT-30535 - Restore babel option to not use defineProperty for class fields.
-                                    // Previously (in v6.5.x) this was done by `@babel/preset-typescript` automatically.
-                                    useDefineForClassFields: false,
+                                jsc: {
+                                    parser: {
+                                        syntax: 'typescript',
+                                    },
+                                    transform: {
+                                        // NEXT-30535 - Restore babel option to not use defineProperty for class fields.
+                                        // Previously (in v6.5.x) this was done by `@babel/preset-typescript` automatically.
+                                        useDefineForClassFields: false,
+                                    },
                                 },
                             },
                         },
+                    ],
+                },
+                {
+                    test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'img/[name][ext]',
                     },
-                ],
-            },
-            {
-                test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: 'img/[name][ext]'
-                }
-            },
-            {
-                test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: 'fonts/[name][ext]'
-                }
-            },
-            {
-                test: /\.svg$/,
-                use: [
-                    {
-                        loader: SvgStorePlugin.loader,
-                        options: {
-                            name: 'sprite/sprite.svg',
-                            iconName: '[name]',
-                            overrideOrder: config.spriteOrder,
-                            ignoreIconsByName: config.ignoreIcons,
-                            onlySymbols: true,
-                        },
+                },
+                {
+                    test: /\.(eot|ttf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'fonts/[name][ext]',
                     },
-                    {
-                        loader: 'svgo-loader',
-                        options: {
-                            plugins: [
-                                'cleanupAttrs',
-                                'removeDoctype',
-                                'removeXMLProcInst',
-                                'cleanupEnableBackground',
-                                'convertStyleToAttrs',
-                                'convertPathData',
-                                'cleanupIds',
-                                'minifyStyles',
-                                'removeUselessDefs',
-                                'convertShapeToPath',
-                                'removeUnusedNS',
-                                'removeDimensions',
-                                'convertTransform',
-                                'collapseGroups',
-                                'removeComments',
-                                'removeEditorsNSData',
-                                'removeUnknownsAndDefaults',
-                            ],
+                },
+                {
+                    test: /\.svg$/,
+                    use: [
+                        {
+                            loader: SvgStorePlugin.loader,
+                            options: {
+                                name: spritePath,
+                                iconName: '[name]',
+                                overrideOrder: config.spriteOrder,
+                                ignoreIconsByName: config.ignoreIcons,
+                                onlySymbols: true,
+                            },
                         },
-                    },
-                ],
-            },
+                        {
+                            loader: 'svgo-loader',
+                            options: {
+                                plugins: [
+                                    'cleanupAttrs',
+                                    'removeDoctype',
+                                    'removeXMLProcInst',
+                                    'cleanupEnableBackground',
+                                    'convertStyleToAttrs',
+                                    'convertPathData',
+                                    'cleanupIds',
+                                    'minifyStyles',
+                                    'removeUselessDefs',
+                                    'convertShapeToPath',
+                                    'removeUnusedNS',
+                                    'removeDimensions',
+                                    'convertTransform',
+                                    'collapseGroups',
+                                    'removeComments',
+                                    'removeEditorsNSData',
+                                    'removeUnknownsAndDefaults',
+                                ],
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        output: outputConfig,
+        plugins: [
+            new Sw6PluginMapEmitterPlugin({
+                includes: ['js', 'css'],
+                ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
+                filename: `var/px_plugins_${themeSlug}.json`,
+            }),
+
+            new SvgStorePlugin(),
+
+            new MiniCssExtractPlugin(miniCssChunksConfig),
         ],
-    },
-    output: outputConfig,
-    plugins: [
-        new Sw6PluginMapEmitterPlugin({
-            includes: ['js', 'css'],
-            ignoreFiles: [/.*icons.*\.js/, /.*chunk.*\.js/],
-        }),
-
-        new SvgStorePlugin(),
-
-        new MiniCssExtractPlugin(miniCssChunksConfig),
-    ],
+    };
 };