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.

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

Update stylelint@latest and @primer/stylelint-config@latest #5088

Merged
merged 9 commits into from
Oct 14, 2024
Merged

Update stylelint@latest and @primer/stylelint-config@latest #5088

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
77d7272
Don't error on warnings
jonrohan Oct 8, 2024
05aece1
Update config and disable violations
jonrohan Oct 8, 2024
62acfe1
Use release version
jonrohan Oct 8, 2024
77fc108
Merge remote-tracking branch 'origin/main' into update_stylelint
jonrohan Oct 8, 2024
201c27b
Merge branch 'main' into update_stylelint
jonrohan Oct 8, 2024
12993c8
Use 13.1.1
jonrohan Oct 8, 2024
47c46e9
Merge remote-tracking branch 'origin/main' into update_stylelint
jonrohan Oct 9, 2024
74acb11
Merge branch 'main' into update_stylelint
jonrohan Oct 9, 2024
9df1d45
Merge branch 'main' into update_stylelint
jonrohan Oct 14, 2024
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
2,119 changes: 649 additions & 1,470 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
"build:components.json": "npm run build:components.json -w @primer/react",
"lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
"lint:css": "stylelint '**/*.css' --max-warnings=0",
"lint:css": "stylelint --rd -q '**/*.css'",
Copy link
Member

@joshblack joshblack Oct 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Could we still use --max-warnings=0 here, as well? Just to fail on if warnings are being reported. To me this can help out a lot with avoiding the problem where linting emits a ton of warnings over time and can also catch some helpful things, as well, for warnings that should have been errors.

Copy link
Member Author

Choose a reason for hiding this comment

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

We use the warnings in the config to let people know of minor issues but not blockers. Adding the max warnings 0 fails on everything which isn't how dotcom behaves

Copy link
Member

Choose a reason for hiding this comment

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

@jonrohan my preference would definitely be to treat the warnings as errors. If it's not worth failing the build on, then it is adding some noise that can build up over time when linting. This can make it more difficult to track down the specific error you're running into 😞 I've been running into this a little bit this past week on the dotcom side of things with eslint which is why it's top of mind.

Would there be a downside to having to address the warnings on our end?

Copy link
Member Author

@jonrohan jonrohan Oct 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@joshblack The 2 rules we change to warnings are browser-compat and value-no-unknown-custom-properties

https://github.com/primer/stylelint-config/blob/4be05424a07ef6567740ff851fcd4bb9b3f9123c/index.js#L85
https://github.com/primer/stylelint-config/blob/4be05424a07ef6567740ff851fcd4bb9b3f9123c/index.js#L45

  • browser-compat will warn folks when they're using features that haven't fully shipped to all browsers in our browserslist config yet.
  • value-no-unknown-custom-properties will warn folks when they're using a css property that isn't defined in the page or in primer/primitives.

Both of these as configured will only show up as squiggly yellow underlines in editors. Which also can be configured to ignore warnings. The CI will never fail on these. If you feel strongly these should be errors we should instead change their warning level. We intentionally changed them to warnings in the beginning because we knew that value-no-unknown-custom-properties will probably have a lot of false positive errors because it can't know how the page is put together. browser-compat we made a warning because there's often progressive enhancements built into CSS and we didn't want to get in the way.

IMO failing the build on warnings is counter intuitive because we're making warning and error the same thing. If someone sees that their build ❌ and then it says "warning: stylelint browser-compat` they will be confused.

