From d73c3a8695f3452b58a5681304e450d415dc387c Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Mon, 4 May 2026 10:55:43 +0100 Subject: [PATCH] Remove legacy CSS --- package-lock.json | 125 ++++++++++++++++++++++++++++++++++++++++++ package.json | 5 ++ src/index.scss | 1 - src/style/mixins.scss | 8 --- vite.config.ts | 11 ++++ 5 files changed, 141 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index f0a2c4f..fc94ae1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,11 +17,13 @@ "@types/node": "^25.6.0", "@vite-pwa/assets-generator": "^1.0.2", "@webgpu/types": "^0.1.69", + "browserslist": "^4.28.2", "eslint": "^10.3.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-prettier": "^5.5.5", "eslint-plugin-unused-imports": "^4.4.1", "globals": "^17.6.0", + "lightningcss": "^1.32.0", "npm-check-updates": "^22.1.0", "prettier": "^3.8.3", "sass": "^1.99.0", @@ -2052,6 +2054,19 @@ "node": "18 || 20 || >=22" } }, + "node_modules/baseline-browser-mapping": { + "version": "2.10.27", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.27.tgz", + "integrity": "sha512-zEs/ufmZoUd7WftKpKyXaT6RFxpQ5Qm9xytKRHvJfxFV9DFJkZph9RvJ1LcOUi0Z1ZVijMte65JbILeV+8QQEA==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/brace-expansion": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz", @@ -2078,6 +2093,40 @@ "node": ">=8" } }, + "node_modules/browserslist": { + "version": "4.28.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz", + "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.10.12", + "caniuse-lite": "^1.0.30001782", + "electron-to-chromium": "^1.5.328", + "node-releases": "^2.0.36", + "update-browserslist-db": "^1.2.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, "node_modules/cac": { "version": "6.7.14", "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", @@ -2088,6 +2137,27 @@ "node": ">=8" } }, + "node_modules/caniuse-lite": { + "version": "1.0.30001791", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz", + "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, "node_modules/chai": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz", @@ -2269,6 +2339,13 @@ "node": ">=8" } }, + "node_modules/electron-to-chromium": { + "version": "1.5.349", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.349.tgz", + "integrity": "sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A==", + "dev": true, + "license": "ISC" + }, "node_modules/es-module-lexer": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz", @@ -2276,6 +2353,16 @@ "dev": true, "license": "MIT" }, + "node_modules/escalade": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", + "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -3220,6 +3307,13 @@ "license": "MIT", "optional": true }, + "node_modules/node-releases": { + "version": "2.0.38", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz", + "integrity": "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==", + "dev": true, + "license": "MIT" + }, "node_modules/npm-check-updates": { "version": "22.1.0", "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-22.1.0.tgz", @@ -3826,6 +3920,37 @@ "dev": true, "license": "MIT" }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index d6a7ef8..ce5a93e 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,9 @@ ], "author": "Andras Schmelczer", "license": "Unlicense", + "browserslist": [ + "supports webgpu and last 2 years" + ], "dependencies": { "gl-matrix": "^3.4.4" }, @@ -39,11 +42,13 @@ "@types/node": "^25.6.0", "@vite-pwa/assets-generator": "^1.0.2", "@webgpu/types": "^0.1.69", + "browserslist": "^4.28.2", "eslint": "^10.3.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-prettier": "^5.5.5", "eslint-plugin-unused-imports": "^4.4.1", "globals": "^17.6.0", + "lightningcss": "^1.32.0", "npm-check-updates": "^22.1.0", "prettier": "^3.8.3", "sass": "^1.99.0", diff --git a/src/index.scss b/src/index.scss index 8ba94e8..8c4500a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -138,7 +138,6 @@ html > body { transform var(--transition-time), background-color var(--transition-time); - -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; @include square(var(--icon-size)); diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 76440b6..4ed95f5 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -49,14 +49,6 @@ $breakpoint-width: 600px !default; @mixin blurred-background($color: transparent) { background-color: color.adjust($color, $alpha: -0.66); backdrop-filter: blur(var(--blur-radius)); - -webkit-backdrop-filter: blur(var(--blur-radius)); - - @supports not ( - (backdrop-filter: blur(var(--blur-radius))) or - (-webkit-backdrop-filter: blur(var(--blur-radius))) - ) { - background-color: $color; - } } @mixin square($size) { diff --git a/vite.config.ts b/vite.config.ts index 7113521..7215fa6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,11 +1,22 @@ +import browserslist from 'browserslist'; +import { browserslistToTargets } from 'lightningcss'; import { defineConfig } from 'vitest/config'; import { viteSingleFile } from 'vite-plugin-singlefile'; +const cssTargets = browserslistToTargets(browserslist()); + export default defineConfig({ plugins: [viteSingleFile()], + css: { + transformer: 'lightningcss', + lightningcss: { + targets: cssTargets, + }, + }, build: { target: 'es2022', cssCodeSplit: false, + cssMinify: 'lightningcss', assetsInlineLimit: Number.MAX_SAFE_INTEGER, }, server: {