Replace `node-sass` with `sass`, keeping `extend` by sabernhardt · Pull Request #12510 · WordPress/wordpress-develop

sabernhardt · 2026-07-14T03:43:01Z

Co-authored by @desrosj

Replaces node-sass with sass in package, and updates the build scripts.
Replaces lighten(), darken(), and mix() with the previously computed color values.
Creates a new mixin for non-latin fonts so the Sass can still use @extend for 76 of the 81 selectors in style.css (and style-rtl.css) and 30 of 33 selectors in style-editor.css.
Adds the remaining selectors below their related rulesets with the new mixin.
Moves comments—or changes their syntax to //—so they do not print in an unrelated place, such as
```
.main-navigation {
  /* Un-style buttons */
}
```

Use of AI Tools

This is built on #12156, which involved Claude and Copilot, but I did not use AI in addition to that.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

This reverts commit bd476f6.

…rdpress-develop into replace-node-sass

github-actions · 2026-07-14T03:43:11Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props desrosj, sabernhardt, wildworks, rejaulalomkhan.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-07-14T03:47:25Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

sabernhardt · 2026-07-14T03:50:01Z

GitHub Desktop told me the compiled stylesheets changed line endings to CRLF, but I saw them as LF in my file editor. I edited the .scss files in the browser, so they should have the correct line endings.

sabernhardt · 2026-07-14T04:06:11Z

+@mixin non-latin-fonts() {
+	@each $lang, $font__fallback in $font__fallbacks {
+		&:lang(#{$lang}) {
+			font-family: unquote( $font__fallback );
+		}
+	}
+}


This could still be replaced by the language simplification and grouping, but that would fit ticket 47925 better.

Suggested change

@mixin non-latin-fonts() {

@each $lang, $font__fallback in $font__fallbacks {

&:lang(#{$lang}) {

font-family: unquote( $font__fallback );

}

}

}

@mixin non-latin-fonts() {

// Arabic

&:is(:lang(ar),:lang(ary),:lang(azb),:lang(ckb),:lang(fa),:lang(haz),:lang(ps)) {

font-family: Tahoma, Arial, sans-serif;

}

// Cyrillic

&:is(:lang(be),:lang(bg),:lang(kk),:lang(mk),:lang(mn),:lang(ru),:lang(sah),:lang(sr),:lang(tt),:lang(uk)) {

font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;

}

// Chinese (Hong Kong)

&:lang(zh-HK) {

font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;

}

// Chinese (Taiwan)

&:lang(zh-TW) {

font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;

}

// Chinese (China)

&:lang(zh-CN) {

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;

}

// Devanagari and Gujarati

&:is(:lang(bn),:lang(gu),:lang(hi),:lang(mr),:lang(ne)) {

font-family: Arial, sans-serif;

}

// Greek

&:lang(el) {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

// Hebrew

&:lang(he) {

font-family: "Arial Hebrew", Arial, sans-serif;

}

// Japanese

&:lang(ja) {

font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif;

}

// Korean

&:lang(ko) {

font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;

}

// Thai

&:lang(th) {

font-family: "Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif;

}

// Vietnamese

&:lang(vi) {

font-family: "Libre Franklin", sans-serif;

}

}

sabernhardt · 2026-07-14T04:15:57Z

 	}

