Generate CSS after Vite handles imports during prod builds

[thecrypticace]

When we started handling @import ourselves in #14446 we inadvertently broke Vite's URL asset url rewriting inside of some imported CSS files.

For example, given the following files:

/* ./main.css */
@import "./dir/imported.css";

/* ./dir/imported.css */
.foo {
  background: url(../image.png);
}

/* ./image.png */
/* … */

We'd flatten the import CSS and you'd end up with the following:

/* main.css */
.foo {
  background: url(../image.png);
}

/* ./image.png */
/* … */

And, as you can see, ../image.png does not exist relative to the "final" CSS. It should've been rewritten to ./image.png but was not. Letting Vite handle the imports will rewrite these urls properly — which is what this PR does. It achieves this by running our CSS generation when typtical Vite plugins do rather than before (via enforce: 'pre').

Additionally, because we were running the generation step early, Vue had not handled :deep(…) selectors in <style scoped> blocks yet and we were caching the unprocessed CSS. This is also fixed by this PR.

Ideally both of these things would be fixable by changing how we handle imports but that will require additional APIs so this is a reasonable stopgap measure until we can do that.

Fixes #14839

[philipp-spiess]

We decided to keep the pre processing phase for now and fixed the issues with the following PRs:

• Rewrite urls in CSS files when using Vite #14877
• Apply non-Tailwind CSS transforms in Vite plugin #14871