Fixes #39276 - Add Stylelint rule to block global css overrides by MariaAga · Pull Request #10968 · theforeman/foreman

MariaAga · 2026-04-29T14:40:37Z

AI assisted PR + description:
This PR is to enforce

Use specific css selectors to avoid conflicts with other plugins or the core.

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 stylelint for linting Foreman core styles
npm run stylelint:plugins for linting plugin styles using Foreman's shared config

Lukshio · 2026-04-29T15:55:53Z

Thanks for this PR, hopefully it will solve some of the css overriding issues. Changes looks good.

Lukshio · 2026-04-29T15:59:04Z

  /* override bootstrap-sass
  ul, ol {
    margin-top: 0px;
    margin-bottom: 10px;
-  }*/
+  } */


this commented code can be deleted

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;

MariaAga · 2026-04-30T09:32:08Z

updated dev docs to include stylelint

kmalyjur

Great addition!
I'm just not sure about those things:

kmalyjur · 2026-05-06T18:01:27Z

+  if (!HTML_ELEMENTS.has(tag)) return false;
+
+  const afterTag = trimmed.slice(tag.length);
+  if (!afterTag || /^[\s>#~+,{]/.test(afterTag) || afterTag.startsWith('[')) {


Could # symbol in the regex accidentally trigger false positives for ID selectors like a#nav .pf-v5-c-button?

a#nav .pf-v5-c-button is allowed, and the lint doesnt show an error for it

kmalyjur · 2026-05-06T18:23:50Z

+
    min-width: 0;
    margin: 0;
-    --pf-v5-c-menu__list-item--hover--BackgroundColor: var(


How come this could be deleted? 🤔

its duplicate, its also defined the same a few lines lower

MariaAga · 2026-05-26T10:02:45Z

rebased

ofedoren · 2026-05-26T12:26:55Z

Note: This review was AI-generated by Claude (Opus 4.6).

Nice work on enforcing scoped selectors — the approach is solid and the plugin linter integration is a great addition. A few concerns:

Deleted .pf-gray-background class (HostDetails.scss) — this class is removed entirely. If any plugin or ERB template references it, they silently lose their background. Worth grepping across the plugin ecosystem before merging.
Custom lint plugins use regex string-splitting instead of postcss-selector-parser — the isBareElementSelector function splits on /\s*[>~+\s]\s*/ which can produce empty strings for edge-case selectors, and parts.every(...) returns true for an empty array. postcss-selector-parser is already a transitive dep of Stylelint and would handle these cases correctly.
ColumnSelector.js component change bundled with a lint PR — swapping <div className="pf-v5-c-input-group"> for proper <InputGroup>/<InputGroupItem> is a real behavior change that could break plugin snapshot tests. Might be cleaner as a separate PR so this one stays pure infrastructure.

MariaAga · 2026-05-28T11:51:46Z

Thanks!
Added test to the script for clarity, and to make sure any future changes will keep the script working as intented.

Deleted .pf-gray-background class (HostDetails.scss) — this class is removed entirely. If any plugin or ERB template references it, they silently lose their background. Worth grepping across the plugin ecosystem before merging.

pf-gray-background not used anywhere.

Custom lint plugins use regex string-splitting instead of postcss-selector-parser — the isBareElementSelector function splits on /\s*[>~+\s]\s*/ which can produce empty strings for edge-case selectors, and parts.every(...) returns true for an empty array. postcss-selector-parser is already a transitive dep of Stylelint and would handle these cases correctly.

Refactored isBareElementSelector

ColumnSelector.js component change bundled with a lint PR — swapping
for proper / is a real behavior change that could break plugin snapshot tests. Might be cleaner as a separate PR so this one stays pure infrastructure.

Not a really big change, the toolbar should use PF5 components that fit, and InputGroup doesnt really have any code, its a div with css classes.
I checked it and it looks the same.
AI detailed answer:
Looking at the actual source:

InputGroup renders <div className="pf-v5-c-input-group">— the exact same class the old
used manually.
InputGroupItem renders <div className="pf-v5-c-input-group__item"> — the old code used pf-v5-c-select-input which is a different class.
So InputGroup itself is not a behavior change — it produces the same pf-v5-c-input-group div. But replacing the outer
with (pf-v5-c-input-group__item) is a markup change — different class name, which would break snapshot tests. The behavior is likely identical in practice since neither class adds JS logic, but the rendered HTML does differ.

Lukshio · 2026-07-16T12:46:23Z

    "test:current": "tfm-test --watch",
    "test:plugins": "./script/npm_test_plugin.js",
    "lint:plugins": "./script/npm_lint_plugins.js",
+    "test:stylelint": "node --test script/lint/stylelint-*.test.js",


Should this be run in CI as well?

added .github/workflows/stylelint_rules_tests.yml (similar to the other lint pr)

Lukshio · 2026-07-16T16:17:05Z

/packit build

MariaAga · 2026-07-17T12:31:37Z

added postcss-selector-parser to package-exclude.json

MariaAga · 2026-07-21T09:42:19Z

@Lukshio packit is green

Lukshio · 2026-07-21T09:44:47Z

@Lukshio packit is green

Still needs @theforeman/packaging ack

MariaAga · 2026-07-21T09:50:59Z

@@ -150,8 +154,9 @@
    "sass": "~1.60.0",
    "sass-loader": "^13.3.2",
    "style-loader": "^1.3.0",
-    "stylelint": "^9.3.0",
-    "stylelint-config-standard": "^18.0.0",
+    "html-tags": "^5.1.0",
+    "stylelint": "^17.9.1",
+    "stylelint-config-standard-scss": "^17.0.0",


@theforeman/packaging all new packages are in package-exclude so shouldnt effect packaging

MariaAga requested a review from a team as a code owner April 29, 2026 14:40

pr-processor Bot added the Not yet reviewed label Apr 29, 2026

github-actions Bot added the UI label Apr 29, 2026

Lukshio reviewed Apr 29, 2026

View reviewed changes

pr-processor Bot removed the Not yet reviewed label Apr 29, 2026

MariaAga force-pushed the add-stylelint branch from 3858473 to 9510451 Compare April 30, 2026 09:31

github-actions Bot added the Docs label Apr 30, 2026

kmalyjur suggested changes May 6, 2026

View reviewed changes

pr-processor Bot added the Waiting on contributor label May 6, 2026

kmalyjur approved these changes May 26, 2026

View reviewed changes

MariaAga force-pushed the add-stylelint branch from 9510451 to 1b556a2 Compare May 26, 2026 09:54

pr-processor Bot added Needs re-review and removed Waiting on contributor labels May 26, 2026

MariaAga mentioned this pull request May 28, 2026

Fixes #39367 - prevent global override of CSS Katello/katello#11765

Merged

MariaAga force-pushed the add-stylelint branch from 1b556a2 to 4341e93 Compare July 8, 2026 15:04

This was referenced Jul 13, 2026

Fixes #39522 - Fix failing new lint rules theforeman/foreman_remote_execution#1043

Open

Fixes #39517 - Fix JS magic number usage theforeman/foreman-tasks#830

Open

Fixes #39383 - add no-magic-numbers js lint rule #11008

Merged

jeremylenz mentioned this pull request Jul 15, 2026

Fix no-magic-numbers lint errors theforeman/foreman_rh_cloud#1233

Merged

3 tasks

Lukshio reviewed Jul 16, 2026

View reviewed changes

pr-processor Bot removed the Needs re-review label Jul 16, 2026

MariaAga force-pushed the add-stylelint branch from 4341e93 to bf54d40 Compare July 16, 2026 13:01

MariaAga force-pushed the add-stylelint branch from bf54d40 to 0f53f4d Compare July 17, 2026 12:31

MariaAga commented Jul 21, 2026

View reviewed changes

Lukshio requested a review from ogajduse July 21, 2026 10:19

MariaAga force-pushed the add-stylelint branch 2 times, most recently from 242191c to b13f30e Compare July 21, 2026 10:52

Fixes #39276 - Add Stylelint rule to block global css overrides

21b8293

MariaAga force-pushed the add-stylelint branch from b13f30e to 21b8293 Compare July 21, 2026 13:07

MariaAga mentioned this pull request Jul 21, 2026

Fixes #39548 - Fix lint tests, and clean up js code theforeman/foreman_openscap#617

Open

Uh oh!

Conversation

MariaAga commented Apr 29, 2026

Uh oh!

Lukshio commented Apr 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MariaAga commented Apr 30, 2026

Uh oh!

kmalyjur left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MariaAga commented May 26, 2026

Uh oh!

ofedoren commented May 26, 2026

Uh oh!

MariaAga commented May 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Lukshio commented Jul 16, 2026

Uh oh!

MariaAga commented Jul 17, 2026

Uh oh!

MariaAga commented Jul 21, 2026

Uh oh!

Lukshio commented Jul 21, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants