Stylelint: Migrate configuration from JSON to JavaScript format

[im3dabasia]

What?

Closes #63090

Convert Stylelint configuration from JSON to JavaScript format to enable custom rule messages

Why?

As our Stylelint rules expand, we need more flexible configuration options. The current JSON format is limiting our ability to provide clear, specific messages for each rule violation.

As noted by @mirka in #63048, converting to JavaScript format will allow us to configure the message property as a function, providing different warning messages for each violation type. This requires at least Stylelint version 14.5.0 which supports this feature. (Current Stylelint version is 16.8.2 in GB).

How?

1. Converts .stylelintrc.json to .stylelintrc.js
2. Maintains all existing rules while enabling enhanced configuration options

[github-actions]

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 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: afercia <[email protected]>

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

[im3dabasia]

Hi @mirka ,

When you have a moment please review my PR.

Looking forward for your feedbacks.

cc: @t-hamano

[t-hamano]

I think this is a great enhancement. It will also be possible to add complex custom rules.

We could make the message more specific as a follow-up:

module.exports = {
	rules: {
		'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.`,
			},
		],
	},
};

Nit: Can you update this too?

gutenberg/docs/contributors/folder-structure.md

Line 18 in 75bafad

├── .stylelintrc.json

[Copilot]

Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.

Files not reviewed (1)

• .stylelintrc.json: Language not supported

[im3dabasia]

We could make the message more specific as a follow-up:

Well noted, once this PR is shipped. I will create a follow-up targeting the specific enhancement issue. As suggested earlier in this comment #63048 (comment).

stylelintrc.json

I have fixed this now.

Thanks @t-hamano for the review.