@bigcommerce/stencil-cli 5.3.5 → 6.1.0

package/README.md

@@ -7,9 +7,8 @@ The BigCommerce server emulator for local theme development.
 
 ## Install
 
-_Note: Stencil requires the Node.js runtime environment,
-version 14.x is supported.
-We do not yet have support for versions greater than Node 14._
+Note: Stencil requires the Node.js runtime environment,
+versions 16.x, 18.x are supported.
 
 Run `npm install -g @bigcommerce/stencil-cli`.
 

package/bin/stencil-scss-autofix.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+require('colors');
+const program = require('../lib/commander');
+
+const ThemeConfig = require('../lib/theme-config');
+const NodeSassAutoFixer = require('../lib/NodeSassAutoFixer');
+const { THEME_PATH, PACKAGE_INFO } = require('../constants');
+const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+
+program
+    .version(PACKAGE_INFO.version)
+    .option(
+        '-d, --dry',
+        'will not write any changes to the file system, instead it will print the changes to the console',
+    )
+    .parse(process.argv);
+
+const cliOptions = program.opts();
+
+const themeConfig = ThemeConfig.getInstance(THEME_PATH);
+
+new NodeSassAutoFixer(THEME_PATH, themeConfig, cliOptions).run().catch(printCliResultErrorAndExit);

package/bin/stencil.js

@@ -16,4 +16,5 @@ program
     .command('pull', 'Pulls currently active theme config files and overwrites local copy')
     .command('download', 'Downloads all the theme files')
     .command('debug', 'Prints environment and theme settings for debug purposes')
+    .command('scss autofix', 'Prints environment and theme settings for debug purposes')
     .parse(process.argv);

package/lib/NodeSassAutoFixer.js

