@bigcommerce/stencil-cli 7.1.0 → 7.1.2

package/lib/ScssValidator.js

@@ -1,12 +1,13 @@
 require('colors');
 const fs = require('fs');
 const path = require('path');
+const cheerio = require('cheerio');
 
 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*}}/i;
+const STYLESHEET_REGEXP = /{{\s*stylesheet\s*([\/a-zA-Z'"\.-]+)\s*}}/gi;
 
 class ScssValidator {
     /**
@@ -36,7 +37,6 @@ class ScssValidator {
                 );
             } catch (e) {
                 const message = this.parseStencilStylesError(e);
-                console.log(e.file);
                 throw new Error(
                     `${message} while compiling css files from "${stylesPath}/${file}".`.red,
                 );
@@ -58,15 +58,18 @@ class ScssValidator {
         const cssFiles = [];
         for await (const file of files) {
             const content = await fs.promises.readFile(file, { encoding: 'utf-8' });
-            const result = content.match(STYLESHEET_REGEXP);
+            const result = content.matchAll(STYLESHEET_REGEXP);
             if (result) {
-                // remove quotes
-                const fileName = result[1].slice(1, -1);
-
-                const filePath = this.tryToResolveCssFileLocation(fileName, result);
-                if (!cssFiles.includes(filePath)) {
-                    // check if file exist
-                    cssFiles.push(filePath);
+                for (const item of result) {
+                    // remove quotes
+                    const filePath = item[1].slice(1, -1);
+                    const fileName = this.tryToResolveCssFileLocation(filePath);
+                    if (
+                        !this.isStyleSheetAComment(content, filePath) &&
+                        !cssFiles.includes(fileName)
+                    ) {
+                        cssFiles.push(fileName);
+                    }
                 }
             }
         }
@@ -74,28 +77,46 @@ class ScssValidator {
         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(fileName, result) {
+    tryToResolveCssFileLocation(filePath) {
         const possibleLocations = [
-            fileName,
-            fileName.replace('/css/', '/scss/'),
-            fileName.replace('/scss/', '/css/'),
-            fileName.replace('/css/', '/scss/').replace('.css', '.scss'),
-            fileName.replace('/scss/', '/css/').replace('.scss', '.css'),
+            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 filePath = path.join(this.themePath, location);
-            if (fs.existsSync(filePath)) {
+            const fullFilePath = path.join(this.themePath, location);
+            if (fs.existsSync(fullFilePath)) {
                 if (!this.isRootCssFile(location)) {
                     return this.getCssFileWithoutRootFolder(location);
                 }
-                const fileParts = path.parse(filePath);
+                const fileParts = path.parse(fullFilePath);
                 return fileParts.name;
             }
         }
 
-        throw new Error(`Couldn't find file for this statement: ${result[0]}`.red);
+        console.log(`Couldn't validate scss compilation for this file path: ${filePath}`.yellow);
+        return null;
     }
 
     // root folders are /assets/css /assets/scss

package/lib/stencil-pull.js

@@ -12,6 +12,7 @@ function stencilPull(options = {}, callback) {
             stencilPushUtils.promptUserForChannel,
             stencilPullUtils.getChannelActiveTheme,
             stencilPullUtils.getThemeConfiguration,
+            stencilPullUtils.getCurrentVariation,
             stencilPullUtils.mergeThemeConfiguration,
         ],
         callback,

package/lib/stencil-pull.utils.js

@@ -26,6 +26,28 @@ utils.getChannelActiveTheme = async (options) => {
     return { ...options, activeTheme };
 };
 
+utils.getCurrentVariation = async (options) => {
+    const {
+        config: { accessToken },
+        storeHash,
+        activeTheme,
+        saved,
+        remoteThemeConfiguration,
+    } = options;
+    const apiHost = options.apiHost || options.config.apiHost;
+    const themeId = activeTheme.active_theme_uuid;
+    const variations = await themeApiClient.getVariationsByThemeId({
+        accessToken,
+        apiHost,
+        storeHash,
+        themeId,
+    });
+    const variation = variations.find((v) => v.uuid === remoteThemeConfiguration.variation_uuid);
+
+    console.log('ok'.green + ` -- Fetched ${saved ? 'saved' : 'active'} variation name`);
+    return { ...options, variation };
+};
+
 utils.getThemeConfiguration = async (options) => {
     const {
         config: { accessToken },
@@ -59,6 +81,7 @@ utils.mergeThemeConfiguration = async (options) => {
     const { remoteThemeConfiguration } = options;
 
     const localConfig = await parseJsonFile('config.json');
+    const variation = localConfig.variations.find((v) => v.name === options.variation.name);
     let diffDetected = false;
 
     // For any keys the remote configuration has in common with the local configuration,
@@ -67,19 +90,22 @@ utils.mergeThemeConfiguration = async (options) => {
         if (!(key in localConfig.settings)) {
             continue;
         }
-        const localVal = localConfig.settings[key];
+        const defaultVal = localConfig.settings[key];
 
         // Check for different types, and throw an error if they are found
-        if (typeof localVal !== typeof remoteVal) {
+        if (typeof defaultVal !== typeof remoteVal) {
             throw new Error(
                 `Theme configuration key "${key}" cannot be merged because it is not of the same type. ` +
-                    `Remote configuration is of type ${typeof remoteVal} while local configuration is of type ${typeof localVal}.`,
+                    `Remote configuration is of type ${typeof remoteVal} while local configuration is of type ${typeof defaultVal}.`,
             );
         }
 
         // If a different value is found, overwrite the local config
-        if (!_.isEqual(localVal, remoteVal)) {
-            localConfig.settings[key] = remoteVal;
+        if (!_.isEqual(defaultVal, remoteVal)) {
+            if (!variation.settings) {
+                variation.settings = {};
+            }
+            variation.settings[key] = remoteVal;
             diffDetected = true;
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "7.1.0",
+  "version": "7.1.2",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
@@ -61,7 +61,7 @@
     "async": "^3.2.3",
     "axios": "^0.27.2",
     "browser-sync": "^2.27.9",
-    "cheerio": "^1.0.0-rc.10",
+    "cheerio": "^1.0.0-rc.12",
     "colors": "1.4.0",
     "commander": "^6.1.0",
     "confidence": "^5.0.1",