Leaflet not working with vite-plugin-sveltekit 3.0

[nevil2]

Describe the bug

Line 556 in leaflet.css is giving error vite-plugin-sveltekit filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);

Adding double quotes did not help. Error went away but map tiles are not displayed correctly.

Reproduction

https://unpkg.com/[email protected]/dist/leaflet.css

Logs

675 |
   676 |    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
   677 |    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
                          ^
   678 |    }
   679 |
9:08:30 AM [vite] Pre-transform error: .../Leaflet.svelte:677:15 Unexpected input

- Did you forget to add a lang attribute to your style tag?
9:08:34 AM [vite] Pre-transform error: .../Leaflet.svelte:677:15 Unexpected input

- Did you forget to add a lang attribute to your style tag? (x2)

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 9.13 GB / 15.59 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.10.0 - /tmp/fnm_multishells/5886_1703059877992/bin/node
    npm: 10.2.3 - /tmp/fnm_multishells/5886_1703059877992/bin/npm
  npmPackages:
    @sveltejs/adapter-netlify: ^2.0.8 => 3.0.1
    @sveltejs/kit: ^1.27.6 => 2.0.4
    svelte: ^4.2.5 => 4.2.8
    vite: ^4.5.0 => 5.0.10

Severity

blocking an upgrade

Additional Information

No response

[teemingc]

Please provide a minimal reproduction in the form of a code repository that produces this issue.

[nevil2]

OK. I've created one.

https://github.com/nevil2/Leaflet-error

[nevil2]

I've added one.

On Wed, 20 Dec 2023 at 12:38, Tee Ming @.***> wrote:

Please provide a minimal reproduction in the form of a code repository that produces this issue.

— Reply to this email directly, view it on GitHub https://github.com/sveltejs/kit/issues/11410#issuecomment-1864405206, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANNE454O3YR4NMM7ZWHR7JLYKLL4RAVCNFSM6AAAAABA4QDHB2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRUGQYDKMRQGY . You are receiving this because you authored the thread.Message ID: @.***>

[secondl1ght]

I had the same issue, I was able to fix it by just importing the CSS normally via the script tag instead of using the Svelte style tag like this: import 'leaflet/dist/leaflet.css';.

I noticed other changes in behaviour of how the style tag worked after upgrading to SK V2 but didn't see this documented anywhere in the migration guides.

[teemingc]

I had the same issue, I was able to fix it by just importing the CSS normally via the script tag instead of using the Svelte style tag like this: import 'leaflet/dist/leaflet.css';.

Curious, how were you importing the CSS in your script tag before? It should work as expected if you follow Vite's asset handling rules https://vitejs.dev/guide/assets.html#static-asset-handling

[nevil2]

I confirm putting import in script works:

<script>
import 'leaflet/dist/leaflet.css';
</script>

Normally one imports CCS in the styles, but this does not work (and it should):

<style>
@import 'leaflet/dist/leaflet.css';
</style>

[jasonlyu123]

This is because vite-plugin-svelte v3 now preprocess style with postcss by default. The preprocess library probably doesn't recognize this syntax. But even without the parser error, This will now be scoped style and won't work either. So, moving the stylesheet import to the script tag is needed anyway.

[MacLake]

I also encountered this bug after upgrading to SvelteKit 2 and various other upgrades. As the error message says: “- Did you forget to add a lang attribute to your style tag?”, I actually added a lang attribute to the style tag, which of course doesn’t really make sense, but nevertheless fixed the issue ( the language code doesn’t matter):

<style lang="de">
	@import 'leaflet/dist/leaflet.css';
	main div {
		height: 300px;
	}
</style>

[gtm-nayan]

This is non-standard syntax, so it's not guaranteed that all parsers will be able handle it.

Not much we can do here and there is a viable workaround, I'll close this.