EXP | With Fusion UI

[zangguojun]

What is the example you wish to see?

I also know a UI component library that is widely used in Chinese communities, Fusion UI (or alibaba-fusion/next)
Fusion UI : https://github.com/alibaba-fusion/next

Is there any context that might help us understand?

I think Fusion UI and Ant Design UI are very similar in function and use.
I try to install @alifd/next and write @import '@alifd/next/dist/next.css'; in index.css, but it was wrong when reading css files.
This is not a very urgent matter, but I hope you can help me to create a little example or tell me why this is wrong in your spare time.
Thank you for your care.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

@zangguojun what error are you seeing when doing so?

[zangguojun]

@zangguojun what error are you seeing when doing so?

Like this

[zangguojun]

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

[ColdSauce]

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.

[ColdSauce]

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

[louisgv]

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).

[louisgv]

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

[xmsz]

parcel-bundler/parcel#7854 (comment)

no working