Update stylelint to v16

Author: jakezatecky

examples/src/scss/_cayman.scss

@@ -1,5 +1,3 @@
-// stylelint-disable value-keyword-case
-
 // Breakpoints
 $large-breakpoint: 64em;
 $medium-breakpoint: 42em;
@@ -10,14 +8,16 @@ $header-bg-color: #159957 !default;
 $header-bg-color-secondary: #155799 !default;
 
 // Text
-$font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family: // stylelint-disable-line scss/dollar-variable-colon-space-after
+  "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 $section-headings-color: #159957 !default;
 $body-text-color: #606c71 !default;
 $body-link-color: #1e6bb8 !default;
 $blockquote-text-color: #819198 !default;
 
 // Code
-$font-family-code: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
+$font-family-code: // stylelint-disable-line scss/dollar-variable-colon-space-after
+  "Consolas", "Liberation Mono", "Menlo", "Courier", monospace !default;
 $code-bg-color: #f3f6fa !default;
 $code-text-color: #567482 !default;
 
@@ -67,13 +67,31 @@ a {
 }
 
 .btn {
+  display: inline-block;
+  margin-bottom: 1rem;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.3rem;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
+
   @include large {
     padding: 0.75rem 1rem;
+
+    + .btn {
+      margin-left: 1rem;
+    }
   }
 
   @include medium {
     padding: 0.6rem 0.9rem;
     font-size: 0.9rem;
+
+    + .btn {
+      margin-left: 1rem;
+    }
   }
 
   @include small {
@@ -88,31 +106,26 @@ a {
     }
   }
 
-  display: inline-block;
-  margin-bottom: 1rem;
-  color: rgba(255, 255, 255, 0.7);
-  background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.2);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 0.3rem;
-  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
-
   &:hover {
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     background-color: rgba(255, 255, 255, 0.2);
     border-color: rgba(255, 255, 255, 0.3);
   }
-
-  + .btn {
-    margin-left: 1rem;
-  }
 }
 
 .page-header {
+  color: $header-heading-color;
+  text-align: center;
+  background-color: $header-bg-color;
+  background-image: linear-gradient(
+    120deg,
+    $header-bg-color-secondary,
+    $header-bg-color
+  );
+
   @include large {
-    padding: 5rem 6rem;
+    padding: 3rem 4rem;
   }
 
   @include medium {
@@ -122,18 +135,12 @@ a {
   @include small {
     padding: 2rem 1rem;
   }
-
-  color: $header-heading-color;
-  text-align: center;
-  background-color: $header-bg-color;
-  background-image: linear-gradient(
-    120deg,
-    $header-bg-color-secondary,
-    $header-bg-color
-  );
 }
 
 .project-name {
+  margin-top: 0;
+  margin-bottom: 0.1rem;
+
   @include large {
     font-size: 3.25rem;
   }
@@ -145,12 +152,13 @@ a {
   @include small {
     font-size: 1.75rem;
   }
-
-  margin-top: 0;
-  margin-bottom: 0.1rem;
 }
 
 .project-tagline {
+  margin-bottom: 2rem;
+  font-weight: normal;
+  opacity: 0.7;
+
   @include large {
     font-size: 1.25rem;
   }
@@ -162,13 +170,11 @@ a {
   @include small {
     font-size: 1rem;
   }
-
-  margin-bottom: 2rem;
-  font-weight: normal;
-  opacity: 0.7;
 }
 
 .main-content {
+  word-wrap: break-word;
+
   @include large {
     max-width: 64rem;
     padding: 2rem 6rem;
@@ -186,8 +192,6 @@ a {
     font-size: 1rem;
   }
 
-  word-wrap: break-word;
-
   :first-child {
     margin-top: 0;
   }
@@ -344,6 +348,10 @@ a {
 }
 
 .site-footer {
+  padding-top: 2rem;
+  margin-top: 2rem;
+  border-top: solid 1px $hr-border-color;
+
   @include large {
     font-size: 1rem;
   }
@@ -355,10 +363,6 @@ a {
   @include small {
     font-size: 0.9rem;
   }
-
-  padding-top: 2rem;
-  margin-top: 2rem;
-  border-top: solid 1px $hr-border-color;
 }
 
 .site-footer-owner {

package.json

@@ -91,8 +91,8 @@
     "react-dom": "^18.2.0",
     "sass": "^1.58.2",
     "sass-loader": "^16.0.5",
-    "stylelint": "^15.1.0",
-    "stylelint-config-takiyon": "^3.0.0",
+    "stylelint": "^16.24.0",
+    "stylelint-config-takiyon": "^6.0.0",
     "webpack": "^5.3.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"

src/scss/react-checkbox-tree.scss

@@ -33,8 +33,8 @@ $rct-outline-offset: -2px !default;
   button,
   input {
     &:focus {
-      border-radius: $rct-outline-radius;
       outline: $rct-outline-size solid $rct-outline-color;
+      border-radius: $rct-outline-radius;
     }
 
     &:not(:focus-visible) {
@@ -92,9 +92,9 @@ $rct-outline-offset: -2px !default;
     // Show focus effect on pseudo-checkbox
     &:focus {
       + .rct-checkbox {
-        border-radius: $rct-outline-radius;
         outline: $rct-outline-size solid $rct-outline-color;
         outline-offset: $rct-outline-offset;
+        border-radius: $rct-outline-radius;
       }
 
       &:not(:focus-visible) + .rct-checkbox {
@@ -196,8 +196,8 @@ $rct-outline-offset: -2px !default;
   }
 
   &:focus {
-    background: $rct-clickable-focus;
     outline: 0;
+    background: $rct-clickable-focus;
   }
 }