feat: STRF-9749 Update Stencil Cli to use node-sass latest by default

.github/workflows/pull_request_review.yml

@@ -20,10 +20,10 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@v2
+              uses: actions/checkout@v3
 
             - name: Use Node.js ${{ matrix.node }}
-              uses: actions/setup-node@v2-beta
+              uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node }}
 

CHANGELOG.md

@@ -1,10 +1,15 @@
 ### Draft
 
+-   feat: strf-9749 Update Stencil Cli to use node-sass latest by default ([923](https://github.com/bigcommerce/stencil-cli/pull/923))
+    New option:` --use-old-node-sass-fork` to bypass error warning (in case it exist) using latest node-sass version.
+    Soon, it node sass fork will be deprecated and it won't be possible to compile with it.
+
 -   feat: STRF-9757 Introduced "stencil debug" ([918](https://github.com/bigcommerce/stencil-cli/pull/918))
 
 Available options: --output [filename] (-o)
 If not provided, will be logged to std
--   feat: STRF-9741 Verbose network requests logging in Stencil CLI by default ([x](https://github.com/bigcommerce/stencil-cli/pull/x))
+
+-   feat: STRF-9741 Verbose network requests logging in Stencil CLI by default ([914](https://github.com/bigcommerce/stencil-cli/pull/914))
     Introduced `--no-verbose` option on all commands to supress verbose network requests logging.
 
 ### 4.0.0 (2022-04-11)

lib/StencilCLISettings.js

@@ -2,6 +2,8 @@ class StencilCLISettings {
     constructor() {
         // The setting enables/disables verbose network requests logging
         this.versboseNetworkLogging = true;
+        // Enables usage of node sass fork for testing purposes
+        this.oldNodeSassFork = false;
     }
 
     setVerbose(flag) {
@@ -11,6 +13,14 @@ class StencilCLISettings {
     isVerbose() {
         return this.versboseNetworkLogging === true;
     }
+
+    useOldNodeSassFork(flag) {
+        this.oldNodeSassFork = flag;
+    }
+
+    isOldNodeSassForkEnabled() {
+        return this.oldNodeSassFork;
+    }
 }
 
 const settings = new StencilCLISettings();

lib/bundle-validator.js

@@ -15,6 +15,7 @@ const privateThemeConfigValidationSchema = require('./schemas/privateThemeConfig
 const themeConfigValidationSchema = require('./schemas/themeConfig.json');
 const themeValidationSchema = require('./schemas/themeSchema.json');
 const cssCompiler = require('./css/compile');
+const stencilCLISettings = require('./StencilCLISettings');
 
 const VALID_IMAGE_TYPES = ['.jpg', '.jpeg', '.png', '.gif'];
 const WIDTH_COMPOSED = 600;
@@ -27,6 +28,8 @@ const MAX_SIZE_COMPOSED = 1024 * 1024 * 2; // 2MB
 const MAX_SIZE_MOBILE = 1024 * 1024; // 1MB
 const MAX_SIZE_DESKTOP = 1024 * 1024 * 5; // 5MB
 
+/* eslint-disable no-useless-escape */
+const STYLESHEET_REGEXP = /{{\s*stylesheet\s*([\/a-zA-Z'"\.-]+)\s*}}/i;
 class BundleValidator {
     /**
      * Run some validations to ensure that the platform will accept the theme
@@ -408,31 +411,100 @@ class BundleValidator {
         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);
-        }
+        const cssFiles = await this.getCssFiles();
 
         for (const file of cssFiles) {
             try {
+                const engine = stencilCLISettings.isOldNodeSassForkEnabled()
+                    ? cssCompiler.FALLBACK_SASS_ENGINE_NAME
+                    : cssCompiler.SASS_ENGINE_NAME;
                 /* eslint-disable-next-line no-await-in-loop */
-                await cssCompiler.compile(rawConfig, assetsPath, file);
+                await cssCompiler.compile(rawConfig, assetsPath, file, engine);
             } catch (e) {
                 const message = this.parseStencilStylesError(e);
+                if (!stencilCLISettings.isOldNodeSassForkEnabled()) {
+                    throw new Error(
+                        `${message}\n`.red +
+                            `\n` +
+                            `---------WARNING---------\n`.red +
+                            `We are currently in the process of deprecating node-sass fork https://github.com/bigcommerce-labs/node-sass\n` +
+                            `Your scss files were compiled using latest node-sass version https://github.com/sass/node-sass\n` +
+                            `This error might indicate that your scss file is not compatible with it.\n` +
+                            `There is still an option to compile scss file old fork by using --use-old-node-sass-fork.\n` +
+                            `But note, that this will lead to 500 error in production in near future.\n` +
+                            `---------WARNING---------\n`.red,
+                    );
+                }
                 throw new Error(
                     `${message} while compiling css files from "${stylesPath}/${file}".`.red,
                 );
             }
         }
     }
 
+    async getCssFiles() {
+        const templatesPath = path.join(this.themePath, 'templates');
+        const files = await recursiveReadDir(templatesPath);
+        const cssFiles = [];
+        for await (const file of files) {
+            const content = await fs.promises.readFile(file, { encoding: 'utf-8' });
+            const result = content.match(STYLESHEET_REGEXP);
+            if (result) {
+                // remove quotes
+                const fileName = result[1].slice(1, -1);
+
+                const filePath = this.tryToResolveCssFileLocation(fileName, result);
+                if (!cssFiles.includes(filePath)) {
+                    // check if file exist
+                    cssFiles.push(filePath);
+                }
+            }
+        }
+
+        return cssFiles;
+    }
+
+    // returns relative path starting from root scss/css folder
+    tryToResolveCssFileLocation(fileName, result) {
+        const possibleLocations = [
+            fileName,
+            fileName.replace('/css/', '/scss/'),
+            fileName.replace('/scss/', '/css/'),
+            fileName.replace('/css/', '/scss/').replace('.css', '.scss'),
+            fileName.replace('/scss/', '/css/').replace('.scss', '.css'),
+        ];
+
+        for (const location of possibleLocations) {
+            const filePath = path.join(this.themePath, location);
+            if (fs.existsSync(filePath)) {
+                if (!this.isRootCssFile(location)) {
+                    return this.getCssFileWithoutRootFolder(location);
+                }
+                const fileParts = path.parse(filePath);
+                return fileParts.name;
+            }
+        }
+
+        throw new Error(`Couldn't find file for this statement: ${result[0]}`.red);
+    }
+
+    // root folders are /assets/css /assets/scss
+    // so after split, there can be 3 or 4 elements in the array (depending if the leading slash is present)
+    isRootCssFile(location) {
+        return location.split('/').length <= 4;
+    }
+
+    getCssFileWithoutRootFolder(location) {
+        const locationParts = location.split('/');
+        if (locationParts[0] === '') {
+            locationParts.shift();
+        }
+        locationParts.shift();
+        locationParts.shift();
+
+        return locationParts.join('/');
+    }
+
     parseStencilStylesError(e) {
         if (e.formatted) {
             return `${e.formatted.replace('Error: ', '')}: `;

lib/bundle-validator.spec.js

@@ -3,6 +3,7 @@ const { promisify } = require('util');
 
 const ThemeConfig = require('./theme-config');
 const BundleValidator = require('./bundle-validator');
+const stencilCLISettings = require('./StencilCLISettings');
 
 const themePath = path.join(process.cwd(), 'test/_mocks/themes/valid');
 
@@ -15,6 +16,7 @@ describe('BundleValidator', () => {
 
     afterEach(() => {
         jest.restoreAllMocks();
+        stencilCLISettings.useOldNodeSassFork(false);
     });
 
     it('should not run image validations for private themes', async () => {
@@ -126,4 +128,18 @@ describe('BundleValidator', () => {
             'while parsing frontmatter',
         );
     });
+
+    it('should throw an error using latest node sass', async () => {
+        const themePath2 = path.join(
+            process.cwd(),
+            'test/_mocks/themes/invalid-scss-latest-node-sass',
+        );
+        themeConfig = ThemeConfig.getInstance(themePath2);
+
+        const validator = new BundleValidator(themePath2, themeConfig, false);
+
+        await expect(promisify(validator.validateTheme.bind(validator))()).rejects.toThrow(
+            'Import directives may not be used within control directives or mixins',
+        );
+    });
 });

lib/bundle-validator2.spec.js

@@ -0,0 +1,32 @@
+const path = require('path');
+const { promisify } = require('util');
+
+const ThemeConfig = require('./theme-config');
+const BundleValidator = require('./bundle-validator');
+const stencilCLISettings = require('./StencilCLISettings');
+
+// NOTE:
+// Since stencil styles can't change node sass engine in runtime, tests are divided into 2 files
+// Jest runs tests in parallel, so the node sass binaries are not conflicting and we are able to test both scenarios
+//
+// Skipping this test until multiple core are supported no Github Actions
+describe.skip('BundleValidator', () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+        stencilCLISettings.useOldNodeSassFork(false);
+    });
+
+    it('should compile successfully with old node sass fork', async () => {
+        const themePath = path.join(
+            process.cwd(),
+            'test/_mocks/themes/invalid-scss-latest-node-sass',
+        );
+        const themeConfig = ThemeConfig.getInstance(themePath);
+        stencilCLISettings.useOldNodeSassFork(true);
+
+        const validator = new BundleValidator(themePath, themeConfig, false);
+
+        const result = await promisify(validator.validateTheme.bind(validator))();
+        expect(result).not.toBeNull();
+    });
+});

lib/cliCommon.js

@@ -88,11 +88,17 @@ function applyCommonOptions(program) {
     program
         .option('-h, --host [hostname]', 'specify the api host')
         .option('-nov, --no-verbose', 'supress verbose info logging', false)
+        .option(
+            '--use-old-node-sass-fork',
+            'use old node sass fork for scss compilation during bundling',
+            false,
+        )
         .parse(process.argv);
 }
 
 function setupCLI(options) {
     stencilCLISettings.setVerbose(options.verbose);
+    stencilCLISettings.useOldNodeSassFork(options.useOldNodeSassFork);
 }
 
 function prepareCommand(program) {

lib/css/compile.js

@@ -4,9 +4,10 @@ const { promisify } = require('util');
 
 const cssAssembler = require('../css-assembler');
 
-const SASS_ENGINE_NAME = 'node-sass-fork';
+const FALLBACK_SASS_ENGINE_NAME = 'node-sass-fork';
+const SASS_ENGINE_NAME = 'node-sass';
 
-const compile = async (configuration, themeAssetsPath, fileName) => {
+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}`);
@@ -32,11 +33,13 @@ const compile = async (configuration, themeAssetsPath, fileName) => {
         },
     };
     const stencilStyles = new StencilStyles(console);
-    stencilStyles.activateEngine(SASS_ENGINE_NAME);
+    stencilStyles.activateEngine(engineName);
 
     return stencilStyles.compileCss('scss', params);
 };
 
 module.exports = {
     compile,
+    SASS_ENGINE_NAME,
+    FALLBACK_SASS_ENGINE_NAME,
 };

lib/stencil-push.utils.spec.js

@@ -46,6 +46,10 @@ describe('stencil push utils', () => {
         channelIds: [1, 2],
     };
 
+    beforeEach(() => {
+        jest.spyOn(console, 'info').mockImplementation(jest.fn());
+    });
+
     afterEach(() => {
         jest.restoreAllMocks();
         axiosMock.reset();

server/plugins/renderer/renderer.module.spec.js

@@ -34,6 +34,7 @@ describe('Renderer Plugin', () => {
         // Prevent littering the console
         jest.spyOn(console, 'log').mockImplementation(jest.fn());
         jest.spyOn(console, 'error').mockImplementation(jest.fn());
+        jest.spyOn(console, 'info').mockImplementation(jest.fn());
 
         server = await Server.create(serverOptions);
 

test/_mocks/themes/invalid-scss-latest-node-sass/assets/scss/test.scss

@@ -0,0 +1,3 @@
+h1 {
+    color: #000000;
+}

test/_mocks/themes/invalid-scss-latest-node-sass/assets/scss/theme.scss

@@ -0,0 +1,9 @@
+h1 {
+    color: #0000AA;
+}
+
+$font: "Arial";
+
+@if not contains($font, "'Clear Sans', sans-serif") {
+    @import "test";
+}