Evaluate moving to Dart Sass

[desrosj]

LibSass and the packages built on top of it (including node-sass) are now deprecated.

They will continue to be maintained indefinitely on a best-effort basis, including fixing major bugs, security issues, and maintaining compatibility with the latest Node versions, but it may be worth looking into converting Core tooling over to ​Dart Sass, which is the primary implementation of Sass and the recommended replacement.

More information on the decision to deprecate LibSass can be found in the ​blog post dated October 26, 2020.

[desrosj]

I found out about this deprecation reviewing the PR syncing Twenty Twenty-One to trunk for 5.6 beta 4. The Twenty Twenty-One team ​made the switch already.

From the blog post:

If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace node-sass in your package.json file with sass. Both packages expose the same JavaScript API.

[desrosj]

This was proposed in ​GB-22729 and merged into Gutenberg in ​GB-25628.

Let's tackle this in 5.7 so that this is consistent in both repos.

Switch the Sass implementation used by Grunt to dart-sass, since node-sass has been deprecated. This is a drop-in replacement, the only observed changes in build files are some whitespace and removing quotes from attribute selectors where they're not needed, ex:

{{{diff

• .wp-core-ui input[type="reset"]:hover,
• .wp-core-ui input[type="reset"]:active {

+ .wp-core-ui input[type=reset]:hover,
+ .wp-core-ui input[type=reset]:active {

color: #0096dd;

}

}}}

This does change the package-lock.json file, I'm not sure if there's a preferred way to regenerate that for best compatibility.

You can test this by running npx grunt clean:css to remove the build files, and then npx grunt build:css to build the CSS, the files should appear as expected. (or by running npm run build, but it's less obvious that it's working)

Trac ticket: https://core.trac.wordpress.org/ticket/51763

[desrosj]

Looks like this didn't make its way over from the PR:

The changes in the lock file should be able to get committed as they are in this PR with one exception. There are a few resolved properties being changed from https to http. When I run npm install locally, they actually change back to https. I'm not sure why this happens, but let's leave them as https.

[ryelle]

In 50126:

Build/Test Tools: Replace node-sass with Dart Sass

Switch the Sass implementation used by Grunt to sass (the Dart version), since LibSass & node-sass have been deprecated.

Props desrosj.
Fixes #51763.

Committed in r50126.

[desrosj]

In 50184:

Build/Test Tools: Replace node-sass with Dart Sass

Switch the Sass implementation used by Grunt to sass (the Dart version), since LibSass & node-sass have been deprecated.

Additionally, this updates the uglify-js dependency.

Merges [50126] and [50176] to the 5.6 branch.
See #51763, #51801.