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 isoverflow-wrap. Five of them are in rules that already declareoverflow-wrapwith 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 theclip-pathequivalent.page-break-insideandpage-break-after: their standard names arebreak-insideandbreak-after. One is next to an existingbreak-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-wrapwithoverflow-wrap, and drop the declaration where the rule already has an identicaloverflow-wrap. - Replace
clip: rect(...)withclip-path: inset(50%)andclip: autoorclip: revertwithclip-path: none, and drop theclipline whereclip-pathis already declared. This is the pattern the Navigation module already uses. Every browser in core's browserslist targets supportsclip-path, and the hidden element keeps its absolute position, 1px size and hidden overflow, so there should be no visual change. - Replace
page-break-insideandpage-break-afterwithbreak-insideandbreak-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.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | deprecated-css-properties.patch | 20.09 KB | gábor hojtsy |
Comments
Comment #2
gábor hojtsyUploading in patch form for now to store the suggested changes while the other MR is being discussed.
Comment #3
gábor hojtsy