@@ -0,0 +1,253 @@
+/* eslint-disable no-param-reassign, operator-assignment */
+require('colors');
+
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const postcssScss = require('postcss-scss');
+
+const ScssValidator = require('./ScssValidator');
+const cssCompiler = require('./css/compile');
+
+const CONDITIONAL_IMPORT = 'conditional-import';
+
+class NodeSassAutoFixer {
+    /**
+     *
+     * @param themePath
+     * @param themeConfig
+     * @param cliOptions
+     */
+    constructor(themePath, themeConfig, cliOptions) {
+        this.themePath = themePath;
+        this.themeConfig = themeConfig;
+        this.cliOptions = cliOptions;
+
+        this.validator = new ScssValidator(themePath, themeConfig);
+    }
+
+    async run() {
+        const assetsPath = path.join(this.themePath, 'assets');
+        const rawConfig = await this.themeConfig.getConfig();
+        const cssFiles = await this.validator.getCssFiles();
+
+        let issuesDetected = false;
+        /* eslint-disable-next-line no-useless-catch */
+        try {
+            for await (const file of cssFiles) {
+                try {
+                    /* eslint-disable-next-line no-await-in-loop */
+                    await cssCompiler.compile(
+                        rawConfig,
+                        assetsPath,
+                        file,
+                        cssCompiler.SASS_ENGINE_NAME,
+                    );
+                } catch (e) {
+                    issuesDetected = true;
+                    await this.tryToFix(e, file);
+                }
+            }
+            if (!issuesDetected) {
+                console.log('No issues deteted');
+            }
+        } catch (e) {
+            throw e;
+        }
+    }
+
+    async tryToFix(err, file) {
+        const problem = this.detectProblem(err);
+        if (problem) {
+            const dirname = path.join(this.themePath, 'assets/scss');
+            const filePath = this.resolveScssFileName(dirname, err.file);
+            if (problem === CONDITIONAL_IMPORT) {
+                await this.fixConditionalImport(filePath);
+            }
+        } else {
+            const filePath = path.join(this.themePath, 'assets/scss', file + '.scss');
+            console.log("Couldn't determine and autofix the problem. Please fix it manually.".red);
+            console.log('Found trying compile file:'.red, filePath);
+            throw new Error(err);
+        }
+    }
+
+    detectProblem(err) {
+        if (err.formatted) {
+            if (
+                err.formatted.includes(
+                    'Error: Import directives may not be used within control directives or mixins',
+                )
+            ) {
+                return CONDITIONAL_IMPORT;
+            }
+        }
+
+        return null;
+    }
+
+    async fixConditionalImport(filePath) {
+        const scss = fs.readFileSync(filePath, 'utf8');
+        const condImportFile = await this.processCss(scss, this.transformConditionalImport());
+
+        this.overrideFile(filePath, condImportFile.css);
+        for await (const message of condImportFile.messages) {
+            if (message.type === 'import') {
+                const importFile = this.findImportedFile(message.filename, filePath);
+                const importFileScss = fs.readFileSync(importFile);
+                const mixinFile = await this.processCss(
+                    importFileScss,
+                    this.transformRootToMixin(message),
+                );
+                this.overrideFile(importFile, mixinFile.css);
+            }
+        }
+    }
+
+    transformConditionalImport() {
+        return {
+            postcssPlugin: 'Transform Conditional Import',
+            AtRule: (rule, { AtRule, result }) => {
+                if (rule.name === 'if') {
+                    rule.walkAtRules('import', (decl) => {
+                        const newRule = new AtRule({
+                            name: 'import',
+                            params: decl.params,
+                            source: decl.source,
+                        });
+                        const root = decl.root();
+                        root.prepend(newRule);
+                        decl.name = 'include';
+                        decl.params = decl.params.replace(/['"]+/g, '');
+                        result.messages.push({
+                            type: 'import',
+                            filename: decl.params,
+                        });
+                    });
+                }
+            },
+        };
+    }
+
+    transformRootToMixin(data) {
+        const self = this;
+        return {
+            postcssPlugin: 'Transform Root to Mixin',
+            Once(root, { AtRule, result }) {
+                // already wrapped in mixin
+                if (
+                    root.nodes.length === 1 &&
+                    root.nodes[0].type === 'atrule' &&
+                    root.nodes[0].name === 'mixin'
+                ) {
+                    return;
+                }
+                const nodes = root.nodes.map((node) => {
+                    const cloned = node.clone();
+                    cloned.raws.before = '\n';
+                    return cloned;
+                });
+                self.formatNodes(nodes);
+                const newRoot = new AtRule({
+                    name: 'mixin',
+                    params: data.filename,
+                    source: root.source,
+                    nodes,
+                });
+                result.root.nodes = [newRoot];
+            },
+        };
+    }
+
+    formatNodes(nodes) {
+        const spacer = this.getSpacer(nodes[0]);
+        this.addTabsToNodes(nodes, spacer);
+    }
+
+    addTabsToNodes(nodes, spacer) {
+        nodes.forEach((node) => {
+            if (node.nodes) {
+                node.raws.before = node.raws.before + spacer;
+                node.raws.after = node.raws.after + spacer;
+                this.addTabsToNodes(node.nodes, spacer);
+            } else {
+                if (node.raws.before) {
+                    node.raws.before = node.raws.before + spacer;
+                }
+                if (node.prop === 'src') {
+                    node.value = node.value.replace(/\n/g, '\n' + spacer);
+                }
+            }
+        });
+    }
+
+    getSpacer(node) {
+        const hasTabSpace = this.hasTabSpace(node.raws.before);
+        if (hasTabSpace) {
+            return '\t';
+        }
+
+        return '    ';
+    }
+
+    hasTabSpace(string) {
+        return /\t/g.test(string);
+    }
+
+    async processCss(data, plugin) {
+        const processor = postcss([plugin]);
+        return processor.process(data, { from: undefined, parser: postcssScss });
+    }
+
+    findImportedFile(file, originalFilePath) {
+        const originalDirname = path.dirname(originalFilePath);
+        return this.resolveScssFileName(originalDirname, file);
+    }
+
+    resolveScssFileName(dirname, fileName) {
+        if (!fileName.includes('.scss')) {
+            fileName += '.scss';
+        }
+        const filePath = path.join(dirname, fileName);
+        if (!fs.existsSync(filePath)) {
+            // try with underscore
+            const withUnderscoreFileName = this.getFileNameWithUnderscore(fileName);
+            const filePathWithUnderscore = path.join(dirname, withUnderscoreFileName);
+            if (!fs.existsSync(filePathWithUnderscore)) {
+                throw new Error(
+                    `Import ${fileName} wasn't resolved in ${filePath} or ${filePathWithUnderscore}`,
+                );
+            }
+            return filePathWithUnderscore;
+        }
+
+        return filePath;
+    }
+
+    getFileNameWithUnderscore(fileName) {
+        const fileNameParts = fileName.split('/');
+        const withUnderscoreFileName = fileNameParts
+            .map((part, i) => {
+                if (i === fileNameParts.length - 1) {
+                    return '_' + part;
+                }
+                return part;
+            })
+            .join('/');
+        return withUnderscoreFileName;
+    }
+
+    overrideFile(filePath, data) {
+        const phrase = this.cliOptions.dry ? 'Would override' : 'Overriding';
+        console.log(phrase.green + ' file:'.green, filePath);
+        if (this.cliOptions.dry) {
+            console.log('---Content---'.yellow);
+            console.log(data);
+            console.log('---END of Content---'.yellow);
+        } else {
+            fs.writeFileSync(filePath, data);
+        }
+    }
+}
+
+module.exports = NodeSassAutoFixer;

package/lib/ScssValidator.js

@@ -0,0 +1,119 @@
+require('colors');
+const fs = require('fs');
+const path = require('path');
+
+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*}}/i;
+
+class ScssValidator {
+    /**
+     *
+     * @param themePath
+     * @param  themeConfig
+     */
+    constructor(themePath, themeConfig) {
+        this.themePath = themePath;
+        this.themeConfig = themeConfig;
+    }
+
+    async run() {
+        const assetsPath = path.join(this.themePath, 'assets');
+        const stylesPath = path.join(this.themePath, 'assets/scss');
+        const rawConfig = await this.themeConfig.getConfig();
+        const cssFiles = await this.getCssFiles();
+
+        for await (const file of cssFiles) {
+            try {
+                /* eslint-disable-next-line no-await-in-loop */
+                await cssCompiler.compile(
+                    rawConfig,
+                    assetsPath,
+                    file,
+                    cssCompiler.SASS_ENGINE_NAME,
+                );
+            } catch (e) {
+                const message = this.parseStencilStylesError(e);
+                console.log(e.file);
+                throw new Error(
+                    `${message} while compiling css files from "${stylesPath}/${file}".`.red,
+                );
+            }
+        }
+    }
+
+    parseStencilStylesError(e) {
+        if (e.formatted) {
+            return `${e.formatted.replace('Error: ', '')}: `;
+        }
+
+        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.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('/');
+    }
+}
+
+module.exports = ScssValidator;

