dart-sass as a primary SCSS compiler

[andreyvolokitin]

Is there a reason node-sass is used? 4.1.0 release makes it a default, despite that 3.6.0 release relied on dart-sass. But node-sass is buggy and stale (critical regression active since 2019: https://github.com/sass/node-sass/issues/2330). Can dart-sass be used instead?

[jairo-bc]

@andreyvolokitin We had to revert dart sass compilation due to performance implications, so currently it is not being supported.

[andreyvolokitin]

Currently, both latest node-sass and a fork have bugs (see https://github.com/bigcommerce/stencil-cli/issues/600#issuecomment-1265819379). I was able to mitigate this using a fork on both CLI (using old version) and server-side (fork is used there). But I believe using dart-sass is the most stable and safe option from the actual code output standpoint

[loan-laux]

Can we please take another look at dart-sass? node-sass has been deprecated for 4 years now, and the fact that it includes a C++ dependency through node-gyp makes the install of the Stencil CLI an absolute nightmare for anyone using a modern Apple computer.

I just tried installing Stencil CLI and it took me 2 hours of reinstalling almost every tool I use in their x86 version (brew, node-gyp, python, nvm...) and symlinking/chmoding/chowning manually to finally get everything to work (within a Rosetta terminal session). Not a pleasant experience.

[jairo-bc]

Hey @loan-laux, what errors did you see with node-sass? I recently was installing Stencil CLI on the fresh Apple Silicon and the only thing was missing is python 3 in the PATH and setuptools from python to get it compiled (no Rosetta mode)

[loan-laux]

@jairo-bc the initial error I was getting (in a Rosetta session as the docs call for) is:

loanlaux@Loans-MacBook-Pro ~ > npm install -g @bigcommerce/stencil-cli
npm warn deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm warn deprecated npmlog@6.0.2: This package is no longer supported.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated are-we-there-yet@3.0.1: This package is no longer supported.
npm warn deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.1.7: Glob versions prior to v9 are no longer supported
npm warn deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm warn deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm warn deprecated gauge@4.0.4: This package is no longer supported.
npm warn deprecated glob@3.2.11: Glob versions prior to v9 are no longer supported
npm warn deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm warn deprecated node-sass@9.0.0: Node Sass is no longer supported. Please use `sass` or `sass-embedded` instead.
npm error code 1
npm error path /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass
npm error command failed
npm error command sh -c node scripts/build.js
npm error Binary found at /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/vendor/darwin-arm64-115/binding.node
npm error Testing binary
npm error Binary has a problem: Error: dlopen(/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/vendor/darwin-arm64-115/binding.node, 0x0001): tried: '/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/vendor/darwin-arm64-115/binding.node' (not a mach-o file), '/System/Volumes/Preboot/Cryptexes/OS/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/vendor/darwin-arm64-115/binding.node' (no such file), '/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/vendor/darwin-arm64-115/binding.node' (not a mach-o file)
npm error     at Module._extensions..node (node:internal/modules/cjs/loader:1454:18)
npm error     at Module.load (node:internal/modules/cjs/loader:1208:32)
npm error     at Module._load (node:internal/modules/cjs/loader:1024:12)
npm error     at Module.require (node:internal/modules/cjs/loader:1233:19)
npm error     at require (node:internal/modules/helpers:179:18)
npm error     at module.exports (/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/lib/binding.js:19:10)
npm error     at Object.<anonymous> (/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/lib/index.js:13:35)
npm error     at Module._compile (node:internal/modules/cjs/loader:1358:14)
npm error     at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
npm error     at Module.load (node:internal/modules/cjs/loader:1208:32) {
npm error   code: 'ERR_DLOPEN_FAILED'
npm error }
npm error Building the binary locally
npm error Building: /usr/local/bin/node /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm error gyp info it worked if it ends with ok
npm error gyp verb cli [
npm error gyp verb cli   '/usr/local/bin/node',
npm error gyp verb cli   '/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/bin/node-gyp.js',
npm error gyp verb cli   'rebuild',
npm error gyp verb cli   '--verbose',
npm error gyp verb cli   '--libsass_ext=',
npm error gyp verb cli   '--libsass_cflags=',
npm error gyp verb cli   '--libsass_ldflags=',
npm error gyp verb cli   '--libsass_library='
npm error gyp verb cli ]
npm error gyp info using node-gyp@8.4.1
npm error gyp info using node@20.16.0 | darwin | arm64
npm error gyp verb command rebuild []
npm error gyp verb command clean []
npm error gyp verb clean removing "build" directory
npm error gyp verb command configure []
npm error gyp verb find Python Python is not set from command line or npm configuration
npm error gyp verb find Python Python is not set from environment variable PYTHON
npm error gyp verb find Python checking if "python3" can be used
npm error gyp verb find Python - executing "python3" to get executable path
npm error gyp verb find Python - executable path is "/opt/homebrew/opt/python@3.13/bin/python3.13"
npm error gyp verb find Python - executing "/opt/homebrew/opt/python@3.13/bin/python3.13" to get version
npm error gyp verb find Python - version is "3.13.0"
npm error gyp info find Python using Python version 3.13.0 found at "/opt/homebrew/opt/python@3.13/bin/python3.13"
npm error gyp verb get node dir no --target version specified, falling back to host node version: 20.16.0
npm error gyp verb command install [ '20.16.0' ]
npm error gyp verb install input version string "20.16.0"
npm error gyp verb install installing version: 20.16.0
npm error gyp verb install --ensure was passed, so won't reinstall if already installed
npm error gyp verb install version is already installed, need to check "installVersion"
npm error gyp verb got "installVersion" 9
npm error gyp verb needs "installVersion" 9
npm error gyp verb install version is good
npm error gyp verb get node dir target node version installed: 20.16.0
npm error gyp verb build dir attempting to create "build" dir: /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/build
npm error gyp verb build dir "build" dir needed to be created? Yes
npm error gyp verb build/config.gypi creating config file
npm error gyp verb build/config.gypi writing out config file: /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/build/config.gypi
npm error gyp verb config.gypi checking for gypi file: /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/config.gypi
npm error gyp verb common.gypi checking for gypi file: /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/common.gypi
npm error gyp verb gyp gyp format was not specified; forcing "make"
npm error gyp info spawn /opt/homebrew/opt/python@3.13/bin/python3.13
npm error gyp info spawn args [
npm error gyp info spawn args   '/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/gyp/gyp_main.py',
npm error gyp info spawn args   'binding.gyp',
npm error gyp info spawn args   '-f',
npm error gyp info spawn args   'make',
npm error gyp info spawn args   '-I',
npm error gyp info spawn args   '/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass/build/config.gypi',
npm error gyp info spawn args   '-I',
npm error gyp info spawn args   '/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/addon.gypi',
npm error gyp info spawn args   '-I',
npm error gyp info spawn args   '/Users/loanlaux/Library/Caches/node-gyp/20.16.0/include/node/common.gypi',
npm error gyp info spawn args   '-Dlibrary=shared_library',
npm error gyp info spawn args   '-Dvisibility=default',
npm error gyp info spawn args   '-Dnode_root_dir=/Users/loanlaux/Library/Caches/node-gyp/20.16.0',
npm error gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp',
npm error gyp info spawn args   '-Dnode_lib_file=/Users/loanlaux/Library/Caches/node-gyp/20.16.0/<(target_arch)/node.lib',
npm error gyp info spawn args   '-Dmodule_root_dir=/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass',
npm error gyp info spawn args   '-Dnode_engine=v8',
npm error gyp info spawn args   '--depth=.',
npm error gyp info spawn args   '--no-parallel',
npm error gyp info spawn args   '--generator-output',
npm error gyp info spawn args   'build',
npm error gyp info spawn args   '-Goutput_dir=.'
npm error gyp info spawn args ]
npm error Traceback (most recent call last):
npm error   File "/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/gyp/gyp_main.py", line 42, in <module>
npm error     import gyp  # noqa: E402
npm error     ^^^^^^^^^^
npm error   File "/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 9, in <module>
npm error     import gyp.input
npm error   File "/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 19, in <module>
npm error     from distutils.version import StrictVersion
npm error ModuleNotFoundError: No module named 'distutils'
npm error gyp ERR! configure error 
npm error gyp ERR! stack Error: `gyp` failed with exit code: 1
npm error gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/lib/configure.js:259:16)
npm error gyp ERR! stack     at ChildProcess.emit (node:events:519:28)
npm error gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:294:12)
npm error gyp ERR! System Darwin 23.5.0
npm error gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm error gyp ERR! cwd /usr/local/lib/node_modules/@bigcommerce/stencil-cli/node_modules/node-sass
npm error gyp ERR! node -v v20.16.0
npm error gyp ERR! node-gyp -v v8.4.1
npm error gyp ERR! not ok 
npm error Build failed with error code: 1
npm error A complete log of this run can be found in: /Users/loanlaux/.npm/_logs/2024-12-05T13_06_22_758Z-debug-0.log

That threw me into an endless spiral of having to reinstall x86-specific versions of the whole toolchain required to make this work. I managed to have it working in the end, but man what a waste of time it was.

Anyways, node-sass is deprecated and we should move away from it as soon as possible. And I don't want to get into an opinionated discussion, but I strongly believe that using C++ dependencies (unless absolutely necessary) defeats the whole point of JavaScript and makes the developer tooling unnecessary heavy when lighter & more up-to-date alternatives exist.

[jairo-bc]

@loan-laux I think the main error here is npm error ModuleNotFoundError: No module named 'distutils', distutils package was removed from python 3.12, so installing it should resolve the error. Here is more info

We'll update docs to have this info there as well.

Regarding dart sass support, we are likely going to revisit our approach here as there are already more performant solutions like https://www.npmjs.com/package/sass-embedded

[loan-laux]

Amazing to know that sass-embedded is being considered. If all of this could've been avoided by just installing distutils, then it sounds like I made my own life way harder than it needed to be. Since a Rosetta session isn't necessary, I'd love the docs to be updated to reflect that because I always prefer to run software natively when possible. Thanks for taking the time to respond @jairo-bc.