Issue #3351619 by Gauravvvv, longwave, Spokje, mherchel, smustgrave: Update...

Issue #3351619 by Gauravvvv, longwave, Spokje, mherchel, smustgrave: Update PostCSS and postcss-preset-env for Drupal 10.1

core/misc/dialog/off-canvas/css/base.css

@@ -39,6 +39,7 @@
 
 #drupal-off-canvas-wrapper a,
 #drupal-off-canvas-wrapper .link {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--off-canvas-link-color);
 }

core/misc/dialog/off-canvas/css/button.css

@@ -48,6 +48,7 @@
 #drupal-off-canvas-wrapper .button:hover,
 #drupal-off-canvas-wrapper .button:active {
   z-index: 10;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--off-canvas-button-text-color-hover);
   background-color: var(--off-canvas-button-background-color-hover);
@@ -81,10 +82,12 @@
 }
 #drupal-off-canvas-wrapper button.link:hover,
 #drupal-off-canvas-wrapper button.link:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--off-canvas-link-color);
 }
 #drupal-off-canvas-wrapper .button--danger {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: #c72100;
   border-radius: 0;
@@ -93,6 +96,7 @@
 #drupal-off-canvas-wrapper .button--danger:hover,
 #drupal-off-canvas-wrapper .button--danger:focus,
 #drupal-off-canvas-wrapper .button--danger:active {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: #ff2a00;
   text-shadow: none;

core/misc/dialog/off-canvas/css/dropbutton.css

@@ -127,6 +127,7 @@
   min-height: var(--off-canvas-dropbutton-height);
   margin-bottom: -2px;
   padding: 0 0.5625rem;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--off-canvas-dropbutton-text-color);
   font-weight: 600;

core/misc/dialog/off-canvas/css/messages.css

@@ -77,6 +77,7 @@
 }
 
 #drupal-off-canvas-wrapper .messages abbr {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/misc/dialog/off-canvas/css/tabledrag.css

@@ -46,6 +46,7 @@
 
 #drupal-off-canvas-wrapper td abbr {
   margin-inline: 0 0.3125rem;
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/modules/toolbar/css/toolbar.icons.theme.css

@@ -240,6 +240,7 @@
  */
 
 .toolbar-tab a:focus {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   outline: none;
 }
@@ -255,6 +256,7 @@
 }
 
 .toolbar-box a:hover:focus {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 

core/package.json

@@ -81,7 +81,7 @@
     "postcss": "^8.4.16",
     "postcss-header": "^3.0.2",
     "postcss-import": "^15.0.0",
-    "postcss-preset-env": "^7.8.1",
+    "postcss-preset-env": "^8.3.2",
     "postcss-pxtorem": "^6.0.0",
     "postcss-url": "^10.1.3",
     "prettier": "^2.1.2",

core/themes/claro/css/base/elements.css

@@ -31,6 +31,7 @@ a:hover,
 a:focus,
 .link:hover,
 .link:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
   outline: 0;
 }
