Skip to content

Stylelint: Customise warning message for flex-direction warning #70057

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.

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

Merged
merged 1 commit into from
May 6, 2025

Conversation

im3dabasia
Copy link
Contributor

What?

Followup: #69590 (review)

The warning message shown previously was static. This PR aims to make the Stylelint warning related to non-usage of row-reverse/column-reverse in flex-direction dynamic. This would improve the warnings and make them dynamic. first suggested in this issue #63090

Originally reported here:

Quoting insightful feedback from @mirka on #63048 (comment):

we'll probably want to convert the .stylelintrc.json to a .stylelintrc.js at this point, so we can configure the message as a function to show different warning messages for each violation. It looks like we'll also need to update our stylelint dependency to achieve that. Our repo is at stylelint 14.2, whereas the feature we need is available from 14.5.0.

How?

After the Stylelint configuration was updated to JavaScript via #69590, now custom warnings can be shown for custom rules.

Testing Instructions

  1. Checkout any file which already has a flex-direction property.
  2. Change the property from row/column to row-reverse/column-reverse. In short append reverse.
  3. See if the warnings are dynamic.

Screencast

Before

Screen.Recording.2025-05-05.at.4.54.50.PM.mov

After

Screen.Recording.2025-05-05.at.5.03.35.PM.mov

Copy link

github-actions bot commented May 5, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Code Quality Issues or PRs that relate to code quality [Tool] stylelint config /packages/stylelint-config labels May 6, 2025
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for the follow-up.

@t-hamano t-hamano added the props-bot Adding this label triggers the Props Bot workflow for a PR. label May 6, 2025
@github-actions github-actions bot removed the props-bot Adding this label triggers the Props Bot workflow for a PR. label May 6, 2025
@t-hamano t-hamano merged commit 0fa123b into WordPress:trunk May 6, 2025
69 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.9 milestone May 6, 2025
@im3dabasia
Copy link
Contributor Author

LGTM! Thanks for the follow-up.

Thanks for the review @t-hamano ,

We have one more rule for Stylelint in packages/components which prevents use of --wp-components-color-* variables outside packages/components. Since its a related change I think its a good time to get this rule display dynamic warnings like this:

image
'declaration-property-value-disallowed-list': [
	{
		'/.*/': [ '/--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.`,
	},
],

I was wondering we can update this message as well, looking forward to your thoughts.

@t-hamano
Copy link
Contributor

t-hamano commented May 8, 2025

I was wondering we can update this message as well, looking forward to your thoughts.

Nice idea, feel free to ping me if a PR is ready👍

chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Tool] stylelint config /packages/stylelint-config [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants