possible to use in stackblitz?

[mayank99]

When running in stackblitz, I get this error when importing lightningcss:

Error: Cannot find module '../lightningcss.linux-x64-gnu.node'
Require stack:
- /home/projects/node-n6my9w/node_modules/lightningcss/node/index.js
    at Module._resolveFilename (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:217308)
    at Module._load (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:214847)
    at Module.require (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:218087)
    at i (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:415284)
    at _0x434ff9 (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:15:142782)
    at Object.eval (file:///home/projects/node-n6my9w/node_modules/lightningcss/node/index.js:21:22)
    at Object.function (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:15:143544)
    at Module._compile (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:219079)
    at Module._extensions..js (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:219743)
    at Module.load (https://noden6my9w-ec0u.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:217769) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/projects/node-n6my9w/node_modules/lightningcss/node/index.js'
  ]
}

See repro (same project works fine locally): https://stackblitz.com/edit/node-n6my9w?file=index.js

[devongovett]

You could try lightningcss-wasm maybe?

[mayank99]

I get a different error with lightningcss-wasm.

Error: Cannot read properties of undefined (reading 'transform')
    at async ESMLoader.import (https://nodescwtnr-hn01.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:1209051)
    at async i.loadESM (https://nodescwtnr-hn01.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:246622)
    at async handleMainPromise (https://nodescwtnr-hn01.w-credentialless.staticblitz.com/blitz.8dd2e1d89f7d2e6b43a2b4af08588e58ffd9a2ea.js:6:989059)

Maybe I'm using it wrong? https://stackblitz.com/edit/node-scwtnr?file=package.json,index.js

[devongovett]

You need to initialize the wasm module first: https://lightningcss.dev/docs.html#from-deno-or-in-browser

I tried this, but Stackblitz doesn't support fetch? https://stackblitz.com/edit/node-jja2wu?file=package.json,index.js

[mayank99]

ah, that's because it's running node 16. stackblitz/webcontainer-core#560 (comment)

maybe it could be polyfilled in lightningcss-wasm if fetch is not supported? although, stackblitz does seem like it falls outside the intended usage of lightning-wasm.

[devongovett]

It does work if you read the WASM file yourself and pass it to init as a Buffer.

await init(
  fs.readFileSync('node_modules/lightningcss-wasm/lightningcss_node.wasm')
);

https://stackblitz.com/edit/node-jja2wu?file=package.json,index.js

I also tried using node-fetch but that doesn't support file:// urls.

[devongovett]

We might be able to add some detection to the wasm loader to do this automatically

https://github.com/parcel-bundler/lightningcss/blob/master/wasm/index.mjs

[mayank99]

something like this? i can submit a PR (edit: see #387)

const fetchOrRead = async (from) => {
  try {
    const fs = await import('fs');
    return fs.readFileSync(from);
  } catch {
    return fetch(from);
  }
};

- input = fetch(input);
+ input = fetchOrRead(input);