lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

semantic-ui-css stylesheet fails to parse

Open timneutkens opened this issue 3 months ago • 3 comments

While checking all Next.js examples against Next.js with Turbopack (which uses lightningcss by default) we got a parsing issue reported related to semantic-ui-css package.

The CSS in node_modules/semantic-ui-css/semantic.min.css results in ERROR: Unexpected token Delim('.').

After digging to find a minimal reproduction I've found that in particular this line causes the error, when it's removed the file parses correctly:

[data-tooltip][data-inverted]:after .header {   background-color: none;   color: #fff; }

Here's a playground link that reproduces: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Atrue%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%5Bdata-tooltip%5D%5Bdata-inverted%5D%3Aafter%20.header%20%7B%5Cn%20%20background-color%3A%20none%3B%5Cn%20%20color%3A%20%23fff%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D

timneutkens avatar Mar 03 '24 08:03 timneutkens

That is an invalid selector: https://github.com/parcel-bundler/lightningcss/issues/648

mischnic avatar Mar 03 '24 09:03 mischnic

Hmm I guess we could disable the strict parsing for node_modules by default but I'm not opposed to having strict parsing by default in order to prevent unexpected behavior.

timneutkens avatar Mar 03 '24 13:03 timneutkens

Seems the library is unmaintained so I'm going to remove the example in the Next.js repository instead. Thanks for the link @mischnic, super helpful!

Will keep this issue open as the error could be more helpful for this case.

timneutkens avatar Mar 04 '24 14:03 timneutkens