lightningcss: error with star-prefixed css properties
const css = require('@parcel/css');
css.transform({
filename: 'style.css',
code: Buffer.from('.clearfix { *zoom: 1; }'),
minify: true
});
results in
SyntaxError: Unexpected token Delim('*')
at Object.<anonymous> (/home/dominikg/develop/vite-ecosystem-ci/parcel.cjs:3:5)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
fileName: 'style.css',
source: '.clearfix { *zoom: 1; }',
loc: { line: 1, column: 13 }
}
found via css-minification-benchmark. https://github.com/GoalSmashers/css-minification-benchmark/pull/101
Some of their test data is old and still has them: https://github.com/GoalSmashers/css-minification-benchmark/blob/e1d52eaea8e1107e95ea06f5cc085227cd36b2c0/data/gumby.css#L1216
iirc they were used to add special treatment for ancient IE
https://stackoverflow.com/questions/1667531/what-does-a-star-preceded-property-mean-in-css
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 18 (9 by maintainers)
It’s not a hypothetical problem. I got here by googling “parcel ignore css syntax error” because a CSS lib I’m trying to import has an asterisk’d property. I just need to get this thing working with Parcel as if it were in the browser, and move on.
As of the above commit, there is a new
errorRecovery
option which can be enabled. This ignores invalid rules and declarations rather than erroring (just like a browser would). They are omitted from the output, and a warning is emitted instead. Once this is released, I will work on exposing it as a config option in Parcel as well. Hopefully this allows people to work around issues in libraries more easily.I was able to get around this by creating a custom transformer plugin that removes any asterisk prefixed css rules. I don’t plan to support old browsers so this is okay for my usecase.
This changes my error message, now I get
Not sure where to go from here but sharing in case this helps someone else 😃