Skip to content

Stylelint: Consolidate Lint rules for simplification #71235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
im3dabasia wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Stylelint: Consolidate Lint rules for simplification #71235

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
afe4086
feat: Consolidate rules for simplification
im3dabasia Aug 18, 2025
3359d05
feat: Remove allowed list array
im3dabasia Aug 18, 2025
a81357b
chore: Switch case implementation
im3dabasia Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions .stylelintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,31 @@ module.exports = {
'at-rule-empty-line-before': null,
'at-rule-no-unknown': null,
'comment-empty-line-before': null,
'declaration-property-value-allowed-list': [
{
'flex-direction': '/^(?!(row|column)-reverse).*$/',
},
{
message: ( property, value ) =>
`Avoid "${ value }" value for the "${ property }" property. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction.`,
},
],
'declaration-property-value-disallowed-list': [
{
'flex-direction': [ '/-reverse$/' ],
'/.*/': [ '/--wp-components-color-/' ],
},
{
message: ( property, value ) =>
`Avoid using "${ value }" in "${ property }". --wp-components-color-* variables are not ready to be used outside of the components package.`,
message: ( property, value ) => {
switch ( property ) {
// Don't allow reverse values for flex-direction.
case 'flex-direction':
if ( /-reverse$/.test( value ) ) {
return 'Avoid "-reverse" values for the "flex-direction" property.';
}
break;

// Don't allow --wp-components-color-* variables outside of the components package.
default:
if ( /--wp-components-color-/.test( value ) ) {
return 'Avoid using "--wp-components-color-*" variables outside of the components package.';
}
break;
}

return `Avoid "${ value }" for "${ property }".`;
},

@jsnajdr jsnajdr Oct 17, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the message function we don't need to perform the entire value test again, we only need to switch on the property name:

switch ( property ) {
  case 'flex-direction':
    return "Avoid -reverse";
  default:
    return "Avoid --wp-components-color-*";
}

},
],
'font-weight-notation': null,
Expand Down
Loading