Stylelint: Migrate configuration from JSON to JavaScript format

.stylelintrc.js

@@ -0,0 +1,52 @@
+/** @type {import('stylelint').Config} */
+module.exports = {
+	extends: '@wordpress/stylelint-config/scss-stylistic',
+	rules: {
+		'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:
+					'Avoid the flex-direction reverse values. 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': [
+			{
+				'/.*/': [ '/--wp-components-color-/' ],
+			},
+			{
+				message:
+					'--wp-components-color-* variables are not ready to be used outside of the components package.',
+			},
+		],
+		'font-weight-notation': null,
+		'@stylistic/max-line-length': null,
+		'no-descending-specificity': null,
+		'property-disallowed-list': [
+			[ 'order' ],
+			{
+				message:
+					'Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction.',
+			},
+		],
+		'rule-empty-line-before': null,
+		'selector-class-pattern': null,
+		'value-keyword-case': null,
+		'scss/operator-no-unspaced': null,
+		'scss/selector-no-redundant-nesting-selector': null,
+		'scss/load-partial-extension': null,
+		'scss/no-global-function-names': null,
+		'scss/comment-no-empty': null,
+		'scss/at-extend-no-missing-placeholder': null,
+		'scss/operator-no-newline-after': null,
+		'scss/at-if-closing-brace-newline-after': null,
+		'scss/at-else-empty-line-before': null,
+		'scss/at-if-closing-brace-space-after': null,
+		'no-invalid-position-at-import-rule': null,
+	},
+	reportDescriptionlessDisables: true,
+};

docs/contributors/folder-structure.md

@@ -15,7 +15,7 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── .eslintignore
     ├── .prettierrc.js
     ├── .stylelintignore
-    ├── .stylelintrc.json
+    ├── .stylelintrc.js
     ├── .markdownlintignore
     ├── .npmpackagejsonlintrc.json
     ├── phpcs.xml.dist
@@ -76,8 +76,8 @@ The following snippet explains how the Gutenberg repository is structured omitti
     │   Set of documentation pages composing the [Block editor handbook](https://developer.wordpress.org/block-editor/).
     │
     ├── platform-docs
-    │   Documentation website targeted to non WordPress developers 
-    │   using Gutenberg in their own applications. 
+    │   Documentation website targeted to non WordPress developers
+    │   using Gutenberg in their own applications.
     │   Deployed on [https://wordpress.org/gutenberg-framework/](https://wordpress.org/gutenberg-framework/).
     │
     │

packages/components/.stylelintrc.js

@@ -1,6 +1,6 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
-	extends: '../../.stylelintrc.json',
+	extends: '../../.stylelintrc.js',
 	rules: {
 		'declaration-property-value-disallowed-list': [
 			{