Resolve Sass deprecations

Author: jakezatecky

examples/src/scss/style.scss

@@ -1,22 +1,18 @@
-// Cayman overrides
-$body-text-color: #444;
-$code-text-color: #465e6a;
-$header-bg-color: #3498db;
-$header-bg-color-secondary: #2c3e50;
-$section-headings-color: #2079b5;
-$blockquote-text-color: #576266;
-
-// Checkbox tree overrides
-$rct-color: #444;
-$rct-border-color: #ccc;
+@use "../../../src/scss/react-checkbox-tree";
+@use "cayman" with (
+  $body-text-color: #444,
+  $code-text-color: #465e6a,
+  $header-bg-color: #3498db,
+  $header-bg-color-secondary: #2c3e50,
+  $section-headings-color: #2079b5,
+  $blockquote-text-color: #576266
+);
 
 // Misc.
+$rct-color: #444;
 $input-border-color: #ced4da;
 $tree-font-family: "Roboto", sans-serif;
 
-@import "../../../src/scss/react-checkbox-tree";
-@import "cayman";
-
 .main-content {
   h1,
   h2,

package.json

@@ -91,7 +91,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.58.2",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "^16.0.5",
     "stylelint": "^15.1.0",
     "stylelint-config-takiyon": "^3.0.0",
     "webpack": "^5.3.2",

src/scss/react-checkbox-tree.scss

@@ -149,10 +149,6 @@ $rct-outline-offset: -2px !default;
   &:hover {
     opacity: 1;
   }
-
-  + & {
-    margin-left: 2px;
-  }
 }
 
 .rct-collapse,