+	h2 {
+		@include non-latin-fonts();


The non-latin fonts do not work correctly in the editor since it started using the iframe, because the iframe lacks the lang attribute, but I added the mixin for H2 headings in Cover blocks as well as the citation in a floating Pullquote block anyway.

sabernhardt · 2026-07-14T04:24:39Z

  .site-header.featured-image .entry-meta,
-  .site-header.featured-image .entry-title,
-  .site-header.featured-image#masthead .site-title a {
+  .site-header.featured-image .entry-title, .site-header.featured-image#masthead .site-title a {


Some selectors are not on their own line, but that is quite minor.

However, if it helps, the other PR has notes for changes to the postcss.config.js file.

Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano · 2026-10-12T09:19:56Z

I've refreshed this PR and bumped the Node version to 24.

Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano · 2026-10-12T09:26:26Z

As a minor improvement, I added the devEngines field, similar to Twenty Twenty-One.

t-hamano

I ran a thorough visual regression test with the help of AI, comparing the front end with the current trunk CSS and this PR's CSS. All 310 screenshots matched pixel for pixel, so this PR should not introduce any visual regressions.

Test environment

WordPress 7.2-alpha-64309 (PHP 8.3 built-in server + SQLite Database Integration)
Chromium (Playwright), deviceScaleFactor: 1, transitions and animations disabled, full-page screenshots
Content: Theme Unit Test data (themeunittestdata.wordpress.xml)
Primary menu with a submenu, Social Links menu
Footer widgets: Search, Recent Posts, Recent Comments, Archives, Categories, Meta, Tag Cloud, Calendar, Pages
Local featured images (horizontal and vertical) on several posts
External requests were blocked, so remote images in the test data were not loaded
Comparison: exact pixel match (no threshold)

Pages (38 pages × 375px / 800px / 1200px = 114 screenshots)

/ (blog home)
/page/2/
/hello-world/ (featured image header)
/template-featured-image-vertical/
/template-comments/
/template-sticky/
/template-password-protected/
/markup-html-tags-and-formatting/
/markup-image-alignment/
/markup-text-alignment/
/block-image/
/block-button/
/block-cover/
/block-gallery/
/column-blocks/
/block-quotes/
/blocks-formatting/
/blocks-layout-elements/
/blocks-widgets/
/text-category-blocks/
/design-category-blocks/
/media-category-blocks/
/widgets-block-category/
/theme-block-category/
/wp-6-1-font-size-scale/
/wp-6-1-spacing-presets/
/post-format-chat/
/post-format-quote/
/post-format-gallery/
/edge-case-nested-and-mixed-lists/
/edge-case-many-tags/
/title-should-not-overflow-the-content-area/
/page-with-comments/
/page-markup-and-formatting/
/level-1/
/category/6-1/ (category archive)
/?s=template (search results)
/?p=99999999 (404)

Non-latin languages (8 pages × 12 languages × 375px / 1200px = 192 screenshots)

The lang attribute of the <html> element was changed for each language. For RTL languages, the text direction was also switched to RTL, so style-rtl.css was loaded.

Languages:

ar (RTL)
he (RTL)
fa-IR (RTL)
ja
zh-CN
zh-TW
ko
ru-RU
el
hi
th
vi

Pages:

/
/hello-world/
/template-comments/
/block-quotes/
/text-category-blocks/
/page-with-comments/
/?s=template
/?p=99999999

Print (4 pages × 1200px = 4 screenshots)

Rendered with the print media type emulated, so print.css was applied.

/
/hello-world/
/markup-html-tags-and-formatting/
/template-comments/

Not covered

Editor styles (style-editor.css)
Hover and focus states
Remote images from the test data
Actual non-latin fallback fonts: fonts such as Tahoma and Hiragino Sans are not installed in the test environment, so a missing :lang() rule might not show up in screenshots. I separately compared the compiled CSS rule by rule and confirmed that every :lang() selector in trunk also exists in this PR.

I believe this PR is ready to merge, but any additional feedback is welcome. Please let us know if there are any issues.

rejaulalomkhan · 2026-10-16T01:44:13Z

Thanks for refreshing this, @t-hamano and @sabernhardt! Building on @t-hamano's front-end screenshots, I tested the parts listed there as "Not covered": the editor styles and hover/focus states.

Patch Testing Report

Patch tested: #12510 (head 64c7e80)

Environment

WordPress: 7.2-alpha-63166-src (wordpress-develop Docker environment)
PHP: 8.3.35
Server: nginx (wordpress-develop Docker environment)
Database: MySQL 8.4.11
Browser: Chromium 149 headless (Playwright 1.61.1), deviceScaleFactor: 1, reduced motion
OS: macOS
Theme: Twenty Nineteen
Build: Node 24.18.1, sass 1.101.0
MU Plugins: None activated
Plugins: None activated

Steps taken

Ran npm ci and npm run build in the PR's twentynineteen folder → style.css, style-rtl.css, style-editor.css, style-editor-customizer.css and print.css are byte-identical to the committed files, and stay identical over 3 more builds.
Created a post with headings 1–6, drop cap, inline formatting, lists, quotes (default and large), pullquote, fill and outline buttons, table, code, preformatted, verse, separators, columns, group, cover, latest posts, archives, categories and search, plus a primary menu with a submenu.
Took screenshots with trunk's compiled CSS and with the PR's compiled CSS, comparing exact pixels:
- the full block editor canvas (style-editor.css), 1280px wide;
- rest, hover and keyboard focus of a content link, both buttons, the search button, the site title and post navigation, at 1280px and 375px;
- the open submenu on hover, and the first 8 Tab stops from the top of the page at both widths.
Ran trunk twice to rule out noise (54/54 identical), then a control with three deliberate CSS changes (editor h2 color, menu hover color, link focus outline) → exactly those 4 screenshots changed, so the comparison catches small differences.
✅ Patch is solving the problem: with the PR's CSS, all 54 screenshots match trunk pixel for pixel, including the editor canvas and every hover and focus state tested.

Expected result

Switching from node-sass to sass causes no visual change in the editor or in interactive states.

Additional Notes

Not from this PR, but "build": "run-p \"build:*\"" runs build:rtl in parallel with build:style, so rtlcss can read the old style.css. After changing $color__background-body and running npm run build once, style.css had the new color and style-rtl.css did not; a second build fixed it. Trunk has the same run-p setup. Twenty Twenty-One uses run-s; with "build": "run-s \"build:*\"" one build updates both files (about 4s instead of 2s). Since the PR already touches these scripts, it could switch to run-s, or that could be a follow-up.
The build prints Sass deprecation warnings (@import, / division, global built-in functions; 20 shown, 38 more omitted). They don't affect the output today; the module system migration could be a follow-up.
AI assistance: Claude Code was used to run the build and the screenshot comparison; results reviewed by me.

t-hamano · 2026-10-16T07:52:03Z

Since 7.2 Beta 1 is scheduled to be released next week, I will commit this beforehand. If anyone finds any issues, please feel free to report them.

Twenty Nineteen now compiles its stylesheets with the actively maintained `sass` package instead of the deprecated `node-sass`, which allows the theme to move to Node.js 24.x without changing the compiled CSS output. Developed in: #12510 Props adrianduffell, cyrusblake89, debarghyabanerjee, desrosj, karmatosed, rejaulalomkhan, sabernhardt, sainathpoojary, wildworks. Fixes #63013. git-svn-id: https://develop.svn.wordpress.org/trunk@64387 602fd350-edb4-49c9-b593-d223f7449a82

github-actions · 2026-10-16T08:22:18Z

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 64387
GitHub commit: 1d54e2a

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

Twenty Nineteen now compiles its stylesheets with the actively maintained `sass` package instead of the deprecated `node-sass`, which allows the theme to move to Node.js 24.x without changing the compiled CSS output. Developed in: WordPress/wordpress-develop#12510 Props adrianduffell, cyrusblake89, debarghyabanerjee, desrosj, karmatosed, rejaulalomkhan, sabernhardt, sainathpoojary, wildworks. Fixes #63013. Built from https://develop.svn.wordpress.org/trunk@64387 git-svn-id: http://core.svn.wordpress.org/trunk@63537 1a063a9b-81f0-0310-95a4-ce76da25c4cd

desrosj and others added 29 commits June 11, 2026 11:25

Replace node-sass with sass.

622dd8f

Remove usage of lighten()/darken() (deprecated).

c184fa0

Enforce one rule per line.

bd476f6

Revert "Enforce one rule per line."

321852e

This reverts commit bd476f6.

Update Dart Sass version

2487f79

Create font mixin to use with extend, edit comment syntax

c7f5357

Add non-latin fallback for not-found and error-404 page headings

267a599

Add non-latin fallback for button/reset/submit inputs

0a7b28f

Revert changes to compiled files

d27d25d

Merge branch 'replace-node-sass' of https://github.com/sabernhardt/wo…

fe7d34c

…rdpress-develop into replace-node-sass

Merge branch 'WordPress:trunk' into replace-node-sass

11b7abd

Recompile files

d249571

Merge branch 'replace-node-sass' of https://github.com/sabernhardt/wo…

bf37faa

…rdpress-develop into replace-node-sass

Re-compile files after merging changes into this branch

c0f574c

Add missing font fallbacks to editor styles

41f443f

Update style-editor.css

3b583c0

_comments.scss: keep comment within appropriate ruleset

7edab8e

_site-header.scss: keep comment within appropriate ruleset

8a36c3b

_widgets.scss: keep comment within appropriate ruleset

338641a

_blocks.scss: keep comment within appropriate ruleset

c143af9

_menu-main-navigation.scss: move comments or edit their syntax

da37f47

_site-featured-image.scss: move comments or change their syntax

db036ce

Update stylesheets after editing comments

57912cf

move max-width and postContentMaxWidth() down for Dots separators

308ffad

Keep .is-style-dots styles within one ruleset

90e7a8b

Hardcoded color for ::selection

098b8ab

Update stylesheets with original ::selection color

5e90f1b

Hardcoded color value in _site-featured-image.scss

e4c5305

Update stylesheets with hardcoded featured image background

255a370

sabernhardt commented Jul 14, 2026

View reviewed changes

t-hamano and others added 2 commits October 12, 2026 18:11

Merge branch 'trunk' into replace-node-sass

c11a838

Twenty Nineteen: Upgrade Node.js to 24.x.

79687e3

Co-Authored-By: Claude <noreply@anthropic.com>

This was referenced Oct 12, 2026

Update: Use sass instead of node-sass in twentynineteen theme #8405

Closed

Replace node-sass with dart-sass #12156

Closed

Twenty Nineteen: Add devEngines to package.json.

64c7e80

Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano approved these changes Oct 12, 2026

View reviewed changes

Merge branch 'trunk' into replace-node-sass

5b692a3

github-actions Bot closed this Oct 16, 2026

sabernhardt deleted the replace-node-sass branch October 17, 2026 02:26

Navigation Menu

Repository navigation

Replace `node-sass` with `sass`, keeping `extend` - #12510

Replace `node-sass` with `sass`, keeping `extend`#12510
sabernhardt wants to merge 33 commits into
WordPress:trunkfrom
sabernhardt:replace-node-sass

sabernhardt commented Jul 14, 2026

Uh oh!

github-actions Bot commented Jul 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 14, 2026

Uh oh!

sabernhardt commented Jul 14, 2026

Uh oh!

sabernhardt Jul 14, 2026

Uh oh!

sabernhardt Jul 14, 2026

Uh oh!

sabernhardt Jul 14, 2026

Uh oh!

t-hamano commented Oct 12, 2026

Uh oh!

t-hamano commented Oct 12, 2026 •

edited

Loading

Uh oh!

t-hamano left a comment

Uh oh!

rejaulalomkhan commented Oct 16, 2026

Uh oh!

t-hamano commented Oct 16, 2026

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-@mixin non-latin-fonts() {
-	@each $lang, $font__fallback in $font__fallbacks {
-		&:lang(#{$lang}) {
-			font-family: unquote( $font__fallback );
-		}
-	}
-}
+@mixin non-latin-fonts() {
+	// Arabic
+	&:is(:lang(ar),:lang(ary),:lang(azb),:lang(ckb),:lang(fa),:lang(haz),:lang(ps)) {
+		font-family: Tahoma, Arial, sans-serif;
+ 	}
+	// Cyrillic
+	&:is(:lang(be),:lang(bg),:lang(kk),:lang(mk),:lang(mn),:lang(ru),:lang(sah),:lang(sr),:lang(tt),:lang(uk)) {
+		font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
+	}
+	// Chinese (Hong Kong)
+	&:lang(zh-HK) {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
+	}
+	// Chinese (Taiwan)
+	&:lang(zh-TW) {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
+	}
+	// Chinese (China)
+	&:lang(zh-CN) {
+		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
+	}
+	// Devanagari and Gujarati
+	&:is(:lang(bn),:lang(gu),:lang(hi),:lang(mr),:lang(ne)) {
+		font-family: Arial, sans-serif;
+	}
+	// Greek
+	&:lang(el) {
+		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	}
+	// Hebrew
+	&:lang(he) {
+		font-family: "Arial Hebrew", Arial, sans-serif;
+	}
+	// Japanese
+	&:lang(ja) {
+		font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif;
+	}
+	// Korean
+	&:lang(ko) {
+		font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif;
+	}
+	// Thai
+	&:lang(th) {
+		font-family: "Sukhumvit Set", "Helvetica Neue", helvetica, arial, sans-serif;
+	}
+	// Vietnamese
+	&:lang(vi) {
+		font-family: "Libre Franklin", sans-serif;
+	}
+}

Conversation

sabernhardt commented Jul 14, 2026

Use of AI Tools

Uh oh!

github-actions Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 14, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

sabernhardt commented Jul 14, 2026

Uh oh!

sabernhardt Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

sabernhardt Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

sabernhardt Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Oct 12, 2026

Uh oh!

t-hamano commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

rejaulalomkhan commented Oct 16, 2026

Patch Testing Report

Environment

Steps taken

Expected result

Additional Notes

Uh oh!

t-hamano commented Oct 16, 2026

Uh oh!

github-actions Bot commented Oct 16, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented Jul 14, 2026 •

edited

Loading

t-hamano commented Oct 12, 2026 •

edited

Loading