vite: add support for CSS extraction

[layershifter]

#41 added a plugin for Vite that supports AOT. The plugin should be updated to also support CSS extraction.

[zoontek]

Hi @layershifter! Is there anything I could do to help on this task?

Currently, I cannot use griffel on a vite project as I also use SSR, and I don't have a way to extract and inject CSS. But it works perfectly on another project that use next and webpack extraction.

[layershifter]

@zoontek TBH I haven't investigated it yet, so I can share only generic steps...

• Add support for emitting __css() as an option to @griffel/tag-processor (the same as does @griffel/webpack-extraction-plugin) i.e. embed the Babel plugin
  

  griffel/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts

  Lines 189 to 192 in 16f1c22

  	export const babelPluginStripGriffelRuntime = declare<
  	Partial<StripRuntimeBabelPluginOptions>,
  	PluginObj<StripRuntimeBabelPluginState>
  	>(api => {

• Figure out how @wyw-in-js/* processors handle CSS i.e. can we rely on it to output CSS?
  https://github.com/Anber/wyw-in-js/blob/9a3a33d3928e03660d0b5f97f0e0e8521e36ff69/packages/vite/src/index.ts#L188-L194
• Figure out how to sort CSS in Vite, we need this part:
  

  griffel/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts

  Lines 268 to 273 in 16f1c22

  	const cssContent = getAssetSourceContents(cssAssetSource);
  	const { cssRulesByBucket, remainingCSS } = parseCSSRules(cssContent);
  	const cssSource = sortCSSRules([cssRulesByBucket], this.compareMediaQueries);
  	compilation.updateAsset(cssAssetName, new compiler.webpack.sources.RawSource(remainingCSS + cssSource));