"lint:css:fix": "stylelint --fix '**/*.css'",
"lint:fix": "npm run lint -- --fix",
"lint:md": "markdownlint-cli2 \"**/*.{md,mdx}\" \"!.github\" \"!.changeset\" \"!**/node_modules/**\" \"!**/CHANGELOG.md\"",
Expand Down Expand Up @@ -50,7 +50,7 @@
"@mdx-js/react": "1.6.22",
"@playwright/test": "1.43.0",
"@prettier/sync": "0.5.1",
"@primer/stylelint-config": "^13.0.1-rc.5358628",
"@primer/stylelint-config": "13.1.1",
"@size-limit/preset-big-lib": "11.0.2",
"@types/jest": "29.5.12",
"@typescript-eslint/eslint-plugin": "^7.11.0",
Expand Down Expand Up @@ -78,7 +78,7 @@
"prettier": "3.0.3",
"rimraf": "5.0.5",
"size-limit": "11.1.5",
"stylelint": "^16.8.1",
"stylelint": "16.9.0",
"typescript": "5.4.5"
},
"optionalDependencies": {
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/Avatar/Avatar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
/* stylelint-disable csstools/value-no-unknown-custom-properties */

:where(.Avatar) {
display: inline-block;
width: var(--avatarSize-regular);
Expand Down
7 changes: 5 additions & 2 deletions packages/react/src/Banner/Banner.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
.Banner {
display: grid;
padding: var(--base-size-8);
/* stylelint-disable-next-line primer/colors */
background-color: var(--banner-bgColor);
/* stylelint-disable-next-line primer/colors */
border: var(--borderWidth-thin) solid var(--banner-borderColor);
border-radius: var(--borderRadius-medium);
grid-template-columns: auto minmax(0, 1fr) auto;
Expand Down Expand Up @@ -100,7 +102,9 @@
.BannerIcon svg {
/* 20px is the line box height of the trailing action buttons */
height: var(--base-size-20);
/* stylelint-disable-next-line primer/colors */
color: var(--banner-icon-fgColor);
/* stylelint-disable-next-line primer/colors */
fill: var(--banner-icon-fgColor);
}

Expand All @@ -118,6 +122,7 @@
}

.BannerDismiss svg {
/* stylelint-disable-next-line primer/colors */
color: var(--banner-icon-fgColor);
}

Expand Down Expand Up @@ -159,7 +164,6 @@

/* Layout ------------------------------------------------------------------- */

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@container banner (max-width: 500px) {
.BannerContainer {
display: grid;
Expand All @@ -179,7 +183,6 @@
}
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@container banner (min-width: 500px) {
.BannerContainer {
display: grid;
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/Blankslate/Blankslate.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@
}

/* At the time these styles were written, 34rem was our "small" breakpoint width */
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@container blankslate (max-width: 34rem) {
.Blankslate {
--blankslate-outer-padding-block: var(--base-size-20);
Expand Down
4 changes: 1 addition & 3 deletions packages/react/src/Button/ButtonBase.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
transition-duration: 80ms;
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
&:focus-visible {
@mixin focusOutline;
}
Expand Down Expand Up @@ -298,7 +297,6 @@
border-color: var(--button-primary-borderColor-hover);
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
&:focus-visible {
@mixin focusOutlineOnEmphasis;
}
Expand Down Expand Up @@ -461,7 +459,6 @@
text-decoration: underline;
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
&:focus-visible,
&:focus {
outline-offset: 2px;
Expand Down Expand Up @@ -494,6 +491,7 @@
color: var(--button-inactive-fgColor);
cursor: auto;
background-color: var(--button-inactive-bgColor);
/* stylelint-disable-next-line primer/colors */
border-color: var(--button-inactive-bgColor);

& .Visual,
Expand Down
7 changes: 3 additions & 4 deletions packages/react/src/Checkbox/Checkbox.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
height: var(--base-size-16);
visibility: hidden;
content: '';
/* stylelint-disable-next-line primer/colors */
background-color: var(--fgColor-onEmphasis);
transition: visibility 0s linear 230ms;
clip-path: inset(var(--base-size-16) 0 0 0);
/* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
mask-size: 75%;
mask-repeat: no-repeat;
Expand All @@ -27,6 +27,7 @@
background: var(--control-checked-bgColor-rest);

/* using bgColor here to avoid a border change in dark high contrast */
/* stylelint-disable-next-line primer/colors */
border-color: var(--control-checked-bgColor-rest);

&::before {
Expand Down Expand Up @@ -54,13 +55,13 @@
opacity: 1;

&::before {
/* stylelint-disable-next-line primer/colors */
background-color: var(--control-checked-fgColor-disabled);
}
}

/* Windows High Contrast mode */
@media (forced-colors: active) {
/* stylelint-disable-next-line primer/colors */
background-color: canvastext;
border-color: canvastext;
}
Expand All @@ -70,13 +71,11 @@
background: var(--control-checked-bgColor-rest);

&::before {
/* stylelint-disable-next-line plugin/no-unsupported-browser-features, plugin/no-unsupported-browser-features */
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
visibility: visible;
}
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
&:focus-visible:not(:disabled) {
@mixin focusOutline 2px;
}
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/Label/Label.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
}

&:where([data-variant='primary']) {
/* stylelint-disable-next-line primer/colors */
border-color: var(--fgColor-default);
}

Expand All @@ -37,21 +38,25 @@

&:where([data-variant='accent']) {
color: var(--fgColor-accent);
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-accent-emphasis);
}

&:where([data-variant='success']) {
color: var(--fgColor-success);
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-success-emphasis);
}

&:where([data-variant='attention']) {
color: var(--fgColor-attention);
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-attention-emphasis);
}

&:where([data-variant='severe']) {
color: var(--fgColor-severe);
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-severe-emphasis);
}

Expand All @@ -62,11 +67,13 @@

&:where([data-variant='done']) {
color: var(--fgColor-done);
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-done-emphasis);
}

&:where([data-variant='sponsors']) {
color: var(--fgColor-sponsors);
/* stylelint-disable-next-line primer/colors */
border-color: var(--bgColor-sponsors-emphasis);
}
}
7 changes: 6 additions & 1 deletion packages/react/src/experimental/IssueLabel/IssueLabel.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
font-size: var(--text-body-size-small);
font-weight: var(--base-text-weight-semibold);
line-height: var(--text-body-lineHeight-small);
/* stylelint-disable-next-line primer/colors */
color: var(--label-fgColor);
white-space: nowrap;
/* stylelint-disable-next-line primer/colors */
background-color: var(--label-bgColor-rest);
border: 0;
border-radius: var(--borderRadius-full);
Expand All @@ -20,17 +22,20 @@
text-decoration: none;

&:hover {
/* stylelint-disable-next-line primer/colors */
color: var(--label-fgColor-hover);
cursor: pointer;
/* stylelint-disable-next-line primer/colors */
background-color: var(--label-bgColor-hover);
}

&:active {
/* stylelint-disable-next-line primer/colors */
color: var(--label-fgColor-active);
/* stylelint-disable-next-line primer/colors */
background-color: var(--label-bgColor-active);
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
&:focus-visible {
@mixin focusOutline 2px;
}
Expand Down
Loading