Skip to content

Replace node-sass with sass, keeping extend #12510

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

Open
sabernhardt wants to merge 29 commits into
base: trunk
Choose a base branch
from
Open

Replace node-sass with sass, keeping extend #12510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 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
321852e
Revert "Enforce one rule per line."
sabernhardt Jul 11, 2026
2487f79
Update Dart Sass version
sabernhardt Jul 13, 2026
c7f5357
Create font mixin to use with `extend`, edit comment syntax
sabernhardt Jul 13, 2026
267a599
Add non-latin fallback for `not-found` and `error-404` page headings
sabernhardt Jul 13, 2026
0a7b28f
Add non-latin fallback for button/reset/submit inputs
sabernhardt Jul 13, 2026
d27d25d
Revert changes to compiled files
sabernhardt Jul 13, 2026
fe7d34c
Merge branch 'replace-node-sass' of https://github.com/sabernhardt/wo…
sabernhardt Jul 13, 2026
11b7abd
Merge branch 'WordPress:trunk' into replace-node-sass
sabernhardt Jul 13, 2026
d249571
Recompile files
sabernhardt Jul 13, 2026
bf37faa
Merge branch 'replace-node-sass' of https://github.com/sabernhardt/wo…
sabernhardt Jul 13, 2026
c0f574c
Re-compile files after merging changes into this branch
sabernhardt Jul 13, 2026
41f443f
Add missing font fallbacks to editor styles
sabernhardt Jul 13, 2026
3b583c0
Update style-editor.css
sabernhardt Jul 13, 2026
7edab8e
`_comments.scss`: keep comment within appropriate ruleset
sabernhardt Jul 13, 2026
8a36c3b
`_site-header.scss`: keep comment within appropriate ruleset
sabernhardt Jul 13, 2026
338641a
`_widgets.scss`: keep comment within appropriate ruleset
sabernhardt Jul 13, 2026
c143af9
`_blocks.scss`: keep comment within appropriate ruleset
sabernhardt Jul 13, 2026
da37f47
`_menu-main-navigation.scss`: move comments or edit their syntax
sabernhardt Jul 13, 2026
db036ce
`_site-featured-image.scss`: move comments or change their syntax
sabernhardt Jul 13, 2026
57912cf
Update stylesheets after editing comments
sabernhardt Jul 13, 2026
308ffad
move `max-width` and `postContentMaxWidth()` down for Dots separators
sabernhardt Jul 13, 2026
90e7a8b
Keep `.is-style-dots` styles within one ruleset
sabernhardt Jul 13, 2026
098b8ab
Hardcoded color for `::selection`
sabernhardt Jul 13, 2026
5e90f1b
Update stylesheets with original `::selection` color
sabernhardt Jul 13, 2026
e4c5305
Hardcoded color value in `_site-featured-image.scss`
sabernhardt Jul 14, 2026
255a370
Update stylesheets with hardcoded featured image background
sabernhardt Jul 14, 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
4,139 changes: 494 additions & 3,645 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.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
3 changes: 1 addition & 2 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 @@ -129,8 +129,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
.site-header.featured-image .main-navigation li,
.site-header.featured-image .social-navigation li,
.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 {

@sabernhardt sabernhardt Jul 14, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

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.

color: #000;
text-shadow: none;
}
Expand Down
7 changes: 3 additions & 4 deletions src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,12 +728,12 @@
}

&.is-style-dots {
max-width: 100%;
@include postContentMaxWidth();
background-color: inherit;
border: inherit;
height: inherit;
text-align: center;
max-width: 100%;
@include postContentMaxWidth();

// Only apply the default dot color if there's no separator color specified.
&:not(.has-text-color):not(.has-background) {
Expand All @@ -747,12 +747,11 @@
}
}

/* Remove duplicate rule-line when a separator
* is followed by an H1, or H2 */
& + h1,
& + h2 {

&:before {
/* Remove duplicate rule-line when a separator is followed by an H1 or H2 */
display: none;
}
}
Expand Down
6 changes: 6 additions & 0 deletions src/wp-content/themes/twentynineteen/sass/forms/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,9 @@ input[type="submit"] {
outline-offset: -4px;
}
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
@include non-latin-fonts();
}
29 changes: 17 additions & 12 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 @@ -43,8 +43,8 @@
opacity: .8;
z-index: 3;

