search

johanholmerin / style9

CSS-in-JS compiler inspired by Meta's stylex
MIT License
570 stars 27 forks source link

feat: support vite #81

Closed nonzzz closed 1 year ago

nonzzz commented 1 year ago

This pull request will add a vite plugin

Fixes #80

nonzzz commented 1 year ago

When i switch to the css-order branch. And try to find the exception. either 'dev' or 'build'. the order is right. vite internal css plugin can correct order of processing. But my concern is css-order-issue.

nonzzz commented 1 year ago

When i generator bundles from vite and run with my local services. I can get the right order in production.

johanholmerin commented 1 year ago

@nonzzz See video for a demo of the issue. This is not related to any bug in vite, it's a requirement of style9

https://user-images.githubusercontent.com/7433263/207795236-c732cbfd-e217-4c0b-a556-fce871e71d82.mov

nonzzz commented 1 year ago

@johanholmerin . All right. i got. i will fix them as soon

nonzzz commented 1 year ago

@johanholmerin After thinking about. I'm make sure that should be handle in vite plugin. So in development mode. I will collect the css result and trigger vite hmr. ( To ensure that the css order be right.

In production. I'm not sure how to put the css chunk to vite for it's own processing. ( So i implement the generator function.

nonzzz commented 1 year ago

Finally. I verified production.But i found the generator result use the virtual module id. In vite，the virtual module will be transformed as x00{virtual module name}. maybe it would to use hash name?

johanholmerin commented 1 year ago

I'm not sure what if Vite has some other behavior, but rollup has an output.assetFileNames setting which can be used to change the name of the generated files, so I don't think you need to worry about the default name.

Everything seems to work as expected for me. @qodesmith @smokku You've been interested in a Vite plugin, can you help test this?

nonzzz commented 1 year ago

@johanholmerin Vite have a logic for inject final source to index.html .( vite don't expose it's internal inject function. So when i rewrite the result it can be work well with vite. I will pay more time to read vite source code. ( From the vite currently document. configServer is a black box. I think if this feature is passed. I can make it better.