ESM PostCSS configs option

[nosovk]

postcss-load-config now supports esm configs.
postcss/postcss-load-config#234

After accepting of sveltejs/svelte-preprocess#520 we can update generated config to .js instead of .cjs

[babichjacob]

This is great news! Thank you for the heads up — I wouldn't have heard about this without it!

[oneezy]

Bumping this up.

[oneezy]

correct me if i'm wrong, but this will allow using ESM for Tailwind config now too? so both tailwind.config.js and postcss.config.js will be JavaScript files and not CommonJS ?

[babichjacob]

It turns out that Vite itself has to be updated to support ESM PostCSS configs (because it doesn't use postcss-load-config) before we can use them in our projects. 😞

[babichjacob]

correct me if i'm wrong, but this will allow using ESM for Tailwind config now too? so both tailwind.config.js and postcss.config.js will be JavaScript files and not CommonJS ?

We have to wait for Tailwind themselves to update both their library (PostCSS plugin) and IntelliSense extension to support ESM configs; we're not getting it for free with PostCSS supporting ESM configs, unfortunately.

[oneezy]

We have to wait for Tailwind themselves to update both their library (PostCSS plugin) and IntelliSense extension to support ESM configs; we're not getting it for free with PostCSS supporting ESM configs, unfortunately.

Ah man that sucks! hopefully they get out some updates soon. I'm hoping there's some open issues on their ends.

[babichjacob]

I forgot we can import PostCSS config and give it to Vite without using their loader, so this is a note to self to try that.

[babichjacob]

The answer is yes! Since this is a little weird, I'll implement it as an option.

[divStar]

I just wanted to chime in. From what little I understand, it's not just that a svelte-add issue, is it?

When I have a tailwind.config.js (note the extension: it's js not cjs) and in the package.json type is set to module, apparently vite doesn't know how to handle the tailwind configuration. I do need the tailwind configuration though, to build a method, that discovers the current breakpoint being used in order to either deliver e.g. long names (of e.g. months) or short ones.

Or is there a way to do it? Is this even the correct place to ask or should I go to Stackoverflow and pray someone with the actual knowledge responds?

[babichjacob]

You're right, Tailwind itself must be updated to support ESM configs. We are however able to write the PostCSS config in ESM, wherein the Tailwind plugin will still use the tailwind.config.cjs file

[oekazuma]

Now that Tailwind CSS supports ESM, we can push this forward!

https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support