Lower modern yet 12 y.o. CSS properties and values to vendor-prefixed versions

[Signez]

Vendor-prefixing is a deprecated practice that seems to be on the decline, yet this article on CSS-Tricks "Is Vendor-Prefixing dead?" counted 31 "features" that still required prefixing in 2021.

Some of those features, like the mask-image properties, are quite commonly used on the web and are available to web authors for more than 12 years. In this mask-image example, Chrome doesn't seems to have short term plans to get rid of those prefixes (it doesn't seems to be part of Interop 2023), so it will be needed for years to come.

Prefixes are cumbersome to add manually — but it is quite cumbersome to automate their additions in a esbuild-based toolchain too, as it means installing PostCSS packages and load a PostCSS plugin in esbuild solely to use autoprefixer.

Vendor-prefixing doesn’t seems to be a moving target anymore, and will be required for years to come. Having a way to use the recent target / supported options to handle those properties and values, at least the few that only needs a prefix (without more syntax changes), would save developers hours of work and megabytes of toolchains to download! ✨

[Signez]

(As a little addendum: mask-image seems to be a niche addition, but for multiple reasons, it is the only way we know to add icons as pseudo-elements which colors follow currentColor or a custom property color, which is a very common occurrence in the projects I had the chance to work on.)

[JoshuaWise]

I would also like to see this feature. I see it as a missing feature, because I expect my build system to transpile my CSS into being brower-compatible (based on the browser target list), just as it's done for JavaScript. Currently I'm hacking around this by using PostCSS as a post-build step, but PostCSS is insanely slow. Even just require('postcss-preset-env') takes 250ms!

[evanw]

I've added some vendor prefixing to esbuild. Here's the current list of automatically-prefixed properties:

• appearance: *; => -webkit-appearance: *; -moz-appearance: *;
• backdrop-filter: *; => -webkit-backdrop-filter: *;
• background-clip: text => -webkit-background-clip: text;
• box-decoration-break: *; => -webkit-box-decoration-break: *;
• clip-path: * => -webkit-clip-path: *;
• font-kerning: *; => -webkit-font-kerning: *;
• hyphens: *; => -webkit-hyphens: *;
• initial-letter: *; => -webkit-initial-letter: *;
• mask-image: *; => -webkit-mask-image: *;
• mask-origin: *; => -webkit-mask-origin: *;
• mask-position: *; => -webkit-mask-position: *;
• mask-repeat: *; => -webkit-mask-repeat: *;
• mask-size: *; => -webkit-mask-size: *;
• position: sticky; => position: -webkit-sticky;
• print-color-adjust: *; => -webkit-print-color-adjust: *;
• tab-size: *; => -moz-tab-size: *; -o-tab-size: *;
• text-decoration-color: *; => -webkit-text-decoration-color: *; -moz-text-decoration-color: *;
• text-decoration-line: *; => -webkit-text-decoration-line: *; -moz-text-decoration-line: *;
• text-decoration-skip: *; => -webkit-text-decoration-skip: *;
• text-emphasis-color: *; => -webkit-text-emphasis-color: *;
• text-emphasis-position: *; => -webkit-text-emphasis-position: *;
• text-emphasis-style: *; => -webkit-text-emphasis-style: *;
• text-orientation: *; => -webkit-text-orientation: *;
• text-size-adjust: *; => -webkit-text-size-adjust: *; -ms-text-size-adjust: *;
• user-select: *; => -webkit-user-select: *; -moz-user-select: *; -ms-user-select: *;

Compatibility data has been copied from https://caniuse.com. This should get things started, and support for more CSS properties can be added in the future as appropriate.

Hopefully all of these transformations were done correctly. I tested some of them but not all of them. I know of a few special cases (e.g. user-select: none => -moz-user-select: -moz-none) but there are surely others that I missed. Let me know if anything seems off about these transforms or if any other transforms are important for you.

[Signez]

Thanks! It's so awesome to see this feature implemented that quickly ✨

[JoshuaWise]

This is great! 🥳

It may be worth looking at Autoprefixer as a reference for all the different properties that people expect, since that project has years of history and development for this exact purpose:

https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js

[silverwind]

Is there an opt-out option to this?

[evanw]

If you don't set the target environment, then esbuild won't add any prefixes.

[silverwind]

If you don't set the target environment, then esbuild won't add any prefixes.

If I just set a JS-only target like es2020 would esbuild derive browsers from it for this feature?

[evanw]

No, only browser targets apply to CSS. Other non-browser targets such as node also don't affect CSS.