fix: STRF-11740 Rewrote logic for retrieving stylesheets (#94)

bigcommerce · Feb 15, 2024 · 93a5b95 · 93a5b95
1 parent 8980b41
commit 93a5b95
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/lib/StylesheetsFileResolver.js b/lib/StylesheetsFileResolver.js
@@ -18,43 +18,44 @@ class StylesheetsFileResolver {
         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);
-                    }
-                }
-            }
+            const currentCssFiles = this.getStylesheets(content);
+            cssFiles.push(...currentCssFiles);
         }
 
         return cssFiles;
     }
 
-    isStyleSheetAComment(content, cssFilePath) {
+    extractFileNameFromMatchedResult(item) {
+        // remove quotes
+        const filePath = item[1].slice(1, -1);
+        const fileName = this.tryToResolveCssFileLocation(filePath);
+        return  fileName;
+    }
+
+    getStylesheets(content) {
+        const self = this;
+        const stylesheets = [];
         const $ = cheerio.load(content);
-        const comments = $('*')
+        // ignore non-text nodes (like comments, etc.)
+        const stylesheetTexts = $('*')
             .contents()
             .filter(function () {
-                // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#node.comment_node
-                return this.nodeType === 8;
+                return this.type === "text" && this.data && this.data.includes('stylesheet');
+            })
+            .map(function() {
+                return $(this).text();
             });
-        for (const comment of comments) {
-            const { data } = comment;
-            if (data && data.includes('stylesheet') && data.includes(cssFilePath) && !this.alreadyExlcudedComments.includes(data)) {
-                this.alreadyExlcudedComments.push(data);
-                return true;
+        // extract stylesheet paths from the text nodes and add them to the array
+        for (const node of stylesheetTexts) {
+            const result = node.matchAll(STYLESHEET_REGEXP);
+            if (result) {
+                for (const item of result) {
+                    const extracted = self.extractFileNameFromMatchedResult(item);
+                    stylesheets.push(extracted);
+                }
             }
         }
-
-        return false;
+        return stylesheets;
     }
 
     // returns relative path starting from root scss/css folder

diff --git a/test/mocks/themes/invalid/templates/pages/page2.html b/test/mocks/themes/invalid/templates/pages/page2.html
@@ -3,11 +3,15 @@
 <head>
     <title>page2.html</title>
     {{head.scripts}}
+   <!--{{{stylesheet '/assets/css/test.css' rel="stylesheet"}}}-->
+   <!--{{stylesheet '/assets/css/test.css' }}-->
+    <!--{{ stylesheet  "assets/css/commented.css" }} -->
+
     {{ stylesheet     "assets/css/test.css"    }}
-    /* {{ stylesheet  "assets/css/test.css" }} */
-    /* {{ stylesheet  "assets/css/test.css" }} */
-    /* {{ stylesheet  "assets/css/test.css" }} */
-    /* {{ stylesheet  "assets/css/commented.css" }} */
+    <!-- {{ stylesheet     "assets/css/test3.css"    }}
+    <style>
+
+    </style> -->
 </head>
 <body>
     <h1>{{theme_settings.customizable_title}}</h1>