svelte fails to parse valid CSS

[wighawag]

Describe the bug svelte css parser fails to consider valid css which include backslash

Logs

from https://github.com/wighawag/a17t-svelte-test :

$ rollup -c

src/main.js → public/build/bundle.js...
[!] (plugin svelte) ParseError: RightParenthesis is expected
src\Tailwindcss.svelte
70535:     transition-delay:1000ms
70536:   }
70537: }</style>
        ^
ParseError: RightParenthesis is expected
    at error (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\utils\error.ts:25:16)
    at Parser$1.error (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\index.ts:93:3)
    at Object.read_style [as read] (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\read\style.ts:21:11)
    at tag (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\state\tag.ts:190:27)
    at new Parser$1 (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\index.ts:45:12)
    at parse (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\parse\index.ts:208:17)
    at compile (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\svelte\src\compiler\compile\index.ts:79:14)
    at C:\dev\projects\wighawag\a17t-svelte-test\node_modules\rollup-plugin-svelte\index.js:252:22
    at ModuleLoader.addModuleSource (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\rollup\dist\shared\rollup.js:17742:30)
    at ModuleLoader.fetchModule (C:\dev\projects\wighawag\a17t-svelte-test\node_modules\rollup\dist\shared\rollup.js:17796:9)

To Reproduce

git clone  https://github.com/wighawag/a17t-svelte-test
cd  a17t-svelte-test
yarn && yarn build

Expected behavior should build succesfully with css from a17t (https://github.com/milesmcc/a17t)

Stacktraces

see log above

Information about your Svelte project:

• Your operating system: Windows 10

• Svelte version : 3.23.2

• Whether your project uses Webpack or Rollup : Rollup

Severity It block me from using css library like a17t so pretty severe in my opinion

[Conduitry]

This is a problem with some of the styles you're using or with a preprocessor. The preprocessed Tailwindcss.svelte component that Svelte is getting contains many styles with selectors that look something like :global(.\)~:global(neutral), which is invalid.

[wighawag]

I investigate a bit more and while I could not reproduce it on svelte REPL, the following commit :

https://github.com/wighawag/svelte-css-parser-error/commit/4fae43a3801b4ed270d56c7fddac0dcad399ba49 showcase the error with valid css

That commit is the only addition I did from this REPL : https://svelte.dev/repl/c0300db9a4f944ce8fb030ae5a553c18?version=3.23.2

so it seems there is an issue with svelte-preprocess

[wighawag]

@Conduitry do you mean that it is intended that svelte