According to official document the whitespace around * and / in a calc function can be ignored. But when using calc with rpx, some cases fail on Toutiao like calc(100rpx*10).
Because GojiJS uses cssnano to minimize all CSS styles, the whitespaces are removed during Webpack build. It cause some CSS styles fail to run Toutiao.
Temporary solution
Change the options of cssnano to skip this kind of minimization.
Implement a new PostCSS plugin to add whitespaces back.
malash
commented
2 years ago
Description
According to official document the whitespace around
*and/in acalcfunction can be ignored. But when usingcalcwithrpx, some cases fail on Toutiao likecalc(100rpx*10).calc(20rpx * 10)calc(20rpx* 10)calc(20rpx *10)calc(20rpx*10)Reproduct link
https://microapp.bytedance.com/ide/minicode/Nvx4ncd
Reproduct steps
Open the link in Toutiao dev tool.
Impact
Because GojiJS uses cssnano to minimize all CSS styles, the whitespaces are removed during Webpack build. It cause some CSS styles fail to run Toutiao.
Temporary solution
cssnanoto skip this kind of minimization.Platforms