Updated SCSS to use @use instead of @import via sass-migrator

Author: Calvin Vette

.gitignore

@@ -27,6 +27,7 @@ dist-ssr
 /build
 .env.local
 .env
+.dev.vars
 *.vars
 .wrangler
 _worker.bundle

app/styles/components/resize-handle.scss

@@ -1,3 +1,5 @@
+@use "../z-index";
+
 [data-resize-handle] {
   position: relative;
 
@@ -8,7 +10,7 @@
     bottom: 0;
     left: -6px;
     right: -5px;
-    z-index: $zIndexMax;
+    z-index: z-index.$zIndexMax;
   }
 
   &[data-panel-group-direction='vertical']:after {
@@ -18,7 +20,7 @@
     right: 0;
     top: -5px;
     bottom: -6px;
-    z-index: $zIndexMax;
+    z-index: z-index.$zIndexMax;
   }
 
   &[data-resize-handle-state='hover']:after,

app/styles/index.scss

@@ -1,11 +1,11 @@
-@import './variables.scss';
-@import './z-index.scss';
-@import './animations.scss';
-@import './components/terminal.scss';
-@import './components/resize-handle.scss';
-@import './components/code.scss';
-@import './components/editor.scss';
-@import './components/toast.scss';
+@use 'variables.scss';
+@use 'z-index.scss';
+@use 'animations.scss';
+@use 'components/terminal.scss';
+@use 'components/resize-handle.scss';
+@use 'components/code.scss';
+@use 'components/editor.scss';
+@use 'components/toast.scss';
 
 html,
 body {

package.json

@@ -97,9 +97,7 @@
   "devDependencies": {
     "@blitz/eslint-plugin": "0.1.0",
     "@cloudflare/workers-types": "^4.20241127.0",
-    "@jridgewell/sourcemap-codec": "^1.5.0",
     "@remix-run/dev": "^2.15.0",
-    "@rollup/plugin-inject": "^5.0.5",
     "@types/diff": "^5.2.3",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",