Open ghost opened 3 weeks ago
Start a new pull request in StackBlitz Codeflow.
Scenario 2 - write
css.ligtningcss.target
in Vite configIt should not have been necessary to write
css.lightningcss.targets
, becausebuild.cssTarget
was already set in Vite config!
This may be a gray area, but it's probably working as intended since built.cssTarget
is a configuration for build.cssMinify
. As in the documentation, css.lightningcss.targets
should influence built.cssTarget
when build.cssMinify: "lightningcss"
, but not the other way around.
Other than this, I think there is still an issue on lightningcss side. The error happens when Vite uses default targets from
and this can be reproduced on their playground with safari14
: lightningcss playground
Whatever may happen, I am going to appreciate when the documentation becomes more clear about LightningCSS being incompatible to
build.cssTarget
today, with a note to redirect people tocss.lightningcss.targets
. It took me some time to discover this internal functioning when debugging.
@mrredtree I agree build.cssTarget
is confusing now. Like you said, as a short term solution, it make sense to update the documentation and jsdoc. Please feel free to send a PR if you like.
Describe the bug
Previously, an issue was reported in Vite and in LightningCSS repositories about: LightningCSS not recognizing a combination of oklch and currentColor inside a selector.
That issue has been solved by LightningCSS and released in version 1.25.
Since Vite 5.2.12, LightningCSS has been updated to version 1.25.
We expected that issue to be solved, however today it still happens in Vite.
Reproduction
https://stackblitz.com/edit/vitest-dev-vitest-k4wy6a
Steps to reproduce
Run
npm run vite:build
. You should see this error in the console:There are 2 scenarios in which this error does not happen. Observe them below:
Scenario 1 - comment the problematic selector
Comment the selector
.baby-currentcolor-and-oklch
insrc/babies.css
file:Run
npm run vite:build
You should not see the error anymore in the console.Scenario 2 - write
css.ligtningcss.target
in Vite configIn the
vite.config.js
file, uncomment the line 20, from this:to this:
Run
npm run vite:build
You should not see the error anymore in the console.System Info
Logs
Click to expand
```shell vite:config bundled config file loaded in 46.14ms +0ms vite:config using resolved config: { vite:config build: { vite:config target: 'es2022', vite:config cssTarget: [ 'since 2022' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: { input: [Object] }, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: true, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: { exclude: 'dist/**' }, vite:config cssMinify: 'lightningcss', vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true } vite:config }, vite:config css: { lightningcss: { targets: [Object] }, transformer: 'lightningcss' }, vite:config configFile: '/