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

package/error-handler.js

@@ -1,7 +1,15 @@
 const BaseError = require('./validation/errors/base-error');
-const {isVerboseMode, multiline} = require('./utils');
+const {isVerboseMode} = 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/js-to-scss/create-font-list.js

@@ -0,0 +1,58 @@
+/**
+ * Converts JS object to SCSS list variable for theme fonts
+ * @example {
+ *     main: {
+ *         family: 'Jakarta',
+ *         variants: [{
+ *             path: '/font.woff2',
+ *             style: 'normal',
+ *             weight: '700'
+ *         }]
+ *         formats: ['woff2']
+ *     }
+ * } => (
+ *     'main': (
+ *         'family': 'Jakarta',
+ *         'variants': (
+ *             (
+ *                 'path': '/font.woff2',
+ *                 'style': 'normal',
+ *                 'weight': '700',
+ *             )
+ *         )
+ *         'formats': ('woff2')
+ *     )
+ * )
+ *
+ * @param {object} fonts
+ * @param {string }scssVarName
+ * @returns {string}
+ */
+const fontObjToSCSS = ({fonts, scssVarName = 'global-theme-fonts'} = {}) => {
+    if (!Object.keys(fonts).length) {
+        return `$${scssVarName}: ()`;
+    }
+    const fontsVariantsVars = Object.entries(fonts).map(([name, font]) => {
+        return `
+            '${name}': (
+                'family': '${font.family}',
+                'variants': (
+                    ${font.variants.map(item => `(
+                        'path': '${item.path}',
+                        ${item.weight !== void 0 ? `'weight': ${item.weight},` : ''}
+                        ${item.style !== void 0 ? `'style': ${item.style}` : ''}
+                    )`).join(`, `)}
+                ),
+                'formats': (${font.formats.map(format => `'${format}'`).join(', ')})
+            )
+        `;
+    });
+
+    return `
+        $${scssVarName}: (
+            ${fontsVariantsVars.join(`, `)}
+        );
+    `;
+};
+
+module.exports = fontObjToSCSS;

package/js-to-scss/index.js

@@ -0,0 +1,5 @@
+const createFontList = require('./create-font-list');
+
+module.exports = {
+    createFontList
+};

package/modules-config/modules-config-loader.js

@@ -71,6 +71,8 @@ class ModulesConfigLoader {
      * @private
      */
     _collectThemes(themes, themesLocation, themeInfoFileName) {
+        this._processedFiles = [];
+
         this._bundles.forEach(bundle => {
             const source = bundle + themesLocation;
 
@@ -81,11 +83,20 @@ class ModulesConfigLoader {
                 if (!fs.lstatSync(themePath).isDirectory()) {
                     return;
                 }
+
                 const themeFile = path.resolve(themePath, themeInfoFileName);
-                if (!fs.existsSync(themeFile)) return;
 
-                const theme = yaml.load(fs.readFileSync(themeFile, 'utf8'));
-                themes[name] = merge(themes[name] || {}, theme, {arrayMerge});
+                if (!fs.existsSync(themeFile)) {
+                    return;
+                }
+
+                this._processedFiles.push(themeFile);
+
+                const doc = yaml.load(fs.readFileSync(themeFile, 'utf8'));
+
+                validation.checkSchema(themeFile, doc, name);
+
+                themes[name] = merge(themes[name] || {}, doc, {arrayMerge});
             });
         });
     }

package/oro-webpack-config.js

@@ -19,7 +19,6 @@ 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;
@@ -29,8 +28,10 @@ const EventEmitter = require('events');
 const ErrorHandler = require('./error-handler');
 const SVGSprite = require('./svg-sprite');
 const TerserPlugin = require('terser-webpack-plugin');
+const jsToSCSS = require('./js-to-scss');
 require('resolve-url-loader');
 require('lezer-loader');
