Skip to content

Remove duplicate styles #742

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.

Sign up for GitHub

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

Open
Que-tin wants to merge 1 commit into
base: main
Choose a base branch
from
+24 −81
Open

Remove duplicate styles #742

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 24 additions & 81 deletions packages/diffs/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,10 +91,7 @@
);
--diffs-bg-buffer: var(
--diffs-bg-buffer-override,
light-dark(
color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer)),
color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))
)
Comment on lines -94 to -97
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for light-dark as long as the color is the same.
This pattern is also already applied to other custom properties

color-mix(in lab, var(--diffs-bg) 92%, var(--diffs-mixer))
);
--diffs-bg-context: var(
--diffs-bg-context-override,
Expand All @@ -121,10 +118,7 @@
--diffs-fg: light-dark(var(--diffs-light, #000), var(--diffs-dark, #fff));
--diffs-fg-number: var(
--diffs-fg-number-override,
light-dark(
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for light-dark as long as the color is the same.
This pattern is also already applied to other custom properties

color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg)),
color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))
)
color-mix(in lab, var(--diffs-fg) 65%, var(--diffs-bg))
);
--diffs-fg-conflict-marker: var(
--diffs-fg-conflict-marker-override,
Expand Down Expand Up @@ -213,6 +207,21 @@
color: var(--diffs-fg);
}

*,
*::before,
*::after {
box-sizing: border-box;
}
Comment on lines +210 to +214
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just moved above all of the element selectors

Copy link
Copy Markdown
Contributor

@necolas necolas May 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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;
}
Comment on lines +216 to +223
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These resets had been done on all buttons anyway and are pretty common.


/* NOTE(mdo): Some semantic HTML elements (e.g. `pre`, `code`) have default
* user-agent styles. These must be overridden to use our custom styles. */
pre,
Expand All @@ -235,12 +244,6 @@
contain: content;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

[data-icon-sprite] {
display: none;
}
Expand Down Expand Up @@ -524,22 +527,6 @@
var(--diffs-deletion-base)
);
}

--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);
Comment on lines -528 to -542
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This exact code block was copied 4x, instead of copying it I listed all selectors.

}

&[data-line-type='change-addition'] {
Expand All @@ -566,22 +553,6 @@
var(--diffs-addition-base)
);
}

--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);
}

&[data-merge-conflict='current'] {
Expand All @@ -608,22 +579,6 @@
--mix-dark: 70%;
}
}

--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);
}

&[data-merge-conflict='incoming'] {
Expand All @@ -647,7 +602,12 @@
--mix-dark: 70%;
}
}
}

&[data-line-type='change-deletion'],
&[data-line-type='change-addition'],
&[data-merge-conflict='current'],
&[data-merge-conflict='incoming'] {
--diffs-computed-diff-line-bg: light-dark(
color-mix(
in lab,
Expand Down Expand Up @@ -1538,14 +1498,7 @@
}

[data-merge-conflict-action] {
appearance: none;
border: 0;
background: transparent;
color: var(--diffs-fg-number);
font: inherit;
font-style: normal;
cursor: pointer;
padding: 0;
Comment on lines -1541 to -1548
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to the button reset

}

[data-merge-conflict-action]:hover {
Expand Down Expand Up @@ -1663,12 +1616,7 @@

/* Sticky positioning has a composite costs, so we should _only_ pay it if we
* need to */
[data-overflow='scroll'] [data-annotation-content] {
position: sticky;
width: var(--diffs-column-content-width, auto);
left: var(--diffs-column-number-width, 0);
}
Comment on lines -1666 to -1670
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whole block was duplicated exactly beneath, with just a different selector


[data-overflow='scroll'] [data-annotation-content],
[data-overflow='scroll'] [data-merge-conflict-actions-content] {
position: sticky;
width: var(--diffs-column-content-width, auto);
Expand Down Expand Up @@ -1696,13 +1644,9 @@
display: flex;
align-items: center;
justify-content: center;
border: none;
appearance: none;
width: 1lh;
height: 1lh;
margin-right: calc((1lh - 1ch) * -1);
padding: 0;
cursor: pointer;
Comment on lines 1646 to -1705
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to the button reset

font-size: var(--diffs-font-size, 13px);
line-height: var(--diffs-line-height, 20px);
border-radius: 4px;
Expand Down Expand Up @@ -1735,8 +1679,7 @@
background-color: var(--diffs-decoration-bar-color, transparent);
/* overflow: clip visible; */
box-sizing: content-box;
border-left: 2px solid var(--diffs-bg);
border-right: 2px solid var(--diffs-bg);
border-inline: 2px solid var(--diffs-bg);
Comment on lines -1738 to +1682
Copy link
Copy Markdown
Author

@Que-tin Que-tin May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick win I stumbled across


[data-decoration-bar-depth='1'] & {
background-color: color-mix(
Expand Down