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

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));

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);
  });
 

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,
+};