Toutiao has a bug of support `rpx` with `!important`

[malash]

Description

For example height: 200rpx !important; is a line of valid CSS code and it works in Toutiao. But after uglify it becomes height:200rpx!important; and it won't work.

Not all !important statements fail. To reproduce the bug there are several requirements:

1. Must use rpx. height:200px!important; is ok and also color:red!important is ok.
2. There shoule be no space before the !important.

Reproduct link

https://developer.toutiao.com/ide/minicode/vpNKxu

Reproduct steps

1. Open the link
2. Inspect the elements

Impact

Some CSS failed on Toutiao.

Temporary solution

We can write a Webpack loader to revert the uglify.

module.exports = function main(this: loader.LoaderContext, source: string | Buffer) {
  if (this.cacheable) {
    this.cacheable();
  }

  return source.toString().replace(/!important/g, ' !important');
};

Platforms

• [ ] WeChat
• [ ] Baidu ( including Xiaohongshu )
• [ ] QQ
• [ ] Alipay
• [x] Toutiao
• [ ] KuaiApp

[malash]

Alipay official forum https://forum.microapp.bytedance.com/mini-app/posts/60c844c1a94681e27237e370