@bigcommerce/stencil-cli 6.1.1 → 7.0.0-beta1

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/nodeSass/AutoFixer');
+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/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

@@ -13,14 +13,6 @@ 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,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

@@ -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/lib/nodeSass/AutoFixer.js

@@ -0,0 +1,143 @@
+/* eslint-disable no-param-reassign, operator-assignment */
+require('colors');
+
+const fs = require('fs');
+const path = require('path');
+
+const ScssValidator = require('../ScssValidator');
+const cssCompiler = require('../css/compile');
+
+const BaseRulesFixer = require('./BaseRulesFixer');
+const ConditionaImportFixer = require('./ConditionalImportFixer');
+const CommaRemovalFixer = require('./CommaRemovalFixer');
+const UndefinedVariableFixer = require('./UndefinedVariableFixer');
+
+const CONDITIONAL_IMPORT = 'conditional-import';
+const BASE_LEVEL_RULES = 'base-level-rules';
+const POSSIBLE_WRONG_COMMA = 'possible-wrong-comma';
+const UNDEFINED_VARIABLE = 'undefined-variable';
+
+class AutoFixer {
+    /**
+     *
+     * @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');
+            let files = [];
+            if (problem === CONDITIONAL_IMPORT) {
+                const fixer = new ConditionaImportFixer(dirname, err.file);
+                files = await fixer.run();
+            } else if (problem === BASE_LEVEL_RULES) {
+                const baseRulesFixer = new BaseRulesFixer(dirname, err.file);
+                files = await baseRulesFixer.run();
+            } else if (problem === POSSIBLE_WRONG_COMMA) {
+                const toFixFile = err.file === 'stdin' ? file : err.file;
+                const commaRemovalFixer = new CommaRemovalFixer(dirname, toFixFile);
+                files = await commaRemovalFixer.run();
+            } else if (problem === UNDEFINED_VARIABLE) {
+                const toFixFile = err.file === 'stdin' ? file : err.file;
+                const fixer = new UndefinedVariableFixer(dirname, toFixFile);
+                files = await fixer.run(err.message);
+            }
+            this.parseChangedFiles(files);
+        } 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 to compile file:'.red, filePath);
+            throw new Error(err.formatted ? err.formatted : 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;
+            }
+            if (
+                err.formatted.includes(
+                    "Base-level rules cannot contain the parent-selector-referencing character '&'",
+                )
+            ) {
+                return BASE_LEVEL_RULES;
+            }
+            if (
+                err.formatted.includes('Invalid CSS after') &&
+                err.formatted.includes('expected selector, was ', '')
+            ) {
+                return POSSIBLE_WRONG_COMMA;
+            }
+            if (err.formatted.includes('Undefined variable')) {
+                return UNDEFINED_VARIABLE;
+            }
+        }
+
+        return null;
+    }
+
+    parseChangedFiles(files) {
+        for (const file of files) {
+            this.overrideFile(file.filePath, file.data);
+        }
+    }
+
+    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 = AutoFixer;

package/lib/nodeSass/BaseFixer.js

@@ -0,0 +1,56 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const postcssScss = require('postcss-scss');
+
+class BaseFixer {
+    constructor(dirname, brokenFile) {
+        this.filePath = this.resolveScssFileName(dirname, brokenFile);
+    }
+
+    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')) {
+            /* eslint-disable-next-line no-param-reassign */
+            fileName += '.scss';
+        }
+        const filePath = path.join(dirname, fileName);
+        if (!fs.existsSync(filePath)) {
+            // try with underscore
+            const fileNameWithUnderscore = this.getFileNameWithUnderscore(fileName);
+            const filePathWithUnderscore = path.join(dirname, fileNameWithUnderscore);
+            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 fileNameWithUnderscore = fileNameParts
+            .map((part, i) => {
+                if (i === fileNameParts.length - 1) {
+                    return '_' + part;
+                }
+                return part;
+            })
+            .join('/');
+        return fileNameWithUnderscore;
+    }
+}
+
+module.exports = BaseFixer;

package/lib/nodeSass/BaseRulesFixer.js

@@ -0,0 +1,31 @@
+// Since previously a broken css was produced which had no effect on the page (browsers are smart enough to ignore unprocessable css)
+// we can just comment out that part of code
+
+const fs = require('fs');
+const BaseFixer = require('./BaseFixer');
+
+class BaseRulesFixer extends BaseFixer {
+    async run() {
+        const scss = fs.readFileSync(this.filePath, 'utf8');
+        const processedFile = await this.processCss(scss, this.transform());
+
+        return [{ filePath: this.filePath, data: processedFile.css }];
+    }
+
+    transform() {
+        return {
+            postcssPlugin: 'Transform Base Rules Issues into Comments',
+            Rule(rule, { Comment }) {
+                if (
+                    rule.parent.type === 'root' &&
+                    (rule.selector.startsWith('&--') || rule.selector.startsWith('&.'))
+                ) {
+                    const comment = new Comment({ text: rule.toString() });
+                    rule.replaceWith(comment);
+                }
+            },
+        };
+    }
+}
+
+module.exports = BaseRulesFixer;

