@oroinc/oro-webpack-config-builder 6.1.0-lts04 → 6.1.0-lts06

package/error-handler.js

@@ -1,15 +1,7 @@
 const BaseError = require('./validation/errors/base-error');
-const {isVerboseMode} = require('./utils');
+const {isVerboseMode, multiline} = require('./utils');
 const {red, yellow, green, bgRed} = require('colorette');
 
-const emptyLine = length => new Array(length).fill(' ').join('');
-const multiline = (color, msg) => {
-    msg = ` ${msg}`;
-    msg = msg + emptyLine(120 - msg.length);
-
-    return `\n${color(emptyLine(msg.length))}\n${color(msg)}\n${color(emptyLine(msg.length))}`;
-};
-
 class ErrorHandler {
     constructor() {
         this.failedThemes = [];

package/oro-webpack-config.js

@@ -9,8 +9,6 @@ const EntryPointFileWriter = require('./writer/scss-entry-point-file-writer');
 const LayoutModulesConfigLoader = require('./modules-config/layout-modules-config-loader');
 const LayoutStyleLoader = require('./style/layout-style-loader');
 const MapModulesPlugin = require('./plugin/map/map-modules-plugin');
-const IntegrityFilePlugin = require('./plugin/integrity/integrity-file-plugin');
-const {SubresourceIntegrityPlugin} = require('webpack-subresource-integrity');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ModulesConfigLoader = require('./modules-config/modules-config-loader');
 const DynamicImportsFileWriter = require('./writer/dynamic-imports-file-writer');
@@ -21,6 +19,7 @@ const ThemeConfigFactory = require('./theme-config-factory');
 const path = require('path');
 const fs = require('fs');
 const prepareModulesMap = require('./plugin/map/prepare-modules-map');
+const CssToJsonPlugin = require('./plugin/css-to-json');
 const resolve = require('enhanced-resolve');
 const {merge: webpackMerge} = require('webpack-merge');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -32,7 +31,6 @@ const SVGSprite = require('./svg-sprite');
 const TerserPlugin = require('terser-webpack-plugin');
 require('resolve-url-loader');
 require('lezer-loader');
-
 class ConfigBuilder {
     constructor() {
         this._projectPath = '';
@@ -283,8 +281,7 @@ class ConfigBuilder {
             output: {
                 filename: '[name].js',
                 // Because we use third party libraries 'chunkFilename' should include only [name]
-                chunkFilename: this._getVersionedPath('chunk/[name].js', this.assetVersion),
-                crossOriginLoading: "anonymous"
+                chunkFilename: this._getVersionedPath('chunk/[name].js', this.assetVersion)
             },
             devtool: !env.skipSourcemap && 'inline-cheap-module-source-map',
             mode: 'development',
@@ -391,10 +388,6 @@ class ConfigBuilder {
                 new webpack.optimize.MinChunkSizePlugin({
                     minChunkSize: 30000 // Minimum number of characters
                 }),
-                new SubresourceIntegrityPlugin(),
-                new IntegrityFilePlugin({
-                    publicPath: this.resolvedPublicPath
-                }),
                 new AfterWebpackLogsPlugin(
                     stats => this.emitter.emit('build:complete', stats)
                 )
@@ -541,6 +534,10 @@ class ConfigBuilder {
             }));
         }
 
+        if (!skipCSS) {
+            plugins.push(new CssToJsonPlugin());
+        }
+
         const cssEntryPoints = !skipCSS ? this._getCssEntryPoints(buildName, buildPublicPath) : {};
         const jsEntryPoints = !skipJS ? jsBuildConfig.entry : {};
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "6.1.0-lts04",
+  "version": "6.1.0-lts06",
   "author": "Oro, Inc. (https://oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
@@ -16,9 +16,9 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "~5.0.0",
     "deepmerge": "~4.3.1",
+    "esbuild-loader": "^4.3.0",
     "exports-loader": "~4.0.0",
     "expose-loader": "~4.1.0",
-    "esbuild-loader": "^4.3.0",
     "file-loader": "~6.2.0",
     "html-webpack-plugin": "~5.5.0",
     "imports-loader": "~4.0.1",
@@ -30,6 +30,7 @@
     "path": "0.12.7",
     "postcss": "<8.4.33",
     "postcss-loader": "~7.3.4",
+    "postcss-safe-parser": "^7.0.1",
     "printf": "~0.6.0",
     "resolve-url-loader": "^5.0.0",
     "rtlcss-webpack-plugin": "~4.0.6",
@@ -49,7 +50,6 @@
     "webpack-cli": "~6.0.0",
     "webpack-dev-server": "^5.2.0",
     "webpack-merge": "~5.8.0",
-    "webpack-subresource-integrity": "^5.2.0-rc.1",
     "wildcard": "~2.0.0"
   }
 }

package/plugin/css-to-json/index.js

@@ -0,0 +1,66 @@
+const path = require('path');
+const webpack = require('webpack');
+const jsonTransform = require('./json-transformer');
+const {multiline} = require('./../../utils');
+const {bgRed} = require('colorette');
+
+const isExportCssFile = filename => {
+    return path.extname(filename) === '.css' && /_json(\.rtl)?$/.test(path.basename(filename, '.css'));
+};
+
+class CssToJsonPlugin {
+    constructor(options) {}
+
+    processAssets = (compilation, callback) => {
+        const chunks = Array.from(compilation.chunks);
+
+        chunks.forEach(chunk => {
+            const files = Array.from(chunk.files);
+
+            files.filter(isExportCssFile).forEach(filename => {
+                const src = compilation.assets[filename].source();
+                const json = jsonTransform(src);
+
+                try {
+                    JSON.parse(json);
+                } catch (e) {
+                    console.error(
+                        multiline(bgRed, `[ERROR] The JSON generated from the CSS file "${filename}" is invalid.`)
+                    );
+                    console.error(e.message);
+                    return;
+                }
+
+                let jsonFileName = '[name].json';
+
+                if (filename.includes('rtl')) {
+                    jsonFileName = '[name].rtl.json';
+                }
+
+                const dstFileName = compilation.getPath(jsonFileName, {
+                    chunk,
+                    cssFileName: filename
+                });
+
+                compilation.assets[dstFileName] = new webpack.sources.RawSource(json);
+                chunk.files.add(dstFileName);
+            });
+        });
+
+        callback();
+    };
+
+    apply(compiler) {
+        compiler.hooks.compilation.tap('CssToJsonPlugin', compilation => {
+            compilation.hooks.processAssets.tapAsync(
+                {
+                    name: 'CssToJsonPlugin',
+                    stage: compilation.PROCESS_ASSETS_STAGE_OPTIMIZE
+                },
+                (chunks, callback) => this.processAssets(compilation, callback)
+            );
+        });
+    }
+}
+
+module.exports = CssToJsonPlugin;

package/plugin/css-to-json/json-transformer.js

@@ -0,0 +1,42 @@
+const postcss = require('postcss');
+const safeParser = require('postcss-safe-parser');
+
+const normalizeSelector = selector => {
+    return selector
+        .replace(/^\./g, '')
+        .replace(/:(\w+)/, (matched, group) => {
+            return group.charAt(0).toUpperCase() + group.slice(1);
+        })
+        /*
+        * #main > .item => _main__item
+        * input[type="text"] => input_type_text
+        * .button + .icon => button__icon
+        * .p:has(.btn) => p_has__btn_
+        */
+        .replace(/[:\.\[\]\(\)#\s>+~]/g, '_');
+};
+
+const transform = src => {
+    const classMap = {};
+    const root = postcss.parse(src, {parser: safeParser});
+    root.walkRules(rule => {
+        const selector = rule.selector;
+
+        if (!selector.startsWith('.')) {
+            return;
+        }
+
+        const normalizedKey = normalizeSelector(selector);
+        const props = [];
+        rule.walkDecls(decl => {
+            const important = decl.important ? ' !important' : '';
+            props.push(`${decl.prop}: ${decl.value}${important}`);
+        });
+
+        classMap[normalizedKey] = props.join('; ') + (props.length ? ';' : '');
+    });
+
+    return JSON.stringify(classMap, null, 2);
+};
+
+module.exports = transform;

package/utils.js

@@ -1,7 +1,7 @@
 let prodMode;
 let verboseMode;
 
-module.exports = {
+const utils = {
     isVerboseMode() {
         if (verboseMode === void 0) {
             verboseMode = process.argv.filter(arg => {
@@ -13,6 +13,7 @@ module.exports = {
 
         return verboseMode;
     },
+
     isProdMode() {
         if (prodMode !== void 0) {
             return prodMode;
@@ -26,5 +27,18 @@ module.exports = {
         });
 
         return prodMode;
+    },
+
+    emptyLine(length) {
+        return new Array(length).fill(' ').join('');
+    },
+
+    multiline(color, msg) {
+        msg = ` ${msg}`;
+        msg = msg + utils.emptyLine(120 - msg.length);
+
+        return `\n${color(utils.emptyLine(msg.length))}\n${color(msg)}\n${color(utils.emptyLine(msg.length))}`;
     }
 };
+
+module.exports = utils;

package/plugin/integrity/integrity-file-plugin.js

@@ -1,42 +0,0 @@
-const { createHash } = require('crypto');
-const { Compilation, sources } = require('webpack');
-const fs = require('fs').promises;
-const path = require('path');
-
-class IntegrityFilePlugin {
-    constructor({fileName = 'integrity.json', publicPath = '', algorithm = 'sha384'} = {}) {
-        this.fileName = fileName;
-        this.publicPath = publicPath;
-        this.algorithm = algorithm;
-    }
-
-    apply(compiler) {
-        compiler.hooks.thisCompilation.tap('IntegrityFilePlugin', (compilation) => {
-            compilation.hooks.processAssets.tapPromise(
-                { name: 'SubresourceIntegrityPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER },
-                async () => {
-                    const integrityData = Object.fromEntries(
-                        Object.entries(compilation.assets)
-                            .filter(([assetName]) => assetName.endsWith('.css') || assetName.endsWith('.js'))
-                            .map(([assetName, asset]) => {
-                            const hash = createHash(this.algorithm).update(asset.source()).digest('base64');
-                            const assetNormalized = assetName.split('?')[0];
-
-                            return [
-                                path.join(compiler.options.output.publicPath || '', assetNormalized),
-                                `${this.algorithm}-${hash}`
-                            ];
-                        })
-                    );
-                    const jsonData = JSON.stringify(integrityData, null, 2);
-                    const outputPath = path.join(this.publicPath, compiler.options.output.publicPath, this.fileName);
-
-                    await fs.writeFile(outputPath, jsonData, 'utf8');
-                    compilation.emitAsset(outputPath, new sources.RawSource(jsonData));
-                }
-            );
-        });
-    }
-}
-
-module.exports = IntegrityFilePlugin;