feat: STRF-11834 Consolidate css assembling logic (#117)

Author: jairo-bc

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,27 @@
+Jira: [JIRA_TOKEN](https://bigcommercecloud.atlassian.net/browse/JIRA_TOKEN)
+
+## What/Why?
+<!---
+  A description about what this pull request implements and its purpose.
+  Try to be detailed and describe any technical details to simplify the job
+  of the reviewer and the individual on production support.
+--->
+
+## Rollout/Rollback
+<!--
+Detail how this change will be rolled out. Include reference to any
+experiments and how the success will be measured as the experiment is
+ramped.
+
+Document rollback procedures. Is rolling back the change as simple as
+rolling back an experiment or does it require reverting code? Are there
+database migrations that may change our decision to roll forward instead of
+back?
+-->
+
+## Testing
+<!---
+Provide as much information as you can about how you tested and how another
+Engineer can test your change. Include screenshots, or test run output
+where appropriate.
+--->

lib/CssAssembler.js

@@ -0,0 +1,99 @@
+const async = require('async');
+const fs = require('fs');
+const path = require('path');
+const upath = require('upath');
+
+const importRegex = /@import\s+?["'](.+?)["'];/g;
+
+/**
+ * Parses all of the imports for SCSS files and returns a flat object with the file path as the key and
+ * file content as the value.
+ *
+ * @param {Array|string} cssFiles 
+ * @param {string} absolutePath
+ * @param {string} type - scss | css
+ * @param options - options object { bundle: boolean }
+ * @param callback
+ */
+function assemble(cssFiles, absolutePath, type, options, callback) {
+    const ret = {};
+    const ext = `.${type}`;
+
+    const cssFilesArr = Array.isArray(cssFiles) ? cssFiles : [cssFiles];
+
+    const parseImports = (cssFileAlias, parseImportsCallback) => {
+        const normalizedCssFileAlias = cssFileAlias.replace(/(\.scss)$/g, '');
+        const typedCssFilePath = path.join(absolutePath, normalizedCssFileAlias + ext);
+        const rawCssFilePath = path.join(absolutePath, normalizedCssFileAlias + '.css');
+        const cssFileAliasDir = path.parse(normalizedCssFileAlias).dir;
+
+        const fileParts = path.parse(typedCssFilePath);
+        const underscoredFilePath = path.join(fileParts.dir, `_${fileParts.base}`);
+        let filePath;
+
+        if (fs.existsSync(typedCssFilePath)) {
+            filePath = typedCssFilePath;
+        } else if (fs.existsSync(underscoredFilePath)) {
+            filePath = underscoredFilePath;
+        } else if (ext === '.scss' && fs.existsSync(rawCssFilePath)) {
+            filePath = rawCssFilePath;
+        } else {
+            // File doesn't exist, just return to skip it
+            parseImportsCallback();
+            return;
+        }
+
+        fs.readFile(filePath, { encoding: 'utf-8' }, (err, content) => {
+            const matches = [];
+            let match;
+            let importCssFileAlias;
+
+            if (!err) {
+                // Ensure all import paths are Unix paths for prod compat.
+                const cssFile = options.bundle
+                    ? upath.toUnix(normalizedCssFileAlias + ext)
+                    : normalizedCssFileAlias + ext;
+
+                ret[cssFile] = content;
+                match = importRegex.exec(content);
+
+                while (match !== null) {
+                    [, importCssFileAlias] = match;
+                    if (cssFileAliasDir) {
+                        importCssFileAlias = path.join(cssFileAliasDir, importCssFileAlias);
+                    }
+
+                    if (!ret[importCssFileAlias + ext]) {
+                        matches.push(importCssFileAlias);
+                    }
+
+                    match = importRegex.exec(content);
+                }
+            }
+
+            async.each(matches, parseImports, parseImportsCallback);
+        });
+    };
+
+    async.map(
+        cssFilesArr,
+        (cssFile, mapCallback) => {
+            const cssFileParts = path.parse(cssFile);
+            const cssFileAlias = path.join(cssFileParts.dir, cssFileParts.name);
+
+            parseImports(cssFileAlias, mapCallback);
+        },
+        (err) => {
+            if (err) {
+                callback(err);
+                return;
+            }
+
+            callback(null, ret);
+        },
+    );
+}
+
+module.exports = {
+    assemble,
+};

lib/styles.js

@@ -1,7 +1,10 @@
 const autoprefixer = require('autoprefixer');
 const postcss = require('postcss');
+const { promisify } = require('util');
+
 const ScssCompiler = require("./ScssCompiler");
 const StylesheetsFileResolver = require('./StylesheetsFileResolver');
+const CssAssembler = require('./CssAssembler');
 
 class StencilStyles {
     /**
@@ -33,9 +36,16 @@ class StencilStyles {
     }
 
     autoPrefix(css, autoprefixerOptions) {
+        if (!css || (typeof css !== 'string' && !(css instanceof Buffer))) {
+            return "";
+        }
+        if (!autoprefixerOptions || Object.keys(autoprefixerOptions).length === 0) {
+            return css;
+        }
         const payload = typeof css === 'string' || css instanceof Buffer ? css : '';
         let output = css;
 
+        // todo check if autoprefixerOptions is not an empty object
         try {
             output = postcss([autoprefixer(autoprefixerOptions)]).process(payload).css;
         } catch (e) {
@@ -57,6 +67,11 @@ class StencilStyles {
         const resolver = new StylesheetsFileResolver(themePath);
         const files = await resolver.get();
         return files;
+    }
+
+    async assembleCssFiles(cssFiles, absolutePath, type, options) {
+        const assemble = promisify(CssAssembler.assemble);
+        return assemble(cssFiles, absolutePath, type, options);
     } 
 }
 

package-lock.json

@@ -28,18 +28,20 @@
     "lib/"
   ],
   "dependencies": {
+    "async": "^3.2.6",
     "autoprefixer": "^10.4.20",
     "cheerio": "^1.0.0-rc.12",
     "lodash": "^4.17.21",
     "node-sass": "^9.0.0",
     "postcss": "^8.4.45",
     "recursive-readdir": "^2.2.3",
-    "sass": "^1.58.0"
+    "sass": "^1.58.0",
+    "upath": "^2.0.1"
   },
   "devDependencies": {
     "@hapi/code": "^8.0.2",
     "@hapi/lab": "^23.0.0",
     "eslint": "^7.20.0",
-    "sinon": "^18.0.0"
+    "sinon": "^19.0.2"
   }
 }