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)

Most upvoted comments

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.

const { Transformer } = require('@parcel/plugin');

module.exports = new Transformer({
  async transform({ asset, config, logger }) {
    const source = await asset.getCode();
    const replaced = source.replaceAll(/^\s*\*.+$/mg, '');
    asset.setCode(replaced)
    return [asset];
  },
});

This changes my error message, now I get

@parcel/transformer-css: Invalid token in pseudo element: WhiteSpace(" ")

  /home/xxx/node_modules/datatables.net-dt/css/jquery.dataTables.css:349:15
    348 |   /* Chrome,Safari4+ */
  > 349 |   background: -webkit-linear-gradient(top, white 0%, #dcdcdc 100%);
  >     |               ^
    350 |   /* Chrome10+,Safari5.1+ */
    351 |   background: -moz-linear-gradient(top, white 0%, #dcdcdc 100%);

Not sure where to go from here but sharing in case this helps someone else 😃