@bigcommerce/stencil-cli 7.2.2 → 7.3.0

package/lib/bundle-validator.js

@@ -15,6 +15,7 @@ const privateThemeConfigValidationSchema = require('./schemas/privateThemeConfig
 const themeConfigValidationSchema = require('./schemas/themeConfig.json');
 const themeValidationSchema = require('./schemas/themeSchema.json');
 const ScssValidator = require('./ScssValidator');
+const LangHelpersValidator = require('./lang/validator');
 
 const VALID_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', '.gif'];
 const WIDTH_COMPOSED = 600;
@@ -42,6 +43,7 @@ class BundleValidator {
         this.objectsToValidate = ['head.scripts', 'footer.scripts'];
         this.jsonSchemaValidatorOptions = { schemaId: 'auto', allErrors: true };
         this.scssValidator = new ScssValidator(themePath, themeConfig);
+        this.langHelpersValidator = new LangHelpersValidator(themePath, themeConfig);
 
         // Array of tasks used in async.series
         this.validationTasks = [
@@ -50,6 +52,7 @@ class BundleValidator {
             this._validateSchemaTranslations.bind(this),
             this._validateTemplatesFrontmatter.bind(this),
             this._validateCssFiles.bind(this),
+            this._validateLangFiles.bind(this),
         ];
 
         if (!this.isPrivate) {
@@ -405,6 +408,10 @@ class BundleValidator {
         return true;
     }
 
+    async _validateLangFiles() {
+        await this.langHelpersValidator.run();
+    }
+
     async _validateCssFiles() {
         await this.scssValidator.run();
     }

package/lib/lang/validator.js

@@ -0,0 +1,113 @@
+require('colors');
+const fs = require('fs');
+const path = require('path');
+const { recursiveReadDir } = require('../utils/fsUtils');
+
+const LANG_HELPER_REGEXP = /{{\s*lang\s*(?:'|")((?:\w*(?:-\w*)*(\.\w*(?:-\w*)*)*)+)/gim;
+
+class LangpathsValidator {
+    /**
+     *
+     * @param {String} themePath
+     */
+    constructor(themePath) {
+        this.themePath = themePath;
+    }
+
+    async run(defaultLang = null) {
+        const templatesPath = path.join(this.themePath, 'templates');
+        const paths = await this.getLangHelpersPaths(templatesPath);
+        const dedupePaths = [...new Set(paths)];
+        const langFiles = await this.getLangFilesContent(defaultLang);
+        const errors = this.validate(dedupePaths, langFiles);
+        this.printErrors(errors);
+        return errors;
+    }
+
+    printErrors(errors) {
+        if (errors.length > 0) {
+            console.log(
+                'Warning: Your theme has some missing translations used in the theme:'.yellow,
+            );
+            console.log(errors.join('\n').yellow);
+        }
+    }
+
+    searchLangPaths(fileContent, langPath) {
+        const keys = langPath.split('.');
+        let value = fileContent;
+
+        for (const key of keys) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (value && value.hasOwnProperty(key)) {
+                value = value[key];
+            } else {
+                return false;
+            }
+        }
+
+        return value;
+    }
+
+    validate(paths, langFiles) {
+        const errors = [
+            ...this.checkLangFiles(langFiles),
+            ...this.checkForMissingTranslations(paths, langFiles),
+        ];
+        return errors;
+    }
+
+    checkForMissingTranslations(paths, langFiles) {
+        const errors = [];
+        for (const langPath of paths) {
+            // eslint-disable-next-line no-restricted-syntax,guard-for-in
+            for (const langFile in langFiles) {
+                const translation = this.searchLangPaths(langFiles[langFile], langPath);
+                if (!translation) {
+                    errors.push(`Missing translation for ${langPath} in ${langFile}`);
+                }
+            }
+        }
+        return errors;
+    }
+
+    checkLangFiles(files) {
+        if (files.length === 0) {
+            return ['No lang files found in your theme'];
+        }
+        return [];
+    }
+
+    async getLangHelpersPaths(templatesPath) {
+        const files = await recursiveReadDir(templatesPath);
+        const paths = [];
+        for await (const file of files) {
+            const content = await fs.promises.readFile(file, { encoding: 'utf-8' });
+            const result = content.matchAll(LANG_HELPER_REGEXP);
+            const arr = [...result];
+            if (arr.length > 0) {
+                const langPath = arr[0][1];
+                paths.push(langPath);
+            }
+        }
+        return paths;
+    }
+
+    async getLangFilesContent(defaultLang = null) {
+        const filesContent = {};
+        const langPath = path.join(this.themePath, 'lang');
+        let files = await recursiveReadDir(langPath);
+
+        if (defaultLang) {
+            files = files.filter((file) => file.includes(defaultLang));
+        }
+
+        for await (const file of files) {
+            const content = await fs.promises.readFile(file, { encoding: 'utf-8' });
+            filesContent[file] = JSON.parse(content);
+        }
+        return filesContent;
+    }
+}
+
+module.exports = LangpathsValidator;

package/lib/nodeSass/AutoFixer.js

@@ -109,7 +109,7 @@ class AutoFixer {
             }
             if (
                 err.formatted.includes('Invalid CSS after') &&
-                err.formatted.includes('expected selector, was ', '')
+                err.formatted.includes('expected selector, was ",')
             ) {
                 return POSSIBLE_WRONG_COMMA;
             }

package/lib/nodeSass/BaseRulesFixer.js

@@ -13,19 +13,28 @@ class BaseRulesFixer extends BaseFixer {
     }
 
     transform() {
+        const self = this;
         return {
             postcssPlugin: 'Transform Base Rules Issues into Comments',
             Rule(rule, { Comment }) {
                 if (
                     rule.parent.type === 'root' &&
-                    (rule.selector.startsWith('&--') || rule.selector.startsWith('&.'))
+                    (rule.selector.startsWith('&') ||
+                        rule.selector.startsWith(':not(&)') ||
+                        rule.selector.startsWith('* &'))
                 ) {
-                    const comment = new Comment({ text: rule.toString() });
+                    const comment = new Comment({ text: self.replaceInnerComments(rule) });
                     rule.replaceWith(comment);
                 }
             },
         };
     }
+
+    // when we replace rule with comment, there might be a case when comment is inside another rule
+    // which breaks the commenting root rule
+    replaceInnerComments(rule) {
+        return rule.toString().replace(/\/\*(.*)\*\//g, '//$1');
+    }
 }
 
 module.exports = BaseRulesFixer;

package/lib/stencil-start.js

@@ -16,6 +16,7 @@ const cliCommonModule = require('./cliCommon');
 const themeApiClientModule = require('./theme-api-client');
 const storeSettingsApiClientModule = require('./store-settings-api-client');
 const LangHelper = require('./lang-helper');
+const LangValidator = require('./lang/validator');
 
 class StencilStart {
     constructor({
@@ -32,6 +33,7 @@ class StencilStart {
         CyclesDetector = Cycles,
         stencilPushUtils = stencilPushUtilsModule,
         logger = console,
+        langValidator = new LangValidator(THEME_PATH),
     } = {}) {
         this._browserSync = browserSync;
         this._themeApiClient = themeApiClient;
@@ -46,6 +48,7 @@ class StencilStart {
         this._CyclesDetector = CyclesDetector;
         this._stencilPushUtils = stencilPushUtils;
         this._logger = logger;
+        this._langValidator = langValidator;
     }
 
     async run(cliOptions) {
@@ -289,6 +292,7 @@ class StencilStart {
         } else {
             try {
                 await this._langHelper.checkLangKeysPresence(filesPaths, defaultShopperLanguage);
+                await this._langValidator.run(defaultShopperLanguage);
             } catch (e) {
                 this._logger.error(e);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "7.2.2",
+  "version": "7.3.0",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {