@oroinc/oro-webpack-config-builder 5.1.0-alpha3 → 5.1.0-alpha30

package/oro-webpack-config.js

@@ -14,14 +14,17 @@ const ModulesConfigLoader = require('./modules-config/modules-config-loader');
 const DynamicImportsFileWriter = require('./writer/dynamic-imports-file-writer');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const prepareModulesShim = require('./prepare-modules-shim');
-const StyleLoader = require('./style/style-loader');
+const AdminStyleLoader = require('./style/admin-style-loader');
 const ThemeConfigFactory = require('./theme-config-factory');
 const path = require('path');
+const fs = require('fs');
 const prepareModulesMap = require('./plugin/map/prepare-modules-map');
 const resolve = require('enhanced-resolve');
 const {merge: webpackMerge} = require('webpack-merge');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const RtlCssWebpackPlugin = require('rtlcss-webpack-plugin');
+const {red: colorRed} = require('colorette');
+require('resolve-url-loader');
 
 class ConfigBuilder {
     constructor() {
@@ -29,18 +32,18 @@ class ConfigBuilder {
         this._adminTheme = 'admin.oro';
         this._enableLayoutThemes = false;
         this._defaultLayoutThemes = null;
-        this._versionFormat = '%s?version=%s';
+        this._versionFormat = '%s?v=%s';
         this._babelConfig = {
             sourceType: 'unambiguous',
             presets: [
                 [
                     '@babel/preset-env', {
-                        useBuiltIns: 'usage',
-                        corejs: {
-                            version: 3,
-                            proposals: true
-                        }
+                    useBuiltIns: 'usage',
+                    corejs: {
+                        version: 3,
+                        proposals: true
                     }
+                }
                 ]
             ],
             plugins: [
@@ -71,7 +74,7 @@ class ConfigBuilder {
 
     /**
      * Specifies a sprintf pattern that will be used with the version option to construct an asset’s path.
-     * By default ts `%s?version=%s`
+     * By default ts `%s?v=%s`
      * @param {string} versionFormat
      * @returns {ConfigBuilder}
      */
@@ -125,310 +128,365 @@ class ConfigBuilder {
         return (env = {}, args = {}) => {
             this._initialize(args, env);
 
-            const {assetVersion} = this._appConfig;
-            const {theme: selectedTheme} = env;
-            this._validateThemeName(selectedTheme);
-
-            let themes = [];
-            // Admin themes
-            if (selectedTheme === undefined) {
-                // themes.push(this._adminTheme.split(".")[1]);
-                themes.push(this._adminTheme);
-            } else if (this._adminThemes.indexOf(selectedTheme) !== -1) {
-                // themes.push(selectedTheme.split(".")[1]);
-                themes.push(selectedTheme);
+            let commonConfig = {};
+            try {
+                commonConfig = this._getCommonWebpackConfig(args, env);
+            } catch (e) {
+                console.error(colorRed(`Error: ${e.message}`));
+                process.exit(1);
             }
 
-            // Layout Themes
-            if (this._enableLayoutThemes) {
-                if (selectedTheme === undefined) {
-                    // build all layout themes
-                    if (this._defaultLayoutThemes) {
-                        themes = [...themes, ...this._defaultLayoutThemes];
-                    } else {
-                        themes = [...themes, ...Object.keys(this._layoutModulesConfigLoader.themes)];
-                    }
-                } else if (this._layoutThemes.indexOf(selectedTheme) !== -1) {
-                    // build single layout theme
-                    themes.push(selectedTheme);
+            const webpackConfigs = [];
+            const requestedBuildNames = env.theme ? env.theme.split(',') : [];
+            const buildNames = this._getBuildNames(requestedBuildNames);
+            buildNames.forEach(buildName => {
+                let buildConfig;
+                try {
+                    buildConfig = this._getThemeWebpackConfig(buildName, args, env);
+                } catch (e) {
+                    console.error(colorRed(`Error: ${e.message}`));
+                    return;
+                }
+
+                if (buildConfig) {
+                    webpackConfigs.push(webpackMerge(buildConfig, commonConfig));
+                }
+            });
+
+            return webpackConfigs;
+        };
+    }
+
+    get resolvedPublicPath() {
+        if (this._resolvedPublicPath === undefined) {
+            this._resolvedPublicPath = path.resolve(this._publicPath);
+        }
+        return this._resolvedPublicPath;
+    }
+
+    get resolvedNodeModulesPath() {
+        if (this._resolvedNodeModulesPath === undefined) {
+            this._resolvedNodeModulesPath = path.resolve('node_modules');
+        }
+        return this._resolvedNodeModulesPath;
+    }
+
+    get assetVersion() {
+        if (this._assetVersion === undefined) {
+            const filePath = path.join(this.resolvedPublicPath, '/build/build_version.txt');
+            this._assetVersion = fs.existsSync(filePath) ? String(fs.readFileSync(filePath)) : null;
+        }
+        return this._assetVersion;
+    }
+
+    _getBuildNames(requestedBuildNames = []) {
+        const buildNames = [];
+        requestedBuildNames.forEach(buildName => this._validateBuildName(buildName));
+
+        // Admin themes
+        if (!requestedBuildNames.length) {
+            buildNames.push(this._adminTheme);
+        } else {
+            requestedBuildNames.forEach(buildName => {
+                if (this._isAdminTheme(buildName)) {
+                    buildNames.push(buildName);
                 }
+            });
+        }
+
+        // Layout Themes
+        if (this._enableLayoutThemes) {
+            if (!requestedBuildNames.length) {
+                // build all layout themes
+                const themes = this._defaultLayoutThemes || this._appConfig.themes;
+                buildNames.push(...themes);
+                themes.forEach(theme => {
+                    buildNames.push(...this._layoutModulesConfigLoader.extraJSBuildNames(theme));
+                });
+            } else {
+                // build single layout theme
+                requestedBuildNames.forEach(buildName => {
+                    if (this._layoutModulesConfigLoader.buildNames.includes(buildName)) {
+                        buildNames.push(buildName);
+                    }
+                });
             }
+        }
 
-            const resolvedPublicPath = path.resolve(this._publicPath);
-            const resolvedNodeModulesPath = path.resolve('node_modules');
-            const stats = env.stats || {
-                hash: false,
-                version: false,
-                // Do not write the information about files emitted from node_modules or public bundles,
-                // and hide css/*/*.js files from the output.
-                excludeAssets: [/^bundles\//, /^\.\.\/_static\//, /^css\/.+\.js/],
-                children: false,
-                entrypoints: false,
-                performance: this._isProduction,
-                chunks: false,
-                modules: false,
-                source: false,
-                publicPath: true,
-                builtAt: false,
-                warnings: false
-            };
-            let webpackConfig = {
-                watchOptions: {
-                    aggregateTimeout: 200,
-                    ignored: /[\/\\]node_modules[\/\\].*\.js$/
-                },
-                stats: stats,
-                output: {
-                    filename: '[name].js',
-                    // Because we use third party libraries 'chunkFilename' should include only [name]
-                    chunkFilename: printf(this._versionFormat, 'chunk/[name].js', assetVersion)
-                },
-                devtool: !env.skipSourcemap && 'inline-cheap-module-source-map',
-                mode: 'development',
-                optimization: {
-                    moduleIds: 'named',
-                    splitChunks: {
-                        cacheGroups: {
-                            commons: {
-                                minSize: 30,
-                                minChunks: 2,
-                                priority: 10,
-                                reuseExistingChunk: true
-                            },
-                            tinymce: {
-                                test: /tinymce/,
-                                name: 'tinymce.min',
-                                minChunks: 1
-                            },
-                            fusioncharts: {
-                                test: /fusioncharts/,
-                                name: 'fusioncharts',
-                                minChunks: 1
-                            }
-                        }
+        return buildNames;
+    }
+
+    _getCommonWebpackConfig(args, env) {
+        const stats = env.stats || {
+            hash: false,
+            version: false,
+            // Do not write the information about files emitted from node_modules or public bundles,
+            // and hide css/*/*.js files from the output.
+            excludeAssets: [/^bundles\//, /^\.\.\/_static\//, /^css\/.+\.js/],
+            children: false,
+            entrypoints: false,
+            performance: this._isProduction,
+            chunks: false,
+            modules: false,
+            source: false,
+            publicPath: true,
+            builtAt: false,
+            warnings: false
+        };
+
+        const webpackConfig = {
+            watchOptions: {
+                aggregateTimeout: 200,
+                ignored: /[\/\\]node_modules[\/\\].*\.js$/
+            },
+            stats,
+            output: {
+                filename: '[name].js',
+                // Because we use third party libraries 'chunkFilename' should include only [name]
+                chunkFilename: this._getVersionedPath('chunk/[name].js', this.assetVersion)
+            },
+            devtool: !env.skipSourcemap && 'inline-cheap-module-source-map',
+            mode: 'development',
+            optimization: {
+                moduleIds: 'named',
+                splitChunks: {
+                    cacheGroups: {
+                        defaultVendors: false
                     }
-                },
-                resolveLoader: {
-                    modules: [
-                        resolvedPublicPath,
-                        path.join(__dirname, './loader'),
-                        resolvedPublicPath + '/bundles',
-                        resolvedNodeModulesPath
-                    ]
-                },
-                module: {
-                    noParse: [
-                        /[\/\\]bundles[\/\\]\.*[\/\\]lib[\/\\](?!chaplin|bootstrap|jquery\.dialog).*\.js$/
-                    ],
-                    rules: [
-                        {
-                            test: /\.s?css$/,
-                            use: [{
-                                loader: args.hot ? 'style-loader' : MiniCssExtractPlugin.loader
-                            }, {
-                                loader: 'css-loader',
-                                options: {
-                                    importLoaders: 1,
-                                    sourceMap: true
-                                }
-                            }, {
-                                loader: 'postcss-loader',
-                                options: {
-                                    sourceMap: true,
-                                    postcssOptions: {
-                                        plugins: [
-                                            require('autoprefixer')
-                                        ]
-                                    }
-                                }
-                            }, {
-                                loader: 'sass-loader',
-                                options: {
-                                    sassOptions: {
-                                        includePaths: [
-                                            resolvedPublicPath + '/bundles'
-                                        ],
-                                        outputStyle: 'expanded'
-                                    },
-                                    sourceMap: true
+                }
+            },
+            resolveLoader: {
+                modules: [
+                    this.resolvedPublicPath,
+                    path.join(__dirname, './loader'),
+                    path.join(this.resolvedPublicPath, '/bundles'),
+                    this.resolvedNodeModulesPath
+                ]
+            },
+            module: {
+                noParse: [
+                    /[\/\\]bundles[\/\\]\.*[\/\\]lib[\/\\](?!chaplin|bootstrap|jquery\.dialog).*\.js$/
+                ],
+                rules: [
+                    {
+                        test: /\.s?css$/,
+                        use: [{
+                            loader: args.hot ? 'style-loader' : MiniCssExtractPlugin.loader
+                        }, {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                sourceMap: true,
+                                // can't use esModule since resolve-url-loader needs file path to start with '~'
+                                esModule: false
+                            }
+                        }, {
+                            loader: 'resolve-url-loader'
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true,
+                                postcssOptions: {
+                                    plugins: [
+                                        require('autoprefixer')
+                                    ]
                                 }
-                            }]
-                        },
-                        {
-                            test: /\.(eot|ttf|woff|woff2|cur|ico|svg|png|jpg|gif)$/,
-                            loader: 'url-loader',
+                            }
+                        }, {
+                            loader: 'sass-loader',
                             options: {
-                                limit: 1,
-                                emitFile: true,
-                                outputPath: '../_static/',
-                                publicPath: '../../_static/',
-                                name: printf(this._versionFormat, '[path][name].[ext]', assetVersion)
+                                sassOptions: {
+                                    includePaths: [
+                                        path.join(this.resolvedPublicPath, '/bundles')
+                                    ],
+                                    outputStyle: 'expanded'
+                                },
+                                sourceMap: true
                             }
+                        }]
+                    },
+                    {
+                        test: /\.(eot|ttf|woff|woff2|cur|ico|svg|png|jpg|gif)$/,
+                        loader: 'url-loader',
+                        options: {
+                            limit: 1,
+                            emitFile: true,
+                            outputPath: '../_static/',
+                            publicPath: '../../_static/',
+                            name: this._getVersionedPath('[path][name].[ext]', this.assetVersion)
                         }
-                    ]
-                },
-                performance: {hints: false},
-                plugins: [
-                    new MiniCssExtractPlugin({
-                        filename: '[name].css'
-                    }),
-                    new CleanupStatsPlugin(),
-                    // Ignore all locale files of moment.js
-                    new webpack.IgnorePlugin({
-                        resourceRegExp: /^\.[\/\\]locale$/,
-                        contextRegExp: /moment$/
-                    }),
-                    new webpack.optimize.MinChunkSizePlugin({
-                        minChunkSize: 30000 // Minimum number of characters
-                    })
+                    }
                 ]
-            };
-
-            if (env.analyze) {
-                webpackConfig.plugins.push(new BundleAnalyzerPlugin());
-            }
+            },
+            performance: {hints: false},
+            plugins: [
+                new MiniCssExtractPlugin({
+                    filename: '[name].css'
+                }),
+                new CleanupStatsPlugin(),
+                // Ignore all locale files of moment.js
+                new webpack.IgnorePlugin({
+                    resourceRegExp: /^\.[\/\\]locale$/,
+                    contextRegExp: /moment$/
+                }),
+                new webpack.optimize.MinChunkSizePlugin({
+                    minChunkSize: 30000 // Minimum number of characters
+                })
+            ]
+        };
 
-            if (!env.skipJS && !env.skipBabel) {
-                const happyPackOptions = {
-                    id: 'babel',
-                    loaders: [
-                        {
-                            loader: 'babel-loader',
-                            options: this._babelConfig
-                        }
-                    ]
-                };
-
-                webpackConfig.plugins.push(new HappyPack(happyPackOptions));
-
-                webpackConfig.module.rules.push({
-                    test: /\.js$/,
-                    exclude: [
-                        /[\/\\]platform[\/\\]build[\/\\]/,
-                        /[\/\\]node_modules[\/\\]/,
-                        /[\/\\]bundles[\/\\].+[\/\\]lib[\/\\]?/
-                    ],
-                    use: 'happypack/loader?id=babel'
-                });
-            }
+        if (env.analyze) {
+            webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+        }
 
-            if (args.hot) {
-                const https = this._appConfig.devServerOptions.https;
-                const schema = https ? 'https' : 'http';
-                const devServerHost = this._appConfig.devServerOptions.host;
-                const devServerPort = this._appConfig.devServerOptions.port;
-                webpackConfig.devServer = {
-                    contentBase: resolvedPublicPath,
-                    host: devServerHost,
-                    port: devServerPort,
-                    https: https,
-                    compress: true,
-                    stats: stats,
-                    disableHostCheck: true,
-                    clientLogLevel: 'error',
-                    headers: {
-                        'Access-Control-Allow-Origin': '*'
+        if (!env.skipJS && !env.skipBabel) {
+            const happyPackOptions = {
+                id: 'babel',
+                loaders: [
+                    {
+                        loader: 'babel-loader',
+                        options: this._babelConfig
                     }
-                };
-                webpackConfig.output.publicPath = `${schema}://${devServerHost}:${devServerPort}/`;
-            }
+                ]
+            };
 
-            // Additional setting for production mode
-            if (this._isProduction) {
-                webpackConfig = webpackMerge(webpackConfig, {
-                    devtool: false,
+            webpackConfig.plugins.push(new HappyPack(happyPackOptions));
 
-                    plugins: [
-                        new CssMinimizerPlugin()
-                    ]
-                });
-            }
-
-            const webpackConfigs = [];
+            webpackConfig.module.rules.push({
+                test: /\.js$/,
+                exclude: [
+                    /[\/\\]platform[\/\\]build[\/\\]/,
+                    /[\/\\]node_modules[\/\\]/,
+                    /[\/\\]bundles[\/\\].+[\/\\]lib[\/\\]?/
+                ],
+                use: 'happypack/loader?id=babel'
+            });
+        }
 
-            themes.forEach(theme => {
-                let themeDefinition;
-                let themeConfig;
-                let buildPublicPath;
-                if (this._isAdminTheme(theme)) {
-                    themeDefinition = this._modulesConfigLoader.themes[theme.split('.')[1]];
-                    buildPublicPath = '/build/admin/';
-                    themeConfig = this._themeConfigFactory
-                        .create(theme, buildPublicPath, '/Resources/config/jsmodules.yml');
-                } else {
-                    themeDefinition = this._layoutModulesConfigLoader.themes[theme];
-                    buildPublicPath = `/build/${theme}/`;
-                    themeConfig = this._layoutThemeConfigFactory
-                        .create(theme, buildPublicPath, '/config/jsmodules.yml');
-                }
-                const {rtl_support: rtlSupport = false} = themeDefinition;
-                const resolvedBuildPath = path.join(resolvedPublicPath, buildPublicPath);
-
-                const resolverConfig = {
-                    modules: [
-                        resolvedBuildPath,
-                        resolvedPublicPath,
-                        resolvedPublicPath + '/bundles',
-                        resolvedPublicPath + '/js',
-                        resolvedNodeModulesPath
-                    ],
-                    alias: themeConfig.aliases,
-                    symlinks: false
-                };
-                const resolver = (resolver => {
-                    return moduleName => resolver({}, '', moduleName, {});
-                })(resolve.create.sync({...resolverConfig}));
-
-                const plugins = [];
-                if (rtlSupport && !env.skipCSS && !env.skipRTL) {
-                    plugins.push(new RtlCssWebpackPlugin({
-                        filename: '[name].rtl.css'
-                    }));
+        if (args.hot) {
+            const https = this._appConfig.devServerOptions.https;
+            const schema = https ? 'https' : 'http';
+            const devServerHost = this._appConfig.devServerOptions.host;
+            const devServerPort = this._appConfig.devServerOptions.port;
+            webpackConfig.devServer = {
+                contentBase: this.resolvedPublicPath,
+                host: devServerHost,
+                port: devServerPort,
+                https: https,
+                compress: true,
+                stats: webpackConfig.stats,
+                disableHostCheck: true,
+                clientLogLevel: 'error',
+                headers: {
+                    'Access-Control-Allow-Origin': '*'
                 }
+            };
+            webpackConfig.output.publicPath = `${schema}://${devServerHost}:${devServerPort}/`;
+        }
 
-                const cssEntryPoints = !env.skipCSS ? this._getCssEntryPoints(theme, buildPublicPath) : {};
-                const jsEntryPoints = !env.skipJS ? themeConfig.entry : {};
+        // Additional setting for production mode
+        if (this._isProduction) {
+            webpackConfig.devtool = false;
+            webpackConfig.plugins.push(new CssMinimizerPlugin());
+        }
 
-                const entryPoints = {...cssEntryPoints, ...jsEntryPoints};
-                if (Object.keys(entryPoints).length === 0) {
-                    return;
-                }
-                webpackConfigs.push(webpackMerge({
-                    entry: entryPoints,
-                    name: theme + ' theme',
-                    output: {
-                        publicPath: buildPublicPath,
-                        path: resolvedBuildPath
-                    },
-                    context: resolvedPublicPath,
-                    resolve: {
-                        ...resolverConfig,
-                        plugins: [
-                            new MapModulesPlugin(prepareModulesMap(resolver, themeConfig.map))
-                        ]
-                    },
-                    plugins,
-                    module: {
-                        rules: [
-                            {
-                                test: /[\/\\]configs\.json$/,
-                                loader: 'config-loader',
-                                options: {
-                                    resolver,
-                                    relativeTo: resolvedPublicPath
-                                }
-                            },
-                            ...prepareModulesShim(resolver, themeConfig.shim)
-                        ]
-                    }
-                }, webpackConfig));
-            });
+        return webpackConfig;
+    }
 
-            return webpackConfigs;
+    _getThemeWebpackConfig(buildName, args, env) {
+        let {skipCSS, skipJS, skipRTL} = env;
+        let themeDefinition;
+        let jsBuildConfig;
+        let buildPublicPath;
+        if (this._isAdminTheme(buildName)) {
+            themeDefinition = this._modulesConfigLoader.themes[buildName.split('.')[1]];
+            buildPublicPath = '/build/admin/';
+            const jsModulesConfig = this._themeConfigFactory.loadConfig(buildName,
+                ['Resources/config/oro/jsmodules.yml', 'Resources/config/jsmodules.yml']);
+            jsBuildConfig = this._themeConfigFactory.create(buildPublicPath, jsModulesConfig);
+        } else if (this._layoutModulesConfigLoader.isExtraJSBuild(buildName)) {
+            const [theme, suffix] = this._layoutModulesConfigLoader.splitBuildName(buildName);
+            skipCSS = true;
+            themeDefinition = this._layoutModulesConfigLoader.themes[theme];
+            buildPublicPath = `/build/${buildName}/`;
+            const baseConfig = this._layoutThemeConfigFactory.loadConfig(theme, 'config/jsmodules.yml');
+            const extraConfig = this._layoutThemeConfigFactory.loadConfig(theme, `config/jsmodules-${suffix}.yml`);
+            const jsModulesConfig = this._layoutThemeConfigFactory.extendConfig(baseConfig, extraConfig);
+            jsBuildConfig = this._layoutThemeConfigFactory.create(buildPublicPath, jsModulesConfig);
+        } else {
+            themeDefinition = this._layoutModulesConfigLoader.themes[buildName];
+            buildPublicPath = `/build/${buildName}/`;
+            const jsModulesConfig = this._layoutThemeConfigFactory.loadConfig(buildName, 'config/jsmodules.yml');
+            jsBuildConfig = this._layoutThemeConfigFactory.create(buildPublicPath, jsModulesConfig);
+        }
+        const {rtl_support: rtlSupport = false} = themeDefinition;
+        const resolvedBuildPath = path.join(this.resolvedPublicPath, buildPublicPath);
+
+        const resolverConfig = {
+            modules: [
+                resolvedBuildPath,
+                this.resolvedPublicPath,
+                path.join(this.resolvedPublicPath, '/bundles'),
+                path.join(this.resolvedPublicPath, '/js'),
+                this.resolvedNodeModulesPath
+            ],
+            alias: jsBuildConfig.aliases,
+            cacheWithContext: true,
+            symlinks: false
         };
+        const resolver = (resolver => {
+            return moduleName => resolver({}, '', moduleName, {});
+        })(resolve.create.sync({...resolverConfig}));
+
+        const plugins = [];
+        if (rtlSupport && !skipCSS && !skipRTL) {
+            plugins.push(new RtlCssWebpackPlugin({
+                filename: '[name].rtl.css'
+            }));
+        }
+
+        const cssEntryPoints = !skipCSS ? this._getCssEntryPoints(buildName, buildPublicPath) : {};
+        const jsEntryPoints = !skipJS ? jsBuildConfig.entry : {};
+
+        const entryPoints = {...cssEntryPoints, ...jsEntryPoints};
+        if (Object.keys(entryPoints).length === 0) {
+            return;
+        }
+
+        return {
+            entry: entryPoints,
+            name: buildName + ' theme',
+            output: {
+                publicPath: buildPublicPath,
+                path: resolvedBuildPath
+            },
+            context: this.resolvedPublicPath,
+            resolve: {
+                ...resolverConfig,
+                plugins: [
+                    new MapModulesPlugin(prepareModulesMap(resolver, jsBuildConfig.map))
+                ]
+            },
+            plugins,
+            module: {
+                rules: [
+                    {
+                        test: /[\/\\]configs\.json$/,
+                        loader: 'config-loader',
+                        options: {
+                            resolver,
+                            relativeTo: this.resolvedPublicPath
+                        }
+                    },
+                    ...prepareModulesShim(resolver, jsBuildConfig.shim)
+                ]
+            }
+        }
     }
 
     _initialize(args, env) {
+        const entryPointFileWriter = new EntryPointFileWriter(this._publicPath);
+
         this._isProduction = args.mode === 'production';
         this._symfonyEnv = env.symfony;
         this._appConfig = AppConfigLoader.getConfig(this._cachePath, this._symfonyEnv);
@@ -439,7 +497,7 @@ class ConfigBuilder {
             'settings.yml'
         );
         this._adminThemes = this._modulesConfigLoader.themeNames.map(themeName => 'admin.' + themeName);
-        this._styleLoader = new StyleLoader(this._modulesConfigLoader);
+        this._adminStyleLoader = new AdminStyleLoader(this._modulesConfigLoader, entryPointFileWriter);
         this._themeConfigFactory = new ThemeConfigFactory(
             this._modulesConfigLoader,
             new DynamicImportsFileWriter(this._publicPath),
@@ -452,8 +510,6 @@ class ConfigBuilder {
             '/Resources/views/layouts/',
             'theme.yml'
         );
-        this._layoutThemes = this._layoutModulesConfigLoader.themeNames;
-        const entryPointFileWriter = new EntryPointFileWriter(this._publicPath);
         this._layoutStyleLoader = new LayoutStyleLoader(this._layoutModulesConfigLoader, entryPointFileWriter);
         this._layoutThemeConfigFactory = new ThemeConfigFactory(
             this._layoutModulesConfigLoader,
@@ -463,33 +519,40 @@ class ConfigBuilder {
         );
     }
 
+    _getVersionedPath(name, assetVersion) {
+        if(!assetVersion) {
+            return name;
+        }
+        return printf(this._versionFormat, name, assetVersion);
+    }
+
     _getCssEntryPoints(theme, buildPath) {
         if (this._isAdminTheme(theme)) {
-            return this._styleLoader.getThemeEntryPoints(theme.split('.')[1]);
+            return this._adminStyleLoader.getThemeEntryPoints(theme.split('.')[1], buildPath);
         }
 
         return this._layoutStyleLoader.getThemeEntryPoints(theme, buildPath);
     }
 
-    _validateThemeName(theme) {
-        let existingThemes = this._adminThemes;
+    _validateBuildName(buildName) {
+        const buildNames = [...this._adminThemes];
         if (this._enableLayoutThemes) {
-            existingThemes = existingThemes.concat(this._layoutThemes);
+            buildNames.push(...this._layoutModulesConfigLoader.buildNames);
         }
-        if (theme === 'admin') {
+        if (buildName === 'admin') {
             throw new Error(
                 'The "admin" is a reserved word and cannot be used as a theme name.'
             );
         }
-        if (theme !== undefined && !existingThemes.includes(theme)) {
+        if (buildName !== undefined && !buildNames.includes(buildName)) {
             throw new Error(
-                'Theme "' + theme + '" doesn\'t exists. Existing themes:' + existingThemes.join(', ')
+                'Theme "' + buildName + '" doesn\'t exists. Existing themes:' + buildNames.join(', ')
             );
         }
     }
 
     _isAdminTheme(theme) {
-        return this._adminThemes.indexOf(theme) !== -1;
+        return this._adminThemes.includes(theme);
     }
 }