fix: STRF-11419 Move scss file matching logic to stencil-styles (#1149)

bigcommerce · Nov 28, 2023 · 2d21f69 · 2d21f69
1 parent 24b5dba
commit 2d21f69
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 1,178 deletions.
diff --git a/lib/ScssValidator.js b/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);
  }
 }