@bigcommerce/stencil-cli 7.2.3 → 7.3.1

package/lib/ScssValidator.js

@@ -1,13 +1,8 @@
 require('colors');
-const fs = require('fs');
 const path = require('path');
-const cheerio = require('cheerio');
+const StencilStyles = require('@bigcommerce/stencil-styles');
 
 const cssCompiler = require('./css/compile');
-const { recursiveReadDir } = require('./utils/fsUtils');
-
-/* eslint-disable no-useless-escape */
-const STYLESHEET_REGEXP = /{{\s*stylesheet\s*([\/a-zA-Z'"\.-]+)\s*}}/gi;
 
 class ScssValidator {
     /**
@@ -52,92 +47,9 @@ class ScssValidator {
         return e.message;
     }
 
-    async getCssFiles() {
-        const templatesPath = path.join(this.themePath, 'templates');
-        const files = await recursiveReadDir(templatesPath);
-        const cssFiles = [];
-        for await (const file of files) {
-            const content = await fs.promises.readFile(file, { encoding: 'utf-8' });
-            const result = content.matchAll(STYLESHEET_REGEXP);
-            if (result) {
-                for (const item of result) {
-                    // remove quotes
-                    const filePath = item[1].slice(1, -1);
-                    const fileName = this.tryToResolveCssFileLocation(filePath);
-                    if (
-                        fileName &&
-                        !this.isStyleSheetAComment(content, filePath) &&
-                        !cssFiles.includes(fileName)
-                    ) {
-                        cssFiles.push(fileName);
-                    }
-                }
-            }
-        }
-
-        return cssFiles;
-    }
-
-    isStyleSheetAComment(content, cssFilePath) {
-        const $ = cheerio.load(content);
-        const comments = $('*')
-            .contents()
-            .filter(function () {
-                return this.nodeType === 8;
-            });
-        for (const comment of comments) {
-            const { data } = comment;
-            if (data && data.includes('stylesheet') && data.includes(cssFilePath)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    // returns relative path starting from root scss/css folder
-    tryToResolveCssFileLocation(filePath) {
-        const possibleLocations = [
-            filePath,
-            filePath.replace('/css/', '/scss/'),
-            filePath.replace('/scss/', '/css/'),
-            filePath.replace('/css/', '/scss/').replace('.css', '.scss'),
-            filePath.replace('/scss/', '/css/').replace('.scss', '.css'),
-        ];
-
-        for (const location of possibleLocations) {
-            const fullFilePath = path.join(this.themePath, location);
-            if (fs.existsSync(fullFilePath)) {
-                if (fullFilePath.endsWith('.css')) {
-                    return null;
-                }
-                if (!this.isRootCssFile(location)) {
-                    return this.getCssFileWithoutRootFolder(location);
-                }
-                const fileParts = path.parse(fullFilePath);
-                return fileParts.name;
-            }
-        }
-
-        console.log(`Couldn't validate scss compilation for this file path: ${filePath}`.yellow);
-        return null;
-    }
-
-    // root folders are /assets/css /assets/scss
-    // so after split, there can be 3 or 4 elements in the array (depending if the leading slash is present)
-    isRootCssFile(location) {
-        return location.split('/').length <= 4;
-    }
-
-    getCssFileWithoutRootFolder(location) {
-        const locationParts = location.split('/');
-        if (locationParts[0] === '') {
-            locationParts.shift();
-        }
-        locationParts.shift();
-        locationParts.shift();
-
-        return locationParts.join('/');
+    getCssFiles() {
+        const styles = new StencilStyles();
+        return styles.getCssFiles(this.themePath);
     }
 }
 

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/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.3",
+  "version": "7.3.1",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@bigcommerce/stencil-paper": "4.10.4",
-    "@bigcommerce/stencil-styles": "5.1.0",
+    "@bigcommerce/stencil-styles": "5.2.0",
     "@hapi/boom": "^10.0.0",
     "@hapi/glue": "^8.0.0",
     "@hapi/h2o2": "^9.1.0",