feat: use lightningcss with profile widely-available to compile css

pdanpdan · pdanpdan · commit ed05e4777af0 · 2026-02-07T18:51:43.000+02:00
diff --git a/packages/playground/public/umd/essential-grid-dynamic.html b/packages/playground/public/umd/essential-grid-dynamic.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/essential-grid-fixed.html b/packages/playground/public/umd/essential-grid-fixed.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/essential-horizontal-dynamic.html b/packages/playground/public/umd/essential-horizontal-dynamic.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/essential-horizontal-fixed.html b/packages/playground/public/umd/essential-horizontal-fixed.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/essential-vertical-dynamic.html b/packages/playground/public/umd/essential-vertical-dynamic.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/essential-vertical-fixed.html b/packages/playground/public/umd/essential-vertical-fixed.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/feature-custom-scrollbar.html b/packages/playground/public/umd/feature-custom-scrollbar.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/feature-infinite-scroll.html b/packages/playground/public/umd/feature-infinite-scroll.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/feature-sticky-sections.html b/packages/playground/public/umd/feature-sticky-sections.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/pattern-chat.html b/packages/playground/public/umd/pattern-chat.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/public/umd/pattern-table.html b/packages/playground/public/umd/pattern-table.html
@@ -15,10 +15,6 @@
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/playground/scripts/generate-umd-examples.js b/packages/playground/scripts/generate-umd-examples.js
@@ -80,10 +80,6 @@ const baseHtml = `<!DOCTYPE html>
   <!-- Minimal Essential Styles -->
   <style>
     [v-cloak] { display: none; }
-    html { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light dark; }
-    @media (prefers-color-scheme: dark) { html { --lightningcss-light: ; --lightningcss-dark: initial; } }
-    html[data-theme="light"] { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
-    html[data-theme="dark"] { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
     html, body, #app { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; }
 
     .example-item { display: flex; align-items: center; border-bottom: 1px solid color-mix(in oklch, var(--color-base-content), transparent 90%); padding: 0 1rem; font-size: 0.875rem; }
diff --git a/packages/virtual-scroll/package.json b/packages/virtual-scroll/package.json
@@ -64,12 +64,17 @@
     "@vitejs/plugin-vue": "catalog:",
     "@vue/test-utils": "catalog:",
     "@vue/tsconfig": "catalog:",
+    "browserslist": "catalog:",
     "jsdom": "catalog:",
+    "lightningcss": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vite-plugin-dts": "catalog:",
     "vitest": "catalog:",
     "vue": "catalog:",
     "vue-tsc": "catalog:"
-  }
+  },
+  "browserslist": [
+    ">0.5%, baseline widely available"
+  ]
 }
diff --git a/packages/virtual-scroll/vite.config.ts b/packages/virtual-scroll/vite.config.ts
@@ -1,6 +1,8 @@
 import { resolve } from 'node:path';
 
 import vue from '@vitejs/plugin-vue';
+import browserslist from 'browserslist';
+import { browserslistToTargets, Features } from 'lightningcss';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
@@ -12,6 +14,13 @@ export default defineConfig({
       rollupTypes: true,
     }),
   ],
+  css: {
+    transformer: 'lightningcss',
+    lightningcss: {
+      targets: browserslistToTargets(browserslist('>0.5%, baseline widely available')),
+      exclude: Features.Colors,
+    },
+  },
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
