fix: STRF-10768 Stencil bundle fails on some (#1101)

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,44 +58,65 @@ 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);
+                    }
                 }
             }
         }
 
         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

lib/stencil-bundle.spec.js

@@ -50,13 +50,16 @@ describe('Stencil Bundle', () => {
 
     it('should assemble CSS files', async () => {
         jest.spyOn(async, 'map').mockImplementation((coll, iteratee, cb) =>
-            cb(null, ['this is dog']),
+            cb(null, ['this is dog', 'this is not']),
         );
 
         const task = bundle.getCssAssembleTask('scss');
         const result = await promisify(task.bind(bundle))();
 
-        expect(result).toEqual({ 'theme.scss': 'this is dog' });
+        expect(result).toEqual({
+            'checkout.scss': 'this is dog',
+            'theme.scss': 'this is not',
+        });
     });
 
     it('should error on assemble CSS files', async () => {

package.json

@@ -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",

test/_mocks/themes/valid/assets/custom/css/test.css

@@ -0,0 +1,3 @@
+.test {
+    color: red;
+}

test/_mocks/themes/valid/assets/scss/checkout.scss

@@ -0,0 +1,3 @@
+h2 {
+    color: #0000AA;
+}

test/_mocks/themes/valid/templates/components/b.html

@@ -1 +1,7 @@
 b
+
+
+<!-- test
+{{{stylesheet '/assets/custom/css/test.css'}}} -->
+
+more text here

test/_mocks/themes/valid/templates/pages/page.html

@@ -7,6 +7,8 @@
 <head>
     <title>page.html</title>
     {{head.scripts}}
+    {{{stylesheet '/assets/css/theme.css'}}}
+    {{{stylesheet '/assets/css/checkout.css'}}}
 </head>
 <body>
     {{#if theme_settings.display_that}}