adobe / adobe/spectrum-web-components

[Bug]: Stylesheets are not loading in UXP

Open
#5,074 0 comments 0 reactions 0 assignees View on GitHub
bug needs-jira-ticket SEV 2
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

Theme

### Expected behavior

In UXP, importing themes from `@spectrum-web-components/theme` should add stylesheets to the document for CSS variable references by SWC components.

Note: I am aware that the `` component is not officially supported in UXP ([see documentation here](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-spectrum/Spectrum%20to%20SWC%20Mapping/)), but prior versions had been loading styles correctly. I will be using version 0.42.5 as an example.

### Actual behavior

Importing themes and using `` provider does not add stylesheets to the document. As a result, components that rely on Adobe styling do not render with correct styles.

### Screenshots

UXP Plugin with version 0.42.5 dependencies:
![Image](https://github.com/user-attachments/assets/71d4dadc-bd22-4cba-b925-d9c28ee34fad)

UXP Plugin with version 1.1.1 dependencies:
![Image](https://github.com/user-attachments/assets/4517be59-c538-48ff-91e3-92f0c2d86fc0)

### What browsers are you seeing the problem in?

_No response_

### How can we reproduce this issue?

For simple testing, I used [this Adobe example starter project](https://github.com/AdobeDocs/uxp-photoshop-plugin-samples/tree/main/swc-uxp-react-starter). These steps for reproduction outline a comparison between versions 0.42.5 and 1.1.1 to emphasize the difference in behaviors between a version known to work in UXP (0.42.5) and the latest (1.1.1).

For reference, this bug was observed in Adobe Photoshop 2024, running on macOS Sonoma 14.1.1.

1. Update the dependencies in the `package.json` file by running the following commands:
```
npm install @spectrum-web-components/theme@0.42.5
npm install @swc-react/menu@0.42.5
npm install @swc-react/theme@0.42.5
```
2. Build with `npm run build`
3. Open Photoshop and load the project in Adobe UXP Developer Tools by selecting "Add Plugin" and selecting `dist/manifest.json` and pressing "Load"
4. Observe that styles for the Menu are loaded properly (e.g. blue checkmark icon for selected option, correct spacing)
5. Now, update the dependencies to version 1.1.1:
```
npm install @spectrum-web-components/theme@1.1.1
npm install @swc-react/menu@1.1.1
npm install @swc-react/theme@1.1.1
```
6. Repeat Steps 2 and 3 to load the plugin with updated version
7. Observe that styles for the Menu are no longer loaded properly (e.g. no blue checkmark, small font size, incorrect spacing)

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 2

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Adobe UXP React starter project and its package.json, then compare the built output after installing the 0.42.5 and 1.1.1 theme and menu dependencies. Run npm run build and load dist/manifest.json in UXP Developer Tools; done means the 1.1.1 build adds the theme stylesheets and the Menu renders with the expected checkmark, font size, and spacing.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.