diff --git a/.changeset/perf-button-css-has-selector.md b/.changeset/perf-button-css-has-selector.md new file mode 100644 index 00000000000..e792a6db28c --- /dev/null +++ b/.changeset/perf-button-css-has-selector.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +perf(Button): replace `:has(.Visual)` with `[data-no-visuals]` attribute selector in link variant styling diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 7ff56b63091..73073718cd0 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -581,11 +581,11 @@ } [data-a11y-link-underlines='true'] &:where([data-variant='link']) { - &:not(:has(.Visual)) { + &[data-no-visuals] { text-decoration: underline; } - &:has(.Visual) { + &:not([data-no-visuals]) { background-image: linear-gradient(to right, currentColor, currentColor); background-size: 100% 1.5px; background-position: 0 calc(100% - 2px); @@ -598,12 +598,12 @@ } [data-a11y-link-underlines='false'] &:where([data-variant='link']) { - &:not(:has(.Visual)) { + &[data-no-visuals] { text-decoration: none; background-image: none; } - &:has(.Visual) { + &:not([data-no-visuals]) { background-image: none; } }