Remove duplicate styles#742
Conversation
|
@Que-tin is attempting to deploy a commit to the Pierre Computer Company Team on Vercel. A member of the Team first needs to authorize it. |
| light-dark( | ||
| color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)), | ||
| color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)) | ||
| ) |
There was a problem hiding this comment.
No need for light-dark as long as the color is the same.
This pattern is also already applied to other custom properties
| --diffs-fg: light-dark(var(--diffs-light, #000), var(--diffs-dark, #fff)); | ||
| --diffs-fg-number: var( | ||
| --diffs-fg-number-override, | ||
| light-dark( |
There was a problem hiding this comment.
No need for light-dark as long as the color is the same.
This pattern is also already applied to other custom properties
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
Just moved above all of the element selectors
There was a problem hiding this comment.
@amadeus Did you ever look into how bad the * selector perf is within the shadow we use for diffs DOM?
| button { | ||
| appearance: none; | ||
| border-style: none; | ||
| background-color: transparent; | ||
| font: inherit; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } |
There was a problem hiding this comment.
These resets had been done on all buttons anyway and are pretty common.
| --diffs-computed-diff-line-bg: light-dark( | ||
| color-mix( | ||
| in lab, | ||
| var(--diffs-computed-decoration-bg) var(--mix-light), | ||
| var(--diffs-diff-line-mix-target) | ||
| ), | ||
| color-mix( | ||
| in lab, | ||
| var(--diffs-computed-decoration-bg) var(--mix-dark), | ||
| var(--diffs-diff-line-mix-target) | ||
| ) | ||
| ); | ||
|
|
||
| --diffs-computed-selected-line-bg: var(--diffs-computed-diff-line-bg); | ||
| --diffs-line-bg: var(--diffs-computed-diff-line-bg, inherit); |
There was a problem hiding this comment.
This exact code block was copied 4x, instead of copying it I listed all selectors.
| appearance: none; | ||
| border: 0; | ||
| background: transparent; | ||
| color: var(--diffs-fg-number); | ||
| font: inherit; | ||
| font-style: normal; | ||
| cursor: pointer; | ||
| padding: 0; |
| [data-overflow='scroll'] [data-annotation-content] { | ||
| position: sticky; | ||
| width: var(--diffs-column-content-width, auto); | ||
| left: var(--diffs-column-number-width, 0); | ||
| } |
There was a problem hiding this comment.
This whole block was duplicated exactly beneath, with just a different selector
| justify-content: center; | ||
| border: none; | ||
| appearance: none; | ||
| width: 1lh; | ||
| height: 1lh; | ||
| margin-right: calc((1lh - 1ch) * -1); | ||
| padding: 0; | ||
| cursor: pointer; |
| border-left: 2px solid var(--diffs-bg); | ||
| border-right: 2px solid var(--diffs-bg); | ||
| border-inline: 2px solid var(--diffs-bg); |
2 participants
Description
While scimming over the CSS I recognized plenty of duplicate code blocks. This PR merges the most obvious ones.
Motivation & Context
Keep the CSS maintainable over time.
Type of changes
first discussed with the dev team and they should be aware that this PR is
being opened
You must have first discussed with the dev team and they should be aware
that this PR is being opened
Checklist
contributing guidelines
bun run lint)bun run format)bun run diffs:test)How was AI used in generating this PR
Checking for additional repeating patterns and how one could optimize them.
Related issues
None