[Bug]: Unicode Character Transformation in CSS Files

[amirsarfarW]

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 8.91 GB / 15.85 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @rsbuild/core: ^1.0.1-beta.9 => 1.0.1-beta.15
    @rsbuild/plugin-node-polyfill: ^1.0.3 => 1.0.4
    @rsbuild/plugin-react: ^1.0.1-beta.9 => 1.0.1-beta.15
    @rsbuild/plugin-sass: ^1.0.1-beta.9 => 1.0.1-beta.15
    @rsbuild/plugin-svgr: ^1.0.1-beta.9 => 1.0.1-beta.15

Details

I have this issue in font icons

I have this style:

Rsbuild produces this in dev and prod:

This has some issues when the css file is cached by the browser

Some similar issues:

GoogleChrome/lighthouse#10060

parcel-bundler/lightningcss#310

I have searched a lot and there is no way to prevent rsbuild from transforming unicode to character

Reproduce link

https://codepen.io/Justineo/pen/yLbxxOR

Reproduce Steps

Simply create a new project with rsbuild

Have something like this in your css:

.icon-users:before {
  content: "\e927";
}

then check the outputs in dev and prod:

.icon-users:before {
  content: "";
}

[chenjiahan]

This is caused by Lightning CSS. In Rsbuild you can disable lightningcss-loader by setting tools.lightningcssLoader to false. You can also use rsbuild-plugin-css-minimizer to switch Lightning CSS to another CSS minimizer.

[amirsarfarW]

This is caused by Lightning CSS. In Rsbuild you can disable lightningcss-loader by setting tools.lightningcssLoader to false. You can also use rsbuild-plugin-css-minimizer to switch Lightning CSS to another CSS minimizer.

Disabling lightningcss fixes the issue in development environment but the issue is present in production build

How can I tell rsbuild to keep characters as they are in production?

[chenjiahan]

You can also use rsbuild-plugin-css-minimizer to switch Lightning CSS to another CSS minimizer.

Use other CSS minimizers

[sbyps]

so lightningcss has some bugs while this package can't fix these timely, how can rsbuild improve its QOS when we find some corner case then just wait or turn off lightningcss in our configs? @chenjiahan

lightningcss has 200+ unresolved issues which means there are so many edge cases that we can't find out in production

[chenjiahan]

We will help Lightning CSS fix critical issues.

Considering that Lightning CSS has been adopted by Next.js, Turbopack, Parcel, Rspack, Vite, Rolldown, I believe these issues will be solved.

[sbyps]

@amirsarfarW even with unicode character was transformed uncorrectly, but maybe work well? I tested in some mobile(ios 11、chrome39)

[amirsarfarW]

@amirsarfarW even with unicode character was transformed uncorrectly, but maybe work well? I tested in some mobile(ios 11、chrome39)

if you check

GoogleChrome/lighthouse#10060

parcel-bundler/lightningcss#310

there is no issue in most cases but when the css is cached by chrome the characters get weird

it is an issue with chome and lightning css and none of them are fixing their issue

[shiwenna]

我使用了web-infra-dev/rspack#6057 中提到的解决方案实现打包后css不乱码的。但是经过compression-webpack-plugin压缩为gz或br包后发现content仍然会被解析为不可读字符。所以采用了分开打包相应的css文件同时排除压缩打包后的css文件这种方式来解决这个问题。目前看css的content会正确显示不再被解析为不可读字符，若有更优雅的实现方式欢迎与我交流。