@bigcommerce/stencil-cli 6.1.0 → 6.1.1

package/README.md

@@ -7,8 +7,9 @@ The BigCommerce server emulator for local theme development.
 
 ## Install
 
-Note: Stencil requires the Node.js runtime environment,
-versions 16.x, 18.x are supported.
+_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._
 
 Run `npm install -g @bigcommerce/stencil-cli`.
 

package/bin/stencil.js

@@ -16,5 +16,4 @@ 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/StencilCLISettings.js

@@ -13,6 +13,14 @@ class StencilCLISettings {
     isVerbose() {
         return this.versboseNetworkLogging;
     }
+
+    useOldNodeSassFork(flag) {
+        this.oldNodeSassFork = flag;
+    }
+
+    isOldNodeSassForkEnabled() {
+        return this.oldNodeSassFork;
+    }
 }
 
 const settings = new StencilCLISettings();

package/lib/bundle-validator.js

@@ -14,7 +14,8 @@ 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 ScssValidator = require('./ScssValidator');
+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
@@ -41,7 +44,6 @@ 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 = [
@@ -406,7 +408,109 @@ class BundleValidator {
     }
 
     async _validateCssFiles() {
-        await this.scssValidator.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 (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;
     }
 
     validateTrailingSymbols(data) {

package/lib/cliCommon.js

@@ -98,6 +98,7 @@ function applyCommonOptions(program) {
 
 function setupCLI(options) {
     stencilCLISettings.setVerbose(options.verbose);
+    stencilCLISettings.useOldNodeSassFork(options.useOldNodeSassFork);
 }
 
 function prepareCommand(program) {

package/lib/css/compile.js

@@ -4,6 +4,7 @@ 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) => {
@@ -28,7 +29,7 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
         sourceMap: true,
         autoprefixerOptions: {
             cascade: configuration.autoprefixer_cascade,
-            overrideBrowserslist: configuration.autoprefixer_browsers,
+            browsers: configuration.autoprefixer_browsers,
         },
     };
     const stencilStyles = new StencilStyles(console);
@@ -40,4 +41,5 @@ 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": "6.1.0",
+  "version": "6.1.1",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
-    "node": ">=16.0.0 <19.0.0",
-    "npm": ">=8.0.0 <10.0.0"
+    "node": ">=14.0.0 <15.0.0",
+    "npm": ">=v6.11.3 <9.0.0"
   },
   "scripts": {
     "lint": "eslint . && prettier --check . --ignore-unknown",
@@ -23,8 +23,7 @@
     "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-scss-autofix": "./bin/stencil-scss-autofix.js"
+    "stencil-debug": "./bin/stencil-debug.js"
   },
   "config": {
     "stencil_version": "1.0"
@@ -49,7 +48,7 @@
   ],
   "dependencies": {
     "@bigcommerce/stencil-paper": "4.2.1",
-    "@bigcommerce/stencil-styles": "5.1.0",
+    "@bigcommerce/stencil-styles": "4.0.0",
     "@hapi/boom": "^10.0.0",
     "@hapi/glue": "^8.0.0",
     "@hapi/h2o2": "^9.1.0",
@@ -78,8 +77,6 @@
     "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",

package/bin/stencil-scss-autofix.js

@@ -1,23 +0,0 @@
-#!/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/lib/NodeSassAutoFixer.js

@@ -1,253 +0,0 @@
-/* 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

@@ -1,119 +0,0 @@
-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;