+
 class ConfigBuilder {
     constructor() {
         this._projectPath = '';
@@ -274,6 +275,7 @@ class ConfigBuilder {
 
         const webpackConfig = {
             watchOptions: {
+                followSymlinks: true,
                 aggregateTimeout: 200,
                 ignored: /[\/\\]node_modules[\/\\].*\.js$/
             },
@@ -319,44 +321,6 @@ class ConfigBuilder {
                     /[\/\\]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')
-                                    ]
-                                }
-                            }
-                        }, {
-                            loader: 'sass-loader',
-                            options: {
-                                implementation: require('sass'),
-                                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',
@@ -502,7 +466,10 @@ class ConfigBuilder {
                 );
             }
         }
-        let {rtl_support: rtlSupport = false, resolve_extra_paths: resolveExtraPaths = []} = themeDefinition;
+        let {
+            rtl_support: rtlSupport = false,
+            resolve_extra_paths: resolveExtraPaths = []
+        } = themeDefinition;
         const resolvedBuildPath = path.join(this.resolvedPublicPath, buildPublicPath);
 
         if (resolveExtraPaths.length) {
@@ -534,10 +501,6 @@ class ConfigBuilder {
             }));
         }
 
-        if (!skipCSS) {
-            plugins.push(new CssToJsonPlugin());
-        }
-
         const cssEntryPoints = !skipCSS ? this._getCssEntryPoints(buildName, buildPublicPath) : {};
         const jsEntryPoints = !skipJS ? jsBuildConfig.entry : {};
 
@@ -563,6 +526,45 @@ class ConfigBuilder {
             plugins,
             module: {
                 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')
+                                    ]
+                                }
+                            }
+                        }, {
+                            loader: 'sass-loader',
+                            options: {
+                                implementation: require('sass'),
+                                sassOptions: {
+                                    includePaths: [
+                                        path.join(this.resolvedPublicPath, '/bundles')
+                                    ],
+                                    outputStyle: 'expanded'
+                                },
+                                sourceMap: true,
+                                additionalData: this.prepareAdditionalSCSS.bind(this, themeDefinition)
+                            }
+                        }]
+                    },
                     {
                         test: /[\/\\]configs\.json$/,
                         loader: 'config-loader',
@@ -577,6 +579,18 @@ class ConfigBuilder {
         };
     }
 
