Built-in CSS autoprefixing based on Browserslist config

[markdalgleish]

Right now, if you want to use Autoprefixer, you need to run a separate PostCSS step ahead of time which is a bit clunky. It would be nice if this was built-in using your project's Browserslist config via .browserslistrc or the "browserslist" field in package.json.

Another nice benefit of being built-in is that we could choose to use alternative tools like Lightning CSS.

This would need to be opt-in so it's not a breaking change, but I can imagine this becoming the default behaviour in a future major release.

Related issues/RFCs/proposals

• .browserslistrc support #4769
• 🗺️ Vanilla Extract #5015

[sergiodxa]

In favor of this, also would be great to minify the code.

I used to author my custom CSS in app/styles and recently had to move them to styles to run PostCSS just to minify the code, would be great to let Remix handle that for any stylesheet I import on my app code.

I also like the idea to support configurations for this, something like

// remix.config.js
module.exports = {
  css: {
    minify: true,
    autoprefix: true,
  },
};

[davyrolink]

The possibility to let Lightning CSS run on the generated css-bundle would be great! That would make it possible, for example, to use CSS Nesting syntax in CSS Modules.

[smorimoto]

I strongly agree with this.

[machour]

This got discussed in Roadmap #5, around 38'46 and accepted.

Tracked in #5315