feat: strf-9440 Stencil Bundle: fail on scss failure compilation

bigcommerce · Mar 10, 2022 · adf6996 · adf6996
1 parent cfce82d
commit adf6996
Show file tree

Hide file tree

Showing 6 changed files with 5,523 additions and 5,472 deletions.
diff --git a/lib/bundle-validator.js b/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));

diff --git a/lib/bundle-validator.spec.js b/lib/bundle-validator.spec.js
@@ -101,7 +101,7 @@ describe('BundleValidator', () => {
 
         const res = await promisify(validator.validateTheme.bind(validator))();
 
-        expect(res).toHaveLength(5); // 5 validation tasks
+        expect(res).toHaveLength(6); // 6 validation tasks
         expect(res).not.toContain(false);
     });
 

diff --git a/lib/css/compile.js b/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,
+};