chore: fuck lightningcss

2025-01-31 22:55:02 +03:00 · 2025-01-31 22:55:02 +03:00 · 99181ca212
commit 99181ca212
parent 85270bd435
8 changed files with 51 additions and 60 deletions
--- a/astro.config.mjs
+++ b/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',
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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: {}

--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,9 @@
+import UnoCSS from '@unocss/postcss'
+import nesting from 'postcss-nesting'
+
+export default {
+  plugins: [
+    UnoCSS(),
+    nesting(),
+  ],
+}
--- a/src/components/ui/Checkbox/Checkbox.module.css
+++ b/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;
 }
--- a/src/layouts/BaseLayout.astro
+++ b/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>
--- a/src/pages/blog/[slug].astro
+++ b/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; }
-    h2 { --uno: text-3xl font-bold mb-3 mt-3; }
-    h3 { --uno: text-2xl font-bold mb-2 mt-2; }
-    h4 { --uno: text-xl font-bold mb-2; }
-    h5 { --uno: text-lg font-bold mb-2; }
-    h6 { --uno: text-md font-bold mb-2; }
+    h1 { @apply text-4xl font-bold mb-4; }
+    h2 { @apply text-3xl font-bold mb-3 mt-3; }
+    h3 { @apply text-2xl font-bold mb-2 mt-2; }
+    h4 { @apply text-xl font-bold mb-2; }
+    h5 { @apply text-lg font-bold mb-2; }
+    h6 { @apply text-md font-bold mb-2; }

-    .big { --uno: text-2xl font-bold; }
-    .shout { --uno: text-4xl font-bold; }
+    .big { @apply text-2xl 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; }
-    ol { --uno: mb-4 list-decimal list-outside ml-2em; }
+    ul { @apply list-disc list-outside mb-4 ml-4; }
+    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;
-        p { --uno: text-sm mb-0; }
-        p + p { --uno: mt-4; }
+        @apply border-l-4 border-text-secondary pl-4 mb-4 py-2;
+        p { @apply text-sm mb-0; }
+        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;
            }
        }
    }
--- a/uno.config.ts
+++ b/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': [