Skip to content

Remove !important from utilities #3145

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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Remove !important from utilities #3145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
aa90081
Initial plan
Copilot Aug 18, 2026
170a45a
Remove important annotations from utilities
Copilot Aug 18, 2026
d1e8167
Add utilities important regression test
Copilot Aug 18, 2026
043bf42
Clarify utilities import-order comment
Copilot Aug 18, 2026
2a37769
Improve utilities important test failure message
Copilot Aug 18, 2026
c8d6257
Restore important declarations for show-on-focus
Copilot Aug 18, 2026
d5302d4
Refine show-on-focus test helper
Copilot Aug 18, 2026
6b92684
Clarify missing show-on-focus assertion
Copilot Aug 18, 2026
3bce220
Guard show-on-focus test helper
Copilot Aug 18, 2026
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
92 changes: 89 additions & 3 deletions __tests__/css.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import {
getPackageStats,
getSelectorDiff,
getVariableDiff,
currentVersionDeprecations
currentVersionDeprecations,
} from './utils/css'
import fs from 'fs'
import semver from 'semver'
import {createRequire} from 'module'

let selectorsDiff, variablesDiff, version
const showOnFocusSelector = '.show-on-focus {'

beforeAll(async () => {
selectorsDiff = getSelectorDiff()
Expand All @@ -23,11 +25,46 @@ describe('css', () => {
})
})

describe('utilities', () => {
it('keeps show-on-focus declarations important', () => {
const content = fs.readFileSync('./src/utilities/visibility-display.scss', 'utf8')
const showOnFocus = getShowOnFocus(content)

if (showOnFocus === null) {
throw new Error('Could not find .show-on-focus block')
}

for (const declaration of [
'position: absolute !important;',
'width: 1px !important;',
'height: 1px !important;',
'padding: 0 !important;',
'overflow: hidden !important;',
'clip: rect(1px, 1px, 1px, 1px) !important;',
'border: 0 !important;',
]) {
expect(showOnFocus).toContain(declaration)
}
})

it('contains !important annotations only in show-on-focus', () => {
const files = getFiles('./src/utilities').filter(file => file.endsWith('.scss'))

for (const file of files) {
const content = stripShowOnFocus(fs.readFileSync(file, 'utf8'))

if (content.includes('!important')) {
throw new Error(`${file} contains !important outside show-on-focus`)
}
}
})
})

