Opened 8 weeks ago
Last modified 6 weeks ago
#63013 new enhancement
Twenty Nineteen: Use `sass` instead of `node-sass`
Reported by: |
|
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
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
@
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:
↓ 5
@
7 weeks ago
- Component changed from Bundled Theme to Themes
Hi @sabernhardt,
- I have added the
--no-source-map
- Do you suggest any specific linting rules that should be added in the
stylelint-config
?
#5
in reply to:
↑ 4
@
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"]
, andinput[type="submit"]
. That was difficult to notice because the compiler rearranges the lists of language selectors. - The
#005177
blue becomesrgb(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.
Trac Ticket: Core-63013
### Summary
This PR replaces
node-sass
withsass
in the twentynineteen theme.node-sass
is deprecated and no longer maintained, whilesass
is the official, actively supported implementation of Sass.