Autoprefixing / How to handle vendor prefixes

[illumincrotty]

Is there a way to do automatic prefixing available for vanilla-extract? I'm styling a slider and the number of prefixes needed to get any sort of consistency across browsers is painful. If there is a plugin or addon available or it's already implemented and simply not documented or I missed the place where it's explained, please point me to it (I use Vite if that's relevant). Otherwise, it's a feature I would love to see.

[markdalgleish]

We originally designed around webpack which lets you apply your own loaders to the generated CSS files, but we'll need to think about how this will be achieved with other bundlers.

[mattcompiles]

The idea with vanilla-extract is for it to fit seamlessly into any bundler ecosystem and handle CSS the way you would with any other CSS file.

Looking into Vite specifically, it seems they support PostCSS out of the box. So to add autoprefixer you just need to add it to your projects PostCSS config.

[Brendan-csel]

Looking specifically at esbuild, it seems only one plugin gets a shot at providing the content for any file - and that content can't be chained on as input to any other plugin.

Since the vanilla-extract esbuild plugin provides the content for the virtual css files that seems to be game over for processing the css any further.

I think the only option is to copy the vanilla-extract plugin and insert a bit to do the post-css/autoprefixer thing just before returning the css content to esbuild. I'm going to give that a go tomorrow and will likely report back here (unless someone else has already done it or has a better approach?)

[mattcompiles]

I think this is worth raising with esbuild directly to see if they would be willing to support this use case better. However I'm not completely against supporting some kind of post processing for CSS if need be.

[Brendan-csel]

I see there are a few issues in the esbuild repo (eg evanw/esbuild#729) that raise this concept. Unfortunately I think Evan has a bit of a backlog.

I guess a couple of approaches are possible:

1. Let esbuild write out the css files to disk and then iterate through the css files to autoprefix them.
2. Add a processCss callback to the vanilla-extract plugin options that, if provided, gets called just prior to returning the css content to esbuild. The user can the do whatever they like with the css - eg run it through postcss/autoprefixer.

I've tested option 2 and it seems to work well. I'll put in a pull request shortly that provides for this extra callback - just in case you also think it is a good approach. ...I just need to figure out to reset my fork from the last PR. 😅

[Brendan-csel]

Added a pull request for consideration #183