describe('deprecations', () => {
it('expects deprecations and their replacement to not be equal.', () => {
const deprecations = currentVersionDeprecations()
Object.keys(deprecations["selectors"]).forEach(deprecation => {
const replacement = deprecations["selectors"][deprecation]
Object.keys(deprecations['selectors']).forEach(deprecation => {
const replacement = deprecations['selectors'][deprecation]
expect(deprecation).not.toEqual(replacement)
})
})
Expand Down Expand Up @@ -64,3 +101,52 @@ describe('classnames', () => {
expect([...cjsClassNames].sort()).toEqual([...classNames].sort())
})
})

function getFiles(directory) {
return fs.readdirSync(directory, {withFileTypes: true}).flatMap(entry => {
const file = `${directory}/${entry.name}`

return entry.isDirectory() ? getFiles(file) : file
})
}

function stripShowOnFocus(content) {
const showOnFocus = getShowOnFocusRange(content)

if (showOnFocus === null) {
return content
}

return `${content.slice(0, showOnFocus.start)}${content.slice(showOnFocus.end)}`
}

function getShowOnFocus(content) {
const range = getShowOnFocusRange(content)

return range === null ? null : content.slice(range.start, range.end)
}

function getShowOnFocusRange(content) {
const start = content.indexOf(showOnFocusSelector)

if (start === -1) {
return null
}

const blockStart = content.indexOf('{', start)
let depth = 0

for (let index = blockStart; index < content.length; index++) {
if (content[index] === '{') {
depth++
} else if (content[index] === '}') {
depth--
}

if (depth === 0) {
return {start, end: index + 1}
}
}

throw new Error('Could not find closing brace for .show-on-focus block')
}
50 changes: 25 additions & 25 deletions src/utilities/borders.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,80 @@
/* Add a gray border to the left and right */
.border-x {
// stylelint-disable-next-line primer/colors
border-right: $border-rem !important;
border-right: $border-rem;
// stylelint-disable-next-line primer/colors
border-left: $border-rem !important;
border-left: $border-rem;
}

/* Add a gray border to the top and bottom */
.border-y {
// stylelint-disable-next-line primer/colors
border-top: $border-rem !important;
border-top: $border-rem;
// stylelint-disable-next-line primer/colors
border-bottom: $border-rem !important;
border-bottom: $border-rem;
}

/* Responsive gray borders */
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
/* Add a gray border on all sides at/above this breakpoint */
// stylelint-disable-next-line primer/colors
.border#{$variant} { border: $border-rem !important; }
.border#{$variant}-0 { border: 0 !important; }
.border#{$variant} { border: $border-rem; }
.border#{$variant}-0 { border: 0; }

// stylelint-disable-next-line primer/colors
.border#{$variant}-top { border-top: $border-rem !important; }
.border#{$variant}-top { border-top: $border-rem; }
// stylelint-disable-next-line primer/colors
.border#{$variant}-right { border-right: $border-rem !important; }
.border#{$variant}-right { border-right: $border-rem; }
// stylelint-disable-next-line primer/colors
.border#{$variant}-bottom { border-bottom: $border-rem !important; }
.border#{$variant}-bottom { border-bottom: $border-rem; }
// stylelint-disable-next-line primer/colors
.border#{$variant}-left { border-left: $border-rem !important; }
.border#{$variant}-left { border-left: $border-rem; }

.border#{$variant}-top-0 { border-top: 0 !important; }
.border#{$variant}-right-0 { border-right: 0 !important; }
.border#{$variant}-bottom-0 { border-bottom: 0 !important; }
.border#{$variant}-left-0 { border-left: 0 !important; }
.border#{$variant}-top-0 { border-top: 0; }
.border#{$variant}-right-0 { border-right: 0; }
.border#{$variant}-bottom-0 { border-bottom: 0; }
.border#{$variant}-left-0 { border-left: 0; }

// Rounded corners
.rounded#{$variant} { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
.rounded#{$variant}-0 { border-radius: 0 !important; }
.rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
.rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
.rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
.rounded#{$variant} { border-radius: var(--borderRadius-medium, $border-radius-2); }
.rounded#{$variant}-0 { border-radius: 0; }
.rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1); }
.rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2); }
.rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3); }

@each $edge, $corners in $edges {
.rounded#{$variant}-#{$edge}-0 {
@each $corner in $corners {
border-#{$corner}-radius: 0 !important;
border-#{$corner}-radius: 0;
}
}

.rounded#{$variant}-#{$edge}-1 {
@each $corner in $corners {
border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1);
}
}

.rounded#{$variant}-#{$edge}-2 {
@each $corner in $corners {
border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2);
}
}

.rounded#{$variant}-#{$edge}-3 {
@each $corner in $corners {
border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3);
}
}
}
}
}

/* Add a 50% border-radius to make something into a circle */
.circle { border-radius: var(--borderRadius-full, 50%) !important; }
.circle { border-radius: var(--borderRadius-full, 50%); }

/* Change the border style to dashed, in conjunction with another utility */
.border-dashed {
border-style: dashed !important;
border-style: dashed;
}
12 changes: 6 additions & 6 deletions src/utilities/box-shadow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,27 @@
// Box shadows

.color-shadow-small {
box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
box-shadow: var(--shadow-resting-small, var(--color-shadow-small));
}

.color-shadow-medium {
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
}

.color-shadow-large {
box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
}

.color-shadow-extra-large {
box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large));
}

.shadow-floating-small {
box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow)) !important;
box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow));
}

// Turn off box shadow

.box-shadow-none {
box-shadow: none !important;
box-shadow: none;
}
Loading
Loading