@bigcommerce/stencil-cli 3.10.1 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 ### Draft
 
+### 3.13.0 (2022-04-08)
+
+-   feat: strf-9718 Add OAuth token to headers ([903](https://github.com/bigcommerce/stencil-cli/pull/903))
+
+### 3.12.0 (2022-03-29)
+
+-   feat: allow .css-files imports within SCSS files ([882](https://github.com/bigcommerce/stencil-cli/pull/882))
+-   bump paper version ([897](https://github.com/bigcommerce/stencil-cli/pull/897))
+
+### 3.11.0 (2022-03-10)
+
+-   feat: strf-9440 Stencil Bundle: fail on scss failure compilation ([884](https://github.com/bigcommerce/stencil-cli/pull/884))
+
 ### 3.10.1 (2022-02-24)
 
 -   fix: when there's no regions on the page ([878](https://github.com/bigcommerce/stencil-cli/pull/878))

package/lib/bundle-validator.js

@@ -14,6 +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 VALID_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', '.gif'];
 const WIDTH_COMPOSED = 600;
@@ -47,6 +48,7 @@ class BundleValidator {
             this._validateThemeSchema.bind(this),
             this._validateSchemaTranslations.bind(this),
             this._validateTemplatesFrontmatter.bind(this),
+            this._validateCssFiles.bind(this),
         ];
 
         if (!this.isPrivate) {
@@ -402,6 +404,43 @@ class BundleValidator {
         return true;
     }
 
+    async _validateCssFiles() {
+        const assetsPath = path.join(this.themePath, 'assets');
+        const stylesPath = path.join(this.themePath, 'assets/scss');
+        const rawConfig = await this.themeConfig.getRawConfig();
+        const compiler = rawConfig.css_compiler;
+
+        let cssFiles;
+        try {
+            const files = await fs.promises.readdir(stylesPath);
+            cssFiles = files.filter((file) => {
+                return file.slice(-(compiler.length + 1)) === `.${compiler}`;
+            });
+        } catch (e) {
+            throw new Error(`Error: ${e.message}, while reading files from "${stylesPath}".`.red);
+        }
+
+        for (const file of cssFiles) {
+            try {
+                /* eslint-disable-next-line no-await-in-loop */
+                await cssCompiler.compile(rawConfig, assetsPath, file);
+            } catch (e) {
+                const message = this.parseStencilStylesError(e);
+                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;
+    }
+
     validateTrailingSymbols(data) {
         if (_.isObject(data)) {
             return _.every(data, (value) => this.validateTrailingSymbols(value));

package/lib/css/compile.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const StencilStyles = require('@bigcommerce/stencil-styles');
+const { promisify } = require('util');
+
+const cssAssembler = require('../css-assembler');
+
+const SASS_ENGINE_NAME = 'node-sass-fork';
+
+const compile = async (configuration, themeAssetsPath, fileName) => {
+    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}`);
+
+    let files;
+    try {
+        files = await promisify(cssAssembler.assemble)(pathToFile, basePath, `${ext}`, {});
+    } catch (err) {
+        console.error(err);
+        throw err;
+    }
+
+    const params = {
+        data: files[pathToFile],
+        files,
+        dest: path.join('/assets/css', fileName),
+        themeSettings: configuration.settings,
+        sourceMap: true,
+        autoprefixerOptions: {
+            cascade: configuration.autoprefixer_cascade,
+            browsers: configuration.autoprefixer_browsers,
+        },
+    };
+    const stencilStyles = new StencilStyles(console);
+    stencilStyles.activateEngine(SASS_ENGINE_NAME);
+
+    return stencilStyles.compileCss('scss', params);
+};
+
+module.exports = {
+    compile,
+};

package/lib/css-assembler.js

@@ -23,17 +23,20 @@ function assemble(cssFiles, absolutePath, type, options, callback) {
 
     const parseImports = (cssFileAlias, parseImportsCallback) => {
         const normalizedCssFileAlias = cssFileAlias.replace(/(\.scss)$/g, '');
-        const cssFilePath = path.join(absolutePath, normalizedCssFileAlias + ext);
+        const typedCssFilePath = path.join(absolutePath, normalizedCssFileAlias + ext);
+        const rawCssFilePath = path.join(absolutePath, normalizedCssFileAlias + '.css');
         const cssFileAliasDir = path.parse(normalizedCssFileAlias).dir;
 
-        const fileParts = path.parse(cssFilePath);
+        const fileParts = path.parse(typedCssFilePath);
         const underscoredFilePath = path.join(fileParts.dir, `_${fileParts.base}`);
         let filePath;
 
-        if (fs.existsSync(cssFilePath)) {
-            filePath = cssFilePath;
+        if (fs.existsSync(typedCssFilePath)) {
+            filePath = typedCssFilePath;
         } else if (fs.existsSync(underscoredFilePath)) {
             filePath = underscoredFilePath;
+        } else if (ext === '.scss' && fs.existsSync(rawCssFilePath)) {
+            filePath = rawCssFilePath;
         } else {
             // File doesn't exist, just return to skip it
             parseImportsCallback();

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "3.10.1",
+  "version": "3.13.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -537,35 +537,35 @@
       }
     },
     "@bigcommerce/stencil-paper": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper/-/stencil-paper-3.0.0.tgz",
-      "integrity": "sha512-+8Zyln2L7yvoFabDzgXgSE+7it01Q5UZml+pq70qrx9GtsX+leIhdY01RoziDnES1I12qIx+bPUX+vM7oD1NZg==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper/-/stencil-paper-3.0.5.tgz",
+      "integrity": "sha512-jIjISuMcW5CSk2CYwhWl1CpVKBUqsTVDUyvPL05XjWQo8/fzAJm/9JL8r52FjfeUrepHkFfTPMoa0mU76S4qNA==",
       "requires": {
-        "@bigcommerce/stencil-paper-handlebars": "4.5.1",
+        "@bigcommerce/stencil-paper-handlebars": "4.5.5",
         "accept-language-parser": "~1.4.1",
         "messageformat": "~0.2.2"
       }
     },
     "@bigcommerce/stencil-paper-handlebars": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper-handlebars/-/stencil-paper-handlebars-4.5.1.tgz",
-      "integrity": "sha512-drdYQDXFI8BI/H4/ACmYJUA1QfCbpYVp8MxG/B+JNZypg6UzTnWRJOvCKqohfr9obnLbSdL+nMjVol2cq/RmgQ==",
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper-handlebars/-/stencil-paper-handlebars-4.5.5.tgz",
+      "integrity": "sha512-RoakM7Z5e/wZhKiuUNPCr1SgAMsR2stWnNqZydRqSV7ZSJdKxfCE4R0t8Y+ZMpgZPGvSOrIWrAcMaty5gLZhsw==",
       "requires": {
         "@bigcommerce/handlebars-v4": "4.7.6",
         "handlebars": "3.0.8",
         "handlebars-helpers": "0.8.4",
         "handlebars-utils": "^1.0.6",
         "he": "^1.2.0",
-        "lodash": "^4.17.13",
+        "lodash": "^4.17.21",
         "stringz": "^0.1.1"
       }
     },
     "@bigcommerce/stencil-styles": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-styles/-/stencil-styles-2.1.1.tgz",
-      "integrity": "sha512-6QwnLoqIUtLOAodUEH9O8hWin1dcHbziwqZFH7JQQrTNaLmi9/Z3Xy/YMIotSgK3ZHgeJcvIS+JrOFSOuhvbUg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-styles/-/stencil-styles-2.1.2.tgz",
+      "integrity": "sha512-foXvMzWkn57N3HRQZKVb6Mz9eKloONJn7GsUXJPy5kb1F9wySfHon68TpYQfsJpbnkGjx14DXFQERrFB/+w2oQ==",
       "requires": {
-        "@bigcommerce/node-sass": "https://github.com/bigcommerce-labs/node-sass.git#v3.5.1",
+        "@bigcommerce/node-sass": "git+https://git@github.com/bigcommerce-labs/node-sass.git#v3.5.1",
         "autoprefixer": "^6.7.3",
         "fibers": "^5.0.0",
         "lodash": "4.17.19",
@@ -575,8 +575,8 @@
       },
       "dependencies": {
         "@bigcommerce/node-sass": {
-          "version": "https://github.com/bigcommerce-labs/node-sass.git#6d170210301f4b64c6b347a5b95c2c1ec57bd5ef",
-          "from": "https://github.com/bigcommerce-labs/node-sass.git#v3.5.1",
+          "version": "git+https://git@github.com/bigcommerce-labs/node-sass.git#6d170210301f4b64c6b347a5b95c2c1ec57bd5ef",
+          "from": "git+https://git@github.com/bigcommerce-labs/node-sass.git#v3.5.1",
           "requires": {
             "async-foreach": "^0.1.3",
             "chalk": "^1.1.1",
@@ -3491,9 +3491,9 @@
       }
     },
     "caniuse-db": {
-      "version": "1.0.30001298",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001298.tgz",
-      "integrity": "sha512-bvIv7eUWHCWECqpyH7l76nigy9wjQITsqctAvREMGr4uVc19A2ssLXaNLPw6Nu33FaEeWAwPpWihpSY4v2SCKA=="
+      "version": "1.0.30001314",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001314.tgz",
+      "integrity": "sha512-HFxfq3iFLkYedDSOYnBfdqIUVPDr9yNhtz+6rrXpzcSDEEROOqhFKlNA3hpOhwjyZCfz3GzSoE0pjvjOOPCp7A=="
     },
     "caniuse-lite": {
       "version": "1.0.30001261",
@@ -6436,9 +6436,9 @@
       }
     },
     "fibers": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/fibers/-/fibers-5.0.0.tgz",
-      "integrity": "sha512-UpGv/YAZp7mhKHxDvC1tColrroGRX90sSvh8RMZV9leo+e5+EkRVgCEZPlmXeo3BUNQTZxUaVdLskq1Q2FyCPg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fibers/-/fibers-5.0.1.tgz",
+      "integrity": "sha512-VMC7Frt87Oo0AOJ6EcPFbi+tZmkQ4tD85aatwyWL6I9cYMJmm2e+pXUJsfGZ36U7MffXtjou2XIiWJMtHriErw==",
       "requires": {
         "detect-libc": "^1.0.3"
       }
@@ -13681,9 +13681,9 @@
       }
     },
     "sass": {
-      "version": "1.47.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.47.0.tgz",
-      "integrity": "sha512-GtXwvwgD7/6MLUZPnlA5/8cdRgC9SzT5kAnnJMRmEZQFRE3J56Foswig4NyyyQGsnmNvg6EUM/FP0Pe9Y2zywQ==",
+      "version": "1.49.9",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.9.tgz",
+      "integrity": "sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==",
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -14445,9 +14445,9 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
-      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-resolve": {
       "version": "0.5.3",
@@ -15436,9 +15436,9 @@
       "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
     },
     "uglify-js": {
-      "version": "3.15.1",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.1.tgz",
-      "integrity": "sha512-FAGKF12fWdkpvNJZENacOH0e/83eG6JyVQyanIJaBXCN1J11TUQv1T1/z8S+Z0CG0ZPk1nPcreF/c7lrTd0TEQ==",
+      "version": "3.15.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.3.tgz",
+      "integrity": "sha512-6iCVm2omGJbsu3JWac+p6kUiOpg3wFO2f8lIXjfEb8RrmLjzog1wTPMmwKB7swfzzqxj9YM+sGUM++u1qN4qJg==",
       "optional": true
     },
     "uglify-to-browserify": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "3.10.1",
+  "version": "3.13.0",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
@@ -45,8 +45,8 @@
     "package-lock.json"
   ],
   "dependencies": {
-    "@bigcommerce/stencil-paper": "3.0.0",
-    "@bigcommerce/stencil-styles": "2.1.1",
+    "@bigcommerce/stencil-paper": "3.0.5",
+    "@bigcommerce/stencil-styles": "2.1.2",
     "@hapi/boom": "^8.0.1",
     "@hapi/glue": "^6.2.0",
     "@hapi/h2o2": "^8.3.2",

package/server/index.js

@@ -20,6 +20,8 @@ function buildManifest(srcManifest, options) {
     pluginsByName['./plugins/router/router.module'].apiKey = options.dotStencilFile.apiKey;
     pluginsByName['./plugins/router/router.module'].port = options.dotStencilFile.port;
     pluginsByName['./plugins/router/router.module'].stencilCliVersion = options.stencilCliVersion;
+    pluginsByName['./plugins/router/router.module'].accessToken =
+        options.dotStencilFile.accessToken;
     pluginsByName['./plugins/renderer/renderer.module'].useCache = options.useCache;
     pluginsByName['./plugins/renderer/renderer.module'].username = options.dotStencilFile.username;
     pluginsByName['./plugins/renderer/renderer.module'].token = options.dotStencilFile.token;

package/server/plugins/router/router.module.js

@@ -119,7 +119,10 @@ internals.registerRoutes = (server) => {
                         )}`;
                         const urlParams = req.url.search || '';
                         const uri = `${host}${req.path}${urlParams}`;
-                        const headers = { 'stencil-cli': internals.options.stencilCliVersion };
+                        const headers = {
+                            'stencil-cli': internals.options.stencilCliVersion,
+                            'x-auth-token': internals.options.accessToken,
+                        };
                         return { uri, headers };
                     },
                     passThrough: true,
@@ -167,6 +170,8 @@ internals.registerRoutes = (server) => {
                             {
                                 origin: internals.options.storeUrl,
                                 host: internals.options.storeUrl.replace(/http[s]?:\/\//, ''),
+                                'stencil-cli': internals.options.stencilCliVersion,
+                                'x-auth-token': internals.options.accessToken,
                             },
                         ),
                     }),

package/server/plugins/theme-assets/theme-assets.module.js

@@ -1,18 +1,13 @@
 const _ = require('lodash');
 const Boom = require('@hapi/boom');
-const StencilStyles = require('@bigcommerce/stencil-styles');
 const path = require('path');
-const { promisify } = require('util');
-
-const cssAssembler = require('../../../lib/css-assembler');
 const utils = require('../../lib/utils');
+const cssCompiler = require('../../../lib/css/compile');
 
 const internals = {
     options: {},
 };
 
-const SASS_ENGINE_NAME = 'node-sass-fork';
-
 function register(server, options) {
     internals.options = _.defaultsDeep(options, internals.options);
 
@@ -62,35 +57,10 @@ internals.cssHandler = async (request, h) => {
     // Get the theme configuration
     const configuration = await request.app.themeConfig.getConfig();
     const fileName = internals.getOriginalFileName(request.params.fileName);
-    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(internals.getThemeAssetsPath(), `${ext}`);
-
-    let files;
-    try {
-        files = await promisify(cssAssembler.assemble)(pathToFile, basePath, `${ext}`, {});
-    } catch (err) {
-        console.error(err);
-        throw Boom.badData(err);
-    }
-
-    const params = {
-        data: files[pathToFile],
-        files,
-        dest: path.join('/assets/css', fileName),
-        themeSettings: configuration.settings,
-        sourceMap: true,
-        autoprefixerOptions: {
-            cascade: configuration.autoprefixer_cascade,
-            browsers: configuration.autoprefixer_browsers,
-        },
-    };
-    const stencilStyles = new StencilStyles(console);
-    stencilStyles.activateEngine(SASS_ENGINE_NAME);
+    const themeAssetsPath = internals.getThemeAssetsPath();
 
     try {
-        const css = await stencilStyles.compileCss('scss', params);
+        const css = await cssCompiler.compile(configuration, themeAssetsPath, fileName);
         return h.response(css).type('text/css');
     } catch (err) {
         console.error(err);