feat(storefront): strf-10292 Node 16 Support (#1048)

BREAKING CHANGE: Drop Node 14 Support

.github/workflows/pull_request_review.yml

@@ -11,7 +11,7 @@ jobs:
  build:
  strategy:
  matrix:
- node: [14.x]
+ node: [16.x]
  os: ['ubuntu-latest', 'windows-2019', 'macos-latest']
 
  runs-on: ${{ matrix.os }}

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
  - uses: actions/checkout@v3
  - uses: actions/setup-node@v3
  with:
- node-version: '14.x'
+ node-version: '16.x'
  - run: npm i
  - name: Check Git Commit name
  run: git log -1 --pretty=format:"%s" | npx commitlint

.nvmrc

@@ -1 +1 @@
-v14.19
+v16.19

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14
+FROM node:16
 
 WORKDIR /usr/src/app
 

README.md

@@ -7,9 +7,8 @@ The BigCommerce server emulator for local theme development.
 
 ## Install
 
-_Note: Stencil requires the Node.js runtime environment,
-version 14.x is supported.
-We do not yet have support for versions greater than Node 14._
+Note: Stencil requires the Node.js runtime environment,
+version 16.x is supported.
 
 Run `npm install -g @bigcommerce/stencil-cli`.
 

lib/StencilCLISettings.js

@@ -13,14 +13,6 @@ class StencilCLISettings {
  isVerbose() {
  return this.versboseNetworkLogging;
  }
-
- useOldNodeSassFork(flag) {
- this.oldNodeSassFork = flag;
- }
-
- isOldNodeSassForkEnabled() {
- return this.oldNodeSassFork;
- }
 }
 
 const settings = new StencilCLISettings();

lib/bundle-validator.js

@@ -15,7 +15,6 @@ 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;
@@ -415,26 +414,16 @@ class BundleValidator {
 
  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, engine);
+ const r = await cssCompiler.compile(
+ rawConfig,
+ assetsPath,
+ file,
+ cssCompiler.SASS_ENGINE_NAME,
+ );
+ console.log(r);
  } 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:/bigcommerce-labs/node-sass\n` +
- `Your scss files were compiled using latest node-sass version https:/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,
  );

lib/bundle-validator.spec.js

@@ -3,7 +3,6 @@ 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');
 
@@ -16,7 +15,6 @@ describe('BundleValidator', () => {
 
  afterEach(() => {
  jest.restoreAllMocks();
- stencilCLISettings.useOldNodeSassFork(false);
  });
 
  it('should not run image validations for private themes', async () => {

lib/cliCommon.js

@@ -98,7 +98,6 @@ function applyCommonOptions(program) {
 
 function setupCLI(options) {
  stencilCLISettings.setVerbose(options.verbose);
- stencilCLISettings.useOldNodeSassFork(options.useOldNodeSassFork);
 }
 
 function prepareCommand(program) {

lib/css/compile.js

@@ -4,7 +4,6 @@ const { promisify } = require('util');
 
 const cssAssembler = require('../css-assembler');
 
-const FALLBACK_SASS_ENGINE_NAME = 'node-sass-fork';
 const SASS_ENGINE_NAME = 'node-sass';
 
 const compile = async (configuration, themeAssetsPath, fileName, engineName = SASS_ENGINE_NAME) => {
@@ -29,7 +28,7 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
  sourceMap: true,
  autoprefixerOptions: {
  cascade: configuration.autoprefixer_cascade,
- browsers: configuration.autoprefixer_browsers,
+ overrideBrowserslist: configuration.autoprefixer_browsers,
  },
  };
  const stencilStyles = new StencilStyles(console);
@@ -41,5 +40,4 @@ const compile = async (configuration, themeAssetsPath, fileName, engineName = SA
 module.exports = {
  compile,
  SASS_ENGINE_NAME,
- FALLBACK_SASS_ENGINE_NAME,
 };