@bigcommerce/stencil-cli 8.2.0 → 8.4.0

package/lib/content-api-client.js

@@ -1,12 +1,11 @@
-require('colors');
-const NetworkUtils = require('./utils/NetworkUtils');
-const {
+import 'colors';
+import NetworkUtils from './utils/NetworkUtils.js';
+import {
     renderedRegionsByPageTypeQuery,
     renderedRegionsByPageTypeAndEntityIdQuery,
-} = require('./graphql/query');
+} from './graphql/query.js';
 
 const networkUtils = new NetworkUtils();
-
 /**
  * @param {object} options
  * @param {string} options.accessToken
@@ -17,7 +16,6 @@ const networkUtils = new NetworkUtils();
 async function getRenderedRegionsByPageType({ accessToken, storeUrl, pageType }) {
     try {
         const query = renderedRegionsByPageTypeQuery(pageType);
-
         const response = await networkUtils.sendApiRequest({
             url: `${storeUrl}/graphql`,
             headers: {
@@ -30,7 +28,6 @@ async function getRenderedRegionsByPageType({ accessToken, storeUrl, pageType })
                 query,
             }),
         });
-
         if (!response.data.data) {
             return { renderedRegions: [] };
         }
@@ -41,13 +38,11 @@ async function getRenderedRegionsByPageType({ accessToken, storeUrl, pageType })
                 },
             },
         } = response.data.data;
-
         return { renderedRegions: regions };
     } catch (err) {
         throw new Error(`Could not fetch the rendered regions for this page type: ${err.message}`);
     }
 }
-
 /**
  * @param {object} options
  * @param {string} options.accessToken
@@ -64,7 +59,6 @@ async function getRenderedRegionsByPageTypeAndEntityId({
 }) {
     try {
         const query = renderedRegionsByPageTypeAndEntityIdQuery(pageType, entityId);
-
         const response = await networkUtils.sendApiRequest({
             url: `${storeUrl}/graphql`,
             headers: {
@@ -77,7 +71,6 @@ async function getRenderedRegionsByPageTypeAndEntityId({
                 query,
             }),
         });
-
         if (!response.data.data) {
             return { renderedRegions: [] };
         }
@@ -88,7 +81,6 @@ async function getRenderedRegionsByPageTypeAndEntityId({
                 },
             },
         } = response.data.data;
-
         return {
             renderedRegions: regions,
         };
@@ -97,7 +89,7 @@ async function getRenderedRegionsByPageTypeAndEntityId({
     }
 }
 
-module.exports = {
+export default {
     getRenderedRegionsByPageType,
     getRenderedRegionsByPageTypeAndEntityId,
 };

package/lib/css/compile.js

@@ -1,25 +1,21 @@
-const path = require('path');
-const StencilStyles = require('@bigcommerce/stencil-styles');
-const { promisify } = require('util');
-
-const cssAssembler = require('../css-assembler');
+import path from 'path';
+import StencilStyles from '@bigcommerce/stencil-styles';
 
 const SASS_ENGINE_NAME = 'node-sass';
-
 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}`);
     const basePath = path.join(themeAssetsPath, `${ext}`);
+    const stencilStyles = new StencilStyles(console);
 
     let files;
     try {
-        files = await promisify(cssAssembler.assemble)(pathToFile, basePath, `${ext}`, {});
+        files = await stencilStyles.assembleCssFiles(pathToFile, basePath, `${ext}`, {});
     } catch (err) {
         console.error(err);
         throw err;
     }
-
     const params = {
         data: files[pathToFile],
         files,
@@ -31,13 +27,11 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
             overrideBrowserslist: configuration.autoprefixer_browsers,
         },
     };
-    const stencilStyles = new StencilStyles(console);
     stencilStyles.activateEngine(engineName);
-
     return stencilStyles.compileCss('scss', params);
 };
 
-module.exports = {
+export default {
     compile,
     SASS_ENGINE_NAME,
 };

package/lib/graphql/query.js

@@ -2,9 +2,7 @@
  * @param {string} pageType
  * @returns {string}>}
  */
