Fixes #39276 - Add Stylelint rule to block global css overrides#10968
Fixes #39276 - Add Stylelint rule to block global css overrides#10968MariaAga wants to merge 1 commit intotheforeman:developfrom
Conversation
|
Thanks for this PR, hopefully it will solve some of the css overriding issues. Changes looks good. |
| /* override bootstrap-sass | ||
| ul, ol { | ||
| margin-top: 0px; | ||
| margin-bottom: 10px; | ||
| }*/ | ||
| } */ |
There was a problem hiding this comment.
this commented code can be deleted
There was a problem hiding this comment.
Its a comment to show why the rule is there.
as
margin-bottom: 0;
font-weight: normal;
was only added because we import bootstrap-sass, which has globally set
margin-top: 0px;
margin-bottom: 10px;
|
updated dev docs to include stylelint |
kmalyjur
left a comment
kmalyjur
left a comment
There was a problem hiding this comment.
Great addition!
I'm just not sure about those things:
| if (!HTML_ELEMENTS.has(tag)) return false; | ||
|
|
||
| const afterTag = trimmed.slice(tag.length); | ||
| if (!afterTag || /^[\s>#~+,{]/.test(afterTag) || afterTag.startsWith('[')) { |
There was a problem hiding this comment.
Could # symbol in the regex accidentally trigger false positives for ID selectors like a#nav .pf-v5-c-button?
There was a problem hiding this comment.
a#nav .pf-v5-c-button is allowed, and the lint doesnt show an error for it
|
|
||
| min-width: 0; | ||
| margin: 0; | ||
| --pf-v5-c-menu__list-item--hover--BackgroundColor: var( |
There was a problem hiding this comment.
How come this could be deleted? 🤔
There was a problem hiding this comment.
its duplicate, its also defined the same a few lines lower
3 participants
AI assisted PR + description:
This PR is to enforce
from the handbook https://theforeman.org/handbook.htmln
Upgrades Stylelint from v9 to v17 and replaces stylelint-config-standard with stylelint-config-standard-scss. some inherited cosmetic rules are disabled to focus on preventing unscoped CSS overrides.
Adds two custom Stylelint plugins:
foreman/no-root-pf-overrides — Flags top-level selectors targeting PF classes (e.g.
.pf-v5-c-card { ... }) or bare HTML elements combined with PF classes (e.g.div .pf-v5-c-button { ... }). Selectors scoped under a custom class or ID are allowed (e.g..my-component .pf-v5-c-card { ... }).foreman/no-bare-element-selectors — Flags top-level rules that only use bare HTML element selectors (e.g.
div { ... },table td { ... }). Selectors scoped under a class or ID are allowed (e.g.a#nav { ... },.my-class div { ... }).Also adds:
A Stylelint CI step in js_tests.yml that runs on .scss and .css files under webpack/ and app/
npm run stylelintfor linting Foreman core stylesnpm run stylelint:pluginsfor linting plugin styles using Foreman's shared config