@bigcommerce/stencil-cli 3.9.2 → 3.11.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+### Draft
+
+### 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))
+-   fix: STRF-9667 Storefront fallback logic works incorrectly on store with Stencil CLI ([877](https://github.com/bigcommerce/stencil-cli/pull/877))
+
+### 3.10.0 (2022-02-08)
+
+-   fix(storefront): bctheme-1000 handle regular css in stencil ([845](https://github.com/bigcommerce/stencil-cli/pull/845))
+-   chore: bump paper to 3.0.0 ([868](https://github.com/bigcommerce/stencil-cli/pull/868))
+
 ### 3.9.2 (2022-01-31)
 
 -   chore: bump paper to latest ([863](https://github.com/bigcommerce/stencil-cli/pull/863))

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/content-api-client.js

@@ -31,6 +31,9 @@ async function getRenderedRegionsByPageType({ accessToken, storeUrl, pageType })
             }),
         });
 
+        if (!response.data.data) {
+            return { renderedRegions: [] };
+        }
         const {
             site: {
                 content: {
@@ -75,6 +78,9 @@ async function getRenderedRegionsByPageTypeAndEntityId({
             }),
         });
 
+        if (!response.data.data) {
+            return { renderedRegions: [] };
+        }
         const {
             site: {
                 content: {

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/stencil-bundle.js

@@ -110,7 +110,12 @@ class Bundle {
             bundle: true,
         };
         return (callback) => {
-            const basePath = path.join(this.themePath, 'assets', compiler);
+            let basePath;
+            if (compiler === 'css') {
+                basePath = path.join(this.themePath, 'assets/dist', compiler);
+            } else {
+                basePath = path.join(this.themePath, 'assets', compiler);
+            }
 
             console.log('%s Parsing Started...', compiler.toUpperCase());
             fs.readdir(basePath, (err, files) => {
@@ -395,7 +400,12 @@ class Bundle {
                 case 'css':
                     // Create the parsed tree files
                     for (const [filename, data] of Object.entries(result)) {
-                        archiveJsonFile(data, `parsed/scss/${filename}.json`);
+                        const ext =
+                            this.configuration.css_compiler === 'css'
+                                ? this.configuration.css_compiler
+                                : 'scss';
+
+                        archiveJsonFile(data, `parsed/${ext}/${filename}.json`);
                     }
                     break;
 

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "3.9.2",
+  "version": "3.11.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -537,9 +537,9 @@
       }
     },
     "@bigcommerce/stencil-paper": {
-      "version": "3.0.0-rc.54",
-      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper/-/stencil-paper-3.0.0-rc.54.tgz",
-      "integrity": "sha512-vCjVW7zBrsRu7CypgHs3WHoRGHvKXFTn3N8TJ3ZCaDbOuZJbPKE/+cr5M9Yl+OOglAQ5LCVwjPG7cn5HUg5OvA==",
+      "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==",
       "requires": {
         "@bigcommerce/stencil-paper-handlebars": "4.5.1",
         "accept-language-parser": "~1.4.1",
@@ -561,11 +561,11 @@
       }
     },
     "@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.0",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.0.tgz",
-      "integrity": "sha512-x+xdeDWq7FiORDvyIJ0q/waWd4PhjBNOm5dQUOq2AKC0IEjxOS66Ha9tctiVDGcRQuh69K7fgU5oRuTK4cysSg==",
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.15.1.tgz",
+      "integrity": "sha512-FAGKF12fWdkpvNJZENacOH0e/83eG6JyVQyanIJaBXCN1J11TUQv1T1/z8S+Z0CG0ZPk1nPcreF/c7lrTd0TEQ==",
       "optional": true
     },
     "uglify-to-browserify": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "3.9.2",
+  "version": "3.11.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-rc.54",
-    "@bigcommerce/stencil-styles": "2.1.1",
+    "@bigcommerce/stencil-paper": "3.0.0",
+    "@bigcommerce/stencil-styles": "2.1.2",
     "@hapi/boom": "^8.0.1",
     "@hapi/glue": "^6.2.0",
     "@hapi/h2o2": "^8.3.2",

package/server/plugins/renderer/renderer.module.js

@@ -371,7 +371,7 @@ function getAcceptLanguageHeader(request) {
     ) {
         return internals.options.storeSettingsLocale.default_shopper_language;
     }
-    return request.headers['accept-language'];
+    return request.headers['accept-language'].toLowerCase();
 }
 
 /**

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);
 
@@ -60,37 +55,12 @@ internals.cssHandler = async (request, h) => {
     request.app.themeConfig.setVariation(variationIndex);
 
     // Get the theme configuration
-    const fileName = internals.getOriginalFileName(request.params.fileName);
-    const fileParts = path.parse(fileName);
-    const pathToFile = path.join(fileParts.dir, `${fileParts.name}.scss`);
-    const basePath = path.join(internals.getThemeAssetsPath(), 'scss');
-
-    let files;
-    try {
-        files = await promisify(cssAssembler.assemble)(pathToFile, basePath, 'scss', {});
-    } catch (err) {
-        console.error(err);
-        throw Boom.badData(err);
-    }
-
     const configuration = await request.app.themeConfig.getConfig();
-
-    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 fileName = internals.getOriginalFileName(request.params.fileName);
+    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);