vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix(postcss-preset-env): client side polyfills #3051

Merged
konrad merged 1 commits from dpschen/frontend:fix-postcss-preset-env-client-side-polyfills into main 2023-02-15 15:40:02 +00:00
Conversation 1 Commits 1 Files Changed 1 +11 -1
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
vite.config.ts
View File

@ -72,7 +72,17 @@ export default defineConfig(({mode}) => {
plugins: [
postcssEasings(),
postcssEasingGradients(),
dpschen marked this conversation as resolved Outdated
dpschen commented 2023-02-02 17:05:54 +00:00
Outdated
Review
Copy Link

Now that I enabled the former default again, I'm unsure if I would need to disable the other plugins again as well.

Now that I enabled the former default again, I'm unsure if I would need to disable [the other plugins](https://kolaente.dev/vikunja/frontend/src/commit/489014944a1544846875910d7d5e17e3d71b7e2d/vite.config.ts#L69-L77) again as well.
dpschen commented 2023-02-02 17:12:49 +00:00
Outdated
Review
Copy Link

Maybe it's also enough to do the opposite: force enable the focus-visible-pseudo-class plugin like this:

features: {
    'focus-within-pseudo-class': true,
},

AFAIK 'focus-visible-pseudo-class' is the only feature of those plugins that require a client side polyfill that we use.

When I read the documentation of that plugin I get a bit confused though if we even need that src/polyfills.ts file or if enabling that plugin should be enought for the client side polyfill to be included. See that sentence:

PostCSS Focus Within works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any additional polyfills.

Source: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#browser

Really confusing that documentation!

Maybe it's also enough to do the opposite: force enable the focus-visible-pseudo-class plugin like this: ```js features: { 'focus-within-pseudo-class': true, }, ``` AFAIK 'focus-visible-pseudo-class' is the only feature of those plugins that require a client side polyfill that we use. When I read [the documentation of that plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within) I get a bit confused though if we even need that `src/polyfills.ts` file or if enabling that plugin should be enought for the client side polyfill to be included. See that sentence: > PostCSS Focus Within works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any additional polyfills. _Source: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#browser_ Really confusing that documentation!
konrad commented 2023-02-02 21:13:22 +00:00
Outdated
Review
Copy Link

If it's possible to enable the polyfill only for that specific feature I think that's a good idea. Or is the rest tree-shaked?

See that sentence:

That sounds like it does not need a polyfill at all? (When targeting newer browsers than these)

If it's possible to enable the polyfill only for that specific feature I think that's a good idea. Or is the rest tree-shaked? > See that sentence: That sounds like it does not need a polyfill at all? (When targeting newer browsers than these)
dpschen commented 2023-02-08 12:15:40 +00:00
Outdated
Review
Copy Link

Or is the rest tree-shaked?

I'm unsure.

It's also very time-consuming to test this since I would need to pick a browser version in browserslist that doesn't support those features natively.

Should I try the variant where I only enable features?

> Or is the rest tree-shaked? I'm unsure. It's also very time-consuming to test this since I would need to pick a browser version in browserslist that doesn't support those features natively. Should I try the variant where I only enable features?
konrad commented 2023-02-09 21:46:06 +00:00
Outdated
Review
Copy Link

Should I try the variant where I only enable features?

If that's easier, please do.

> Should I try the variant where I only enable features? If that's easier, please do.
dpschen commented 2023-02-15 15:28:50 +00:00
Outdated
Review
Copy Link

Done. Please re-review

Done. Please re-review
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,
},
}),
],
},
},