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>
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { css, js, json, test } from '../utils'
|
|
|
|
// This test runs the the wasm build using the `node:wasi` runtine.
|
|
//
|
|
// There are currently a known problems that the Node WASI preview implementation does not properly
|
|
// handle FS reads on macOS and it does not implement all APIs on Windows. Beacuse of that, this
|
|
// test is only run on Linux for now.
|
|
//
|
|
// https://github.com/nodejs/node/issues/47193
|
|
// https://github.com/nodejs/uvwasi/issues/11
|
|
|
|
let testFn = process.platform === 'linux' ? test : test.skip
|
|
|
|
testFn(
|
|
'@tailwindcss/oxide-wasm32-wasi can be loaded into a Node.js process',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"dependencies": {
|
|
"@tailwindcss/oxide-wasm32-wasi": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'src/index.css': css`@import 'tailwindcss/utilities';`,
|
|
'src/index.js': js`
|
|
const className = "content-['src/index.js']"
|
|
module.exports = { className }
|
|
`,
|
|
'index.mjs': js`
|
|
import { Scanner } from '@tailwindcss/oxide-wasm32-wasi'
|
|
import { join, resolve } from 'node:path'
|
|
|
|
let scanner = new Scanner({
|
|
sources: [
|
|
{
|
|
base: join(process.cwd(), 'src'),
|
|
pattern: '**/*',
|
|
negated: false,
|
|
},
|
|
],
|
|
})
|
|
console.log(JSON.stringify(scanner.scan()))
|
|
process.exit()
|
|
`,
|
|
},
|
|
},
|
|
async ({ expect, exec }) => {
|
|
let output = await exec(`node index.mjs`)
|
|
expect(JSON.parse(output)).toMatchInlineSnapshot(`
|
|
[
|
|
"className",
|
|
"const",
|
|
"content-['src/index.js']",
|
|
"exports",
|
|
]
|
|
`)
|
|
},
|
|
)
|