Svelte 5 - css nesting broke

sortofsleepy commented 9 months ago

Describe the bug

Not sure if this is the right spot to report, but since the error window mentions this plugin specifically, figured I'd start here.

Anyways, not sure if I'm doing something wrong but in the current stable version of Svelte, the following component compiles and functions as expected

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<style>
    h1 {
        &:hover {
            color:red;
        }
    }
</style>

However in the current Svelte 5 beta, an error is triggered saying Expected a valid CSS identifier. This is tested from a fresh install of SvelteKit running

npm create svelte@latest

afterwards running

npm install svelte@next

to install Svelte 5

Not sure how support was implemented in Svelte 4 but it'd be great to have this working in the final release without having to download another package.

Reproduction URL

https://github.com/sortofsleepy/svelte5-vite-css-error

Reproduction

Svelte 5 should already be setup in package.json so error should pop up immediately
Rerun npm i svelte@latest to compare and contrast.

Logs

[plugin:vite-plugin-svelte] C:/Users/Joseph/Documents/projects/tests/svelte-test/src/routes/+page.svelte:9:1 Expected a valid CSS identifier

C:/Users/Joseph/Documents/projects/tests/svelte-test/src/routes/+page.svelte:9:1

7  |            color:red;
8  |        }
9  |    }
   |   ^
10 |  </style>

CompileError: Expected a valid CSS identifier
    at error (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/errors.js:568:8)
    at read_identifier (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:491:3)
    at read_selector (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:289:11)
    at read_selector_list (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:157:17)
    at read_rule (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:139:12)
    at read_body (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:64:18)
    at read_style (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/read/style.js:25:19)
    at tag (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/state/element.js:264:20)
    at new Parser (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/phases/1-parse/index.js:65:12)
    at parse (file:///C:/Users/Joseph/Documents/projects/tests/svelte-test/node_modules/svelte/src/compiler/ph

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 16.00 GB / 31.90 GB
  Binaries:
    Node: 20.8.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 6.32.3 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.58)
    Internet Explorer: 11.0.19041.3570

dominikg commented 9 months ago

native css nesting isn't supported in svelte4 by itself, some parts of it work but thats because svelte4 uses css-tree. svelte5 does not and hasn't implemented native css nesting yet.

To work around this, use a preprocessor that converts nested syntax to unnested. This can be done with postcss or lightningcss (experimental option on vite)

dominikg commented 9 months ago

see https://github.com/sveltejs/svelte/issues/8587 and https://github.com/sveltejs/svelte/pull/9343

closing here as it is not caused by vite-plugin-svelte. Please follow the issues on svelte repo for updates.

sveltejs / vite-plugin-svelte