in build time, generateCSS runs before transformCSS, causing @layer missing in the output

[upupming]

Describe the bug

Input App.vue:

<style>
.test-1 {
  @apply bg-light-700;
}

@layer base {
  .test-2 {
    color: red;
  }
}
</style>

Output:

.test-1 {
  --tw-bg-opacity: 1;
  background-color: rgba(233, 236, 239, var(--tw-bg-opacity));
}

You can see the .test-2 is missing in the built output, this is caused by the load hook (ctx.utils.generateCSS('base')) is ran before transform (transformCSS(code, id)). So although transformCSS added the test-2 to base layer, the generating produre has run before and wont generate again, so we got no test-2 in the output.

Minimal Reproductions

https://github.com/upupming/windicss-missig-layer-build-time#bug-2----build-time-layer-missing

Versions

• vite-plugin-windicss: 1.5.4
• vite: 2.6.14
• framework(vue/react/svelte/etc): vue

Additonal Context

I believe the root cause is that we can send the updated layer to the browser by ViteDevServer & send HMR in dev mode like this:

vite-plugin-windicss/packages/vite-plugin-windicss/src/index.ts

Lines 151 to 154 in fda2347

	onLayerUpdated() {
	if (server)
	reloadCssModules(server)
	},

vite-plugin-windicss/packages/vite-plugin-windicss/src/modules.ts

Lines 45 to 52 in fda2347

	export function reloadChangedCssModules(server: ViteDevServer, utils: WindiPluginUtils) {
	const cssModules = getCssModules(server, getChangedModuleNames(utils))
	invalidateCssModules(server, cssModules)
	sendHmrReload(server, cssModules)
	return cssModules
	}

But in build time, we cannot rely on this feature anymore, what do you think?