diff --git a/.changeset/postcss-fallback.md b/.changeset/postcss-fallback.md new file mode 100644 index 000000000..aed2a8a5b --- /dev/null +++ b/.changeset/postcss-fallback.md @@ -0,0 +1,5 @@ +--- +'@doc-kit/generator-react': patch +--- + +Fall back to PostCSS, rather than Lightning CSS's wasm build, on platforms without native Lightning CSS bindings diff --git a/packages/react/package.json b/packages/react/package.json index 3076b67fe..c3ecd2817 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -45,7 +45,6 @@ "hast-util-to-html": "^9.0.5", "hast-util-to-string": "^3.0.1", "hastscript": "^9.0.1", - "lightningcss-wasm": "^1.33.0", "mdast-util-slice-markdown": "^2.0.1", "preact": "^10.29.7", "preact-render-to-string": "^6.7.0", diff --git a/packages/react/src/html/README.md b/packages/react/src/html/README.md index caa8610f6..010a5e0fb 100644 --- a/packages/react/src/html/README.md +++ b/packages/react/src/html/README.md @@ -301,10 +301,15 @@ export default { The generator owns the fields required to coordinate its builds: config-file loading, app type and base, virtual inputs, Preact compatibility aliases and -automatic JSX runtime, the Lightning CSS transformer, output/write mode, SSR -format and output, and SSR dependency bundling. Values supplied for those -fields are replaced after configuration is merged. User plugins are registered -after the generator's virtual-module plugin; other Vite options are preserved. +automatic JSX runtime, the CSS transformer, output/write mode, SSR format and +output, and SSR dependency bundling. Values supplied for those fields are +replaced after configuration is merged. User plugins are registered after the +generator's virtual-module plugin; other Vite options are preserved. + +CSS is transformed and minified by Lightning CSS. On platforms without its +native bindings, such as ppc64 and s390x, Vite's PostCSS pipeline transforms +the CSS instead and the output is not minified; `css.lightningcss` options have +no effect there. Vite builds the client entry as a module, not the pages as HTML entries, so plugins see and can transform every module of the client and server builds but diff --git a/packages/react/src/html/bundlers/__tests__/vite.test.mjs b/packages/react/src/html/bundlers/__tests__/vite.test.mjs index 676ce4eca..f2c14555b 100644 --- a/packages/react/src/html/bundlers/__tests__/vite.test.mjs +++ b/packages/react/src/html/bundlers/__tests__/vite.test.mjs @@ -108,6 +108,21 @@ describe('Vite configuration', () => { ); }); + it('transforms CSS with Lightning CSS where its bindings are native', () => { + const config = createViteConfig({ + sources: new Map(), + input: {}, + server: false, + outDir: output, + config: getConfig('html'), + vite: { css: { lightningcss: { targets: {} } } }, + }); + + assert.strictEqual(config.css.transformer, 'lightningcss'); + assert.deepStrictEqual(config.css.lightningcss, { targets: {} }); + assert.strictEqual(config.build.cssMinify, undefined); + }); + it('keeps the server library self-contained', () => { const vite = { ssr: { diff --git a/packages/react/src/html/bundlers/vite.mjs b/packages/react/src/html/bundlers/vite.mjs index 3f7c83353..aae767da1 100644 --- a/packages/react/src/html/bundlers/vite.mjs +++ b/packages/react/src/html/bundlers/vite.mjs @@ -2,7 +2,6 @@ import { readFile, rm, rmdir } from 'node:fs/promises'; import { dirname, join, posix, resolve } from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; -import './wasm-fallback.mjs'; import { build as viteBuild, defaultClientConditions, @@ -138,6 +137,9 @@ export const createViteConfig = ({ const root = resolve(vite.root ?? process.cwd()); const conditions = server ? defaultServerConditions : defaultClientConditions; + // Lightning CSS publishes no native bindings for these platforms + const lightningcss = process.arch !== 'ppc64' && process.arch !== 's390x'; + return { ...vite, @@ -194,15 +196,21 @@ export const createViteConfig = ({ }, // CSS imports, modules, URLs, splitting, and minification are all Vite - // responsibilities. Native Lightning CSS options remain configurable. + // responsibilities. Lightning CSS transforms the CSS, with its options + // configurable, on platforms that have its native bindings; elsewhere + // Vite's PostCSS pipeline transforms it instead. css: { ...vite.css, - transformer: 'lightningcss', + transformer: lightningcss ? 'lightningcss' : 'postcss', }, build: { ...vite.build, + // Vite's only CSS minifier is Lightning CSS itself, so without its + // bindings the CSS is left as PostCSS produced it. + ...(lightningcss ? {} : { cssMinify: false }), + // Both builds are complete Vite outputs. The server library goes to a // private directory; the client writes into the final site. outDir, diff --git a/packages/react/src/html/bundlers/wasm-fallback.mjs b/packages/react/src/html/bundlers/wasm-fallback.mjs deleted file mode 100644 index 3a8288482..000000000 --- a/packages/react/src/html/bundlers/wasm-fallback.mjs +++ /dev/null @@ -1,17 +0,0 @@ -import { registerHooks } from 'node:module'; - -if (process.arch === 'ppc64' || process.arch === 's390x') { - const url = import.meta.resolve('lightningcss-wasm'); - - registerHooks({ - /** - * Resolves `lightningcss` to `lightningcss-wasm`. - * - * @type {import('node:module').ResolveHookSync} - */ - resolve: (specifier, context, nextResolve) => - specifier === 'lightningcss' - ? { url, format: 'module', shortCircuit: true } - : nextResolve(specifier, context), - }); -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4929c8a15..e32ba2a34 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -259,9 +259,6 @@ importers: hastscript: specifier: ^9.0.1 version: 9.0.1 - lightningcss-wasm: - specifier: ^1.33.0 - version: 1.33.0 mdast-util-slice-markdown: specifier: ^2.0.1 version: 2.0.1 @@ -2509,12 +2506,6 @@ packages: os: [linux] libc: [musl] - lightningcss-wasm@1.33.0: - resolution: {integrity: sha512-OLAtqEyInBSVWjPrTjpLzcZUMUHO0q+2PFBXKr86nxZOu0P38givj/ZMtRaZ0d38pMTb9wQx+LtaLtHclv+sEA==} - engines: {node: '>= 12.0.0'} - bundledDependencies: - - napi-wasm - lightningcss-win32-arm64-msvc@1.33.0: resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==} engines: {node: '>= 12.0.0'} @@ -5422,8 +5413,6 @@ snapshots: lightningcss-linux-x64-musl@1.33.0: optional: true - lightningcss-wasm@1.33.0: {} - lightningcss-win32-arm64-msvc@1.33.0: optional: true