-
-const renderedRegionsByPageTypeQuery = (pageType) =>
-    `query {
+const renderedRegionsByPageTypeQuery = (pageType) => `query {
           site {
             content {
               renderedRegionsByPageType(pageType: ${pageType}) {
@@ -16,14 +14,12 @@ const renderedRegionsByPageTypeQuery = (pageType) =>
             }
           }
     }`;
-
 /**
  * @param {string} pageType
  * @param {number} entityId
  * @returns {string}>}
  */
-const renderedRegionsByPageTypeAndEntityIdQuery = (pageType, entityId) =>
-    `query {
+const renderedRegionsByPageTypeAndEntityIdQuery = (pageType, entityId) => `query {
           site {
             content {
               renderedRegionsByPageTypeAndEntityId(entityPageType: ${pageType}, entityId: ${entityId}) {
@@ -35,8 +31,9 @@ const renderedRegionsByPageTypeAndEntityIdQuery = (pageType, entityId) =>
             }
           }
     }`;
-
-module.exports = {
+export { renderedRegionsByPageTypeQuery };
+export { renderedRegionsByPageTypeAndEntityIdQuery };
+export default {
     renderedRegionsByPageTypeQuery,
     renderedRegionsByPageTypeAndEntityIdQuery,
 };

package/lib/lang/validator.js

@@ -1,10 +1,9 @@
-require('colors');
-const fs = require('fs');
-const path = require('path');
-const { recursiveReadDir } = require('../utils/fsUtils');
+import 'colors';
+import fs from 'fs';
+import path from 'path';
+import { recursiveReadDir } from '../utils/fsUtils.js';
 
 const LANG_HELPER_REGEXP = /{{\s*lang\s*(?:'|")((?:\w*(?:-\w*)*(\.\w*(?:-\w*)*)*)+)/gim;
-
 class LangpathsValidator {
     /**
      *
@@ -36,7 +35,6 @@ class LangpathsValidator {
     searchLangPaths(fileContent, langPath) {
         const keys = langPath.split('.');
         let value = fileContent;
-
         for (const key of keys) {
             // eslint-disable-next-line no-prototype-builtins
             if (value && value.hasOwnProperty(key)) {
@@ -45,7 +43,6 @@ class LangpathsValidator {
                 return false;
             }
         }
-
         return value;
     }
 
@@ -97,11 +94,9 @@ class LangpathsValidator {
         const filesContent = {};
         const langPath = path.join(this.themePath, 'lang');
         let files = await recursiveReadDir(langPath);
-
         if (defaultLang) {
             files = files.filter((file) => file.includes(defaultLang));
         }
-
         for await (const file of files) {
             const content = await fs.promises.readFile(file, { encoding: 'utf-8' });
             filesContent[file] = JSON.parse(content);
@@ -109,5 +104,4 @@ class LangpathsValidator {
         return filesContent;
     }
 }
-
-module.exports = LangpathsValidator;
+export default LangpathsValidator;

package/lib/lang-assembler.js

@@ -1,9 +1,8 @@
-const async = require('async');
-const fs = require('fs');
-const path = require('path');
+import async from 'async';
+import fs from 'fs';
+import path from 'path';
 
 const LOCALE_DIRECTORY = 'lang';
-
 /**
  * Assembles together all of the lang files.
  * This simply loads the files from the lang directory and puts them in an object where
@@ -17,27 +16,22 @@ function assemble(callback) {
             callback(err);
             return;
         }
-
         // Ignore hidden files
         // @example: MAC generates .DS_STORE
         const filteredLocaleFiles = localeFiles.filter((fileName) => fileName[0] !== '.');
         const localesToLoad = {};
-
         for (const localeFile of filteredLocaleFiles) {
             const localeName = path.basename(localeFile, '.json');
-
             localesToLoad[localeName.toLowerCase()] = (cb2) => {
                 const localeFilePath = `${LOCALE_DIRECTORY}/${localeFile}`;
-
                 fs.readFile(localeFilePath, 'utf-8', cb2);
             };
         }
-
         async.parallel(localesToLoad, callback);
     });
 }
 
-module.exports = {
+export default {
     assemble,
     LOCALE_DIRECTORY,
 };

package/lib/lang-helper.js

@@ -1,5 +1,5 @@
-require('colors');
-const fsUtilsModule = require('./utils/fsUtils');
+import 'colors';
+import fsUtilsModule from './utils/fsUtils.js';
 
 function flattenObject(object, result = {}, parentKey = '') {
     return Object.entries(object).reduce((currentLayer, [key, innerValue]) => {
@@ -12,7 +12,6 @@ function flattenObject(object, result = {}, parentKey = '') {
         return currentLayer;
     }, result);
 }
-
 class LangHelper {
     constructor({ fsUtils = fsUtilsModule, logger = console } = {}) {
         this._fsUtils = fsUtils;
@@ -27,7 +26,6 @@ class LangHelper {
         const defaultLangFile = await this._fsUtils.parseJsonFile(defaultLangFilePath);
         const flattenedDefaultLang = flattenObject(defaultLangFile);
         const alreadyWarnedKey = [];
-
         for await (const filePath of filesPaths) {
             if (!filePath.includes(themeLangFilename)) {
                 const langFile = await this._fsUtils.parseJsonFile(filePath);
@@ -55,5 +53,4 @@ class LangHelper {
         }
     }
 }
-
-module.exports = LangHelper;
+export default LangHelper;

package/lib/nodeSass/AutoFixer.js

@@ -1,22 +1,17 @@
-/* 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');
+import 'colors';
+import fs from 'fs';
+import path from 'path';
+import ScssValidator from '../ScssValidator.js';
+import cssCompiler from '../css/compile.js';
+import BaseRulesFixer from './BaseRulesFixer.js';
+import ConditionaImportFixer from './ConditionalImportFixer.js';
+import CommaRemovalFixer from './CommaRemovalFixer.js';
+import UndefinedVariableFixer from './UndefinedVariableFixer.js';
 
 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 {
     /**
      *
@@ -28,7 +23,6 @@ class AutoFixer {
         this.themePath = themePath;
         this.themeConfig = themeConfig;
         this.cliOptions = cliOptions;
-
         this.validator = new ScssValidator(themePath, themeConfig);
     }
 
@@ -36,7 +30,6 @@ class AutoFixer {
         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 {
@@ -117,7 +110,6 @@ class AutoFixer {
                 return UNDEFINED_VARIABLE;
             }
         }
-
         return null;
     }
 
@@ -139,5 +131,4 @@ class AutoFixer {
         }
     }
 }
-
-module.exports = AutoFixer;
+export default AutoFixer;

package/lib/nodeSass/BaseFixer.js

@@ -1,7 +1,7 @@
-const fs = require('fs');
-const path = require('path');
-const postcss = require('postcss');
-const postcssScss = require('postcss-scss');
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+import postcssScss from 'postcss-scss';
 
 class BaseFixer {
     constructor(dirname, brokenFile) {
@@ -35,7 +35,6 @@ class BaseFixer {
             }
             return filePathWithUnderscore;
         }
-
         return filePath;
     }
 
@@ -52,5 +51,4 @@ class BaseFixer {
         return fileNameWithUnderscore;
     }
 }
-
-module.exports = BaseFixer;
+export default BaseFixer;

package/lib/nodeSass/BaseRulesFixer.js

@@ -1,14 +1,10 @@
-// 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');
+import fs from 'fs';
+import BaseFixer from './BaseFixer.js';
 
 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 }];
     }
 
@@ -36,5 +32,4 @@ class BaseRulesFixer extends BaseFixer {
         return rule.toString().replace(/\/\*(.*)\*\//g, '//$1');
     }
 }
-
-module.exports = BaseRulesFixer;
+export default BaseRulesFixer;

package/lib/nodeSass/CommaRemovalFixer.js

@@ -1,14 +1,10 @@
-// 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');
+import fs from 'fs';
+import BaseFixer from './BaseFixer.js';
 
 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 }];
     }
 
@@ -24,5 +20,4 @@ class CommaRemovalFixer extends BaseFixer {
         };
     }
 }
-
-module.exports = CommaRemovalFixer;
+export default CommaRemovalFixer;

package/lib/nodeSass/ConditionalImportFixer.js

@@ -1,18 +1,15 @@
 /* eslint-disable no-param-reassign, operator-assignment */
-const fs = require('fs');
-
-const BaseFixer = require('./BaseFixer');
+import fs from 'fs';
+import BaseFixer from './BaseFixer.js';
 
 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' });
@@ -32,7 +29,6 @@ class ConditionalImportFixer extends BaseFixer {
                 });
             }
         }
-
         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
@@ -214,7 +210,6 @@ class ConditionalImportFixer extends BaseFixer {
         if (hasTabSpace) {
             return '\t';
         }
-
         return '    ';
     }
 
@@ -226,5 +221,4 @@ class ConditionalImportFixer extends BaseFixer {
         return fileName.replace(/['"]+/g, '');
     }
 }
-
-module.exports = ConditionalImportFixer;
+export default ConditionalImportFixer;

package/lib/nodeSass/UndefinedVariableFixer.js

@@ -1,14 +1,12 @@
-const fs = require('fs');
-const BaseFixer = require('./BaseFixer');
+import fs from 'fs';
+import BaseFixer from './BaseFixer.js';
 
 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 }];
     }
 
@@ -56,5 +54,4 @@ class UndefinedVariableFixer extends BaseFixer {
         };
     }
 }