package/lib/StencilCLISettings.js

@@ -1,7 +1,7 @@
 class StencilCLISettings {
     constructor() {
         // The setting enables/disables verbose network requests logging
-        this.versboseNetworkLogging = true;
+        this.versboseNetworkLogging = false;
         // Enables usage of node sass fork for testing purposes
         this.oldNodeSassFork = false;
     }
@@ -11,15 +11,7 @@ class StencilCLISettings {
     }
 
     isVerbose() {
-        return this.versboseNetworkLogging === true;
-    }
-
-    useOldNodeSassFork(flag) {
-        this.oldNodeSassFork = flag;
-    }
-
-    isOldNodeSassForkEnabled() {
-        return this.oldNodeSassFork;
+        return this.versboseNetworkLogging;
     }
 }
 

package/lib/bundle-validator.js

@@ -14,8 +14,7 @@ const ValidatorSchemaTranslations = require('./validator/schema-translations');
 const privateThemeConfigValidationSchema = require('./schemas/privateThemeConfig.json');
 const themeConfigValidationSchema = require('./schemas/themeConfig.json');
 const themeValidationSchema = require('./schemas/themeSchema.json');
-const cssCompiler = require('./css/compile');
-const stencilCLISettings = require('./StencilCLISettings');
+const ScssValidator = require('./ScssValidator');
 
 const VALID_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', '.gif'];
 const WIDTH_COMPOSED = 600;
