Open dvdzkwsk opened 3 years ago
developit
commented
3 years ago Hi @davezuko! Running PostCSS once is definitely in keeping with the spirit of this project. For development I do like the idea of using the existence of a PostCSS config to turn on processing.
This is quite a large undertaking - are you wanting to tackle it, or would it be helpful if I came up with a prototype?
Excellent job writing up this issue and doing all the background research!
katywings
commented
3 years ago @developit About that Run PostCSS in development.
I took yesterday some time to try if I can add the rollup transpilation to the css middleware part. NoRollup.transform has a little sideeffect with css, the returned code is not plain css anymore, but a js module which exports the transpiled css 😅☝. I didn't find a way to turn this of in transform so I see two ways how we could go about it:
Do you see better alternatives, or which of my ways do you prefer?
dvdzkwsk
commented
3 years ago @developit Thanks for the speedy reply. I don't intend to place the burden on you, but I do think it would be helpful to at least see what sort of implementation you'd envision. I will without a doubt try to work on it myself, and if I make reasonable progress I'll submit a PR. Until then, if you're able to start it off with a prototype, I'd happily build off of that work.
I haven't dug through the project enough yet to see how difficult it would be in development, but imagine there's (significantly?) more to consider than production builds (e.g. HMR).
I do also have an unrelated question for you, @developit, if you don't mind. I searched around for documentation about this but couldn't find anything, and want to be respectful of your issue tracker (or, if general questions are allowed there let me know!). Why is JSX converted to htm string templates in production? I can somewhat understand this format for development, but in production it would seem to result in less-minifiable code than h() function calls.
If I should move this question to a better place, just let me know where and I'll be sure to do so to keep this issue focused. Perhaps the slew of questions I have (e.g. https support without having to proxy wmr's server) would be good inspiration for documentation (again, happy to help here, once I have the answers :P).
Edit: now that I think about it, maybe a general "documentation/project questions" issue would suffice? Found this issue after posting, of course.
marvinhagemeister
commented
3 years ago Why is JSX converted to htm string templates in production? I
A string is way faster to parse for JavaScript engines than hundreds of function calls and little objects. We're essentially trading a tiny tiny bit of runtime overhead for quicker parse times. The benefit of using htm specifically, is that it detects static vnodes and reuses them automatically. That information is lost with the usual JSX transforms.
dvdzkwsk
commented
3 years ago Thank you very much, @marvinhagemeister.
jorbuedo
commented
3 years ago Hi! Is there any progress with this? I would love to try wmr with tailwind.
smeijer
commented
3 years ago Hi! Is there any progress with this? I would love to try wmr with tailwind.
Give it a shot with twind/shim! I've been doing so lately, and that works nicely.
Basically, just add an import 'twind/shim' to your entry file, and start using tailwind classnames.
If you're interested in server-side rendering, check this example repo:
https://github.com/tw-in-js/example-wmr/tree/7e33313847226a3659ce0316b4dd5aaf7c7f39ed
Edit: The outdated permalink has confused (at least) one user, so I'm providing the up-to-date resources in case anyone else happens across it.
Example repo: https://github.com/tw-in-js/example-wmr Twind + WMR integration package: https://github.com/tw-in-js/use-twind-with/tree/main/packages/wmr
jorbuedo
commented
3 years ago Thanks! Didn't know about twind. I've been skeptical of the CSS-in-JS (prefered tailwind over styled), but this lib looks cool and their arguments over vanilla tailwind convinced me to try it. Besides there's the easy integration with wmr! Having that I don't care about additional support for postcss.
Siilwyn
commented
2 years ago @smeijer this is a bit off-topic but I'm looking into wmr with tailwind to keep the bundle side small however with a SSR hello world project twind causes the JS bundle to jump from 12Kb to 46Kb. Do you know if it's possible to output just CSS?
rschristian
commented
2 years ago @Siilwyn Yes, you can, though you do lose all access to variant/directive grouping, as that's done at runtime.
What you'll want to do probably is hydrate with twind in dev, but in prod, hydrate with preact-iso.
Edit: I should say that's if you're using @twind/wmr. If you want a CSS file to be the output (@twind/wmr prerenders and inlines the resulting CSS into the HTML file output) you can use twind-cli
liflovs
commented
2 years ago @Siilwyn what have you chosen as result? Using twind-cli feels a bit inconvenient, but adding extra 30+kb for nothing also is not a good case
Siilwyn
commented
2 years ago @Siilwyn what have you chosen as result? Using twind-cli feels a bit inconvenient, but adding extra 30+kb for nothing also is not a good case
Nothing yet really, I've been looking at using other solutions than wmr.
liflovs
commented
2 years ago Personally I ended up generating a css file with twind-cli. Solution far from being perfect but it doesnt add up any js to resulting bundle. Hoping for other options to be implemented, love the wmr concept.
liflovs
commented
2 years ago @developit could you recommend at least anything light with tailwind styles (not css in js) that works with wmr? Currently its one of the things that's really problematic. I tried windy css recently and its not working as well (tried simply putting their rollup plugin in since wmr claimed to support those) but got
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:371:5)
at ServerResponse.setHeader (node:_http_outgoing:573:11)
at ServerResponse.c.writeHead (C:\Users\serhii.ostapchuk\Projects\ttt\node_modules\wmr\wmr.cjs:2:2875444)
at aft.onError (C:\Users\serhii.ostapchuk\Projects\ttt\node_modules\wmr\wmr.cjs:2:3020160)
at l (C:\Users\serhii.ostapchuk\Projects\ttt\node_modules\wmr\wmr.cjs:2:2859662)
at Array.<anonymous> (C:\Users\serhii.ostapchuk\Projects\ttt\node_modules\wmr\wmr.cjs:2:3012869)```
Hey preactjs team! I was super excited to find this project, and wanted to start by thanking you for all of your effort.
I saw that Sass support was added a few months back and was curious to hear about your plans for PostCSS-oriented workflows.
The preact/htm/etc. ecosystem is enticing in its minimalism. Staying more "vanilla" is a major reason why this project is so appealing, and is also why I've moved away from Sass and toward PostCSS. And, unfortunately, as much as I'd love to eliminate preprocessing entirely, some plugins (e.g. Tailwind) are too useful to give up and that requires a build step, even in development. So I set out to do that with wmr.
What I'm hoping to accomplish:
I realize I could write a custom plugin for this. However, I hoped to avoid running PostCSS twice in production. Perhaps doing so is a reasonable sacrifice for now (if there aren't ordering issues [I've yet to check]), but at the same time I'm not sure there's much harm in delegating to the project's PostCSS configuration if it exists.
I'm aware that requests like this can be sort of a slippery slope, but thought it was worth bringing up since PostCSS is already a dependency in this project. If you don't have plans for this but would be willing to consider a PR, just let me know. Thank you for your attention :).