Merge branch 'main' into font-synthesis-longhand

stylelint · Oct 7, 2023 · 9c8d9c5 · 9c8d9c5
2 parents 8fddced + 3374bb4
commit 9c8d9c5
Show file tree

Hide file tree

Showing 9 changed files with 338 additions and 5 deletions.
diff --git a/.changeset/shy-ghosts-report.md b/.changeset/shy-ghosts-report.md
@@ -0,0 +1,5 @@
+---
+"stylelint": minor
+---
+
+Added: `ignoreRules` to `max-nesting-depth`
diff --git a/.changeset/thirty-spiders-dance.md b/.changeset/thirty-spiders-dance.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `declaration-block-no-redundant-longhand-properties` false negatives for `overflow`, `overscroll-behavior`, `scroll-margin`, `scroll-padding`, and new Box Alignment shorthands
diff --git a/lib/reference/properties.js b/lib/reference/properties.js
@@ -259,6 +259,14 @@ const longhandSubPropertiesOfShorthandProperties = new Map([
 			'font-synthesis-small-caps',
 		]),
 	],
+	[
+		'gap',
+		new Set([
+			// prettier-ignore
+			'row-gap',
+			'column-gap',
+		]),
+	],
 	[
 		'grid',
 		new Set([
@@ -400,6 +408,22 @@ const longhandSubPropertiesOfShorthandProperties = new Map([
 			'outline-width',
 		]),
 	],
+	[
+		'overflow',
+		new Set([
+			// prettier-ignore
+			'overflow-x',
+			'overflow-y',
+		]),
+	],
+	[
+		'overscroll-behavior',
+		new Set([
+			// prettier-ignore
+			'overscroll-behavior-x',
+			'overscroll-behavior-y',
+		]),
+	],
 	[
 		'padding',
 		new Set([
@@ -426,6 +450,40 @@ const longhandSubPropertiesOfShorthandProperties = new Map([
 			'padding-inline-end',
 		]),
 	],
+	[
+		'place-content',
+		new Set([
+			// prettier-ignore
+			'align-content',
+			'justify-content',
+		]),
+	],
+	[
+		'place-items',
+		new Set([
+			// prettier-ignore
+			'align-items',
+			'justify-items',
+		]),
+	],
+	[
+		'place-self',
+		new Set([
+			// prettier-ignore
+			'align-self',
+			'justify-self',
+		]),
+	],
+	[
+		'scroll-margin',
+		new Set([
+			// prettier-ignore
+			'scroll-margin-top',
+			'scroll-margin-right',
+			'scroll-margin-bottom',
+			'scroll-margin-left',
+		]),
+	],
 	[
 		'scroll-margin-block',
 		new Set([
@@ -442,6 +500,16 @@ const longhandSubPropertiesOfShorthandProperties = new Map([
 			'scroll-margin-inline-end',
 		]),
 	],
+	[
+		'scroll-padding',
+		new Set([
+			// prettier-ignore
+			'scroll-padding-top',
+			'scroll-padding-right',
+			'scroll-padding-bottom',
+			'scroll-padding-left',
+		]),
+	],
 	[
 		'scroll-padding-block',
 		new Set([

diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/README.md b/lib/rules/declaration-block-no-redundant-longhand-properties/README.md
@@ -50,6 +50,7 @@ This rule complains when the following shorthand properties can be used:
 - `flex-flow`
 - `font`
 - `font-synthesis`
+- `gap`
 - `grid`
 - `grid-area`
 - `grid-column`
@@ -65,11 +66,18 @@ This rule complains when the following shorthand properties can be used:
 - `margin-inline`
 - `mask`
 - `outline`
+- `overflow`
+- `overscroll-behavior`
 - `padding`
 - `padding-block`
 - `padding-inline`
+- `place-content`
+- `place-items`
+- `place-self`
+- `scroll-margin`
 - `scroll-margin-block`
 - `scroll-margin-inline`
+- `scroll-padding`
 - `scroll-padding-block`
 - `scroll-padding-inline`
 - `text-decoration`

diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.mjs b/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.mjs
@@ -63,8 +63,8 @@ testRule({
 
 	reject: [
 		{
-			code: 'a { margin-left: 10px; margin-right: 10px; margin-top: 20px; margin-bottom: 30px; }',
-			fixed: 'a { margin: 20px 10px 30px 10px; }',
+			code: 'a { margin-left: 40px; margin-right: 10px; margin-top: 20px; margin-bottom: 30px; }',
+			fixed: 'a { margin: 20px 10px 30px 40px; }',
 			message: messages.expected('margin'),
 			line: 1,
 			column: 62,
@@ -325,6 +325,54 @@ testRule({
 			description: 'font-synthesis - invalid value cannot be combined',
 			message: messages.expected('font-synthesis'),
 		},
+		{
+			code: 'div { overflow-y: visible; overflow-x: hidden; }',
+			fixed: 'div { overflow: hidden visible; }',
+			description: 'explicit overflow test',
+			message: messages.expected('overflow'),
+		},
+		{
+			code: 'div { overscroll-behavior-y: contain; overscroll-behavior-x: auto; }',
+			fixed: 'div { overscroll-behavior: auto contain; }',
+			description: 'explicit overscroll-behavior test',
+			message: messages.expected('overscroll-behavior'),
+		},
+		{
+			code: 'div { column-gap: 20px; row-gap: 10px; }',
+			fixed: 'div { gap: 10px 20px; }',
+			description: 'explicit gap test',
+			message: messages.expected('gap'),
+		},
+		{
+			code: 'div { justify-content: center; align-content: end; }',
+			fixed: 'div { place-content: end center; }',
+			description: 'explicit place-content test',
+			message: messages.expected('place-content'),
+		},
+		{
+			code: 'div { justify-items: center; align-items: end; }',
+			fixed: 'div { place-items: end center; }',
+			description: 'explicit place-items test',
+			message: messages.expected('place-items'),
+		},
+		{
+			code: 'div { justify-self: center; align-self: end; }',
+			fixed: 'div { place-self: end center; }',
+			description: 'explicit place-self test',
+			message: messages.expected('place-self'),
+		},
+		{
+			code: 'a { scroll-margin-left: 40px; scroll-margin-right: 10px; scroll-margin-top: 20px; scroll-margin-bottom: 30px; }',
+			fixed: 'a { scroll-margin: 20px 10px 30px 40px; }',
+			description: 'explicit scroll-margin test',
+			message: messages.expected('scroll-margin'),
+		},
+		{
+			code: 'a { scroll-padding-left: 40px; scroll-padding-right: 10px; scroll-padding-top: 20px; scroll-padding-bottom: 30px; }',
+			fixed: 'a { scroll-padding: 20px 10px 30px 40px; }',
+			description: 'explicit scroll-padding test',
+			message: messages.expected('scroll-padding'),
+		},
 	],
 });
 

diff --git a/lib/rules/max-nesting-depth/README.md b/lib/rules/max-nesting-depth/README.md
@@ -413,3 +413,61 @@ a {
   }
 }
 ```
+
+### `ignoreRules: ["/regex/", /regex/, "string"]`
+
+Ignore rules matching with the specified selectors.
+
+For example, with `1` and given:
+
+```json
+[".my-selector", "/^.ignored-sel/"]
+```
+
+The following patterns are _not_ considered problems:
+
+<!-- prettier-ignore -->
+```css
+a {
+  .my-selector {   /* ignored */
+    b {      /* 1 */
+      top: 0;
+    }
+  }
+}
+```
+
+<!-- prettier-ignore -->
+```css
+a {
+  .my-selector, .ignored-selector { /* ignored */
+    b {              /* 1 */
+      top: 0;
+    }
+  }
+}
+```
+
+The following patterns are considered problems:
+
+<!-- prettier-ignore -->
+```css
+a {
+  .not-ignored-selector { /* 1 */
+    b {      /* 2 */
+      top: 0;
+    }
+  }
+}
+```
+
+<!-- prettier-ignore -->
+```css
+a {
+  .my-selector, .not-ignored-selector { /* 1 */
+    b {               /* 2 */
+      top: 0;
+    }
+  }
+}
+```
diff --git a/lib/rules/max-nesting-depth/__tests__/index.mjs b/lib/rules/max-nesting-depth/__tests__/index.mjs
@@ -270,6 +270,113 @@ testRule({
 	],
 });
 
+testRule({
+	ruleName,
+	config: [1, { ignoreRules: [/^.some-sel/, '.my-selector'] }],
+
+	accept: [
+		{
+			code: 'a { b { top: 0; }}',
+			description: 'No ignored selector',
+		},
+		{
+			code: 'a { b { .my-selector { top: 0; }}}',
+			description: 'One ignored selector, ignored selector deepest',
+		},
+		{
+			code: 'a { b { .my-selector { .some-selector { top: 0; }}}}',
+			description: 'Many ignored selectors',
+		},
+		{
+			code: 'a { .some-selector { b { top: 0; }}}',
+			description: 'One ignored selector, ignored selector in the middle of tree',
+		},
+		{
+			code: 'a { b { .some-selector { .some-sel { .my-selector { top: 0; }}}}}',
+			description: 'Many ignored selectors, ignored selectors in the middle of tree',
+		},
+		{
+			code: 'a { .some-sel { .my-selector { top: 0; b { bottom: 0; }}}}',
+			description:
+				'Many ignored selectors, ignored selectors in the middle of tree, one block has property and block',
+		},
+		{
+			code: 'a { b { .my-selector, .some-sel { top: 0; }}}',
+			description: 'One selector has only ignored rules',
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { b { .my-selector c { top: 0; }}}',
+			message: messages.expected(1),
+			description: 'One selector has an ignored rule alongside not ignored rule',
+		},
+		{
+			code: 'a { b { c { top: 0; }}}',
+			message: messages.expected(1),
+			description: 'No ignored selectors',
+		},
+		{
+			code: 'a { .my-selector { b { c { top: 0; }}}}',
+			message: messages.expected(1),
+			description: 'One ignored selector',
+		},
+		{
+			code: 'a { b { .some-sel { .my-selector { .some-selector { c { top: 0; }}}}}}',
+			message: messages.expected(1),
+			description: 'Many ignored selectors, but even with ignoring depth is too much',
+		},
+		{
+			code: 'a { b { .not-ignore-selector { color: #64FFDA; }}}',
+			message: messages.expected(1),
+			description: 'Not ignored selector',
+		},
+		{
+			code: 'a { b { .my-selector, c { top: 0; }}}',
+			message: messages.expected(1),
+			description:
+				'One selector has an ignored rule alongside not ignored rule, shorthand and same property',
+		},
+		{
+			code: stripIndent`
+				.foo {
+					.baz {
+						.my-selector {
+							opacity: 0.4;
+						}
+						.bar {
+							color: red;
+						}
+					}
+				}`,
+			message: messages.expected(1),
+			description:
+				'One selector has an ignored rule alongside not ignored rule, different properties',
+			line: 6,
+			column: 3,
+		},
+	],
+});
+
+testRule({
+	ruleName,
+	config: [
+		1,
+		{
+			ignoreRules: [/^.some-sel/, '.my-selector'],
+			ignorePseudoClasses: ['hover', '/^--custom-.*$/'],
+		},
+	],
+
+	accept: [
+		{
+			code: 'a { &:--custom-pseudo, .my-selector { b { top: 0; } } }',
+			description: 'ignored pseudo-class alongside ignored selector',
+		},
+	],
+});
+
 testRule({
 	ruleName,
 	config: [1],