Fix declaration-block-no-redundant-longhand-properties false negati…

…ve for `font-synthesis` (#7214) Note: `font-synthesis` actually supports *four* longhand properties. However, `font-synthesis-position` currently has [**0.41%** adoption according to caniuse](https://caniuse.com/mdn-css_properties_font-synthesis-position), which is far too small for it to be relevant. I've elected to not include it for now; however, we could also include it if we think that better future-proofs the rule? --------- Co-authored-by: Masafumi Koba <473530+ybiquitous@users.noreply.github.com>
stylelint · Oct 9, 2023 · dfd1ffc · dfd1ffc
1 parent 3374bb4
commit dfd1ffc
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 0 deletions.
diff --git a/.changeset/wicked-lions-wash.md b/.changeset/wicked-lions-wash.md
@@ -0,0 +1,5 @@
+---
+"stylelint": patch
+---
+
+Fixed: `declaration-block-no-redundant-longhand-properties` false negative for `font-synthesis`
diff --git a/lib/reference/properties.js b/lib/reference/properties.js
@@ -250,6 +250,15 @@ const longhandSubPropertiesOfShorthandProperties = new Map([
 			'font-family',
 		]),
 	],
+	[
+		'font-synthesis',
+		new Set([
+			// prettier-ignore
+			'font-synthesis-weight',
+			'font-synthesis-style',
+			'font-synthesis-small-caps',
+		]),
+	],
 	[
 		'gap',
 		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
@@ -49,6 +49,7 @@ This rule complains when the following shorthand properties can be used:
 - `flex`
 - `flex-flow`
 - `font`
+- `font-synthesis`
 - `gap`
 - `grid`
 - `grid-area`

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
@@ -301,6 +301,30 @@ testRule({
 			description: 'explicit border-inline test',
 			message: messages.expected('border-inline'),
 		},
+		{
+			code: 'a { font-synthesis-weight: none; font-synthesis-style: none; font-synthesis-small-caps: none; }',
+			fixed: 'a { font-synthesis: none; }',
+			description: 'font-synthesis - all none',
+			message: messages.expected('font-synthesis'),
+		},
+		{
+			code: 'a { font-synthesis-weight: auto; font-synthesis-style: auto; font-synthesis-small-caps: auto; }',
+			fixed: 'a { font-synthesis: weight style small-caps; }',
+			description: 'font-synthesis - all auto',
+			message: messages.expected('font-synthesis'),
+		},
+		{
+			code: 'a { font-synthesis-weight: auto; font-synthesis-style: none; font-synthesis-small-caps: auto; }',
+			fixed: 'a { font-synthesis: weight small-caps; }',
+			description: 'font-synthesis - mixed',
+			message: messages.expected('font-synthesis'),
+		},
+		{
+			code: 'a { font-synthesis-weight: aut3; font-synthesis-style: none; font-synthesis-small-caps: auto; }',
+			unfixable: true,
+			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; }',

diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/index.js b/lib/rules/declaration-block-no-redundant-longhand-properties/index.js
@@ -28,6 +28,43 @@ const meta = {
 
 /** @type {Map<string, (decls: Map<string, Declaration>) => (string | undefined)>} */
 const customResolvers = new Map([
+	[
+		'font-synthesis',
+		(decls) => {
+			const weight = decls.get('font-synthesis-weight')?.value.trim();
+			const style = decls.get('font-synthesis-style')?.value.trim();
+			const smallCaps = decls.get('font-synthesis-small-caps')?.value.trim();
+
+			/** @type {(s: string | undefined) => boolean} */
+			const isValidFontSynthesisValue = (s) => s === 'none' || s === 'auto';
+
+			if (
+				!isValidFontSynthesisValue(weight) ||
+				!isValidFontSynthesisValue(style) ||
+				!isValidFontSynthesisValue(smallCaps)
+			) {
+				return;
+			}
+
+			const autoShorthands = [];
+
+			if (weight === 'auto') {
+				autoShorthands.push('weight');
+			}
+
+			if (style === 'auto') {
+				autoShorthands.push('style');
+			}
+
+			if (smallCaps === 'auto') {
+				autoShorthands.push('small-caps');
+			}
+
+			if (autoShorthands.length === 0) return 'none';
+
+			return autoShorthands.join(' ');
+		},
+	],
 	[
 		'grid-column',
 		(decls) => {

diff --git a/types/stylelint/index.d.ts b/types/stylelint/index.d.ts
@@ -462,6 +462,7 @@ declare namespace stylelint {
 		| 'flex'
 		| 'flex-flow'
 		| 'font'
+		| 'font-synthesis'
 		| 'gap'
 		| 'grid'
 		| 'grid-area'