Problem/Motivation

#3621277: Update JavaScript dependencies for 12.0.0-beta1 updates stylelint-config-standard from 38.0.0 to 40.0.0, which normally would enable the property-no-deprecated rule. Core has 36 declarations in 34 stylesheets that use deprecated properties, so that issue sets the rule to null in core/.stylelintrc.json to keep the dependency update reviewable. This issue fixes the declarations and (mostly) enables the rule.

The deprecated properties in use are:

  • word-wrap: standard name is overflow-wrap. Five of them are in rules that already declare overflow-wrap with the same value.
  • clip: all in visually-hidden patterns and their focus reveal states. Three of them, in the Navigation module, already are next to the clip-path equivalent.
  • page-break-inside and page-break-after: their standard names are break-inside and break-after. One is next to an existing break-inside.

Affected stylesheets are in various themes and modules.

Steps to reproduce

With the #3621277: Update JavaScript dependencies for 12.0.0-beta1 branch checked out, set "property-no-deprecated": true in core/.stylelintrc.json and run yarn lint:css.

Proposed resolution

  • Replace word-wrap with overflow-wrap, and drop the declaration where the rule already has an identical overflow-wrap.
  • Replace clip: rect(...) with clip-path: inset(50%) and clip: auto or clip: revert with clip-path: none, and drop the clip line where clip-path is already declared. This is the pattern the Navigation module already uses. Every browser in core's browserslist targets supports clip-path, and the hidden element keeps its absolute position, 1px size and hidden overflow, so there should be no visual change.
  • Replace page-break-inside and page-break-after with break-inside and break-after, and drop the declaration where the rule already has the new name.
  • Regenerate the compiled CSS with yarn build:css.

Unfortunately postcss-preset-env adds page-break-* to the compiled CSS as a fallback next to every break-* declaration, because cssdb's support table for break properties lists no Safari version, and the compiled files are linted too. This means the property-no-deprecated linting rules can only be enabled with page-break-* names in its ignoreProperties option. No source file uses those names after this change though, that's only for the build generated files.

Remaining tasks

Land after #3621277: Update JavaScript dependencies for 12.0.0-beta1, which introduces the stylelint version that ships the rule.

User interface changes

None. All replacements are equivalent in the supported browsers.

API changes

None.

Data model changes

None.

Release notes snippet

None.

LLM disclosure

LLM was used to diagnose this issue and get a high level description that I understood, distilled and reformatted.

CommentFileSizeAuthor
#2 deprecated-css-properties.patch20.09 KBgábor hojtsy

Comments

gábor hojtsy created an issue. See original summary.

gábor hojtsy’s picture

StatusFileSize
new20.09 KB

Uploading in patch form for now to store the suggested changes while the other MR is being discussed.

gábor hojtsy’s picture