Swap stylus to sass

As it has better tooling
Most of this will become css vars anyway

Author: bor3ham

demo/package-lock.json

@@ -26,7 +26,7 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.4",
     "concurrently": "^5.2.0",
-    "esbuild": "^0.17.19",
-    "esbuild-stylus-loader": "^0.4.2"
+    "esbuild": "^0.25.0",
+    "esbuild-sass-plugin": "^3.3.1"
   }
 }

demo/package.json

@@ -1,5 +1,5 @@
 const fs = require('fs')
-const { stylusLoader } = require('esbuild-stylus-loader')
+const { sassPlugin } = require('esbuild-sass-plugin')
 
 const metafilePlugin = {
   name: 'metafilePlugin',
@@ -14,16 +14,12 @@ const metafilePlugin = {
 
 exports.config = {
   plugins: [
-    stylusLoader({
-      stylusOptions: {
-        includeCss: true,
-      },
-    }),
+    sassPlugin(),
     metafilePlugin,
   ],
   entryPoints: [
     './src/demo.tsx',
-    './src/demo.styl',
+    './src/demo.sass',
   ],
   outdir: 'dist',
   metafile: true,

demo/scripts/esbuild-config.js

@@ -1,6 +1,6 @@
-@import '../../dist/layout.css'
-@import '../../dist/theme.css'
-@import '../node_modules/uptick-demo-site/dist/index.css'
+@use '../../dist/layout.css'
+@use '../../dist/theme.css'
+@use '../node_modules/uptick-demo-site/dist/index.css'
 
 hr
   margin: 5rem 0