Skip to content

[Bug]: Stylesheets are not loading in UXP #5074

Open
@g-hor

Description

Code of conduct

  • 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 <sp-theme> component is not officially supported in UXP (see documentation here), 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 <sp-theme> 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

UXP Plugin with version 1.1.1 dependencies:
Image

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. 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/[email protected]
npm install @swc-react/[email protected]
npm install @swc-react/[email protected]
  1. Build with npm run build
  2. Open Photoshop and load the project in Adobe UXP Developer Tools by selecting "Add Plugin" and selecting dist/manifest.json and pressing "Load"
  3. Observe that styles for the Menu are loaded properly (e.g. blue checkmark icon for selected option, correct spacing)
  4. Now, update the dependencies to version 1.1.1:
npm install @spectrum-web-components/[email protected]
npm install @swc-react/[email protected]
npm install @swc-react/[email protected]
  1. Repeat Steps 2 and 3 to load the plugin with updated version
  2. 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

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions