Opened 10 months ago
Last modified 10 months 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.
10 months ago
#1
- Keywords has-patch added; needs-patch removed
This ticket was mentioned in PR #8405 on WordPress/wordpress-develop by @debarghyabanerjee.
10 months 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
@
10 months 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.mapfiles 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
@
10 months 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
@
10 months 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
sassoutput 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
#005177blue 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-sasshad 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-sasswithsassin the twentynineteen theme.node-sassis deprecated and no longer maintained, whilesassis the official, actively supported implementation of Sass.