@@ -28,8 +27,6 @@ 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
@@ -44,6 +41,7 @@ class BundleValidator {
         this.themePath = themePath;
         this.objectsToValidate = ['head.scripts', 'footer.scripts'];
         this.jsonSchemaValidatorOptions = { schemaId: 'auto', allErrors: true };
+        this.scssValidator = new ScssValidator(themePath, themeConfig);
 
         // Array of tasks used in async.series
         this.validationTasks = [
@@ -408,109 +406,7 @@ class BundleValidator {
     }
 
     async _validateCssFiles() {
-        const assetsPath = path.join(this.themePath, 'assets');
-        const stylesPath = path.join(this.themePath, 'assets/scss');
-        const rawConfig = await this.themeConfig.getConfig();
-        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, 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,
-                );
-            }
-        }
-    }
-
-    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: ', '')}: `;
-        }
-
-        return e.message;
+        await this.scssValidator.run();
     }
 
     validateTrailingSymbols(data) {

package/lib/cliCommon.js

@@ -87,7 +87,7 @@ function checkNodeVersion() {
 function applyCommonOptions(program) {
     program
         .option('-h, --host [hostname]', 'specify the api host')
-        .option('-nov, --no-verbose', 'supress verbose info logging', false)
+        .option('-vb, --verbose', 'enable verbose info logging', false)
         .option(
             '--use-old-node-sass-fork',
             'use old node sass fork for scss compilation during bundling',
@@ -98,7 +98,6 @@ function applyCommonOptions(program) {
 
 function setupCLI(options) {
     stencilCLISettings.setVerbose(options.verbose);
-    stencilCLISettings.useOldNodeSassFork(options.useOldNodeSassFork);
 }
 
 function prepareCommand(program) {

package/lib/css/compile.js

@@ -4,7 +4,6 @@ const { promisify } = require('util');
 
 const cssAssembler = require('../css-assembler');
 
-const FALLBACK_SASS_ENGINE_NAME = 'node-sass-fork';
 const SASS_ENGINE_NAME = 'node-sass';
 
 const compile = async (configuration, themeAssetsPath, fileName, engineName = SASS_ENGINE_NAME) => {
@@ -29,7 +28,7 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
         sourceMap: true,
         autoprefixerOptions: {
             cascade: configuration.autoprefixer_cascade,
-            browsers: configuration.autoprefixer_browsers,
+            overrideBrowserslist: configuration.autoprefixer_browsers,
         },
     };
     const stencilStyles = new StencilStyles(console);
@@ -41,5 +40,4 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
 module.exports = {
     compile,
     SASS_ENGINE_NAME,
-    FALLBACK_SASS_ENGINE_NAME,
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "5.3.5",
+  "version": "6.1.0",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
-    "node": ">=14.0.0 <15.0.0",
-    "npm": ">=v6.11.3 <9.0.0"
+    "node": ">=16.0.0 <19.0.0",
+    "npm": ">=8.0.0 <10.0.0"
   },
   "scripts": {
     "lint": "eslint . && prettier --check . --ignore-unknown",
@@ -23,7 +23,8 @@
     "stencil-pull": "./bin/stencil-pull.js",
     "stencil-start": "./bin/stencil-start.js",
     "stencil-release": "./bin/stencil-release.js",
-    "stencil-debug": "./bin/stencil-debug.js"
+    "stencil-debug": "./bin/stencil-debug.js",
+    "stencil-scss-autofix": "./bin/stencil-scss-autofix.js"
   },
   "config": {
     "stencil_version": "1.0"
@@ -48,7 +49,7 @@
   ],
   "dependencies": {
     "@bigcommerce/stencil-paper": "4.2.1",
-    "@bigcommerce/stencil-styles": "4.0.0",
+    "@bigcommerce/stencil-styles": "5.1.0",
     "@hapi/boom": "^10.0.0",
     "@hapi/glue": "^8.0.0",
     "@hapi/h2o2": "^9.1.0",
@@ -77,6 +78,8 @@
     "npm-which": "^3.0.1",
     "object-to-spawn-args": "^2.0.0",
     "parse-json": "^5.2.0",
+    "postcss": "^8.4.21",
+    "postcss-scss": "^4.0.6",
     "progress": "^2.0.3",
     "recursive-readdir": "^2.2.2",
     "semver": "^7.3.2",