Skip to content

Replace node-sass with dart-sass #12156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
desrosj wants to merge 3 commits into
base: trunk
Choose a base branch
from
Draft

Replace node-sass with dart-sass #12156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
622dd8f
Replace `node-sass` with` sass`.
desrosj Jun 11, 2026
c184fa0
Remove usage of `lighten()`/`darken()` (deprecated).
desrosj Jun 11, 2026
bd476f6
Enforce one rule per line.
desrosj Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7,732 changes: 2,358 additions & 5,374 deletions src/wp-content/themes/twentynineteen/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions src/wp-content/themes/twentynineteen/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@wordpress/browserslist-config": "^6.34.0",
"autoprefixer": "^10.4.22",
"chokidar-cli": "^3.0.0",
"node-sass": "^9.0.0",
"sass": "^1.83.0",

@sabernhardt sabernhardt Jul 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The version is newer now:

Suggested change
"sass": "^1.83.0",
"sass": "^1.101.0",

"npm-run-all": "^4.1.5",
"postcss": "^8.5.6",
"postcss-cli": "^11.0.1",
Expand All @@ -38,11 +38,11 @@
"extends @wordpress/browserslist-config"
],
"scripts": {
"build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css",
"build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css",
"build:style-editor-customizer": "node-sass style-editor-customizer.scss style-editor-customizer.css --output-style expanded && postcss -r style-editor-customizer.css",
"build:style": "sass style.scss:style.css --style=expanded --no-source-map && postcss -r style.css",
"build:style-editor": "sass style-editor.scss:style-editor.css --style=expanded --no-source-map && postcss -r style-editor.css",
"build:style-editor-customizer": "sass style-editor-customizer.scss:style-editor-customizer.css --style=expanded --no-source-map && postcss -r style-editor-customizer.css",
"build:rtl": "rtlcss style.css style-rtl.css",
"build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css",
"build:print": "sass print.scss:print.css --style=expanded --no-source-map && postcss -r print.css",
"build": "run-p \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
}
Expand Down
17 changes: 16 additions & 1 deletion src/wp-content/themes/twentynineteen/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,25 @@ module.exports = {
}
};

var oneSelectorPerLine = function () {
return {
postcssPlugin: 'one-selector-per-line',
Rule: function (rule) {
if (rule.selector.indexOf(',') !== -1) {
Comment thread
desrosj marked this conversation as resolved.
var before = rule.raws.before || '';
var indent = before.substring(before.lastIndexOf('\n') + 1);
rule.selector = rule.selector.split(/,\s*/).join(',\n' + indent);

@sabernhardt sabernhardt Jul 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the mixin groups :lang() selectors, the space could be removed between them so they do not split onto separate lines. I switched * to + so it matches at least one space after the comma.

Suggested change
rule.selector = rule.selector.split(/,\s*/).join(',\n' + indent);
rule.selector = rule.selector.replace(/, :lang/g, ',:lang').split(/,\s+/).join(',\n' + indent);

}

@sabernhardt sabernhardt Jul 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ::first-letter pseudo-element seems to be the only unusable selector when appending the :lang() to the end. If I did not miss any other problems, PostCSS could adjust the one.

Suggested change
}
}
if (rule.selector.indexOf(':not(:focus)::first-letter:') !== -1) {
rule.selector = rule.selector.replace(':not(:focus)::first-letter', '') + ':not(:focus)::first-letter';
}

Then blocks/_blocks.scss would need the double colon syntax (which style-editor.scss already has).

		&:not(:focus)::first-letter

}
};
};
oneSelectorPerLine.postcss = true;

module.exports = {
plugins: [
postcssFocusWithin({
disablePolyfillReadyClass: true
})
}),
oneSelectorPerLine
]
};
17 changes: 12 additions & 5 deletions src/wp-content/themes/twentynineteen/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
.entry {
margin-top: 1em;
}
.entry .entry-header, .site-footer .site-info {
.entry .entry-header,
.site-footer .site-info {
margin: 0;
}
/* Fonts */
Expand All @@ -41,7 +42,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title, h3 {
.comments-title,
h3 {
font-size: 14pt;
margin-top: 25px;
}
Expand All @@ -65,14 +67,19 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
page-break-inside: avoid;
page-break-after: avoid;
}
table, pre {
table,
pre {
page-break-inside: avoid;
}
ul, ol, dl {
ul,
ol,
dl {
page-break-before: avoid;
}
/* Links */
a:link, a:visited, a {
a:link,
a:visited,
a {
background: transparent;
font-weight: bold;
text-decoration: underline;
Expand Down
4 changes: 0 additions & 4 deletions src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,7 @@
/* Ensure all font family declarations come with non-latin fallbacks */
@mixin font-family( $font_family: $font__body ) {

@sabernhardt sabernhardt Jul 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in this PR increased the main stylesheet file size from about 229KB to about 279KB. To reduce it to about 203KB, the similar languages could be grouped together with :is(:lang(A),:lang(B)) (as in 47925.diff). That still results in rulesets for non-latin fonts interspersed throughout the stylesheet, in 27 places and including the button element twice, but it would be a small reduction overall. Further optimization could be considered later.

Full mixin without extend:

@mixin font-family( $font_family: $font__body ) {
	font-family: $font_family;

	// 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;
	}
}

font-family: $font_family;
@extend %non-latin-fonts;
}

/* Build our non-latin font styles */
%non-latin-fonts {
@each $lang, $font__fallback in $font__fallbacks {
&:lang(#{$lang}) {
Comment on lines 127 to 131
font-family: unquote( $font__fallback );
Expand Down
2 changes: 1 addition & 1 deletion src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@
display: block;
height: 18px;
position: absolute;
background: lighten( $color__link, 8% );
background: #008fd3;
right: calc(100% - #{$size__spacing-unit * 2.5});
top: -3px;
width: 18px;
Expand Down
6 changes: 3 additions & 3 deletions src/wp-content/themes/twentynineteen/sass/variables-site/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,20 @@ $color__background_selection: mix( $color__background-body, $color__background-b
// Text
$color__text-main: #111;
$color__text-light: #767676;
$color__text-hover: lighten( #111, 22.5% );
$color__text-hover: #4a4a4a;
$color__text-screen: #21759b;
$color__text-input: #666;
$color__text-input-focus: #111;

// Links
$color__link: #0073aa;
$color__link-visited: #0073aa;
$color__link-hover: darken( $color__link, 10% );
$color__link-hover: #005177;

// Borders
$color__border: #ccc;
$color__border-link: #0073aa;
$color__border-link-hover: darken( $color__link, 10% );
$color__border-link-hover: #005177;
$color__border-button: #ccc #ccc #bbb;
$color__border-button-hover: #ccc #bbb #aaa;
$color__border-button-focus: #aaa #bbb #bbb;
Expand Down
Loading
Loading