lightningcss
lightningcss copied to clipboard
semantic-ui-css stylesheet fails to parse
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
That is an invalid selector: https://github.com/parcel-bundler/lightningcss/issues/648
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.
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.