@bigcommerce/stencil-cli 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 ### Draft
 
+### 4.1.0 (2022-04-28)
+
+-   feat: strf-9749 Update Stencil Cli to use node-sass latest by default ([923](https://github.com/bigcommerce/stencil-cli/pull/923))
+    New option:`--use-old-node-sass-fork (--oldn)` to bypass error warning (in case it exist) using latest node-sass version.
+    Soon, it node sass fork will be deprecated and it won't be possible to compile with it.
+
+-   feat: STRF-9757 Introduced "stencil debug" ([918](https://github.com/bigcommerce/stencil-cli/pull/918))
+
+Available options: --output [filename] (-o)
+If not provided, will be logged to std
+
+-   feat: STRF-9741 Verbose network requests logging in Stencil CLI by default ([914](https://github.com/bigcommerce/stencil-cli/pull/914))
+    Introduced `--no-verbose` option on all commands to supress verbose network requests logging.
+
 ### 4.0.0 (2022-04-11)
 
 -   Added support for node 14 and drop node 10

package/bin/stencil-bundle.js

@@ -7,7 +7,7 @@ const { THEME_PATH, PACKAGE_INFO } = require('../constants');
 const ThemeConfig = require('../lib/theme-config');
 const Bundle = require('../lib/stencil-bundle');
 const { printCliResultErrorAndExit } = require('../lib/cliCommon');
-const { checkNodeVersion } = require('../lib/cliCommon');
+const { prepareCommand } = require('../lib/cliCommon');
 const BuildConfigManager = require('../lib/BuildConfigManager');
 
 program
@@ -28,16 +28,13 @@ program
         '-t, --timeout [timeout]',
         'Set a timeout for the bundle operation. Default is 20 secs',
         '60',
-    )
-    .parse(process.argv);
+    );
 
-const cliOptions = program.opts();
+const cliOptions = prepareCommand(program);
 const themeConfig = ThemeConfig.getInstance(THEME_PATH);
 
 async function run() {
     try {
-        checkNodeVersion();
-
         if (cliOptions.dest === true) {
             throw new Error('You have to specify a value for -d or --dest'.red);
         }

package/bin/stencil-debug.js

@@ -0,0 +1,15 @@
+require('colors');
+const program = require('../lib/commander');
+
+const StencilDebug = require('../lib/StencilDebug');
+const { PACKAGE_INFO } = require('../constants');
+const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+
+program
+    .version(PACKAGE_INFO.version)
+    .option('-o, --output [filename]', 'If provided will write to file')
+    .parse(process.argv);
+
+const cliOptions = program.opts();
+
+new StencilDebug().run(cliOptions).catch(printCliResultErrorAndExit);

package/bin/stencil-download.js

@@ -6,21 +6,17 @@ const program = require('../lib/commander');
 
 const { PACKAGE_INFO } = require('../constants');
 const stencilDownload = require('../lib/stencil-download');
-const { checkNodeVersion } = require('../lib/cliCommon');
+const { prepareCommand } = require('../lib/cliCommon');
 const { printCliResultErrorAndExit } = require('../lib/cliCommon');
 
 program
     .version(PACKAGE_INFO.version)
-    .option('-h, --host [hostname]', 'specify the api host')
     .option('-f, --file [filename]', 'specify the filename to download only')
     .option('-e, --exclude [exclude]', 'specify a directory to exclude from download')
     .option('-c, --channel_id [channelId]', 'specify the channel ID of the storefront', parseInt)
-    .option('-o, --overwrite', 'overwrite local with remote files')
-    .parse(process.argv);
+    .option('-o, --overwrite', 'overwrite local with remote files');
 
-checkNodeVersion();
-
-const cliOptions = program.opts();
+const cliOptions = prepareCommand(program);
 const extraExclude = cliOptions.exclude ? [cliOptions.exclude] : [];
 const options = {
     exclude: ['parsed', 'manifest.json', ...extraExclude],

package/bin/stencil-init.js

@@ -4,19 +4,16 @@ const program = require('../lib/commander');
 
 const StencilInit = require('../lib/stencil-init');
 const { PACKAGE_INFO } = require('../constants');
-const { checkNodeVersion, printCliResultErrorAndExit } = require('../lib/cliCommon');
+const { prepareCommand, printCliResultErrorAndExit } = require('../lib/cliCommon');
 
 program
     .version(PACKAGE_INFO.version)
     .option('-u, --url [url]', 'Store URL')
     .option('-t, --token [token]', 'Access Token')
     .option('-p, --port [port]', 'Port')
-    .option('-h, --apiHost [host]', 'API Host')
-    .parse(process.argv);
+    .option('-h, --apiHost [host]', 'API Host');
 
-checkNodeVersion();
-
-const cliOptions = program.opts();
+const cliOptions = prepareCommand(program);
 
 new StencilInit()
     .run({

package/bin/stencil-pull.js

@@ -5,13 +5,12 @@ require('colors');
 const { PACKAGE_INFO } = require('../constants');
 const program = require('../lib/commander');
 const stencilPull = require('../lib/stencil-pull');
-const { checkNodeVersion } = require('../lib/cliCommon');
+const { prepareCommand } = require('../lib/cliCommon');
 const { printCliResultErrorAndExit } = require('../lib/cliCommon');
 
 program
     .version(PACKAGE_INFO.version)
     .option('-s, --saved', 'get the saved configuration instead of the active one')
-    .option('-h, --host [hostname]', 'specify the api host')
     .option(
         '-f, --filename [filename]',
         'specify the filename to save the config as',
@@ -21,12 +20,9 @@ program
         '-c, --channel_id [channelId]',
         'specify the channel ID of the storefront to pull configuration from',
         parseInt,
-    )
-    .parse(process.argv);
-
-checkNodeVersion();
+    );
 
-const cliOptions = program.opts();
+const cliOptions = prepareCommand(program);
 
 const options = {
     apiHost: cliOptions.host,

package/bin/stencil-push.js

@@ -4,12 +4,11 @@ require('colors');
 const { PACKAGE_INFO } = require('../constants');
 const program = require('../lib/commander');
 const stencilPush = require('../lib/stencil-push');
-const { checkNodeVersion } = require('../lib/cliCommon');
+const { prepareCommand } = require('../lib/cliCommon');
 const { printCliResultErrorAndExit } = require('../lib/cliCommon');
 
 program
     .version(PACKAGE_INFO.version)
-    .option('--host [hostname]', 'specify the api host')
     .option('-f, --file [filename]', 'specify the filename of the bundle to upload')
     .option('-s, --save [filename]', 'specify the filename to save the bundle as')
     .option('-a, --activate [variationname]', 'specify the variation of the theme to activate')
@@ -18,12 +17,9 @@ program
         '-c, --channel_ids <channelIds...>',
         'specify the channel IDs of the storefront to push the theme to',
     )
-    .option('-allc, --all_channels', 'push a theme to all available channels')
-    .parse(process.argv);
+    .option('-allc, --all_channels', 'push a theme to all available channels');
 
-checkNodeVersion();
-
-const cliOptions = program.opts();
+const cliOptions = prepareCommand(program);
 const options = {
     apiHost: cliOptions.host,
     channelIds: cliOptions.channel_ids,

package/bin/stencil-start.js

@@ -4,7 +4,7 @@ require('colors');
 const { PACKAGE_INFO } = require('../constants');
 const program = require('../lib/commander');
 const StencilStart = require('../lib/stencil-start');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+const { printCliResultErrorAndExit, prepareCommand } = require('../lib/cliCommon');
 const BuildConfigManager = require('../lib/BuildConfigManager');
 
 program
@@ -12,7 +12,6 @@ program
     .option('-o, --open', 'Automatically open default browser')
     .option('-v, --variation [name]', 'Set which theme variation to use while developing')
     .option('-c, --channelId [channelId]', 'Set the channel id for the storefront')
-    .option('--host [hostname]', 'specify the api host')
     .option(
         '--tunnel [name]',
         'Create a tunnel URL which points to your local server that anyone can use.',
@@ -21,11 +20,9 @@ program
         '-n, --no-cache',
         'Turns off caching for API resource data per storefront page. The cache lasts for 5 minutes before automatically refreshing.',
     )
-    .option('-t, --timeout', 'Set a timeout for the bundle operation. Default is 20 secs', '60')
-    .parse(process.argv);
-
-const cliOptions = program.opts();
+    .option('-t, --timeout', 'Set a timeout for the bundle operation. Default is 20 secs', '60');
 
+const cliOptions = prepareCommand(program);
 const options = {
     open: cliOptions.open,
     variation: cliOptions.variation,

package/lib/BuildConfigManager.js

@@ -103,7 +103,10 @@ class BuildConfigManager {
             });
         });
 
-        this._worker.on('close', () => callback('worker terminated'));
+        this._worker.on('close', () => {
+            callback('worker terminated');
+            clearTimeout(timeoutId);
+        });
     }
 }
 

package/lib/StencilCLISettings.js

@@ -0,0 +1,28 @@
+class StencilCLISettings {
+    constructor() {
+        // The setting enables/disables verbose network requests logging
+        this.versboseNetworkLogging = true;
+        // Enables usage of node sass fork for testing purposes
+        this.oldNodeSassFork = false;
+    }
+
+    setVerbose(flag) {
+        this.versboseNetworkLogging = flag;
+    }
+
+    isVerbose() {
+        return this.versboseNetworkLogging === true;
+    }
+
+    useOldNodeSassFork(flag) {
+        this.oldNodeSassFork = flag;
+    }
+
+    isOldNodeSassForkEnabled() {
+        return this.oldNodeSassFork;
+    }
+}
+
+const settings = new StencilCLISettings();
+
+module.exports = settings;

package/lib/StencilDebug.js

@@ -0,0 +1,113 @@
+const fsModule = require('fs');
+const path = require('path');
+const osModule = require('os');
+
+const { PACKAGE_INFO, THEME_PATH } = require('../constants');
+const ThemeConfig = require('./theme-config');
+const StencilConfigManager = require('./StencilConfigManager');
+
+class StencilDebug {
+    constructor({
+        fs = fsModule,
+        os = osModule,
+        logger = console,
+        themeConfig = ThemeConfig.getInstance(THEME_PATH),
+        stencilConfigManager = new StencilConfigManager(),
+    } = {}) {
+        this._fs = fs;
+        this._os = os;
+        this._logger = logger;
+        this._themeConfig = themeConfig;
+        this._stencilConfigManager = stencilConfigManager;
+    }
+
+    async run(options) {
+        const platform = this.getPlatformInfo();
+        const nodeVersion = this.getNodeJsVersion();
+        const version = this.getCliVersion();
+        const theme = await this.getThemeInfo();
+        const stencil = await this.getStencilInfo();
+        const info = {
+            platform,
+            version,
+            nodeVersion,
+            stencil,
+            theme,
+        };
+        const result = this.prepareResult(info);
+        await this.printResult(result, options);
+    }
+
+    getPlatformInfo() {
+        return {
+            type: this._os.type(),
+            version: this._os.version(),
+        };
+    }
+
+    getNodeJsVersion() {
+        return process.version;
+    }
+
+    getCliVersion() {
+        return PACKAGE_INFO.version;
+    }
+
+    async getThemeInfo() {
+        this.checkExecutableLocation(this._themeConfig);
+
+        const rawConfig = await this._themeConfig.getRawConfig();
+        const {
+            name,
+            version,
+            /* eslint-disable camelcase */
+            template_engine,
+            css_compiler,
+            meta: { author_name },
+            /* eslint-enable camelcase */
+        } = rawConfig;
+        return {
+            name,
+            version,
+            template_engine,
+            css_compiler,
+            author_name,
+        };
+    }
+
+    async getStencilInfo() {
+        const { apiHost, normalStoreUrl, port } = await this._stencilConfigManager.read();
+        return {
+            apiHost,
+            normalStoreUrl,
+            port,
+        };
+    }
+
+    checkExecutableLocation(themeConfig) {
+        if (!themeConfig.configExists()) {
+            throw new Error(
+                `${
+                    'You must have a '.red + 'config.json'.cyan
+                } file in your top level theme directory.`,
+            );
+        }
+    }
+
+    prepareResult(data) {
+        return JSON.stringify(data);
+    }
+
+    async printResult(result, options) {
+        if (options.output) {
+            const filePath = options.output.startsWith('/')
+                ? options.output
+                : path.join(process.cwd(), options.output);
+            await this._fs.promises.writeFile(filePath, result);
+        } else {
+            this._logger.log(result);
+        }
+    }
+}
+
+module.exports = StencilDebug;

package/lib/bundle-validator.js

@@ -15,6 +15,7 @@ const privateThemeConfigValidationSchema = require('./schemas/privateThemeConfig
 const themeConfigValidationSchema = require('./schemas/themeConfig.json');
 const themeValidationSchema = require('./schemas/themeSchema.json');
 const cssCompiler = require('./css/compile');
+const stencilCLISettings = require('./StencilCLISettings');
 
 const VALID_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', '.gif'];
 const WIDTH_COMPOSED = 600;
@@ -27,6 +28,8 @@ const MAX_SIZE_COMPOSED = 1024 * 1024 * 2; // 2MB
 const MAX_SIZE_MOBILE = 1024 * 1024; // 1MB
 const MAX_SIZE_DESKTOP = 1024 * 1024 * 5; // 5MB
 
+/* eslint-disable no-useless-escape */
+const STYLESHEET_REGEXP = /{{\s*stylesheet\s*([\/a-zA-Z'"\.-]+)\s*}}/i;
 class BundleValidator {
     /**
      * Run some validations to ensure that the platform will accept the theme
@@ -408,24 +411,30 @@ class BundleValidator {
         const assetsPath = path.join(this.themePath, 'assets');
         const stylesPath = path.join(this.themePath, 'assets/scss');
         const rawConfig = await this.themeConfig.getRawConfig();
-        const compiler = rawConfig.css_compiler;
-
-        let cssFiles;
-        try {
-            const files = await fs.promises.readdir(stylesPath);
-            cssFiles = files.filter((file) => {
-                return file.slice(-(compiler.length + 1)) === `.${compiler}`;
-            });
-        } catch (e) {
-            throw new Error(`Error: ${e.message}, while reading files from "${stylesPath}".`.red);
-        }
+        const cssFiles = await this.getCssFiles();
 
         for (const file of cssFiles) {
             try {
+                const engine = stencilCLISettings.isOldNodeSassForkEnabled()
+                    ? cssCompiler.FALLBACK_SASS_ENGINE_NAME
+                    : cssCompiler.SASS_ENGINE_NAME;
                 /* eslint-disable-next-line no-await-in-loop */
-                await cssCompiler.compile(rawConfig, assetsPath, file);
+                await cssCompiler.compile(rawConfig, assetsPath, file, engine);
             } catch (e) {
                 const message = this.parseStencilStylesError(e);
+                if (!stencilCLISettings.isOldNodeSassForkEnabled()) {
+                    throw new Error(
+                        `${message}\n`.red +
+                            `\n` +
+                            `---------WARNING---------\n`.red +
+                            `We are currently in the process of deprecating node-sass fork https://github.com/bigcommerce-labs/node-sass\n` +
+                            `Your scss files were compiled using latest node-sass version https://github.com/sass/node-sass\n` +
+                            `This error might indicate that your scss file is not compatible with it.\n` +
+                            `There is still an option to compile scss file old fork by using --use-old-node-sass-fork.\n` +
+                            `But note, that this will lead to 500 error in production in near future.\n` +
+                            `---------WARNING---------\n`.red,
+                    );
+                }
                 throw new Error(
                     `${message} while compiling css files from "${stylesPath}/${file}".`.red,
                 );
@@ -433,6 +442,69 @@ class BundleValidator {
         }
     }
 
+    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.match(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);
+                }
+            }
+        }
+
+        return cssFiles;
+    }
+
+    // returns relative path starting from root scss/css folder
+    tryToResolveCssFileLocation(fileName, result) {
+        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'),
+        ];
+
+        for (const location of possibleLocations) {
+            const filePath = path.join(this.themePath, location);
+            if (fs.existsSync(filePath)) {
+                if (!this.isRootCssFile(location)) {
+                    return this.getCssFileWithoutRootFolder(location);
+                }
+                const fileParts = path.parse(filePath);
+                return fileParts.name;
+            }
+        }
+
+        throw new Error(`Couldn't find file for this statement: ${result[0]}`.red);
+    }
+
+    // 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('/');
+    }
+
     parseStencilStylesError(e) {
         if (e.formatted) {
             return `${e.formatted.replace('Error: ', '')}: `;

package/lib/cliCommon.js

@@ -1,5 +1,6 @@
 const semver = require('semver');
 const { PACKAGE_INFO } = require('../constants');
+const stencilCLISettings = require('./StencilCLISettings');
 
 const messages = {
     visitTroubleshootingPage:
@@ -8,6 +9,31 @@ const messages = {
         'If this error persists, please visit https://github.com/bigcommerce/stencil-cli/issues and submit an issue.',
 };
 
+/**
+ * @param {Object} object
+
+ * @returns {void}
+ */
+function printObject(object) {
+    for (const property of Object.keys(object)) {
+        console.log(`${property}: ${object[property]}`);
+    }
+}
+
+/**
+ * @param {Error} error
+
+ * @returns {void}
+ */
+function printNetworkError(config) {
+    console.log(`URL: `.yellow + config.url);
+    console.log(`Method: `.yellow + config.method.toUpperCase());
+    if (config.data) {
+        console.log(`Data: `.yellow);
+        printObject(config.data);
+    }
+}
+
 /**
  * @param {Error} error
  * @param {Array<{message: string}>} [error.messages]
@@ -24,6 +50,12 @@ function printCliResultError(error) {
         }
     }
 
+    if (error && (error.config || error.response)) {
+        // In case if request didn't receive any response, response object is not available
+        const networkReq = error.config || error.response;
+        printNetworkError(networkReq);
+    }
+
     console.log(messages.visitTroubleshootingPage);
 
     console.log(messages.submitGithubIssue);
@@ -52,9 +84,37 @@ function checkNodeVersion() {
     return satisfies;
 }
 
+function applyCommonOptions(program) {
+    program
+        .option('-h, --host [hostname]', 'specify the api host')
+        .option('-nov, --no-verbose', 'supress verbose info logging', false)
+        .option(
+            '--use-old-node-sass-fork',
+            'use old node sass fork for scss compilation during bundling',
+            false,
+        )
+        .parse(process.argv);
+}
+
+function setupCLI(options) {
+    stencilCLISettings.setVerbose(options.verbose);
+    stencilCLISettings.useOldNodeSassFork(options.useOldNodeSassFork);
+}
+
+function prepareCommand(program) {
+    applyCommonOptions(program);
+    checkNodeVersion();
+
+    const options = program.opts();
+    setupCLI(options);
+
+    return options;
+}
+
 module.exports = {
     messages,
     printCliResultError,
     printCliResultErrorAndExit,
     checkNodeVersion,
+    prepareCommand,
 };

package/lib/css/compile.js

@@ -4,9 +4,10 @@ const { promisify } = require('util');
 
 const cssAssembler = require('../css-assembler');
 
-const SASS_ENGINE_NAME = 'node-sass-fork';
+const FALLBACK_SASS_ENGINE_NAME = 'node-sass-fork';
+const SASS_ENGINE_NAME = 'node-sass';
 
-const compile = async (configuration, themeAssetsPath, fileName) => {
+const compile = async (configuration, themeAssetsPath, fileName, engineName = SASS_ENGINE_NAME) => {
     const fileParts = path.parse(fileName);
     const ext = configuration.css_compiler === 'css' ? configuration.css_compiler : 'scss';
     const pathToFile = path.join(fileParts.dir, `${fileParts.name}.${ext}`);
@@ -32,11 +33,13 @@ const compile = async (configuration, themeAssetsPath, fileName) => {
         },
     };
     const stencilStyles = new StencilStyles(console);
-    stencilStyles.activateEngine(SASS_ENGINE_NAME);
+    stencilStyles.activateEngine(engineName);
 
     return stencilStyles.compileCss('scss', params);
 };
 
 module.exports = {
     compile,
+    SASS_ENGINE_NAME,
+    FALLBACK_SASS_ENGINE_NAME,
 };

package/lib/utils/NetworkUtils.js

@@ -7,6 +7,7 @@ const fsModule = require('fs');
 const axios = require('axios');
 
 const { PACKAGE_INFO } = require('../../constants');
+const stencilCLISettings = require('../StencilCLISettings');
 
 const defaultHttpsAgent = new https.Agent({ rejectUnauthorized: false });
 
@@ -16,11 +17,13 @@ class NetworkUtils {
         httpsAgent = defaultHttpsAgent,
         reqLibrary = axios,
         packageInfo = PACKAGE_INFO,
+        logger = console,
     } = {}) {
         this._fs = fs;
         this._httpsAgent = httpsAgent;
         this._reqLibrary = reqLibrary;
         this._packageInfo = packageInfo;
+        this._logger = logger;
     }
 
     /** Used to send request to our (Bigcommerce) servers only.
@@ -50,6 +53,10 @@ class NetworkUtils {
             reqConfig.headers['x-auth-token'] = accessToken;
         }
 
+        if (stencilCLISettings.isVerbose()) {
+            this.log(reqConfig);
+        }
+
         return this._reqLibrary(reqConfig);
     }
 
@@ -71,6 +78,11 @@ class NetworkUtils {
                 .on('error', reject);
         });
     }
+
+    log(config) {
+        const method = config.method || 'GET';
+        this._logger.info(`Upcoming request ${method.green}: ${config.url.green}`);
+    }
 }
 
 module.exports = NetworkUtils;