search

HorusGoul / vite-plugin-stylex

Vite Plugin for StyleX
MIT License
116 stars 12 forks source link

LightningCSS `@custom-media` does not work in either dev mode or a production build #63

Open predaytor opened 6 months ago

predaytor commented 6 months ago

Stackblitz (https://stackblitz.com/edit/remix-run-remix-3ux33z?file=app%2Froutes%2F_index.tsx)

While dev mode doesn't show any errors, @custom-media does not work.

During build error displayed:

❯ pnpm build

> @ build /home/projects/remix-run-remix-vneo6e
> remix vite:build

vite v5.2.6 building for production...
✓ 83 modules transformed.
warnings when minifying css:
Unknown at rule: @stylex
x Build failed in 1.12s
SyntaxError: [vite-plugin-stylex] Custom media query --mx-1 is not defined
    at napi_new_instance (file:///home/projects/remix-run-remix-vneo6e/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/node_modules/napi-wasm/index.mjs:770:19)
    at wasm://wasm/02920906:wasm-function[99]:0x37a6e
    at wasm://wasm/02920906:wasm-function[76]:0x1d52e
    at Object.bundle (file:///home/projects/remix-run-remix-vneo6e/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/node_modules/napi-wasm/index.mjs:262:19)
    at bundleAsync (file:///home/projects/remix-run-remix-vneo6e/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/async.mjs:72:23)
    at Module.bundleAsync (file:///home/projects/remix-run-remix-vneo6e/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/wasm-node.mjs:74:10)
    at compileLightningCSS (file:///home/projects/remix-run-remix-vneo6e/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:33201:46) {
  fileName: 'stylex.css',
  loc: { line: 6, column: 1 },
  data: { type: 'CustomMediaNotDefined', name: '--mx-1' },
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-stylex',
  hook: 'generateBundle'
}
HorusGoul commented 6 months ago

Could you try vite-plugin-stylex@0.9.0-next.0 to see if the plugin works better with Lightning CSS?

See the changelog just in case the breaking changes affect your project: https://github.com/HorusGoul/vite-plugin-stylex/blob/waitForRequestsIdle-refactor/packages/vite-plugin-stylex/CHANGELOG.md

predaytor commented 6 months ago

@HorusGoul unfortunately not working, same behavior but new error:

❯ pnpm build

> @ build /home/projects/remix-run-remix-3ux33z
> remix vite:build

vite v5.2.6 building for production...
✓ 83 modules transformed.
Error running vite:css on Tailwind CSS output. Skipping.
Error running vite:css on Tailwind CSS output. Skipping.
Error running vite:css on Tailwind CSS output. Skipping.
Error running vite:css on Tailwind CSS output. Skipping.
Error running vite:css on Tailwind CSS output. Skipping.
x Build failed in 874ms
SyntaxError: [vite:css-post] Custom media query --mx-1 is not defined
    at napi_new_instance (file:///home/projects/remix-run-remix-3ux33z/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/node_modules/napi-wasm/index.mjs:770:19)
    at wasm://wasm/02920906:wasm-function[99]:0x37a6e
    at wasm://wasm/02920906:wasm-function[73]:0xe4a7
    at Object.transform (file:///home/projects/remix-run-remix-3ux33z/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/node_modules/napi-wasm/index.mjs:262:19)
    at Module.transform (file:///home/projects/remix-run-remix-3ux33z/node_modules/.pnpm/lightningcss@1.24.1/node_modules/lightningcss/wasm-node.mjs:50:15)
    at minifyCSS (file:///home/projects/remix-run-remix-3ux33z/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:32574:65)
    at async finalizeCss (file:///home/projects/remix-run-remix-3ux33z/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:32399:15)
    at async eval (file:///home/projects/remix-run-remix-3ux33z/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:31795:32)
    at async Promise.all (index 0) {
  fileName: 'style.css',
  source: ':where(*){box-sizing:border-box;margin:0;padding:0}\n' +
    '@layer priority1;\n' +
    '@layer priority1{\n' +
    '.xkn7p67{color:gray}\n' +
    '.x1ln6jsu{color:lch(from pink calc(l + 10%) c h)}\n' +
    '@media (--mx-1){.x19mpqw0.x19mpqw0{color:blue}}\n' +
    '}.primary{color:#ffe6eb;color:lch(93.7873% 24.7242 8.74601)}',
  loc: { line: 6, column: 1 },
  data: { type: 'CustomMediaNotDefined', name: '--mx-1' },
  code: 'PLUGIN_ERROR',
  plugin: 'vite:css-post',
  hook: 'renderChunk'
}
 ELIFECYCLE  Command failed with exit code 1.
predaytor commented 6 months ago

Version 0.9.0-next.1 solves the problem. Very thanks.