Trac/63013 replace node sass with dart sass

src/wp-content/themes/twentynineteen/package.json

@@ -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",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -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"
   }

src/wp-content/themes/twentynineteen/postcss.config.js

@@ -6,10 +6,25 @@ module.exports = {
     }
 };
 
+var oneSelectorPerLine = function () {
+    return {
+        postcssPlugin: 'one-selector-per-line',
+        Rule: function (rule) {
+            if (rule.selector.indexOf(',') !== -1) {
+                var before = rule.raws.before || '';
+                var indent = before.substring(before.lastIndexOf('\n') + 1);
+                rule.selector = rule.selector.split(/,\s*/).join(',\n' + indent);
+            }
+        }
+    };
+};
+oneSelectorPerLine.postcss = true;
+
 module.exports = {
     plugins: [
         postcssFocusWithin({
             disablePolyfillReadyClass: true
-        })
+        }),
+        oneSelectorPerLine
     ]
 };

src/wp-content/themes/twentynineteen/print.css

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

src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss

@@ -126,11 +126,7 @@
 /* Ensure all font family declarations come with non-latin fallbacks */
 @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 );

src/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss

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

src/wp-content/themes/twentynineteen/sass/variables-site/_colors.scss

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