Skip to content
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.

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

Fix style specificity conflicts #2249

Merged
merged 2 commits into from
Sep 13, 2023
Merged

Fix style specificity conflicts #2249

merged 2 commits into from
Sep 13, 2023

Conversation

connor-baer
Copy link
Member

@connor-baer connor-baer commented Sep 13, 2023

Purpose

Vite's CSS ordering appears broken (vitejs/vite#11662, vitejs/vite#4890, vitejs/vite#7504). The order of the styles in the single CSS file that Vite outputs does not match the import order (or any other discernable order, for that matter). CSS order matters because between style rules with the same specificity, the last one wins.

Approach and changes

  • Manually increase the specificity of some nested component styles. This likely doesn't fix all style specificity issues, and new issues could be introduced in the future. The proper way to fix this is to fix Vite.

Definition of done

  • Development completed
  • Reviewers assigned
  • Unit and integration tests
  • Meets minimum browser support
  • Meets accessibility requirements

@changeset-bot
Copy link

changeset-bot bot commented Sep 13, 2023

🦋 Changeset detected

Latest commit: 7d236f5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sumup/circuit-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Sep 13, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
oss-circuit-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 13, 2023 0:51am

@codecov
Copy link

codecov bot commented Sep 13, 2023

Codecov Report

Merging #2249 (7d236f5) into main (7df88ab) will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2249   +/-   ##
=======================================
  Coverage   97.01%   97.01%           
=======================================
  Files         251      251           
  Lines       19826    19833    +7     
  Branches     1211     1211           
=======================================
+ Hits        19234    19241    +7     
  Misses        572      572           
  Partials       20       20           
Files Changed Coverage Δ
...es/circuit-ui/components/ImageInput/ImageInput.tsx 89.36% <100.00%> (ø)
...mponents/NotificationBanner/NotificationBanner.tsx 99.00% <100.00%> (+<0.01%) ⬆️
packages/circuit-ui/components/Tag/Tag.tsx 94.48% <100.00%> (+0.23%) ⬆️

@connor-baer connor-baer added the 🐞 bug Something isn't working as it should label Sep 13, 2023
@connor-baer connor-baer marked this pull request as ready for review September 13, 2023 13:12
@connor-baer connor-baer requested a review from a team as a code owner September 13, 2023 13:12
@connor-baer connor-baer requested review from tareqlol and removed request for a team September 13, 2023 13:12
@connor-baer connor-baer merged commit c44c6c5 into main Sep 13, 2023
14 checks passed
@connor-baer connor-baer deleted the fix/style-specificity branch September 13, 2023 13:14
@connor-baer connor-baer mentioned this pull request Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working as it should 🗂 circuit-ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant