Skip to content

@swc/plugin-emotion breaks styles on Windows #327

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.

Sign up for GitHub

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

Jump to bottom
Closed
iryan2 opened this issue Jul 4, 2024 · 0 comments · Fixed by #328
Closed

@swc/plugin-emotion breaks styles on Windows #327

iryan2 opened this issue Jul 4, 2024 · 0 comments · Fixed by #328

Comments

@iryan2
Copy link
Contributor

iryan2 commented Jul 4, 2024

Because Path::file_name and Path::file_stem in Rust treat backslashes as part of the file stem, when @swc/plugin-emotion is used on Windows with a labelFormat that includes [filename], it will put the entire path in the class attribute.
Screenshot 2024-07-03 at 4 22 41 PM

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 the main 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.
@iryan2 iryan2 mentioned this issue Jul 4, 2024
Merged
@kdy1 kdy1 closed this as completed in #328 Jul 5, 2024
kdy1 pushed a commit to LingyuCoder/swc_plugins that referenced this issue Jul 5, 2024
@iryan2
fix(emotion): Strip backslashed segments for Windows path (swc-projec…
7830879 
…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
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(emotion): Strip backslashed segments for Windows path iryan2/swc-plugins
1 participant
@iryan2