+    prepareAdditionalSCSS(theme, content, loaderContext) {
+        if (typeof theme.fonts === 'object') {
+            const fonts = {};
+            for (const [name, {family, formats, variants}] of Object.entries(theme.fonts)) {
+                fonts[name] = {family, formats, variants};
+            }
+            return jsToSCSS.createFontList({fonts}) + content;
+        }
+
+        return content;
+    }
+
     _initialize(args, env) {
         const entryPointFileWriter = new EntryPointFileWriter(this._publicPath);
 
@@ -608,6 +622,14 @@ class ConfigBuilder {
             this.resolvedProjectPath,
             this._publicPath
         );
+
+        for (const [theme, config] of Object.entries(this._layoutModulesConfigLoader.themes)) {
+            validation.themeValidator.checkFullSchema(
+                config,
+                this._layoutModulesConfigLoader.processedFiles,
+                theme
+            );
+        }
         this._layoutStyleLoader = new LayoutStyleLoader(this._layoutModulesConfigLoader, entryPointFileWriter);
         this._layoutThemeConfigFactory = new ThemeConfigFactory(
             this._layoutModulesConfigLoader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oroinc/oro-webpack-config-builder",
-  "version": "6.1.0-lts06",
+  "version": "6.1.0-lts08",
   "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,7 +30,6 @@
     "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/utils.js

@@ -1,7 +1,7 @@
 let prodMode;
 let verboseMode;
 
-const utils = {
+module.exports = {
     isVerboseMode() {
         if (verboseMode === void 0) {
             verboseMode = process.argv.filter(arg => {
@@ -13,7 +13,6 @@ const utils = {
 
         return verboseMode;
     },
-
     isProdMode() {
         if (prodMode !== void 0) {
             return prodMode;
@@ -27,18 +26,5 @@ const utils = {
         });
 
         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/validation/errors/theme-scheme-error.js

@@ -0,0 +1,36 @@
+const BaseError = require('./base-error');
+
+class SvgIconsSchemaError extends BaseError {
+    /**
+     * @example
+     * Invalid SVG config: the "svg-icons.yml" files in the "default" theme do not match the API schema.
+     * has an unknown property 'rest'.
+     * at default/config/svg-icons.yml
+     *
+     * @example
+     * Invalid SVG config: the "svg-icons.yml" files in the "default" theme do not match the API schema.
+     * misses the property 'exclude'.
+     * List of processed files for the "default" theme:
+     *     /default/config/svg-icons.yml
+     *     /default/config/svg-icons.yml
+     *
+     * @param {string} reason
+     * @param {Array} files
+     * @param {string} theme
+     */
+    constructor(reason, files, theme) {
+        let msg = `the "theme.yml" files in the "${theme}" theme do not match the API schema.\n${reason}`;
+
+        const filesListMsg = BaseError.generateFilesListMsg(files, theme);
+
+        if (filesListMsg.length) {
+            msg = `${msg}\n${filesListMsg}`;
+        }
+
+        super(msg);
+
+        this.name = 'Invalid Theme config';
+    }
+}
+
+module.exports = SvgIconsSchemaError;

package/validation/index.js

@@ -1,15 +1,18 @@
 const assetsValidation = require('./assets-validator');
 const jsmodulesValidator = require('./jsmodules-validator');
 const svgIconsValidator = require('./svg-icons-validator');
+const themeValidator = require('./theme-validator');
 
 const isJSModulesPath = path => /jsmodules([-a-zA-Z\d]*)\.yml$/.test(path);
 const isAssetsPath = path => /assets\.yml$/.test(path);
 const isSvgIconsPath = path => /svg-icons\.yml$/.test(path);
+const isThemePath = path => /theme\.yml$/.test(path);
 
 module.exports = {
     assetsValidation,
     jsmodulesValidator,
     svgIconsValidator,
+    themeValidator,
 
     /**
      * set public path for all validators
@@ -36,6 +39,8 @@ module.exports = {
             }
         } else if (isSvgIconsPath(filePath)) {
             svgIconsValidator.checkSchema(filePath, doc, theme);
+        } else if (isThemePath(filePath)) {
+            themeValidator.checkSchema(filePath, doc, theme);
         }
     }
 };

package/validation/schemas/svg-icons-schema-full.js

@@ -10,7 +10,7 @@ module.exports = {
     type: 'object',
     properties: {
         exclude: {
-            description: 'The "exclude" property is an array of  svg files to exclude from svg sprite.',
+            description: 'The "exclude" property is an array of svg files to exclude from svg sprite.',
             type: 'array',
             minItems: 0
         }

package/validation/schemas/theme-schema-full.js

@@ -0,0 +1,11 @@
+/**
+ * Schema to validate theme.yml files
+ *
+ * @description
+ * Full scheme complements "theme-schema" one.
+ * It should have only rules which are not defined in "theme-schema" schema due to avoid duplicates in error messages
+ */
+module.exports = {
+    type: 'object',
+    required: ['label']
+};

package/validation/schemas/theme-schema.js

@@ -0,0 +1,83 @@
+/**
+ * Schema to validate theme.yml files
+ */
+module.exports = {
+    type: 'object',
+    properties: {
+        label: {
+            type: 'string'
+        },
+        description: {
+            type: 'string'
+        },
+        groups: {
+            type: 'array',
+            items: {
+                type: 'string'
+            }
+        },
+        icon: {
+            type: 'string'
+        },
+        logo: {
+            type: 'string'
+        },
+        logo_small: {
+            type: 'string'
+        },
+        rtl_support: {
+            type: 'boolean'
+        },
+        svg_icons_support: {
+            type: 'boolean'
+        },
+        fonts: {
+            type: 'object',
+            patternProperties: {
+                '.*': {
+                    type: 'object',
+                    required: ['family', 'variants', 'formats'],
+                    additionalProperties: false,
+                    properties: {
+                        family: {
+                            type: 'string'
+                        },
+                        variants: {
+                            type: 'array',
+                            items: {
+                                type: 'object',
+                                required: ['path'],
+                                additionalProperties: false,
+                                properties: {
+                                    path: {
+                                        type: 'string'
+                                    },
+                                    weight: {
+                                        anyOf: [{
+                                            type: 'string'
+                                        }, {
+                                            type: 'integer'
+                                        }]
+                                    },
+                                    style: {
+                                        type: 'string'
+                                    }
+                                }
+                            }
+                        },
+                        formats: {
+                            type: 'array',
+                            items: {
+                                type: 'string'
+                            }
+                        },
+                        preload: {
+                            type: 'boolean'
+                        }
+                    }
+                }
+            }
+        }
+    }
+};
+

package/validation/svg-icons-validator.js

@@ -4,7 +4,7 @@ const schemaValidator = require('./schema-validator');
 const {isProdMode} = require('../utils');
 const EventEmitter = require('events');
 const emitter = new EventEmitter();
-const SvgIsonsSchemaError = require('./errors/svg-icons-schema-error');
+const SvgIconsSchemaError = require('./errors/svg-icons-schema-error');
 
 module.exports = Object.assign({}, schemaValidator, {
     emitter,
@@ -22,7 +22,7 @@ module.exports = Object.assign({}, schemaValidator, {
         const result = this.validateSchema(schema, doc);
 
         if (!result.valid) {
-            const error = new SvgIsonsSchemaError(result.formattedError, [filePath], theme);
+            const error = new SvgIconsSchemaError(result.formattedError, [filePath], theme);
 
             this.emitter.emit('error', error);
         }
@@ -43,7 +43,7 @@ module.exports = Object.assign({}, schemaValidator, {
         const result = this.validateSchema(fullSchema, doc);
 
         if (!result.valid) {
-            const error = new SvgIsonsSchemaError(result.formattedError, files, theme);
+            const error = new SvgIconsSchemaError(result.formattedError, files, theme);
 
             this.emitter.emit('error', error);
         }

package/validation/theme-validator.js

@@ -0,0 +1,53 @@
+const schema = require('./schemas/theme-schema');
+const fullSchema = require('./schemas/theme-schema-full');
+const schemaValidator = require('./schema-validator');
+const {isProdMode} = require('../utils');
+const EventEmitter = require('events');
+const emitter = new EventEmitter();
+const ThemeSchemaError = require('./errors/theme-scheme-error');
+
+module.exports = Object.assign({}, schemaValidator, {
+    emitter,
+
+    /**
+     * @param {string} filePath
+     * @param {Object} doc
+     * @param {string} theme
+     * @returns {boolean|undefined}
+     */
+    checkSchema(filePath, doc, theme) {
+        if (isProdMode()) {
+            return;
+        }
+        const result = this.validateSchema(schema, doc);
+
+        if (!result.valid) {
+            const error = new ThemeSchemaError(result.formattedError, [filePath], theme);
+
+            this.emitter.emit('error', error);
+        }
+
+        return result.valid;
+    },
+
+    /**
+     * @param {Object} doc
+     * @param {Array} files
+     * @param {string} theme
+     * @returns {boolean|undefined}
+     */
+    checkFullSchema(doc, files = [], theme) {
+        if (isProdMode()) {
+            return;
+        }
+        const result = this.validateSchema(fullSchema, doc);
+
+        if (!result.valid) {
+            const error = new ThemeSchemaError(result.formattedError, files, theme);
+
+            this.emitter.emit('error', error);
+        }
+
+        return result.valid;
+    }
+});

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

@@ -1,66 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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;