Unable to use lightningcss-wasm in browsers

[kevin940726]

Sinc v1.18.0, importing lightningcss-wasm in the browsers as suggested in the doc will throw an error:

Error in TypeError: Failed to resolve module specifier "napi-wasm". Relative references must start with either "/", "./", or "../".

v1.17.1 works though. I believe this is a regression since #373?

Here's a stackblitz sandbox to demonstrate the error: https://stackblitz.com/edit/lightningcss-wasm-1-18-0-bug?file=index.html

[devongovett]

hmm, you'd need a cdn that bundles or rewrites the dependencies I guess. At the moment I'm getting an "Internal Server Error" from unpkg - not sure what's up there. Looks like maybe esm.sh works better? https://esm.sh/lightningcss-wasm

[tristan-f-r]

This also breaks with deno -- esm.sh does work better, but initm as far as my tests went, doesn't load.

EDIT: Also is broken with esm.sh - esm.sh doesn't host any WebAssembly

[mayank99]

this can be worked around both in browsers and deno by using import maps (see related conversation: #387 (comment))

will need this polyfill on safari: https://github.com/guybedford/es-module-shims

i'm not sure of the correct way for packages to import deps for use in browser/deno. maybe some research into other, popular packages would help decide whether lightningcss should leave the napi-wasm import unchanged or do something about it

[devongovett]

If you do https://unpkg.com/lightningcss-wasm?module it'll rewrite the napi-wasm import to also point to unpkg. That seems like the easiest way. Might update the docs to do that.

[kevin940726]

Now it failed with a different error:

GET https://unpkg.com/napi-wasm@%5E1.0.1?module net::ERR_ABORTED 500

Go to https://unpkg.com/napi-wasm@%5E1.0.1?module, we will see this error from unpkg:

Cannot generate module for napi-wasm@1.0.1/index.mjs

SyntaxError: unknown: Support for the experimental syntax 'classProperties' isn't currently enabled (31:10):

  29 | 
  30 | export class Environment {
> 31 |   scopes = [];
     |          ^
  32 |   referenceId = 1;
  33 |   references = new Map();
  34 |   wrappedObjects = new WeakMap();

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

undefined

Is the change in napi-wasm not deployed yet? Or am I missing something here?

Here's the reproduction sandbox: https://stackblitz.com/edit/lightningcss-wasm-1-18-0-bug?file=index.html

[TomoyaKuroda]

@devongovett
https://unpkg.com/lightningcss-wasm?module doesn't work anymore and throws the error @kevin940726 mentioned while https://esm.sh/lightningcss-wasm works.
Can you update the docs? If you don't have time, I can make a pull request for it.