Make WordPress Core

Opened 8 weeks ago

Last modified 6 weeks ago

#63013 new enhancement

Twenty Nineteen: Use `sass` instead of `node-sass`

Reported by: debarghyabanerjee's profile debarghyabanerjee Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: javascript, css Cc:

Description

node-sass is deprecated and no longer maintained. We should switch to sass, the official and actively supported Sass compiler, to stay up-to-date with the latest features and improvements.

Change History (5)

This ticket was mentioned in PR #8404 on WordPress/wordpress-develop by @debarghyabanerjee.


8 weeks ago
#1

  • Keywords has-patch added; needs-patch removed

Trac Ticket: Core-63013

### Summary

This PR replaces node-sass with sass in the twentynineteen theme. node-sass is deprecated and no longer maintained, while sass is the official, actively supported implementation of Sass.

This ticket was mentioned in PR #8405 on WordPress/wordpress-develop by @debarghyabanerjee.


8 weeks ago
#2

Trac Ticket: Core-63013

### Summary

This PR replaces node-sass with sass in the twentynineteen theme. node-sass is deprecated and no longer maintained, while sass is the official, actively supported implementation of Sass.

#3 @sabernhardt
7 weeks ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Update: Use `sass` instead of `node-sass` in twentynineteen theme to Twenty Nineteen: Use `sass` instead of `node-sass`

@sainathpoojary also reported the deprecation on GitHub.

If the package switches to sass:

  • The output is very different, especially with the order of language-specific selectors. Setting up some linting rules could help (for example, with stylelint-config).
  • Please use --no-source-map. Twenty Nineteen does not have the .map files yet, and committing one change with the source maps could require refreshing any other pull requests that were made with older map files.

#4 follow-up: @debarghyabanerjee
7 weeks ago

  • Component changed from Bundled Theme to Themes

Hi @sabernhardt,

  1. I have added the --no-source-map
  1. Do you suggest any specific linting rules that should be added in the stylelint-config?

#5 in reply to: ↑ 4 @sabernhardt
6 weeks ago

  • Component changed from Themes to Bundled Theme

Do you suggest any specific linting rules that should be added in the stylelint-config?

Unfortunately, I do not know linting rules well. Some of the rules for Twenty Twenty-One could also fit Twenty Nineteen.

Of course, my reason for mentioning stylelint-config is to avoid so many changes in the compiled output. A few of the differences should be good, but others surprised me.

  • The sass output ignores five of the selectors when it creates font overrides for each non-latin language: .not-found .page-title, .error-404 .page-title, input[type="button"], input[type="reset"], and input[type="submit"]. That was difficult to notice because the compiler rearranges the lists of language selectors.
  • The #005177 blue becomes rgb(0, 80.5, 119), slightly reducing its green value.
  • Many empty lines between rulesets are removed, but not all of them consistently.
  • Some comma-separated selectors share a line, where node-sass had given each its own line.

I should also point out that Dart Sass gives dozens of deprecation warnings when running the build, so switching to it would require additional changes soon.

Note: See TracTickets for help on using tickets.