adobe / adobe/spectrum-web-components
[Bug]: Stylesheets are not loading in UXP
- 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:

UXP Plugin with version 1.1.1 dependencies:

### 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
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