From 99181ca212be159b635e0dbfc9754e520b493d37 Mon Sep 17 00:00:00 2001 From: alina sireneva Date: Fri, 31 Jan 2025 22:55:02 +0300 Subject: [PATCH] chore: fuck lightningcss --- astro.config.mjs | 11 ---- package.json | 2 - pnpm-lock.yaml | 10 +-- postcss.config.mjs | 9 +++ .../ui/Checkbox/Checkbox.module.css | 8 +-- src/layouts/BaseLayout.astro | 2 +- src/pages/blog/[slug].astro | 66 +++++++++---------- uno.config.ts | 3 +- 8 files changed, 51 insertions(+), 60 deletions(-) create mode 100644 postcss.config.mjs diff --git a/astro.config.mjs b/astro.config.mjs index f662edf..f6d4c5e 100644 --- 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', diff --git a/package.json b/package.json index 7157fd7..435f532 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e096f70..117ae56 100644 --- 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: {} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..ac06912 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,9 @@ +import UnoCSS from '@unocss/postcss' +import nesting from 'postcss-nesting' + +export default { + plugins: [ + UnoCSS(), + nesting(), + ], +} diff --git a/src/components/ui/Checkbox/Checkbox.module.css b/src/components/ui/Checkbox/Checkbox.module.css index 6cbd330..18db3a3 100644 --- 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; } diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index b20b465..a9666e9 100644 --- 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; } diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro index 79fbac6..46b1e76 100644 --- 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; } } } diff --git a/uno.config.ts b/uno.config.ts index 22edef9..1e5be33 100644 --- 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': [