Skip to content

[FLINK-40034][runtime-web] Refresh web-dashboard lint tooling to prettier 3 and stylelint 17#28710

Open
spuru9 wants to merge 2 commits into
apache:masterfrom
spuru9:feature/FLINK-40034-lint-tooling-refresh
Open

[FLINK-40034][runtime-web] Refresh web-dashboard lint tooling to prettier 3 and stylelint 17#28710
spuru9 wants to merge 2 commits into
apache:masterfrom
spuru9:feature/FLINK-40034-lint-tooling-refresh

Conversation

@spuru9

@spuru9 spuru9 commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

What is the purpose of the change

Bring the web-dashboard lint tooling current, per FLINK-40034:

  • prettier 2 -> 3, eslint-plugin-prettier 4 -> 5
  • stylelint 14 -> 17 + config cascade: stylelint-config-standard -> 40,
    stylelint-config-hudochenkov -> 13, stylelint-prettier -> 5; drops the
    now-unused (and stylelint-17-incompatible) stylelint-config-prettier

Jira: https://issues.apache.org/jira/browse/FLINK-40034

Brief change log

  • Bumped the prettier/eslint-plugin-prettier/stylelint dependency cascade in package.json.
  • stylelint-config-standard 40 adds several CSS-only rules that misfire on Less syntax, so .stylelintrc.js disables/adjusts them:
    • declaration-property-value-no-unknown, declaration-property-value-keyword-no-deprecated: otherwise flag valid Less-specific values as unknown.
    • import-notation: 'string': the default 'url' rewrites @import "x" to @import url("x"), which breaks Less inlining.
    • color-function-alias-notation: disabled after discovering it rewrites rgba(...) to a 4-argument rgb(...), which is valid modern CSS but silently drops the alpha channel when compiled through Less's built-in 3-argument rgb() function (verified via a production build: rgba(0, 0, 0, 0.8) compiled to opaque #000 before this fix).
  • Ran npm run lint:fix and committed the resulting mechanical formatting diff (constructor parameter wrapping, lowercase doctype, a few Less property reorderings/shorthands) as a separate, isolated commit for easy review.
  • Verified NOTICE regeneration produces no changes for this bump (prettier/eslint-plugin-prettier/stylelint are devDependencies, not reflected in NOTICE).

Angular's new built-in control-flow syntax (@if/@for) is not used anywhere in this codebase yet (still on *ngIf/*ngFor); that migration is deferred to a dedicated follow-up, per the existing comment in eslint.config.js. This PR only lands the tooling/config prerequisites.

Verifying this change

  • npm run lint (cold cache) passes cleanly.
  • npm run build succeeds; confirmed via the compiled CSS output that the color-function-alias-notation fix preserves the alpha channel (rgba(0,0,0,0.8) compiles to #000c, not opaque #000).
  • npm run ci-check passes end-to-end.

Does this pull request potentially affect one of the following parts:

  • Dependencies (does it add or upgrade a dependency): yes, devDependencies only (prettier, eslint-plugin-prettier, stylelint, and stylelint config packages); no production dependency changes.
  • The public API, i.e., is any changed class annotated with @Public(Evolving): no
  • The serializers: no
  • The runtime per-record code paths (performance sensitive): no
  • Anything that affects deployment or recovery: JobManager (and its components), Checkpointing, Kubernetes/Yarn, ZooKeeper: no
  • The S3 file system connector: no

Documentation

  • Does this pull request introduce a new feature? no

Was generative AI tooling used to co-author this PR?
  • Yes (Claude Code)

spuru9 added 2 commits July 10, 2026 13:33
… to 5, stylelint to 17

Refreshes the web-dashboard lint tooling: prettier 2->3, eslint-plugin-prettier
4->5, stylelint 14->17 with its config cascade (stylelint-config-standard 40,
stylelint-config-hudochenkov 13, stylelint-prettier 5), and drops the now-
unused stylelint-config-prettier (unsupported past stylelint 14, redundant
since standard config 40 no longer ships the stylistic rules it used to
disable).

stylelint-config-standard 40 adds several CSS-only rules that misfire on
Less syntax, so they're disabled/adjusted in .stylelintrc.js:
- declaration-property-value-no-unknown, declaration-property-value-keyword-
  no-deprecated: Less-specific values otherwise flagged as unknown.
- import-notation set to 'string': the default 'url' rewrites
  `@import "x"` to `@import url("x")`, which breaks Less inlining.
- color-function-alias-notation: disabled because rewriting rgba(...) to a
  4-arg rgb(...) is valid modern CSS but Less's built-in rgb() function only
  accepts 3 args, silently dropping the alpha channel at compile time.

Generated-by: Claude Code (claude-sonnet-5)
… fixes

Mechanical output of \`npm run lint:fix\` after the prettier/stylelint bump,
isolated from the dependency/config change so the formatting-only diff is
easy to review on its own. Constructor parameter wrapping, lowercase
doctype, and a few Less property reorderings/shorthands
(top/right/bottom/left -> inset); no behavioral changes.

Generated-by: Claude Code (claude-sonnet-5)
@flinkbot

flinkbot commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

CI report:

Bot commands The @flinkbot bot supports the following commands:
  • @flinkbot run azure re-run the last Azure build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants