PostCSS Configuration

[dvdzkwsk]

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:

• Customize the PostCSS configuration. Currently it's hardwired only for minifcation. I'm content to manage the added dependencies myself, I just need to be able to hook into it. Preferably with the native PostCSS configuration file for integration with other tooling.
• Run PostCSS in development. From what I can see, PostCSS only runs in production, so even if I could configure it, it wouldn't run in development. Worth mentioning here is that you could consider only doing this if the project has its own PostCSS configuration. If not, skip it as you do now for speed.

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 :).

[developit]

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]

@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:

1. We could add a js "proxy" to css, analog to the cssModule middleware part (probably the better way, but might have unforeseen tradeoffs)
2. We could "extract" the css out of the rollup transform output (regex, eval and the likes) 🙈

Do you see better alternatives, or which of my ways do you prefer?

[dvdzkwsk]

@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]

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]

Thank you very much, @marvinhagemeister.

[jorbuedo]

Hi! Is there any progress with this? I would love to try wmr with tailwind.

[smeijer]

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]

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]

@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]

@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]

@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]

@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]

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]

@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)```