@bigcommerce/stencil-cli 7.1.0 → 7.1.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "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",