griffel icon indicating copy to clipboard operation
griffel copied to clipboard

vite: add support for CSS extraction

Open layershifter opened this issue 1 year ago • 2 comments

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

layershifter avatar Jan 23 '24 10:01 layershifter

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.

zoontek avatar May 20 '24 08:05 zoontek

@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 https://github.com/microsoft/griffel/blob/16f1c22d1e777af6ca9c1d5d7c162c102f73f495/packages/webpack-extraction-plugin/src/babelPluginStripGriffelRuntime.ts#L189-L192
  • 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: https://github.com/microsoft/griffel/blob/16f1c22d1e777af6ca9c1d5d7c162c102f73f495/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.ts#L268-L273

layershifter avatar May 22 '24 09:05 layershifter