@@ -164,12 +165,14 @@ address {
 
 u,
 ins {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 s,
 strike,
 del {
+  -webkit-text-decoration: line-through;
   text-decoration: line-through;
 }
 
@@ -234,6 +237,7 @@ ol {
  */
 
 abbr[title] {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/themes/claro/css/components/action-link.css

@@ -41,6 +41,7 @@
   display: inline-block;
   padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
   cursor: pointer;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-gray-800);
   border-radius: var(--button-border-radius-size);
@@ -55,6 +56,7 @@
 }
 
 .action-link:hover {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-absolutezero-hover);
   background-color: var(--color-bgblue-hover);
@@ -63,6 +65,7 @@
 .action-link:focus {
   position: relative;
   z-index: 1;
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/themes/claro/css/components/breadcrumb.css

@@ -26,6 +26,7 @@
 .breadcrumb__item,
 .breadcrumb__link {
   display: inline;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-text);
   font-weight: bold;
@@ -60,5 +61,6 @@
 
 .breadcrumb__link:hover,
 .breadcrumb__link:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }

core/themes/claro/css/components/button.css

@@ -45,6 +45,7 @@
   padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
   cursor: pointer;
   text-align: center;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--button-fg-color); /* 2 */
   border-radius: var(--button-border-radius-size);
@@ -66,11 +67,13 @@
 }
 
 .button:hover {
+  -webkit-text-decoration: none;
   text-decoration: none;
   background-color: var(--button--hover-bg-color);
 }
 
 .button:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -202,6 +205,7 @@ a.button--danger:active {
   display: inline;
   padding: 0;
   cursor: pointer;
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   border: 0;
   background: none;

core/themes/claro/css/components/dropbutton.css

@@ -269,6 +269,7 @@
   padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)) calc(var(--space-l) - var(--dropbutton-border-size));
   cursor: pointer;
   text-align: center;
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--button-fg-color); /* 1 */
   border-radius: var(--button-border-radius-size);
@@ -304,6 +305,7 @@
 
 .dropbutton__item:first-of-type > *:hover,
 .dropbutton__item:first-of-type > .button:hover {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--button-fg-color);
   background-color: var(--button--hover-bg-color);
@@ -316,6 +318,7 @@
 }
 
 .dropbutton__item:first-of-type > *:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -395,6 +398,7 @@
 .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
   position: relative;
   padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-gray-800); /* 1 */
   border-radius: var(--dropbutton-border-radius-size);

core/themes/claro/css/components/jquery.ui/theme.css

@@ -963,6 +963,7 @@
 
 .ui-autocomplete .ui-menu-item-wrapper:focus,
 .ui-autocomplete .ui-menu-item-wrapper:hover {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/themes/claro/css/components/messages.css

@@ -52,6 +52,7 @@
 }
 
 .messages a {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   color: var(--messages__link-color);
 }

core/themes/claro/css/components/pager.css

@@ -45,6 +45,7 @@
   min-inline-size: var(--pager-size);
   block-size: var(--pager-size);
   padding-inline: var(--space-xs);
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--pager-fg-color);
   border-radius: var(--space-m); /* Pager size ÷ 2 */
@@ -54,6 +55,7 @@
 .pager__link:hover,
 .pager__link:focus,
 .pager__link:active {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 .pager__link:hover,
@@ -138,6 +140,7 @@
 }
 @media (forced-colors: active) {
   .pager__item a:hover {
+    -webkit-text-decoration: underline;
     text-decoration: underline;
   }
 }

core/themes/claro/css/components/skip-link.css

@@ -36,6 +36,7 @@
 }
 
 .skip-link:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/themes/claro/css/components/system-admin--admin-list.css

@@ -50,6 +50,7 @@
   display: inline-block;
   margin-left: -1.5em;
   padding-left: 1.5em;
+  -webkit-text-decoration: none;
   text-decoration: none;
 }
 

core/themes/claro/css/components/system-admin--modules.css

@@ -192,6 +192,7 @@ td.module-list__description {
 
 .claro-details .tableresponsive-toggle-columns button {
   margin-top: var(--space-xs);
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-gray-800);
   font-weight: bold;

core/themes/claro/css/components/system-status-report.css

@@ -191,6 +191,7 @@
 
   .system-status-report__status-title:hover,
   .system-status-report__status-title:focus {
+    -webkit-text-decoration: none;
     text-decoration: none;
   }
 

core/themes/claro/css/components/tables.css

@@ -59,6 +59,7 @@ th {
 .sortable-heading > a {
   display: block;
   padding: var(--space-xs) 1.5rem var(--space-xs) 0; /* LTR */
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: inherit;
 }
@@ -120,6 +121,7 @@ th {
 
 .sortable-heading > a:focus,
 .sortable-heading > a:hover {
+  -webkit-text-decoration: none;
   text-decoration: none;
 }