Ship ESM so postcss can run natively in the browser

[abhishiv]

Right now in order to use post css in the browser

• You have to rely on a bundler and stub fs, path modules
• Use a CDN like jspm which takes care of cjs to esm conversion

It would be great if postcss was to ship ESM directly which could be loaded directly in the browser with importmaps. It seems like most of the code would work without the need of fs module - which could in any case be stubbed the way jspm does.

Ref #830 , #913

[ai]

We will do it in a next major release in a few years. JS ecosystem is not ready for ESM right now (I can be sure in it as a author of a few popular ESM-only projects like Nano ID).

[abhishiv]

Hey @ai

Thanks for you reply!

The reason for opening this issue is that I'm building an ESM laoder that uses package-lock.json and converts lockfile to importmap and thus enables loading of ESM module in the browser.

So while, I am somewhat vaguely aware of difficulties in supporting ESM, can you please expand on it for my gratification?

If JSPM can deliver a ESM build of postcss and other modules successfully, what hinders shipping ESM?

await import("https://jspm.dev/postcss")

[ai]

So while, I am somewhat vaguely aware of difficulties in supporting ESM, can you please expand on it for my gratification?

Only ESM app can use ESM library/dependency.

As the result, we need to wait until all bundlers (and all other scripts which run PostCSS) will be converted to ESM.

[abhishiv]

Ah, but that doesn't stop postcss from shipping both cjs and esm(main for cjs, and module/exports for esm in package.json)? That would be perfectly backward compatible afaik.

See this package.json for an example.

https://cdn.jsdelivr.net/npm/rocky7@0.0.52/package.json

[ai]

Ah, but that doesn't stop postcss from shipping both cjs and esm

It will increase maintability cost a lot. I tried CJS/ESM dual package on Nano ID and it increase complexity a lot and didn’t work on every case (PostCSS users will have a lot of edge cases).

[abhishiv]

Ok, now I see what you mean: typescript issues with module resolution etc

https://github.com/search?q=repo%3Aai%2Fnanoid+esm+dual&type=issues

[ghost]

Well you can't import in browser using import postcss from npm:postcss, and hope that never happens
it's still better to use cdn services(it they work fine for postcss) that provide compatibility for browser.