Skip to content

Commit

Permalink
fix(emotion): Strip backslashed segments for Windows path (swc-projec…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
iryan2 authored Jul 5, 2024
1 parent 8c1c151 commit 7830879
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/funny-wasps-pay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@swc/plugin-emotion": patch
---

Fix filename handling for Windows
5 changes: 5 additions & 0 deletions packages/emotion/transform/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,11 @@ impl<C: Comments> EmotionTransformer<C> {
filename: path
.file_stem()
.and_then(|filename| filename.to_str())
.and_then(|s| {
s.rfind('\\')
.map(|pos| &s[pos + 1..]) // if backslashes are found, take the last part
.or(Some(s)) // otherwise use the whole path
})
.map(|s| s.to_owned()),
cm,
comments,
Expand Down

0 comments on commit 7830879

Please sign in to comment.