feat: remove polyfills

features are now supported by baseline browsers

frontend/env.d.ts

@@ -3,16 +3,6 @@
 /// <reference types="cypress" />
 /// <reference types="@histoire/plugin-vue/components" />
 
-declare module 'postcss-focus-within/browser' {
-	import focusWithinInit from 'postcss-focus-within/browser'
-	export default focusWithinInit
-}
-
-declare module 'css-has-pseudo/browser' {
-	import cssHasPseudo from 'css-has-pseudo/browser'
-	export default cssHasPseudo
-}
-
 interface ImportMetaEnv {
 	readonly VIKUNJA_API_URL?: string
 	readonly VIKUNJA_HTTP_PORT?: number

frontend/package.json

@@ -155,7 +155,6 @@
     "autoprefixer": "10.4.19",
     "browserslist": "4.23.0",
     "caniuse-lite": "1.0.30001617",
-    "css-has-pseudo": "6.0.3",
     "csstype": "3.1.3",
     "cypress": "13.9.0",
     "esbuild": "0.21.1",
@@ -166,7 +165,6 @@
     "postcss": "8.4.38",
     "postcss-easing-gradients": "3.0.1",
     "postcss-easings": "4.0.0",
-    "postcss-focus-within": "8.0.1",
     "postcss-preset-env": "9.5.11",
     "rollup": "4.17.2",
     "rollup-plugin-visualizer": "5.12.0",

frontend/pnpm-lock.yaml

@@ -323,9 +323,6 @@ importers:
       caniuse-lite:
         specifier: 1.0.30001617
         version: 1.0.30001617
-      css-has-pseudo:
-        specifier: 6.0.3
-        version: 6.0.3(postcss@8.4.38)
       csstype:
         specifier: 3.1.3
         version: 3.1.3
@@ -356,9 +353,6 @@ importers:
       postcss-easings:
         specifier: 4.0.0
         version: 4.0.0(postcss@8.4.38)
-      postcss-focus-within:
-        specifier: 8.0.1
-        version: 8.0.1(postcss@8.4.38)
       postcss-preset-env:
         specifier: 9.5.11
         version: 9.5.11(postcss@8.4.38)

frontend/src/histoire.setup.ts

@@ -1,4 +1,3 @@
-import './polyfills'
 import {defineSetupVue3} from '@histoire/plugin-vue'
 import {i18n} from './i18n'
 

frontend/src/main.ts

@@ -1,4 +1,3 @@
-import './polyfills'
 import {createApp} from 'vue'
 
 import pinia from './pinia'

frontend/src/polyfills.ts

@@ -1,6 +0,0 @@
-// in order to use postcss-preset-env correctly we need some client side plugins
-import focusWithinInit from 'postcss-focus-within/browser'
-import cssHasPseudo from 'css-has-pseudo/browser'
-
-focusWithinInit()
-cssHasPseudo(document)

frontend/tsconfig.config.json

@@ -3,7 +3,7 @@
     "@tsconfig/node18/tsconfig.json",
     "@vue/tsconfig/tsconfig.json"
   ],
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "env.config.d.ts"],
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]

frontend/vite.config.ts

@@ -100,18 +100,7 @@ export default defineConfig(({mode}) => {
 				plugins: [
 					postcssEasings(),
 					postcssEasingGradients(),
-					postcssPresetEnv({
+					postcssPresetEnv(),
-						// Since postcss-preset-env v8.0.0 the 'enableClientSidePolyfills' option is disabled by default.
-						// This is the list of features that require a client side library:
-						// https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env#plugins-that-need-client-library
-						// Since we only use 'focus-within-pseudo-class' we have to force enable
-						// that plugin now manually in order to keep the browser support as it was.
-						// See also './src/polyfills.ts'
-						features: {
-							'focus-within-pseudo-class': true,
-							'has-pseudo-class': true,
-						},
-					}),
 				],
 			},
 		},