Issue #3246211 by longwave, alexpott: Update to Stylelint 14

core/.stylelintrc.json

@@ -4,19 +4,29 @@
     "stylelint-order"
   ],
   "rules": {
+    "alpha-value-notation": "number",
+    "at-rule-no-vendor-prefix": null,
+    "color-function-notation": "legacy",
     "comment-empty-line-before": null,
+    "custom-property-pattern": "^[a-z][-_a-z0-9IE]*$",
+    "declaration-block-no-redundant-longhand-properties": null,
     "function-linear-gradient-no-nonstandard-direction": null,
+    "function-url-quotes": null,
     "function-whitespace-after": null,
+    "hue-degree-notation": "number",
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
     "no-unknown-animations": true,
+    "max-line-length": null,
     "media-feature-name-no-unknown": [true, {
       "ignoreMediaFeatureNames": [
         "prefers-reduced-motion",
         "min--moz-device-pixel-ratio"
       ]
     }],
+    "media-feature-name-no-vendor-prefix": null,
     "number-leading-zero": "always",
+    "number-max-precision": 5,
     "order/order": [
       "custom-properties",
       "dollar-variables",
@@ -445,7 +455,12 @@
       "line-height"
     ],
     "property-no-unknown": null,
+    "property-no-vendor-prefix": null,
     "rule-empty-line-before": null,
+    "selector-attribute-quotes": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": "^[a-z][-_a-z0-9]*$",
+    "selector-no-vendor-prefix": null,
     "selector-pseudo-element-colon-notation": null,
     "shorthand-property-no-redundant-values": null,
     "string-quotes": "double",
@@ -455,7 +470,8 @@
         "--font-family",
         "font-family"
       ]
