Global styles affect Percy snapshots

ijlee2 commented 1 week ago

Hi. In case you might have missed my feedback in ember-qunit:

I tried out the theme in ember-container-query, and think that Percy failed due to global styles from qunit-theme-ember overriding mine.

Before making qunit-theme-ember the default in v9, can we ensure that:

The library doesn't apply styles globally (e.g. set font-family in <body>), but only to the DOM elements for qunit and ember-qunit using ID or class selectors.
The CSS variables have a namespace (e.g. --qunit-theme-ember-color-brand) to avoid name collisions.
Nice to do: The qunit-theme-ember repo, which is already a monorepo, has a test Ember app with Percy (for continuous integration).

Techn1x commented 6 days ago

Ditto this. Verified in a different visual regression suite (Get Snappy); the fonts from this theme is also being applied to text in my application, which then shows up as a diff in the snapshots.

Keen to switch to it when it is fixed though 😄

IgnaceMaes commented 2 days ago

Thanks for reporting, this should be fixed indeed.

Agree we need to do this before thinking about making it the default theme.

IgnaceMaes / qunit-theme-ember

Global styles affect Percy snapshots #7