Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DEVDOCS-4761: [update] scss compiler upgrade support, revise #2096

Merged
merged 1 commit into from
Nov 1, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 39 additions & 22 deletions docs/stencil-docs/installing-stencil-cli/node-sass.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,58 @@

If you recently received an alert within your BigCommerce control panel regarding incompatible SCSS directives, we want you to know that BigCommerce is here for you. This article will guide you through the two possible scenarios to ensure you are not affected when we move to a more modern version of our node-sass compiler and deprecate older versions of node.js early next year.

## Scenario 1: We’ve already provided a fix for your storefront.
For most storefronts with incompatible SCSS issues, BigCommerce has provided an automated draft version of your storefront for your consideration. Please login to your control panel and navigate to your channel manager. If we can offer an automated fix, you will see a draft version of your storefront for your consideration with the name “Theme Name [SCSS AUTOFIXED]”. Please review and publish anytime prior to January 31, 2024.
## Scenario 1: Automated solution

For most storefronts with incompatible SCSS issues, BigCommerce has provided an automated draft version of your storefront theme for your consideration. Please sign in to the store control panel and navigate to the channel manager. If we can offer an automated fix, you will see a draft version of your updated theme for your consideration with the name `Theme Name [SCSS AUTOFIXED]`. Please review and publish anytime **prior to January 31, 2024**.

![Node sass image](https://storage.googleapis.com/bigcommerce-production-dev-center/images/node-sass-autofixed.png "Auto Fix")

## Scenario 2: Manual Upgrade
If you prefer a more technical/manual approach, we have updated Stencil CLI to only support node 18, so the “bundle” command will provide feedback if your storefront needs attention. We have also gone the extra mile and supplied a new stencil CLI command, “autofix-scss” to address many issues. Below are the steps required to ensure your storefront is up to date.
## Scenario 2: Manual upgrade

If you prefer a more manual, granular approach, use the most recent version of the Stencil CLI, which supports only Node 18. If your theme needs attention, the `bundle` command will provide feedback. There is also a new Stencil CLI command, `autofix-scss`, that can help address many SCSS issues.

To ensure your storefront is up to date, use the following steps:

To ensure your storefront is up to date, please do the following:
1. Using the latest version of `stencil-cli`, run the `stencil bundle` command to validate your theme’s code and note any errors in the console output.

1. Using the latest version of stencil-cli, run the stencil bundle command to validate your theme’s code and note any errors in the console output.
`stencil bundle`
```shell copy
stencil bundle
```

2. For most issues, we have supplied an option to run a script to update your files with the correct formatting. You can run the script by doing the following:
2. For most issues, there is an option to run a script to update your files with the correct formatting. You can run the script by doing the following:

a. We have created a dry run option to see your changes without actually changing/saving said changes.
a. Use the "dry run" option to see potential changes without making or saving those changes.

`stencil -scss-autofix.js --dry`
```shell copy
stencil -scss-autofix.js --dry
```

b. To make the changes and revalidate, run the following:
b. To make the changes and revalidate, run the following:

```shell
stencil -scss-autofix.js
stencil bundle
```
```shell copy
stencil -scss-autofix.js
```

c. After making these changes, you can test your site to ensure no visual regressions. You can run stencil start as usual to preview the site.
```shell copy
stencil bundle
```

c. After making these changes, you can test your site to ensure there are no visual regressions. Run `stencil start` as usual to preview the site.

```shell copy
stencil start
```

d. If everything looks good, you can run stencil push (or follow your normal theme deployment workflow) to push the changes live to your storefront.
d. If everything looks good, push the changes live to your storefront by following your normal theme deployment workflow or running `stencil push`.

```shell copy
stencil push
```

**If you are still experiencing issues, please get in touch with your development team, Customer Success Manager, or [BigCommerce customer support](https://support.bigcommerce.com/s/contact?language=en_US).**
**If you are still experiencing issues, please get in touch with your development team, Customer Success Manager, or [BigCommerce customer support](https://support.bigcommerce.com/s/contact).**

**How long do I have? When will the legacy SASS compiler (node-sass) be sunset?**
## Timeline

Please make these changes immediately, as we are sunsetting node-sass on 1/31/2024. After this date, you must compile all SCSS files with the newer node-sass engine to avoid styling issues. This upgrade is necessary to ensure the security of our platform going forward and to ensure we’re not running any out-of-date software that may be at additional risk for security vulnerabilities.
**How long do I have? When will the legacy SCSS compiler (node-sass) be sunset?**

If you have any questions, please contact our [support team](https://support.bigcommerce.com/s/contact).
Please make these changes immediately; we are sunsetting support for the `node-sass` package on **January 31, 2024**. After this date, you must compile all SCSS files with Stencil's updated SCSS compiler engine. This upgrade is necessary to ensure the security of our platform and to ensure that you are not running out-of-date packages that may expose your projects to additional security vulnerabilities.