@oroinc/oro-webpack-config-builder 6.1.0-lts05 → 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

@@ -19,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;
@@ -30,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 = '';
@@ -534,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-lts05",
+  "version": "6.1.0-lts06",
   "author": "Oro, Inc. (https://oroinc.com)",
   "license": "MIT",
   "description": "An integration of OroPlatform based applications with the Webpack.",
@@ -16,7 +16,6 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "~5.0.0",
     "deepmerge": "~4.3.1",
-    "esbuild": "^0.25.2",
     "esbuild-loader": "^4.3.0",
     "exports-loader": "~4.0.0",
     "expose-loader": "~4.1.0",
@@ -31,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",

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;