Replacement of JSass library with Dart Sass library

Replacement of JSass library with Dart Sass library

Note: This notice applies to customers who have an NetSuite commerce web store. Your web store may be using commerce themes or extensions that are using JSass library for compilation purposes.

Beginning with the NetSuite 2024.1 release, JSass library will no longer be supported and will be substituted with Dart Sass library.

An e-fix, implemented on July 12, 2023, includes changes to help with this update.

What is Changing?

With NetSuite 2024.1, we will replace JSass library with Dart Sass library. Because of this, currently activated themes and extensions will stop working due to breaking changes. The frontend of your commerce web store will not be affected.

Note: You can continue using JSass library until NetSuite 2024.1, but we recommend taking action as soon as possible to mitigate possible issues.

After 2024.1, you will be unable to reactivate themes and extensions or create a new activation if any theme or extension is using syntax unsupported by Dart Sass.

You do not need to take any action if you do not use customized themes or extensions.

Required Actions

You must check if all themes and extensions are compatible with Dart Sass, fix all compatibility issues, and activate the fixed version of the theme/extension. These new versions should work with both JSass and Dart Sass so that they can be released before the transition.

To help with these changes, the July 12, 2023, e-fix includes a new version of developer tools for themes and extensions. Included in the updated developer tools is a new gulp task that you can use to review and fix the issues caused by breaking changes introduced with the transition to Dart Sass.

Consider the following with the developer tools update:

  • New gulp task allows compiling theme and extension sass using both Dart Sass and JSass.
  • When the complier finds an error with syntax, it will suggest changes to become compatible with Dart Sass and confirm that the fix will still work with JSass.

To use the new gulp task, identify needed changes, and activate the updated extension, you must:

  1. Download the zip file containing the new developer tools and unzip the file.
  2. In the folder where you unzipped the files, run npm
  3. install.
  4. Run gulp extension:fetch.
  5. Run gulp check-dart-sass to identify areas of the code in need of changing.
  6. Make changes to the code as needed.
  7. Run gulp extension:deploy to upload the new sass to NetSuite.
  8. Activate the extension in NetSuite.

For more information on getting started with developer tools, see the help topics Set Up Extension Developer Tools, SuiteAnswers ID 71044, and Set Up Theme Developer Tools, SuiteAnswers ID 71008.

For more information on deploying a theme or extension using developer tools, see the help topics Deploy an Extension to NetSuite, SuiteAnswers ID 71016, and Deploy a Theme to NetSuite, SuiteAnswers ID 1013507.

Note: Some of the suggestions are not that straight-forward, so please review the table below.

* Only works with Dart Sass

Note: Take extra care when using CSS shorthand properties to ensure the property is clearly defined. See the example below:

Given the following definition:

margin : 0 – $sc-margin-lv 4 ;

The Dart Sass compiler cannot figure out if we are trying to set the margin for:

  1. All four sides using the result of 0 – $sc-margin-lv4 operation as the value
  2. T/B = 0 AND R/L = -$sc-margin-lv4 (a negative $sc-margin-lv4)

The developer must decide if they want to:

  • use a value as a result of an operation, then Dart Sass suggests leaving a space followed by a hyphen (-).
  • use shorthand, then Dart Sass suggests using parentheses:

margin : 0 (-$sc-margin-lv 4 );

In addition to making changes to the syntax, you must update the following bundles, as well as the listed themes and extensions that are active for your commerce website:

  • SuiteCommerce 2023.1.3
  • SuiteCommerce Base Theme 2023.1.3
  • SuiteCommerce Extension Management 2023.1.3

Commerce themes with new versions:

  • SC Bridge 3.1.0
  • SC Horizon 3.2.0
  • SC Threads 3.4.0
  • SC Manor 3.5.0
  • SC Posh 3.5.0
  • SC Summit 3.5.0

Commerce extensions with new versions:

  • SC Columns
  • SC Cookie Consent
  • SC Logo List
  • SC Photo Gallery

Important Milestones to Remember

  • July 12, 2023: E-fix with new task for developer tools, new versions of NetSuite SuiteCommerce and SuiteCommerce Advanced bundles, new versions of Commerce themes and extensions
  • NetSuite 2024.1 release: Replacement of JSass with Dart Sass, JSass will stop working

Additional Resources

For more information on Dart Sass, see https://sass-lang.com/dart-sass.

For more information on breaking changes, see https://sass-lang.com/documentation/breaking-changes.

Leave a comment

Your email address will not be published. Required fields are marked *