/* Browsers supporting mix-blend-mode don't need opacity < 1 */
@supports (mix-blend-mode: multiply) {
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
opacity: 1;
}
}
Expand Down Expand Up @@ -85,9 +85,9 @@
}
}

/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
* layers of box-shadow to add the border visually, which will render the border smoother. */
// If we add the border using a regular CSS border, it won't look good on non-retina devices,
// since its edges can look jagged due to lack of antialiasing. In this case, we are several
// layers of box-shadow to add the border visually, which will render the border smoother.

@mixin box-shadow( $size ) {
box-shadow:
Expand All @@ -96,7 +96,7 @@
0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge.
}

/* Calculates maximum width for post content */
// Calculates maximum width for post content.
@mixin postContentMaxWidth() {

@include media(tablet) {
Expand All @@ -108,7 +108,7 @@
}
}

/* Nested sub-menu padding: 10 levels deep */
// Nested sub-menu padding: 10 levels deep.
@mixin nestedSubMenuPadding() {

ul {
Expand All @@ -123,19 +123,24 @@
}
}

/* Ensure all font family declarations come with non-latin fallbacks */
// Ensure all font family declarations come with non-latin fallbacks.
@mixin non-latin-fonts() {
@each $lang, $font__fallback in $font__fallbacks {
&:lang(#{$lang}) {
font-family: unquote( $font__fallback );
}
}
}
Comment on lines +127 to +133

@sabernhardt sabernhardt Jul 14, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

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


// Assign theme's font sets or a fallback.
@mixin font-family( $font_family: $font__body ) {
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}) {
font-family: unquote( $font__fallback );
}
}
@include non-latin-fonts();
}

@import "utilities";
39 changes: 17 additions & 22 deletions src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
display: inline;
}

/* Un-style buttons */
button {
/* Un-style buttons */
display: inline-block;
border: none;
padding: 0;
Expand Down Expand Up @@ -102,7 +102,7 @@
display: inline-block;
margin-right: #{0.25 * $size__spacing-unit};

/* Priority+ Menu */
// Priority+ Menu
&.main-menu-more-toggle {

position: relative;
Expand Down Expand Up @@ -243,12 +243,11 @@
}
}

/*
* Sub-menu styles
*
* :focus-within needs its own selector so other similar
* selectors don’t get ignored if a browser doesn’t recognize it
*/
// Sub-menu styles
//
// :focus-within needs its own selector so other similar
// selectors don’t get ignored if a browser doesn’t recognize it

.main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {

display: block;
Expand All @@ -259,7 +258,7 @@
min-width: 100%;


/* Non-mobile position */
// Non-mobile position
@include media(tablet) {
display: block;
margin-top: 0;
Expand Down Expand Up @@ -302,14 +301,14 @@
left: 0;
opacity: 1;

/* Non-mobile position */
// Non-mobile position
@include media(tablet) {
float: none;
max-width: 100%;
}
}

/* Nested sub-menu dashes */
// Nested sub-menu dashes
.sub-menu {
counter-reset: submenu;
}
Expand All @@ -334,7 +333,7 @@
min-width: 100%;


/* Non-mobile position */
// Non-mobile position
@include media(tablet) {
display: block;
float: none;
Expand Down Expand Up @@ -378,14 +377,14 @@
left: 0;
opacity: 1;

/* Non-mobile position */
// Non-mobile position
@include media(tablet) {
float: none;
max-width: 100%;
}
}

/* Nested sub-menu dashes */
// Nested sub-menu dashes
.sub-menu {
counter-reset: submenu;
}
Expand All @@ -398,16 +397,12 @@
}
}

/**
* Fade-in animation for top-level submenus
*/
.main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
/* Fade-in animation for top-level submenus */
animation: fade_in 0.1s forwards;
}

/**
* Off-canvas touch device styles
*/
// Off-canvas touch device styles
.main-menu .menu-item-has-children.off-canvas .sub-menu {

.submenu-expand .svg-icon {
Expand Down Expand Up @@ -461,17 +456,17 @@
display: block;
}

/* Prevent menu from being blocked by admin bar */
.admin-bar & {
/* Prevent menu from being blocked by admin bar */
top: 46px;
height: calc( 100vh - 46px );

.sub-menu.expanded-true {
top: 0;
}

/* WP core breakpoint */
@media only screen and ( min-width: 782px ) {
/* WP core breakpoint */
top: 32px;
height: calc( 100vh - 32px );

Expand Down
Loading
Loading