From dbfc4088115d7c2f7c07d36e3059ae61b8a71976 Mon Sep 17 00:00:00 2001 From: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> Date: Tue, 8 Mar 2022 18:26:49 +0900 Subject: [PATCH] Fix column position for `font-family-name-quotes` rule (#5955) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change fixes a column position of a `font-family-name-quotes` problem to include quotes. ```css a { font-family: "Arial"; } /* Before: ↑ */ a { font-family: "Arial"; } /* After: ↑ */ ``` --- .../__tests__/index.js | 94 +++++++++---------- lib/rules/font-family-name-quotes/index.js | 29 +++--- 2 files changed, 62 insertions(+), 61 deletions(-) diff --git a/lib/rules/font-family-name-quotes/__tests__/index.js b/lib/rules/font-family-name-quotes/__tests__/index.js index b8407d6a0d..545984b608 100644 --- a/lib/rules/font-family-name-quotes/__tests__/index.js +++ b/lib/rules/font-family-name-quotes/__tests__/index.js @@ -92,19 +92,19 @@ testRule({ code: 'a { font-family: "Lucida Grande", "Arial", "sans-serif"; }', message: messages.rejected('sans-serif'), line: 1, - column: 45, + column: 44, }, { code: 'a { font: 1em "Lucida Grande", "Arial", "sans-serif"; }', message: messages.rejected('sans-serif'), line: 1, - column: 42, + column: 41, }, { code: 'a { fOnT-fAmIlY: "Lucida Grande", "Arial", "sans-serif"; }', message: messages.rejected('sans-serif'), line: 1, - column: 45, + column: 44, }, { code: 'a { font-family: Lucida Grande, "Arial", sans-serif; }', @@ -121,18 +121,26 @@ testRule({ { code: 'a { font-family: "inherit"; }', message: messages.rejected('inherit'), + line: 1, + column: 18, }, { code: "a { font-family: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; }", message: messages.rejected('system-ui'), + line: 1, + column: 18, }, { code: "a { font-family: system-ui, '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; }", message: messages.rejected('-apple-system'), + line: 1, + column: 29, }, { code: "a { font-family: system-ui, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', sans-serif; }", message: messages.rejected('BlinkMacSystemFont'), + line: 1, + column: 44, }, { code: 'a { font: italic 300 16px/30px Arial, serif; }', @@ -255,43 +263,61 @@ testRule({ code: 'a { font-family: "Lucida Grande", Arial, "sans-serif"; }', message: messages.rejected('sans-serif'), line: 1, - column: 43, + column: 42, }, { code: 'a { font-family: Red/Black, Arial, sans-serif; }', message: messages.expected('Red/Black'), + line: 1, + column: 18, }, { code: 'a { font-family: Arial, Ahem!, sans-serif; }', message: messages.expected('Ahem!'), + line: 1, + column: 25, }, { code: 'a { font-family: Hawaii 5-0, Arial, sans-serif; }', message: messages.expected('Hawaii 5-0'), + line: 1, + column: 18, }, { code: 'a { font-family: Times, Times New Roman, serif; }', message: messages.expected('Times New Roman'), + line: 1, + column: 25, }, { code: 'a { font-family: Something6; }', message: messages.expected('Something6'), + line: 1, + column: 18, }, { code: 'a { font-family: snake_case; }', message: messages.expected('snake_case'), + line: 1, + column: 18, }, { code: 'a { font-family: "Arial"; }', message: messages.rejected('Arial'), + line: 1, + column: 18, }, { code: "a { font-family: '-apple-system', BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }", message: messages.rejected('-apple-system'), + line: 1, + column: 18, }, { code: "a { font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', Roboto, sans-serif; }", message: messages.rejected('BlinkMacSystemFont'), + line: 1, + column: 33, }, ], }); @@ -342,51 +368,61 @@ testRule({ code: 'a { font: 1em "Lucida Grande", Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), line: 1, - column: 16, + column: 15, }, { code: 'a { font-family: "Lucida Grande", Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), line: 1, - column: 19, + column: 18, }, { code: 'a { fOnT-fAmIlY: "Lucida Grande", Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), line: 1, - column: 19, + column: 18, }, { code: 'a { FONT-FAMILY: "Lucida Grande", Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), line: 1, - column: 19, + column: 18, }, { code: 'a { font-family: Lucida Grande, Arial, "sans-serif"; }', message: messages.rejected('sans-serif'), line: 1, - column: 41, + column: 40, }, { code: 'a { font-family: Red/Black, Arial, sans-serif; }', message: messages.expected('Red/Black'), + line: 1, + column: 18, }, { code: 'a { font-family: Arial, Ahem!, sans-serif; }', message: messages.expected('Ahem!'), + line: 1, + column: 25, }, { code: 'a { font-family: Hawaii 5-0, Arial, sans-serif; }', message: messages.expected('Hawaii 5-0'), + line: 1, + column: 18, }, { code: "a { font-family: '-apple-system', BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; }", message: messages.rejected('-apple-system'), + line: 1, + column: 18, }, { code: "a { font-family: -apple-system, 'BlinkMacSystemFont', Segoe UI, Roboto, sans-serif; }", message: messages.rejected('BlinkMacSystemFont'), + line: 1, + column: 33, }, ], }); @@ -400,36 +436,26 @@ testRule({ code: 'a { font-family: "Lucida Grande", "Arial", "sans-serif"; }', fixed: 'a { font-family: "Lucida Grande", "Arial", sans-serif; }', message: messages.rejected('sans-serif'), - line: 1, - column: 45, }, { code: 'a { font: 1em "Lucida Grande", "Arial", "sans-serif"; }', fixed: 'a { font: 1em "Lucida Grande", "Arial", sans-serif; }', message: messages.rejected('sans-serif'), - line: 1, - column: 42, }, { code: 'a { fOnT-fAmIlY: "Lucida Grande", "Arial", "sans-serif"; }', fixed: 'a { fOnT-fAmIlY: "Lucida Grande", "Arial", sans-serif; }', message: messages.rejected('sans-serif'), - line: 1, - column: 45, }, { code: 'a { font-family: Lucida Grande, "Arial", sans-serif; }', fixed: 'a { font-family: "Lucida Grande", "Arial", sans-serif; }', message: messages.expected('Lucida Grande'), - line: 1, - column: 18, }, { code: "a { font-family: 'Lucida Grande', Arial, sans-serif; }", fixed: 'a { font-family: \'Lucida Grande\', "Arial", sans-serif; }', message: messages.expected('Arial'), - line: 1, - column: 35, }, { code: 'a { font-family: "inherit"; }', @@ -458,36 +484,26 @@ testRule({ code: 'a { font: italic 300 16px/30px Arial, serif; }', fixed: 'a { font: italic 300 16px/30px "Arial", serif; }', message: messages.expected('Arial'), - line: 1, - column: 32, }, { code: 'a { font: italic 1000 16px/30px Arial, serif; }', fixed: 'a { font: italic 1000 16px/30px "Arial", serif; }', message: messages.expected('Arial'), - line: 1, - column: 33, }, { code: 'a { font: italic 892 16px/30px Arial, serif; }', fixed: 'a { font: italic 892 16px/30px "Arial", serif; }', message: messages.expected('Arial'), - line: 1, - column: 32, }, { code: 'a { font-family: \u1100; }', fixed: 'a { font-family: "\u1100"; }', message: messages.expected('\u1100'), - line: 1, - column: 18, }, { code: 'a { font-family: ሀ; }', fixed: 'a { font-family: "ሀ"; }', message: messages.expected('ሀ'), - line: 1, - column: 18, }, { code: "a { font-family: -apple-system, Hawaii 5-0, 'BlinkMacSystemFont', Segoe UI, 'Roboto', 'sans-serif'; }", @@ -514,36 +530,26 @@ testRule({ code: 'a { font: 1em Lucida Grande, Arial, sans-serif; }', fixed: 'a { font: 1em "Lucida Grande", Arial, sans-serif; }', message: messages.expected('Lucida Grande'), - line: 1, - column: 15, }, { code: 'a { font-family: Lucida Grande, Arial, sans-serif; }', fixed: 'a { font-family: "Lucida Grande", Arial, sans-serif; }', message: messages.expected('Lucida Grande'), - line: 1, - column: 18, }, { code: 'a { fOnT-fAmIlY: Lucida Grande, Arial, sans-serif; }', fixed: 'a { fOnT-fAmIlY: "Lucida Grande", Arial, sans-serif; }', message: messages.expected('Lucida Grande'), - line: 1, - column: 18, }, { code: 'a { FONT-FAMILY: Lucida Grande, Arial, sans-serif; }', fixed: 'a { FONT-FAMILY: "Lucida Grande", Arial, sans-serif; }', message: messages.expected('Lucida Grande'), - line: 1, - column: 18, }, { code: 'a { font-family: "Lucida Grande", Arial, "sans-serif"; }', fixed: 'a { font-family: "Lucida Grande", Arial, sans-serif; }', message: messages.rejected('sans-serif'), - line: 1, - column: 43, }, { code: 'a { font-family: Red/Black, Arial, sans-serif; }', @@ -618,36 +624,26 @@ testRule({ code: 'a { font: 1em "Lucida Grande", Arial, sans-serif; }', fixed: 'a { font: 1em Lucida Grande, Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), - line: 1, - column: 16, }, { code: 'a { font-family: "Lucida Grande", Arial, sans-serif; }', fixed: 'a { font-family: Lucida Grande, Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), - line: 1, - column: 19, }, { code: 'a { fOnT-fAmIlY: "Lucida Grande", Arial, sans-serif; }', fixed: 'a { fOnT-fAmIlY: Lucida Grande, Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), - line: 1, - column: 19, }, { code: 'a { FONT-FAMILY: "Lucida Grande", Arial, sans-serif; }', fixed: 'a { FONT-FAMILY: Lucida Grande, Arial, sans-serif; }', message: messages.rejected('Lucida Grande'), - line: 1, - column: 19, }, { code: 'a { font-family: Lucida Grande, Arial, "sans-serif"; }', fixed: 'a { font-family: Lucida Grande, Arial, sans-serif; }', message: messages.rejected('sans-serif'), - line: 1, - column: 41, }, { code: 'a { font-family: Red/Black, Arial, sans-serif; }', diff --git a/lib/rules/font-family-name-quotes/index.js b/lib/rules/font-family-name-quotes/index.js index ee43fc5ec7..32f8542655 100644 --- a/lib/rules/font-family-name-quotes/index.js +++ b/lib/rules/font-family-name-quotes/index.js @@ -63,8 +63,10 @@ function quotesRequired(family) { /** * @typedef {{ * name: string, + * rawName: string, * hasQuotes: boolean, * sourceIndex: number, + * resetIndexes: (offset: number) => void, * removeQuotes: () => void, * addQuotes: () => void, * }} MutableNode @@ -83,11 +85,16 @@ const makeMutableFontFamilies = (fontFamilies, decl) => { const mutableNodes = []; fontFamilies.forEach((fontFamily, idx) => { + const quote = 'quote' in fontFamily && fontFamily.quote; + const name = fontFamily.value; + + /** @type {MutableNode} */ const newNode = { - name: fontFamily.value, + name, + rawName: quote ? `${quote}${name}${quote}` : name, sourceIndex: fontFamily.sourceIndex, - hasQuotes: 'quote' in fontFamily, - resetIndexes: (/** @type {number} */ offset) => { + hasQuotes: Boolean(quote), + resetIndexes(offset) { mutableNodes.slice(idx + 1).forEach((n) => (n.sourceIndex += offset)); }, removeQuotes() { @@ -149,9 +156,7 @@ const rule = (primary, _secondary, context) => { * @param {import('postcss').Declaration} decl */ function checkFamilyName(fontFamilyNode, decl) { - const hasQuotes = fontFamilyNode.hasQuotes; - const family = fontFamilyNode.name; - const rawFamily = hasQuotes ? `"${family}"` : family; + const { name: family, rawName: rawFamily, hasQuotes } = fontFamilyNode; if (!isStandardSyntaxValue(rawFamily)) { return; @@ -171,7 +176,7 @@ const rule = (primary, _secondary, context) => { return; } - return complain(messages.rejected(family), family, decl); + return complain(messages.rejected(family), rawFamily, decl); } return; @@ -189,7 +194,7 @@ const rule = (primary, _secondary, context) => { return; } - return complain(messages.expected(family), family, decl); + return complain(messages.expected(family), rawFamily, decl); } return; @@ -202,7 +207,7 @@ const rule = (primary, _secondary, context) => { return; } - return complain(messages.rejected(family), family, decl); + return complain(messages.rejected(family), rawFamily, decl); } if (recommended && !hasQuotes) { @@ -212,7 +217,7 @@ const rule = (primary, _secondary, context) => { return; } - return complain(messages.expected(family), family, decl); + return complain(messages.expected(family), rawFamily, decl); } return; @@ -225,7 +230,7 @@ const rule = (primary, _secondary, context) => { return; } - return complain(messages.rejected(family), family, decl); + return complain(messages.rejected(family), rawFamily, decl); } if (required && !hasQuotes) { @@ -235,7 +240,7 @@ const rule = (primary, _secondary, context) => { return; } - return complain(messages.expected(family), family, decl); + return complain(messages.expected(family), rawFamily, decl); } } }