[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:

https://github.com/GoogleChrome/lighthouse/issues/10060

https://github.com/parcel-bundler/lightningcss/issues/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

https://github.com/GoogleChrome/lighthouse/issues/10060

https://github.com/parcel-bundler/lightningcss/issues/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