mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
83ce4c0a30
Closes #17448 Closes #13133 This PR adds an a new Oxide target for `wasm32-wasip1-threads`: `@tailwindcss/oxide-wasm32-wasi`. The goal of this is to enable more environments to run Oxide, including (but not limited to) StackBlitz. We're making use of `napi-rs`'s upcoming v3 features to simplify the setup here, meaning `napi-rs` will configure the WASM target and create an npm package that works across Node and browser environments. ## MacOS AArch64 issues While setting up an integration test for the new WASM target, I ran into an issue where FS reads where not terminating on macOS. After some research I found this to be a limitation of the Node.js container interface right now, see: https://github.com/nodejs/node/issues/47193 ### Windows issues We also found that the Node.js wasi container does not properly support Windows: https://github.com/nodejs/uvwasi/issues/11 For now we, it's probably best for MacOS AArch64 users and Windows users to use the native modules instead. ## Test plan The `@tailwindcss/oxide-wasm32-wasi` npm package can be built locally via `pnpm build` and then run with the Oxide API. A usage example can be taken from the newly added integration test. Furthermore this was tested to work as a polyfill on StackBlitz: https://stackblitz.com/edit/vitejs-vite-uks3gt5p [ci-all] --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import fs from 'node:fs/promises'
|
|
import path from 'node:path'
|
|
import url from 'node:url'
|
|
|
|
const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
|
|
let root = path.resolve(__dirname, '..')
|
|
const tailwindcssOxideRoot = path.join(root)
|
|
|
|
// Move napi artifacts into sub packages
|
|
for (let file of await fs.readdir(tailwindcssOxideRoot)) {
|
|
if (file.startsWith('tailwindcss-oxide.') && file.endsWith('.node')) {
|
|
let target = file.split('.')[1]
|
|
await fs.cp(
|
|
path.join(tailwindcssOxideRoot, file),
|
|
path.join(tailwindcssOxideRoot, 'npm', target, file),
|
|
)
|
|
console.log(`Moved ${file} to npm/${target}`)
|
|
}
|
|
}
|
|
|
|
// Move napi wasm artifacts into sub package
|
|
let wasmArtifacts = {
|
|
'tailwindcss-oxide.debug.wasm': 'tailwindcss-oxide.wasm32-wasi.debug.wasm',
|
|
'tailwindcss-oxide.wasm': 'tailwindcss-oxide.wasm32-wasi.wasm',
|
|
'tailwindcss-oxide.wasi-browser.js': 'tailwindcss-oxide.wasi-browser.js',
|
|
'tailwindcss-oxide.wasi.cjs': 'tailwindcss-oxide.wasi.cjs',
|
|
'wasi-worker-browser.mjs': 'wasi-worker-browser.mjs',
|
|
'wasi-worker.mjs': 'wasi-worker.mjs',
|
|
}
|
|
for (let file of await fs.readdir(tailwindcssOxideRoot)) {
|
|
if (!wasmArtifacts[file]) continue
|
|
await fs.cp(
|
|
path.join(tailwindcssOxideRoot, file),
|
|
path.join(tailwindcssOxideRoot, 'npm', 'wasm32-wasi', wasmArtifacts[file]),
|
|
)
|
|
console.log(`Moved ${file} to npm/wasm32-wasi`)
|
|
}
|