-
-module.exports = UndefinedVariableFixer;
+export default UndefinedVariableFixer;

package/lib/parse-json.js

@@ -1,11 +1,12 @@
-const parseJson = require('parse-json');
+import parseJson from 'parse-json';
 
-module.exports = {
-    parse(jsonString, file = '') {
-        try {
-            return parseJson(jsonString);
-        } catch (e) {
-            throw new Error(`${file} - ${e.message}`);
-        }
-    },
+export function parse(jsonString, file = '') {
+    try {
+        return parseJson(jsonString);
+    } catch (e) {
+        throw new Error(`${file} - ${e.message}`);
+    }
+}
+export default {
+    parse,
 };

package/lib/regions.js

@@ -7,19 +7,15 @@
  */
 function buildTemplateIncludes(templates, currentPartial, visited = {}) {
     const includeRegex = /{{2}>\s*([_|\-|a-zA-Z0-9/]+)[^{]*?}{2}/g;
-
     // eslint-disable-next-line no-param-reassign
     visited[currentPartial] = true;
-
     return templates[currentPartial].replace(includeRegex, (_, partial) => {
         if (visited[partial]) {
             return '';
         }
-
         return buildTemplateIncludes(templates, partial, visited);
     });
 }
-
 /**
  * Insert all #partial blocks in the corresponding #block block
  * @param {string} template
@@ -29,17 +25,14 @@ function parsePartialBlocks(template) {
     const partialRegex = /{{2}\s*#partial\s+.*?["|']([\w-]+)["|'].*?}{2}([\s\S]*?){{2}\/partial}{2}?/g;
     const blockRegex = /{{2}\s*#block\s+.*?["|']([\w-]+)["|'].*?}{2}([\s\S]*?){{2}\/block}{2}?/g;
     const partials = {};
-
     const output = template.replace(partialRegex, (_, name, content) => {
         partials[name] = content;
         return '';
     });
-
     return output.replace(blockRegex, (_, name, content) => {
         return content + (partials[name] || '');
     });
 }
-
 /**
  * Replace all occurrences of dynamicComponent with the content of the partials
  * @param {Object} templates
@@ -48,7 +41,6 @@ function parsePartialBlocks(template) {
  */
 function parseDynamicComponents(templates, template) {
     const dynamicComponentRegex = /{{\s*?dynamicComponent\s*(?:'|")([_|\-|a-zA-Z0-9/]+)(?:'|").*?}}/g;
-
     return template.replace(dynamicComponentRegex, (_, path) => {
         // insert dynamic components in the template
         return Object.keys(templates)
@@ -58,7 +50,6 @@ function parseDynamicComponents(templates, template) {
             }, '');
     });
 }
-
 /**
  * Builds a template with all include partials and include all dynamic components
  * @param {Object} templates
@@ -69,10 +60,8 @@ function buildPageTemplate(templates, page) {
     let pageTemplate = buildTemplateIncludes(templates, page);
     pageTemplate = parsePartialBlocks(pageTemplate);
     pageTemplate = parseDynamicComponents(templates, pageTemplate);
-
     return pageTemplate;
 }
-
 /**
  * Returns a boolean if there are two regions with the same name
  * @param {Object} regions
@@ -88,10 +77,8 @@ function checkDuplicateRegionName(regions, regionData) {
             break;
         }
     }
-
     return result;
 }
-
 /**
  * Parse a template content and return an array of unique region objects
  * @param {string} content
@@ -103,28 +90,23 @@ function parseRegions(content) {
     const regions = new Set();
     let regionMatch;
     const translationMatch = translationRegex.exec(content);
-
     // eslint-disable-next-line
     while ((regionMatch = regionRegex.exec(content))) {
         const regionData = {};
         // eslint-disable-next-line prefer-destructuring
         regionData.name = regionMatch[1];
-
         // If there is a translation match and regionName match is valid, add data to region
         if (translationMatch && regionMatch[1]) {
             // eslint-disable-next-line prefer-destructuring
             regionData.translation = translationMatch[1];
         }
-
         if (!checkDuplicateRegionName(regions, regionData)) {
             regions.add(regionData);
         }
     }
     const regionArray = Array.from(regions);
-
     return regionArray.map(({ name, translation }) => ({ name, translation }));
 }
-
 /**
  * Returns an object of regions for the manifest file
  * @param {Object} templates
@@ -134,17 +116,15 @@ function parseRegions(content) {
 function fetchRegions(templates, partials) {
     const pages = partials.filter((partial) => partial.match(/^pages\//));
     const regions = {};
-
     pages.forEach((page) => {
         const template = buildPageTemplate(templates[page], page);
-
         regions[page] = parseRegions(template);
     });
-
     return regions;
 }
-
-module.exports = {
+export { fetchRegions };
+export { parseRegions };
+export default {
     fetchRegions,
     parseRegions,
 };