-
-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@swc/plugin-emotion
breaks styles on Windows
#327
Comments
kdy1
pushed a commit
to LingyuCoder/swc_plugins
that referenced
this issue
Jul 5, 2024
…t#328) [Currently](swc-project#327), when `@swc/plugin-emotion` is used on Windows, it produces invalid CSS class names. Apparently this is an [unsolved issue for Rust](rust-lang/rust#66621). In this PR I've updated the calculation of the `[filename]` `labelFormat` such that it handles both the Windows path, which includes the full path to the file, including backslashes, and the Unix path (which was working fine to begin with). I have set up a [minimal repo](https://github.com/iryan2/cra-swc-emotion) for reproducing the issue and verifying the fix. The issue can be reproduced on [the `main` branch](https://github.com/iryan2/cra-swc-emotion), and the fix can be verified on [the `fix` branch](https://github.com/iryan2/cra-swc-emotion/tree/fix). The `fix` branch replaces the compiled `swc_plugin_emotion.wasm` from `@swc/plugin-emotion` npm package with one I built myself via [my fork of this repo](https://github.com/iryan2/swc-plugins/tree/iryan2/fix-emotion-plugin-on-windows). ## Before <img width="612" alt="Screenshot 2024-07-03 at 4 22 41 PM" src="https://github.com/swc-project/plugins/assets/5858312/04a8d2d0-e82f-44b3-90e9-afdcea9ae832"> ## After <img width="626" alt="Screenshot 2024-07-04 at 7 07 42 AM" src="https://github.com/swc-project/plugins/assets/5858312/7bf53d34-fecb-47bd-a71e-eabf35eed22f"> --- Fixes swc-project#327
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Because
Path::file_name
andPath::file_stem
in Rust treat backslashes as part of the file stem, when@swc/plugin-emotion
is used on Windows with alabelFormat
that includes[filename]
, it will put the entire path in theclass
attribute.This causes any of the styles defined in Emotion to be ignored by the browser, because backslashes are not valid characters for a CSS class.
I have set up a minimal reproduction with Create React App configured to use SWC and
@swc/plugin-emotion
via craco-swc. That repo is here, and the issue can be reproduced on themain
branch. Please note the issue will only be reproduced when the toolchain is run on Windows.I have also gone ahead and fixed the issue, expect a PR from me shortly.
The text was updated successfully, but these errors were encountered: