Skip to content

Commit 7830879

Browse files
authored
fix(emotion): Strip backslashed segments for Windows path (#328)
[Currently](#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 #327
1 parent 8c1c151 commit 7830879

File tree

2 files changed

+10
-0
lines changed

2 files changed

+10
-0
lines changed

.changeset/funny-wasps-pay.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@swc/plugin-emotion": patch
3+
---
4+
5+
Fix filename handling for Windows

packages/emotion/transform/src/lib.rs

+5
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,11 @@ impl<C: Comments> EmotionTransformer<C> {
216216
filename: path
217217
.file_stem()
218218
.and_then(|filename| filename.to_str())
219+
.and_then(|s| {
220+
s.rfind('\\')
221+
.map(|pos| &s[pos + 1..]) // if backslashes are found, take the last part
222+
.or(Some(s)) // otherwise use the whole path
223+
})
219224
.map(|s| s.to_owned()),
220225
cm,
221226
comments,

0 commit comments

Comments
 (0)