package/lib/nodeSass/CommaRemovalFixer.js

@@ -0,0 +1,28 @@
+// There can be the case, when you have a comma at the beginning or at the end of the selector, which now is not allowed.
+// Previously it was just ignored, but now it will cause an error.
+
+const fs = require('fs');
+const BaseFixer = require('./BaseFixer');
+
+class CommaRemovalFixer extends BaseFixer {
+    async run() {
+        const scss = fs.readFileSync(this.filePath, 'utf8');
+        const processedFile = await this.processCss(scss, this.transform());
+
+        return [{ filePath: this.filePath, data: processedFile.css }];
+    }
+
+    transform() {
+        return {
+            postcssPlugin: 'Unwanted comma removal',
+            Rule(rule) {
+                if (rule.selector.startsWith(',') || rule.selector.endsWith(',')) {
+                    /* eslint-disable-next-line no-param-reassign */
+                    rule.selector = rule.selector.trim().replace(/^,?|,?$/g, '');
+                }
+            },
+        };
+    }
+}
+
+module.exports = CommaRemovalFixer;

package/lib/nodeSass/ConditionalImportFixer.js

@@ -0,0 +1,230 @@
+/* eslint-disable no-param-reassign, operator-assignment */
+const fs = require('fs');
+
+const BaseFixer = require('./BaseFixer');
+
+class ConditionalImportFixer extends BaseFixer {
+    async run() {
+        const files = [];
+        const scss = fs.readFileSync(this.filePath, 'utf8');
+        const result = await this.processCss(scss, this.transformConditionalImport());
+
+        files.push({ filePath: this.filePath, data: result.css });
+        const imports = this.mapFilesToRootFile(result.messages, this.filePath);
+        const toUpdateNestedImports = [];
+
+        for await (const fileImport of imports) {
+            const importFile = this.findImportedFile(fileImport.file, fileImport.rootFile);
+            const importFileScss = fs.readFileSync(importFile, { encoding: 'utf8' });
+            const nestedImportFiles = await this.getNesterImportFiles(importFileScss, importFile);
+            if (nestedImportFiles) {
+                imports.push(...nestedImportFiles);
+                // at this moment I don't know if this is an actual mixin
+                toUpdateNestedImports.push(...nestedImportFiles);
+            } else {
+                const mixinFile = await this.processCss(
+                    importFileScss,
+                    this.transformRootToMixin(fileImport.file),
+                );
+                files.push({
+                    filePath: importFile,
+                    data: mixinFile.css,
+                });
+            }
+        }
+
+        if (this.shouldUpdateMixinNameInRootFile(toUpdateNestedImports)) {
+            const mixins = this.mapMixinNameToImportFileName(result.mixins);
+            // the target file is not updated right away, so the fresh content is in files object
+            this.updateRootFileMixinName(files, toUpdateNestedImports, mixins);
+        }
+        return files;
+    }
+
+    shouldUpdateMixinNameInRootFile(toUpdateNestedImports) {
+        return toUpdateNestedImports.length > 0;
+    }
+
+    updateRootFileMixinName(filesChanged, toUpdateNestedImports, mixins) {
+        const rootFileHash = toUpdateNestedImports.reduce((acc, fileImport) => {
+            if (!acc[fileImport.rootFile]) {
+                acc[fileImport.rootFile] = [];
+            }
+            acc[fileImport.rootFile].push(fileImport.file);
+            return acc;
+        }, {});
+        Object.keys(rootFileHash).forEach((rootFile) => {
+            const rootFileData = filesChanged.find((file) => file.filePath.includes(this.filePath));
+            const mixinImport = rootFileHash[rootFile]
+                .map((fileImport) => `@include ${fileImport}`)
+                .join(';\n    ');
+            const mixinName = this.getMixinNameByImportName(mixins, rootFile);
+            rootFileData.data = rootFileData.data.replace(
+                new RegExp(`@include ${mixinName}`, 'g'),
+                mixinImport,
+            );
+        });
+    }
+
+    getMixinNameByImportName(mixins, importName) {
+        const found = mixins.find((m) => m.fileName === importName);
+        return found.mixinName;
+    }
+
+    mapMixinNameToImportFileName(mixins) {
+        return mixins.map((mixin) => {
+            const fileName = this.findImportedFile(mixin.importName, this.filePath);
+            return {
+                fileName,
+                mixinName: mixin.mixinName,
+            };
+        });
+    }
+
+    transformConditionalImport() {
+        return {
+            postcssPlugin: 'Transform Conditional Import',
+            AtRule: (rule, { AtRule, result }) => {
+                if (rule.name === 'if' || rule.name === 'else') {
+                    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';
+                        // remove quotes from import
+                        const oldName = this.prepareImportFileName(decl.params);
+                        // replace slash with dash
+                        const mixinName = oldName.replace(/\//g, '-');
+                        decl.params = mixinName;
+                        result.messages.push(oldName);
+                        // adding new mixin info
+                        if (!result.mixins) {
+                            result.mixins = [];
+                        }
+                        result.mixins.push({
+                            importName: oldName,
+                            mixinName,
+                        });
+                    });
+                }
+            },
+        };
+    }
+
+    transformRootToMixin(filename) {
+        const self = this;
+        return {
+            postcssPlugin: 'Transform Root to Mixin',
+            Once(root, { AtRule, result }) {
+                const mixins = [];
+                root.walkAtRules('mixin', (decl) => {
+                    mixins.push(decl.clone());
+                    decl.remove();
+                });
+                // 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: filename.replace(/\//g, '_'),
+                    source: root.source,
+                    nodes,
+                });
+                if (mixins.length > 0) {
+                    newRoot.raws.before = '\n';
+                }
+                result.root.nodes = [...mixins, newRoot];
+            },
+        };
+    }
+
+    checkForRecursiveImport() {
+        const self = this;
+        return {
+            postcssPlugin: 'Check for Recursive Import',
+            Once(root, { result }) {
+                const imports = [];
+                result.messages = [];
+                root.walkAtRules('import', (decl) => {
+                    imports.push(self.prepareImportFileName(decl.params));
+                });
+                if (imports.length > 0) {
+                    result.messages = [...imports];
+                }
+            },
+        };
+    }
+
+    async getNesterImportFiles(scss, file) {
+        const result = await this.processCss(scss, this.checkForRecursiveImport());
+        if (result.messages.length > 0) {
+            return this.mapFilesToRootFile(result.messages, file);
+        }
+        return null;
+    }
+
+    mapFilesToRootFile(files, rootFile) {
+        return files.map((file) => ({
+            file,
+            rootFile,
+        }));
+    }
+
+    formatNodes(nodes) {
+        if (nodes.length > 0) {
+            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);
+    }
+
+    prepareImportFileName(fileName) {
+        return fileName.replace(/['"]+/g, '');
+    }
+}
+
+module.exports = ConditionalImportFixer;

package/lib/nodeSass/UndefinedVariableFixer.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+const BaseFixer = require('./BaseFixer');
+
+class UndefinedVariableFixer extends BaseFixer {
+    async run(errorMessage) {
+        const varName = this.getUndefinedVariableName(errorMessage);
+        const value = await this.guessVariableValue(varName);
+
+        const scss = fs.readFileSync(this.filePath, 'utf8');
+        const processedFile = await this.processCss(scss, this.transform(varName, value));
+
+        return [{ filePath: this.filePath, data: processedFile.css }];
+    }
+
+    getUndefinedVariableName(errorMessage) {
+        const match = errorMessage.match(/\$([a-zA-Z]{1,})/gi);
+        if (!match) {
+            throw new Error("Couldn't detemine undefined variable name!");
+        }
+        return match[0];
+    }
+
+    transform(varName, value) {
+        return {
+            postcssPlugin: 'Declare unvariable variable value',
+            Once(root, { Declaration }) {
+                const newRule = new Declaration({
+                    value,
+                    prop: varName,
+                    source: '',
+                });
+                root.prepend(newRule);
+            },
+        };
+    }
+
+    async guessVariableValue(varName) {
+        const scss = fs.readFileSync(this.filePath, 'utf8');
+        const processedFile = await this.processCss(
+            scss,
+            this.transformForGuessingVariableValue(varName),
+        );
+        return processedFile.varValue;
+    }
+
+    transformForGuessingVariableValue(varName) {
+        return {
+            postcssPlugin: 'Get first variable value found in the file',
+            Declaration: (decl, { result }) => {
+                if (decl.prop === varName) {
+                    // eslint-disable-next-line no-param-reassign
+                    result.varValue = decl.value;
+                    // todo propertly break on first found declaration
+                }
+            },
+        };
+    }
+}
+
+module.exports = UndefinedVariableFixer;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "6.1.1",
+  "version": "7.0.0-beta1",
   "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",