Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#51763 closed feature request (fixed)

Evaluate moving to Dart Sass

Reported by: desrosj's profile desrosj Owned by: ryelle's profile ryelle
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Build/Test Tools Keywords: has-patch commit
Focuses: css Cc:

Description

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.

Change History (11)

#1 @desrosj
3 years ago

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.

#2 @desrosj
3 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.7

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.

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-css by ryelle. View the logs.


3 years ago

This ticket was mentioned in PR #911 on WordPress/wordpress-develop by ryelle.


3 years ago
#5

  • Keywords has-patch added; needs-patch removed

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


3 years ago

#7 @desrosj
3 years ago

  • Keywords commit added

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.

#8 @ryelle
3 years ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

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.

ryelle commented on PR #911:


3 years ago
#9

Committed in r50126.

This ticket was mentioned in Slack in #core by sergey. View the logs.


3 years ago

#11 @desrosj
3 years ago

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.

Note: See TracTickets for help on using tickets.