EXP | With Fusion UI about plasmo HOT 8 CLOSED

Hi @zangguojun,

This is happening because the Parcel CSS parser doesn't believe the imported CSS from @alifd/next/dist/next.css is valid.

This is due to the following line in the CSS file:

@media all and (min-width: 0\0 ) and (min-resolution: 0.001dpcm) {

(The 0\0 is what it is complaining about since it's not valid CSS. It's a hack in CSS to detect IE)

Here's the relevant Parcel issue discussing this.

The way they say to solve it is to use something like patch-package to patch the CSS file in node_modules or submit an issue/PR to the next project asking them to remove the incorrect syntax CSS and use @supports. Most of the issues on that repo are in Chinese, so I'm not sure if someone talked about this already there.

If you find a way to get this to work with Plasmo, it'd be amazing to share it with the community by submitting a PR to our examples repo.

from plasmo.

It looks like something like this was reported but the maintainer added a wontfix tag,

from plasmo.

@zangguojun what error are you seeing when doing so?

from plasmo.

@zangguojun what error are you seeing when doing so?

Like this

from plasmo.

The example demo: https://github.com/zangguojun/bilibili-classify

from plasmo.

Technically, we can cook the @alifd/next's css import code in our resolver and make it behave appropriately (i.e, patch out the css pieces that aren't working).

from plasmo.

Actually - postcss got this! parcel-bundler/parcel#7854 (comment)

@zangguojun try adding that postcss plugin and see if it work - I think we can close this :D

from plasmo.

parcel-bundler/parcel#7854 (comment)

no working

from plasmo.