@bigcommerce/stencil-cli 8.2.0 → 8.3.0

package/lib/css/compile.js

@@ -1,8 +1,5 @@
 const path = require('path');
 const StencilStyles = require('@bigcommerce/stencil-styles');
-const { promisify } = require('util');
-
-const cssAssembler = require('../css-assembler');
 
 const SASS_ENGINE_NAME = 'node-sass';
 
@@ -11,10 +8,11 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
     const ext = configuration.css_compiler === 'css' ? configuration.css_compiler : 'scss';
     const pathToFile = path.join(fileParts.dir, `${fileParts.name}.${ext}`);
     const basePath = path.join(themeAssetsPath, `${ext}`);
+    const stencilStyles = new StencilStyles(console);
 
     let files;
     try {
-        files = await promisify(cssAssembler.assemble)(pathToFile, basePath, `${ext}`, {});
+        files = await stencilStyles.assembleCssFiles(pathToFile, basePath, `${ext}`, {});
     } catch (err) {
         console.error(err);
         throw err;
@@ -31,7 +29,6 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
             overrideBrowserslist: configuration.autoprefixer_browsers,
         },
     };
-    const stencilStyles = new StencilStyles(console);
     stencilStyles.activateEngine(engineName);
 
     return stencilStyles.compileCss('scss', params);

package/lib/stencil-bundle.js

@@ -4,11 +4,11 @@ const async = require('async');
 const crypto = require('crypto');
 const fs = require('fs');
 const path = require('path');
+const StencilStyles = require('@bigcommerce/stencil-styles');
 
 const BuildConfigManager = require('./BuildConfigManager');
 const BundleValidator = require('./bundle-validator');
 const Cycles = require('./Cycles');
-const cssAssembler = require('./css-assembler');
 const langAssembler = require('./lang-assembler');
 const templateAssembler = require('./template-assembler');
 const { recursiveReadDir } = require('./utils/fsUtils');
@@ -37,6 +37,8 @@ const PATHS_TO_ZIP = [
     { pattern: 'webpack.*.js' },
 ];
 
+const stencilStyles = new StencilStyles();
+
 class Bundle {
     constructor(
         themePath,
@@ -126,13 +128,12 @@ class Bundle {
                 });
                 async.map(
                     filterFiles,
-                    (file, mapCallback) => {
-                        cssAssembler.assemble(
+                    async (file) => {
+                        return stencilStyles.assembleCssFiles(
                             file,
                             basePath,
                             compiler,
                             assembleOptions,
-                            mapCallback,
                         );
                     },
                     (assemblingError, results) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
@@ -49,7 +49,7 @@
   ],
   "dependencies": {
     "@bigcommerce/stencil-paper": "5.0.0",
-    "@bigcommerce/stencil-styles": "5.3.3",
+    "@bigcommerce/stencil-styles": "^6.1.1",
     "@hapi/boom": "^10.0.0",
     "@hapi/glue": "^8.0.0",
     "@hapi/h2o2": "^9.1.0",

package/lib/css-assembler.js

@@ -1,99 +0,0 @@
-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 cssFiles
- * @param absolutePath
- * @param type - scss
- * @param options - options object
- * @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,
-};