-    }]
+    }],
+    "value-no-vendor-prefix": null
   },
   "ignoreFiles": [
     "assets/vendor/**/*.css",

core/misc/dropbutton/dropbutton.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Base styles for dropbuttons.

core/misc/print.css

@@ -1,4 +1,3 @@
-
 body {
   margin: 1em;
   background-color: #fff;

core/modules/image/css/image.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * Image style configuration pages.
  */

core/modules/system/tests/css/system.module.css

@@ -1,4 +1,3 @@
-
 /**
  * This file is for testing CSS file override in
  * CascadingStylesheetsTestCase::testRenderOverride().

core/modules/system/tests/modules/common_test/common_test.css

@@ -1,2 +1 @@
-
 /* This file is for testing CSS file inclusion, no contents are necessary. */

core/modules/system/tests/modules/common_test/common_test.print.css

@@ -1,2 +1 @@
-
 /* This file is for testing CSS file inclusion, no contents are necessary. */

core/modules/taxonomy/css/taxonomy.theme.css

@@ -1,4 +1,3 @@
-
 .taxonomy-term-preview {
   background-color: #eee;
 }

core/package.json

@@ -104,10 +104,10 @@
     "raw-loader": "^4.0.2",
     "shepherd.js": "^8.3.1",
     "sortablejs": "^1.13.0",
-    "stylelint": "^13.0.0",
+    "stylelint": "^14.0.1",
-    "stylelint-checkstyle-formatter": "^0.1.1",
+    "stylelint-checkstyle-formatter": "^0.1.2",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-standard": "^23.0.0",
-    "stylelint-order": "^4.0.0",
+    "stylelint-order": "^5.0.0",
     "tabbable": "^5.2.0",
     "terser": "^5.3.4",
     "terser-webpack-plugin": "^5.2.0",

core/profiles/demo_umami/themes/umami/css/theme/filter.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Admin styling for the Filter module.

core/scripts/dev/commit-code-check.sh

@@ -122,6 +122,12 @@ PHPSTAN_DIST_FILE_CHANGED=0
 #  - core/.eslintrc.jquery.json
 ESLINT_CONFIG_PASSING_FILE_CHANGED=0
 
+# This variable will be set to one when the stylelint config file is changed.
+# changed:
+#  - core/.stylelintignore
+#  - core/.stylelintrc.json
+STYLELINT_CONFIG_FILE_CHANGED=0
+
 # Build up a list of absolute file names.
 ABS_FILES=
 for FILE in $FILES; do
@@ -140,6 +146,16 @@ for FILE in $FILES; do
   if [[ $FILE == "core/.eslintrc.json" || $FILE == "core/.eslintrc.passing.json" || $FILE == "core/.eslintrc.jquery.json" ]]; then
     ESLINT_CONFIG_PASSING_FILE_CHANGED=1;
   fi;
+
+  if [[ $FILE == "core/.stylelintignore" || $FILE == "core/.stylelintrc.json" ]]; then
+    STYLELINT_CONFIG_FILE_CHANGED=1;
+  fi;
+
+  # If JavaScript packages change, then rerun all JavaScript style checks.
+  if [[ $FILE == "core/package.json" || $FILE == "core/yarn.lock" ]]; then
+    ESLINT_CONFIG_PASSING_FILE_CHANGED=1;
+    STYLELINT_CONFIG_FILE_CHANGED=1;
+  fi;
 done
 
 # Exit early if there are no files.
@@ -251,6 +267,24 @@ if [[ $ESLINT_CONFIG_PASSING_FILE_CHANGED == "1" ]]; then
   printf "\n"
 fi
 
+# When the stylelint config has been changed, then stylelint must check all files.
+if [[ $STYLELINT_CONFIG_FILE_CHANGED == "1" ]]; then
+  cd "$TOP_LEVEL/core"
+  yarn run -s lint:css
+  if [ "$?" -ne "0" ]; then
+    # If there are failures set the status to a number other than 0.
+    FINAL_STATUS=1
+    printf "\nstylelint: ${red}failed${reset}\n"
+  else
+    printf "\nstylelint: ${green}passed${reset}\n"
+  fi
+  cd $TOP_LEVEL
+  # Add a separator line to make the output easier to read.
+  printf "\n"
+  printf -- '-%.0s' {1..100}
+  printf "\n"
+fi
+
 for FILE in $FILES; do
   STATUS=0;
   # Print a line to separate spellcheck output from per file output.
@@ -457,7 +491,7 @@ for FILE in $FILES; do
     # has a corresponding .pcss don't do stylelint.
     if [[ $FILE =~ \.pcss\.css$ ]] || [[ ! -f "$TOP_LEVEL/$BASENAME.pcss.css" ]]; then
       cd "$TOP_LEVEL/core"
-      node_modules/.bin/stylelint "$TOP_LEVEL/$FILE"
+      node_modules/.bin/stylelint --allow-empty-input "$TOP_LEVEL/$FILE"
       if [ "$?" -ne "0" ]; then
         STATUS=1
       else

core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php

@@ -690,7 +690,7 @@ class ConfirmClassyCopiesTest extends KernelTestBase {
         'forum.css' => '8aad2d86dfd29818e991757581cd7ab8',
         'icons.css' => '56f623bd343b9bc7e7ac3e3e95d7f3ce',
         'image-widget.css' => '2da54829199f64a2c390930c3b0913a3',
-        'indented.css' => '48e214a106d9fede1e05aa10b4796361',
+        'indented.css' => '3f7be76cf4b5df7dca1c96a28c76b134',
         'inline-form.css' => 'cc5cbfd34511d9021a53ec693c110740',
         'item-list.css' => '1d519afe6007f4b01e00f22b0ba8bf33',
         'link.css' => '22f42d430fe458080a7739c70a2d2ea5',

core/themes/bartik/css/print.css

@@ -1,4 +1,3 @@
-
 /* ---------- General Layout ---------- */
 
 body,

core/themes/bartik/css/theme/filter.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Admin styling for the Filter module.

core/themes/claro/css/classy/components/indented.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Basic styling for comment module.

core/themes/claro/css/components/shortcut.pcss.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Styling for the shortcut module.

core/themes/classy/css/components/indented.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Basic styling for comment module.

core/themes/olivero/css/base/fonts.css

@@ -24,7 +24,7 @@
 /* Width of the entire grid maxes out. */
 
 @font-face {
-  font-family: "metropolis";
+  font-family: metropolis;
   src:
     url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"),
     url("../../fonts/metropolis/Metropolis-Regular.woff") format("woff");
@@ -34,7 +34,7 @@
 }
 
 @font-face {
-  font-family: "metropolis";
+  font-family: metropolis;
   src:
     url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
     url("../../fonts/metropolis/Metropolis-Bold.woff") format("woff");
@@ -44,7 +44,7 @@
 }
 
 @font-face {
-  font-family: "metropolis";
+  font-family: metropolis;
   src:
     url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"),
     url("../../fonts/metropolis/Metropolis-SemiBold.woff") format("woff");
@@ -56,7 +56,7 @@
 /* lora-regular - latin */
 
 @font-face {
-  font-family: "Lora";
+  font-family: Lora;
   src:
     local("Lora Regular"),
     local("Lora-Regular"),
@@ -70,7 +70,7 @@
 /* lora-italic - latin */
 
 @font-face {
-  font-family: "Lora";
+  font-family: Lora;
   src:
     local("Lora Italic"),
     local("Lora-Italic"),
@@ -84,7 +84,7 @@
 /* lora-700 - latin */
 
 @font-face {
-  font-family: "Lora";
+  font-family: Lora;
   src:
     local("Lora Bold"),
     local("Lora-Bold"),

core/themes/olivero/css/base/fonts.pcss.css

@@ -6,7 +6,7 @@
 @import "media-queries.pcss.css";
 
 @font-face {
-  font-family: "metropolis";
+  font-family: metropolis;
   src:
     url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"),
     url("../../fonts/metropolis/Metropolis-Regular.woff") format("woff");
@@ -16,7 +16,7 @@
 }
 
 @font-face {
-  font-family: "metropolis";
+  font-family: metropolis;
   src:
     url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
     url("../../fonts/metropolis/Metropolis-Bold.woff") format("woff");
@@ -26,7 +26,7 @@
 }
 
 @font-face {
-  font-family: "metropolis";
+  font-family: metropolis;
   src:
     url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"),
     url("../../fonts/metropolis/Metropolis-SemiBold.woff") format("woff");
@@ -37,7 +37,7 @@
 
 /* lora-regular - latin */
 @font-face {
-  font-family: "Lora";
+  font-family: Lora;
   src:
     local("Lora Regular"),
     local("Lora-Regular"),
@@ -49,7 +49,7 @@
 }
 /* lora-italic - latin */
 @font-face {
-  font-family: "Lora";
+  font-family: Lora;
   src:
     local("Lora Italic"),
     local("Lora-Italic"),
@@ -61,7 +61,7 @@
 }
 /* lora-700 - latin */
 @font-face {
-  font-family: "Lora";
+  font-family: Lora;
   src:
     local("Lora Bold"),
     local("Lora-Bold"),

core/themes/seven/css/classy/components/indented.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Basic styling for comment module.

core/themes/seven/css/theme/filter.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Admin styling for the Filter module.

core/themes/stable/css/core/dropbutton/dropbutton.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Base styles for dropbuttons.

core/themes/stable/css/core/print.css

@@ -1,4 +1,3 @@
-
 body {
   margin: 1em;
   background-color: #fff;

core/themes/stable/css/filter/filter.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Admin styling for the Filter module.

core/themes/stable/css/image/image.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * Image style configuration pages.
  */

core/themes/stable/css/taxonomy/taxonomy.theme.css

@@ -1,4 +1,3 @@
-
 .taxonomy-term-preview {
   background-color: #eee;
 }

core/themes/stable9/css/core/dropbutton/dropbutton.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Base styles for dropbuttons.

core/themes/stable9/css/core/print.css

@@ -1,4 +1,3 @@
-
 body {
   margin: 1em;
   background-color: #fff;

core/themes/stable9/css/image/image.admin.css

@@ -1,4 +1,3 @@
-
 /**
  * Image style configuration pages.
  */

core/themes/stable9/css/taxonomy/taxonomy.theme.css

@@ -1,4 +1,3 @@
-
 .taxonomy-term-preview {
   background-color: #eee;
 }

core/themes/starterkit_theme/css/components/indented.css

@@ -1,4 +1,3 @@
-
 /**
  * @file
  * Basic styling for comment module.