support css.transformer: lightningcss

[lishaduck]

Describe the problem

I use lightningcss as my Vite css.transformer. I needed a reach for a global block today, but it emitted a bunch of warnings.

Describe the proposed solution

vite-plugin-svelte would hook in before lightningcss, not afterward.

Alternatives considered

• Switch back to PostCSS

Perhaps blocked on vitejs/vite#19112?

Importance

nice to have

[dominikg]

but it emitted a bunch of warnings.

please provide a link to a repo that has your configuration and shows the warnings.

if you use vitePreprocess then lightningcss should work. #756

[lishaduck]

lishaduck/vps-lightning-repro@5085894

(for reference, here's the build output)

❯ pnpm build              

> [email protected] build /Users/dukese01/Developer/vps-lightning-repro
> vite build

vite v6.0.11 building SSR bundle for production...
transforming (1) .svelte-kit/generated/server/internal.js[vite:css][lightningcss] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
1  |  
2  |      :global {
   |       ^
3  |          h1 {
4  |              color: red;
✓ 168 modules transformed.
vite v6.0.11 building for production...
transforming (1) .svelte-kit/generated/client-optimized/nodes/1.js[vite:css][lightningcss] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
1  |  
2  |      :global {
   |       ^
3  |          h1 {
4  |              color: red;
✓ 132 modules transformed.
.svelte-kit/output/client/_app/version.json                        0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/.vite/manifest.json                      3.05 kB │ gzip:  0.64 kB
.svelte-kit/output/client/_app/immutable/assets/2.DqQksVyv.css     0.01 kB │ gzip:  0.03 kB
.svelte-kit/output/client/_app/immutable/chunks/AjdmKLFx.js        0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/_app/immutable/entry/start.WhrZma30.js   0.06 kB │ gzip:  0.08 kB
.svelte-kit/output/client/_app/immutable/chunks/BqBeCyG1.js        0.32 kB │ gzip:  0.25 kB
.svelte-kit/output/client/_app/immutable/nodes/0.Cz9aQGlY.js       0.33 kB │ gzip:  0.24 kB
.svelte-kit/output/client/_app/immutable/nodes/2.CT1P4y5E.js       0.33 kB │ gzip:  0.25 kB
.svelte-kit/output/client/_app/immutable/chunks/BAyDncPi.js        0.97 kB │ gzip:  0.55 kB
.svelte-kit/output/client/_app/immutable/nodes/1.CdLjnaJv.js       1.22 kB │ gzip:  0.66 kB
.svelte-kit/output/client/_app/immutable/chunks/_8UPb7fq.js        2.47 kB │ gzip:  1.36 kB
.svelte-kit/output/client/_app/immutable/entry/app.B040eShD.js     9.52 kB │ gzip:  4.35 kB
.svelte-kit/output/client/_app/immutable/chunks/D_AU9lJB.js       12.76 kB │ gzip:  5.22 kB
.svelte-kit/output/client/_app/immutable/chunks/DWapHiTA.js       31.94 kB │ gzip: 12.44 kB
✓ built in 319ms
.svelte-kit/output/server/.vite/manifest.json                         2.54 kB
.svelte-kit/output/server/_app/immutable/assets/_page.DqQksVyv.css    0.01 kB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js          0.16 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js               0.21 kB
.svelte-kit/output/server/internal.js                                 0.31 kB
.svelte-kit/output/server/chunks/index.js                             2.94 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js           3.04 kB
.svelte-kit/output/server/chunks/exports.js                           7.53 kB
.svelte-kit/output/server/chunks/internal.js                         43.37 kB
.svelte-kit/output/server/index.js                                  121.77 kB
✓ built in 1.53s

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://svelte.dev/docs/kit/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ done

NOTE: As expected, build.cssMinify: "lightningcss" is fine.

[dominikg]

These are just warnings, the style in the :global block is applied. You could see with lightningcss if there is a way to suppress these warnings.

If you don't want lightningcss to be applied to the style block in .svelte files, you can change your svelte config to use vitePreprocess({style: false})

note: this disables style preprocessing altogether which means you can only use css syntax in .svelte style blocks that don't make the svelte compiler throw an error for invalid css. svelte5 is more lenient here than svelte4 was and you can use css nesting for example.

[dominikg]

going to close this as you can have the requested mode today by disabling the style preprocessor.