chore: fuck lightningcss

astro.config.mjs

@@ -2,8 +2,6 @@ import node from '@astrojs/node'
 import solid from '@astrojs/solid-js'
 import { Graphviz } from '@hpcc-js/wasm-graphviz'
 import { defineConfig } from 'astro/config'
-import browserslist from 'browserslist'
-import { browserslistToTargets } from 'lightningcss'
 import { toString } from 'mdast-util-to-string'
 import getReadingTime from 'reading-time'
 import { visit } from 'unist-util-visit'
@@ -64,15 +62,6 @@ export default defineConfig({
     define: {
       'import.meta.env.VITE_BUILD_DATE': JSON.stringify(new Date().toISOString().split('T')[0]),
     },
-    css: {
-      transformer: 'lightningcss',
-      lightningcss: {
-        targets: browserslistToTargets(browserslist('>= 0.25%')),
-      },
-    },
-    build: {
-      cssMinify: 'lightningcss',
-    },
   },
   adapter: node({
     mode: 'standalone',

package.json

@@ -27,13 +27,11 @@
     "astro": "^5.1.9",
     "astro-loading-indicator": "0.7.0",
     "better-sqlite3": "^11.1.2",
-    "browserslist": "^4.24.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "drizzle-kit": "^0.23.1",
     "drizzle-orm": "^0.32.1",
-    "lightningcss": "^1.29.1",
     "mdast-util-to-string": "^4.0.0",
     "parse-duration": "^1.1.0",
     "rate-limiter-flexible": "^5.0.3",

pnpm-lock.yaml

@@ -53,9 +53,6 @@ importers:
       better-sqlite3:
         specifier: ^11.1.2
         version: 11.1.2
-      browserslist:
-        specifier: ^4.24.4
-        version: 4.24.4
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -71,9 +68,6 @@ importers:
       drizzle-orm:
         specifier: ^0.32.1
         version: 0.32.1(@types/better-sqlite3@7.6.11)(better-sqlite3@11.1.2)
-      lightningcss:
-        specifier: ^1.29.1
-        version: 1.29.1
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
@@ -6520,7 +6514,8 @@ snapshots:
 
   destroy@1.2.0: {}
 
-  detect-libc@1.0.3: {}
+  detect-libc@1.0.3:
+    optional: true
 
   detect-libc@2.0.3: {}
 
@@ -7599,6 +7594,7 @@ snapshots:
       lightningcss-linux-x64-musl: 1.29.1
       lightningcss-win32-arm64-msvc: 1.29.1
       lightningcss-win32-x64-msvc: 1.29.1
+    optional: true
 
   lines-and-columns@1.2.4: {}
 

postcss.config.mjs

@@ -0,0 +1,9 @@
+import UnoCSS from '@unocss/postcss'
+import nesting from 'postcss-nesting'
+
+export default {
+  plugins: [
+    UnoCSS(),
+    nesting(),
+  ],
+}

src/components/ui/Checkbox/Checkbox.module.css

@@ -1,18 +1,18 @@
 .input {
-    --uno: hidden;
+    @apply hidden;
 }
 
 .label {
-    --uno: flex items-center gap-2 cursor-pointer select-none;
+    @apply flex items-center gap-2 cursor-pointer select-none;
 }
 
 .box {
-    --uno: bg-control-bg border-control-outline hover:bg-control-bg-hover pos-relative h-4 w-4 border rounded-md transition-all;
+    @apply bg-control-bg border-control-outline hover:bg-control-bg-hover pos-relative h-4 w-4 border rounded-md transition-all;
 }
 
 .input:checked + .label .box::before {
     content: '';
     display: 'block';
 
-    --uno: bg-text-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-sm;
+    @apply bg-text-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-sm;
 }

src/layouts/BaseLayout.astro

@@ -84,6 +84,6 @@ const finalOg = { ...defaultOgTags, ...og }
 }
 
 body {
-    --uno:  text-sm m-0 p-0 overflow-x-hidden overflow-y-auto bg-bg font-mono text-text-primary min-h-screen;
+    @apply  text-sm m-0 p-0 overflow-x-hidden overflow-y-auto bg-bg font-mono text-text-primary min-h-screen;
 }
 </style>

src/pages/blog/[slug].astro

@@ -76,102 +76,102 @@ const { Content, remarkPluginFrontmatter } = await render(post);
 
     color: var(--text-content);
 
-    h1 { --uno: text-4xl font-bold mb-4; }
+    h1 { @apply text-4xl font-bold mb-4; }
-    h2 { --uno: text-3xl font-bold mb-3 mt-3; }
+    h2 { @apply text-3xl font-bold mb-3 mt-3; }
-    h3 { --uno: text-2xl font-bold mb-2 mt-2; }
+    h3 { @apply text-2xl font-bold mb-2 mt-2; }
-    h4 { --uno: text-xl font-bold mb-2; }
+    h4 { @apply text-xl font-bold mb-2; }
-    h5 { --uno: text-lg font-bold mb-2; }
+    h5 { @apply text-lg font-bold mb-2; }
-    h6 { --uno: text-md font-bold mb-2; }
+    h6 { @apply text-md font-bold mb-2; }
 
-    .big { --uno: text-2xl font-bold; }
+    .big { @apply text-2xl font-bold; }
-    .shout { --uno: text-4xl font-bold; }
+    .shout { @apply text-4xl font-bold; }
 
     .thought {
         &::before {
             content: '💭';
-            --uno: text-4xl font-bold;
+            @apply text-4xl font-bold;
         }
 
-        --uno: p-4 mb-4 bg-control-bg-hover rounded-lg flex flex-row gap-4 items-center;
+        @apply p-4 mb-4 bg-control-bg-hover rounded-lg flex flex-row gap-4 items-center;
     }
 
     h1, h2, h3, h4, h5, h6 {
-        --uno: relative text-text-primary cursor-pointer -ml-1em pl-1em;
+        @apply relative text-text-primary cursor-pointer -ml-1em pl-1em;
 
         [data-anchor-link] {
-            --uno: hidden absolute left-0 text-text-secondary no-underline hover:underline;
+            @apply hidden absolute left-0 text-text-secondary no-underline hover:underline;
         }
 
         &:hover [data-anchor-link] {
-            --uno: inline;
+            @apply inline;
         }
     }
 
     p {
-        --uno: text-sm mb-5;
+        @apply text-sm mb-5;
         line-height: 1.5;
     }
-    ul { --uno: list-disc list-outside mb-4 ml-4; }
+    ul { @apply list-disc list-outside mb-4 ml-4; }
-    ol { --uno: mb-4 list-decimal list-outside ml-2em; }
+    ol { @apply mb-4 list-decimal list-outside ml-2em; }
     li {
-        --uno: text-sm mt-1;
+        @apply text-sm mt-1;
         line-height: 1.5;
     }
 
     code {
-        --uno: text-sm bg-control-bg-hover px-1 rounded-md;
+        @apply text-sm bg-control-bg-hover px-1 rounded-md;
         color: var(--text-content);
     }
 
     blockquote {
-        --uno: border-l-4 border-text-secondary pl-4 mb-4 py-2;
+        @apply border-l-4 border-text-secondary pl-4 mb-4 py-2;
-        p { --uno: text-sm mb-0; }
+        p { @apply text-sm mb-0; }
-        p + p { --uno: mt-4; }
+        p + p { @apply mt-4; }
     }
 
     pre {
-        --uno: bg-control-bg-hover text-text-secondary p-2 rounded-md mb-4;
+        @apply bg-control-bg-hover text-text-secondary p-2 rounded-md mb-4;
 
-        code { --uno: bg-transparent; }
+        code { @apply bg-transparent; }
     }
 
     table {
-        --uno: border-collapse border-solid border-text-secondary border-spacing-0 mb-2;
+        @apply border-collapse border-solid border-text-secondary border-spacing-0 mb-2;
 
         th, td {
-            --uno: border border-text-secondary p-1;
+            @apply border border-text-secondary p-1;
         }
 
         th {
-            --uno: font-bold text-left;
+            @apply font-bold text-left;
         }
         td {
-            --uno: text-right;
+            @apply text-right;
         }
     }
 
     a {
-        --uno: text-text-accent underline hover:no-underline;
+        @apply text-text-accent underline hover:no-underline;
     }
 
     .graphviz-svg {
-        --uno: w-full flex justify-center mb-4;
+        @apply w-full flex justify-center mb-4;
 
         svg {
-            --uno: border border-text-secondary rounded-md
+            @apply border border-text-secondary rounded-md
         }
 
         .graph {
             text {
-                --uno: font-mono;
+                @apply font-mono;
                 fill: var(--text-content);
                 font-size: 10px;
                 line-height: 1;
             }
-            path, ellipse, polygon { --uno: stroke-text-secondary; }
+            path, ellipse, polygon { @apply stroke-text-secondary; }
 
             > polygon {
-                --uno: fill-transparent stroke-none;
+                @apply fill-transparent stroke-none;
             }
         }
     }

uno.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, presetIcons, presetUno, transformerCompileClass, transformerDirectives, transformerVariantGroup } from 'unocss'
+import { defineConfig, presetIcons, presetUno, transformerCompileClass, transformerVariantGroup } from 'unocss'
 
 export default defineConfig({
   presets: [
@@ -8,7 +8,6 @@ export default defineConfig({
   transformers: [
     transformerVariantGroup(),
     transformerCompileClass(),
-    transformerDirectives(),
   ],
   shortcuts: {
     'content-dblslash': [