From 6b46c50b27c0f5303d0402a88f567e92a08f1dfe Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Thu, 22 May 2025 16:58:49 -0400 Subject: [PATCH 01/10] feat: Validation property values containing variables --- docs/rules/no-invalid-properties.md | 14 ++- src/rules/no-invalid-properties.js | 121 ++++++++++++++++++++-- tests/rules/no-invalid-properties.test.js | 89 ++++++++++++++++ 3 files changed, 214 insertions(+), 10 deletions(-) diff --git a/docs/rules/no-invalid-properties.md b/docs/rules/no-invalid-properties.md index 767a1010..369d8d4f 100644 --- a/docs/rules/no-invalid-properties.md +++ b/docs/rules/no-invalid-properties.md @@ -44,7 +44,19 @@ body { ### Limitations -This rule uses the lexer from [CSSTree](https://github.com/csstree/csstree), which does not support validation of property values that contain variable references (i.e., `var(--bg-color)`). The lexer throws an error when it comes across a variable reference, and rather than displaying that error, this rule ignores it. This unfortunately means that this rule cannot properly validate properties values that contain variable references. We'll continue to work towards a solution for this. +When a variable is used in a property value, such as `var(--my-color)`, this rule can only properly validate the value if the parser has already encountered the `--my-color` custom property. For example, this will validate correctly: + +```css +:root { + --my-color: red; +} + +a { + color: var(--my-color); +} +``` + +This code defines `--my-color` before it is used and therefore the rule can validate the `color` property. If `--my-color` was not defined before `var(--my-color)` was used, it results in a lint error because the validation cannot be completed. If the custom property is defined in another file, it's recommended to create a dummy rule just for the purpose of ensuring proper validation. ## When Not to Use It diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index d88de047..c83f57fe 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -15,10 +15,39 @@ import { isSyntaxMatchError } from "../util.js"; /** * @import { CSSRuleDefinition } from "../types.js" - * @typedef {"invalidPropertyValue" | "unknownProperty"} NoInvalidPropertiesMessageIds + * @import { ValuePlain, FunctionNodePlain, CssLocationRange } from "@eslint/css-tree"; + * @typedef {"invalidPropertyValue" | "unknownProperty" | "unknownVar"} NoInvalidPropertiesMessageIds * @typedef {CSSRuleDefinition<{ RuleOptions: [], MessageIds: NoInvalidPropertiesMessageIds }>} NoInvalidPropertiesRuleDefinition */ +//----------------------------------------------------------------------------- +// Helpers +//----------------------------------------------------------------------------- + +/** + * Replaces all instances of a search string with a replacement and tracks the offsets + * @param {string} text The text to perform replacements on + * @param {string} searchValue The string to search for + * @param {string} replaceValue The string to replace with + * @returns {{text: string, offsets: Array}} The updated text and array of offsets where replacements occurred + */ +function replaceWithOffsets(text, searchValue, replaceValue) { + const offsets = []; + let result = ""; + let lastIndex = 0; + let index; + + while ((index = text.indexOf(searchValue, lastIndex)) !== -1) { + result += text.slice(lastIndex, index); + result += replaceValue; + offsets.push(index); + lastIndex = index + searchValue.length; + } + + result += text.slice(lastIndex); + return { text: result, offsets }; +} + //----------------------------------------------------------------------------- // Rule Definition //----------------------------------------------------------------------------- @@ -38,26 +67,100 @@ export default { invalidPropertyValue: "Invalid value '{{value}}' for property '{{property}}'. Expected {{expected}}.", unknownProperty: "Unknown property '{{property}}' found.", + unknownVar: "Can't validate with unknown variable '{{var}}'.", }, }, create(context) { - const lexer = context.sourceCode.lexer; + const sourceCode = context.sourceCode; + const lexer = sourceCode.lexer; + + /** @type {Map} */ + const vars = new Map(); + + /** @type {Array>} */ + const replacements = []; return { - "Rule > Block > Declaration"(node) { - // don't validate custom properties + "Rule > Block > Declaration"() { + replacements.push(new Map()); + }, + + "Function[name=var]"(node) { + const map = replacements.at(-1); + if (!map) { + return; + } + + /* + * Store the custom property name and the function node + * so can use these to validate the value later. + */ + const name = node.children[0].name; + map.set(name, node); + }, + + "Rule > Block > Declaration:exit"(node) { if (node.property.startsWith("--")) { + // store the custom property name and value to validate later + vars.set(node.property, node.value); + + // don't validate custom properties return; } - const { error } = lexer.matchDeclaration(node); + const varsFound = replacements.pop(); + + /** @type {Map} */ + const varsFoundLocs = new Map(); + let value = node.value; + + if (varsFound?.size > 0) { + // need to use a text version of the value here + value = sourceCode.getText(node.value); + let offsets; + + // replace any custom properties with their values + for (const [name, func] of varsFound) { + const varValue = vars.get(name); + + if (varValue) { + ({ text: value, offsets } = replaceWithOffsets( + value, + `var(${name})`, + sourceCode.getText(varValue).trim(), + )); + + /* + * Store the offsets of the replacements so we can + * report the correct location of any validation error. + */ + offsets.forEach(offset => { + varsFoundLocs.set(offset, func.loc); + }); + } else { + context.report({ + loc: func.children[0].loc, + messageId: "unknownVar", + data: { + var: name, + }, + }); + + return; + } + } + } + + const { error } = lexer.matchProperty(node.property, value); if (error) { // validation failure if (isSyntaxMatchError(error)) { context.report({ - loc: error.loc, + loc: + varsFoundLocs.get(error.mismatchOffset) ?? + error.loc, messageId: "invalidPropertyValue", data: { property: node.property, @@ -76,9 +179,9 @@ export default { * https://github.com/csstree/csstree/issues/317 */ - if (error.message.endsWith("var() is not supported")) { - return; - } + // if (error.message.endsWith("var() is not supported")) { + // return; + // } // unknown property context.report({ diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index 6f3cfd00..463b339f 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/tests/rules/no-invalid-properties.test.js @@ -33,6 +33,7 @@ ruleTester.run("no-invalid-properties", rule, { "@font-face { font-weight: 100 400 }", '@property --foo { syntax: "*"; inherits: false; }', "a { --my-color: red; color: var(--my-color) }", + ":root { --my-color: red; }\na { color: var(--my-color) }", { code: "a { my-custom-color: red; }", languageOptions: { @@ -229,5 +230,93 @@ ruleTester.run("no-invalid-properties", rule, { }, ], }, + { + code: "a { color: var(--my-color); }", + errors: [ + { + messageId: "unknownVar", + data: { + var: "--my-color", + }, + line: 1, + column: 16, + endLine: 1, + endColumn: 26, + }, + ], + }, + { + code: "a { --my-color: 10px; color: var(--my-color); }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "color", + value: "10px", + expected: "", + }, + line: 1, + column: 30, + endLine: 1, + endColumn: 45, + }, + ], + }, + { + code: "a { --my-color: 10px; color: var(--my-color); background-color: var(--my-color); }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "color", + value: "10px", + expected: "", + }, + line: 1, + column: 30, + endLine: 1, + endColumn: 45, + }, + { + messageId: "invalidPropertyValue", + data: { + property: "background-color", + value: "10px", + expected: "", + }, + line: 1, + column: 65, + endLine: 1, + endColumn: 80, + }, + ], + }, + { + code: "a { --my-color: 10px; color: var(--my-color); background-color: var(--unknown-var); }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "color", + value: "10px", + expected: "", + }, + line: 1, + column: 30, + endLine: 1, + endColumn: 45, + }, + { + messageId: "unknownVar", + data: { + var: "--unknown-var", + }, + line: 1, + column: 69, + endLine: 1, + endColumn: 82, + }, + ], + }, ], }); From 89fdc2a925aecb72cb30d35a802c71e8945b0d9f Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Thu, 22 May 2025 17:02:13 -0400 Subject: [PATCH 02/10] Remove unnecessary comments --- src/rules/no-invalid-properties.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index c83f57fe..4dd181ae 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -171,18 +171,6 @@ export default { return; } - /* - * There's no current way to get lexing to work when a - * `var()` is present in a value. Rather than blowing up, - * we'll just ignore it. - * - * https://github.com/csstree/csstree/issues/317 - */ - - // if (error.message.endsWith("var() is not supported")) { - // return; - // } - // unknown property context.report({ loc: { From 9ccd9b62e2c5e52ab3f7c8f81e57bebcf711e2b5 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Thu, 22 May 2025 17:03:54 -0400 Subject: [PATCH 03/10] Fix grammar in docs --- docs/rules/no-invalid-properties.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/rules/no-invalid-properties.md b/docs/rules/no-invalid-properties.md index 369d8d4f..0681932b 100644 --- a/docs/rules/no-invalid-properties.md +++ b/docs/rules/no-invalid-properties.md @@ -44,7 +44,7 @@ body { ### Limitations -When a variable is used in a property value, such as `var(--my-color)`, this rule can only properly validate the value if the parser has already encountered the `--my-color` custom property. For example, this will validate correctly: +When a variable is used in a property value, such as `var(--my-color)`, the rule can only properly be validated if the parser has already encountered the `--my-color` custom property. For example, this will validate correctly: ```css :root { @@ -56,7 +56,9 @@ a { } ``` -This code defines `--my-color` before it is used and therefore the rule can validate the `color` property. If `--my-color` was not defined before `var(--my-color)` was used, it results in a lint error because the validation cannot be completed. If the custom property is defined in another file, it's recommended to create a dummy rule just for the purpose of ensuring proper validation. +This code defines `--my-color` before it is used and therefore the rule can validate the `color` property. If `--my-color` was not defined before `var(--my-color)` was used, it results in a lint error because the validation cannot be completed. + +If the custom property is defined in another file, it's recommended to create a dummy rule just for the purpose of ensuring proper validation. ## When Not to Use It From 07018316647967a6697e78dfca13bdd698d39b2e Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Fri, 23 May 2025 14:40:19 -0400 Subject: [PATCH 04/10] Clean up edge cases --- src/rules/no-invalid-properties.js | 13 ++++--- .../validate-language-options.test.js | 0 tests/rules/no-invalid-properties.test.js | 34 +++++++++++++++++++ 3 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 tests/languages/validate-language-options.test.js diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index 4dd181ae..35d5bab2 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -29,7 +29,8 @@ import { isSyntaxMatchError } from "../util.js"; * @param {string} text The text to perform replacements on * @param {string} searchValue The string to search for * @param {string} replaceValue The string to replace with - * @returns {{text: string, offsets: Array}} The updated text and array of offsets where replacements occurred + * @returns {{text: string, offsets: Array}} The updated text and array of offsets + * where replacements occurred */ function replaceWithOffsets(text, searchValue, replaceValue) { const offsets = []; @@ -113,9 +114,10 @@ export default { /** @type {Map} */ const varsFoundLocs = new Map(); + const usingVars = varsFound?.size > 0; let value = node.value; - if (varsFound?.size > 0) { + if (usingVars) { // need to use a text version of the value here value = sourceCode.getText(node.value); let offsets; @@ -158,9 +160,10 @@ export default { // validation failure if (isSyntaxMatchError(error)) { context.report({ - loc: - varsFoundLocs.get(error.mismatchOffset) ?? - error.loc, + loc: usingVars + ? (varsFoundLocs.get(error.mismatchOffset) ?? + node.value.loc) + : error.loc, messageId: "invalidPropertyValue", data: { property: node.property, diff --git a/tests/languages/validate-language-options.test.js b/tests/languages/validate-language-options.test.js new file mode 100644 index 00000000..e69de29b diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index 463b339f..2fef8495 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/tests/rules/no-invalid-properties.test.js @@ -318,5 +318,39 @@ ruleTester.run("no-invalid-properties", rule, { }, ], }, + { + code: "a { --width: 1px; border-top: var(--width) solid bar; }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "border-top", + value: "1px solid bar", + expected: " || || ", + }, + line: 1, + column: 31, + endLine: 1, + endColumn: 53, + }, + ], + }, + { + code: "a { --width: baz; --style: foo; border-top: var(--width) var(--style) bar; }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "border-top", + value: "baz foo bar", + expected: " || || ", + }, + line: 1, + column: 45, + endLine: 1, + endColumn: 57, + }, + ], + }, ], }); From e0892b7fc79272beb232c066657d58a13c44bcf4 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Tue, 27 May 2025 11:45:11 -0400 Subject: [PATCH 05/10] Better error message --- src/rules/no-invalid-properties.js | 20 +++++++++++++++++++- tests/rules/no-invalid-properties.test.js | 21 +++++++++++++++++++-- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index 35d5bab2..e8080e24 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -160,6 +160,12 @@ export default { // validation failure if (isSyntaxMatchError(error)) { context.report({ + /* + * When using variables, check to see if the error + * occurred at a location where a variable was replaced. + * If so, use that location; otherwise, use the error's + * reported location. + */ loc: usingVars ? (varsFoundLocs.get(error.mismatchOffset) ?? node.value.loc) @@ -167,7 +173,19 @@ export default { messageId: "invalidPropertyValue", data: { property: node.property, - value: error.css, + + /* + * When using variables, slice the value to + * only include the part that caused the error. + * Otherwise, use the full value from the error. + */ + value: usingVars + ? value.slice( + error.mismatchOffset, + error.mismatchOffset + + error.mismatchLength, + ) + : error.css, expected: error.syntax, }, }); diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index 2fef8495..6e86ad51 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/tests/rules/no-invalid-properties.test.js @@ -80,6 +80,23 @@ ruleTester.run("no-invalid-properties", rule, { }, ], }, + { + code: "a { border-top: 10px solid foo }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "border-top", + value: "10px solid foo", + expected: " || || ", + }, + line: 1, + column: 28, + endLine: 1, + endColumn: 31, + }, + ], + }, { code: "a { width: red }", errors: [ @@ -325,7 +342,7 @@ ruleTester.run("no-invalid-properties", rule, { messageId: "invalidPropertyValue", data: { property: "border-top", - value: "1px solid bar", + value: "bar", expected: " || || ", }, line: 1, @@ -342,7 +359,7 @@ ruleTester.run("no-invalid-properties", rule, { messageId: "invalidPropertyValue", data: { property: "border-top", - value: "baz foo bar", + value: "baz", expected: " || || ", }, line: 1, From 1a0c2c0507b69b97a683f9766cf4ac331271070c Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Wed, 28 May 2025 16:42:16 -0400 Subject: [PATCH 06/10] Update docs/rules/no-invalid-properties.md Co-authored-by: Nitin Kumar --- docs/rules/no-invalid-properties.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/rules/no-invalid-properties.md b/docs/rules/no-invalid-properties.md index 0681932b..d26e8aa3 100644 --- a/docs/rules/no-invalid-properties.md +++ b/docs/rules/no-invalid-properties.md @@ -58,7 +58,7 @@ a { This code defines `--my-color` before it is used and therefore the rule can validate the `color` property. If `--my-color` was not defined before `var(--my-color)` was used, it results in a lint error because the validation cannot be completed. -If the custom property is defined in another file, it's recommended to create a dummy rule just for the purpose of ensuring proper validation. +If the custom property is defined in another file, it's recommended to create a dummy rule just to ensure proper validation. ## When Not to Use It From b72191aaf9fba90c3af69f31c020644e9c9c1122 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Wed, 28 May 2025 16:58:34 -0400 Subject: [PATCH 07/10] Account for whitespace inside of var() --- src/rules/no-invalid-properties.js | 20 +++++++++++--------- tests/rules/no-invalid-properties.test.js | 1 + 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index e8080e24..44446975 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -25,24 +25,26 @@ import { isSyntaxMatchError } from "../util.js"; //----------------------------------------------------------------------------- /** - * Replaces all instances of a search string with a replacement and tracks the offsets + * Replaces all instances of a regex pattern with a replacement and tracks the offsets * @param {string} text The text to perform replacements on - * @param {string} searchValue The string to search for + * @param {string} varName The regex pattern string to search for * @param {string} replaceValue The string to replace with * @returns {{text: string, offsets: Array}} The updated text and array of offsets * where replacements occurred */ -function replaceWithOffsets(text, searchValue, replaceValue) { +function replaceWithOffsets(text, varName, replaceValue) { const offsets = []; let result = ""; let lastIndex = 0; - let index; - while ((index = text.indexOf(searchValue, lastIndex)) !== -1) { - result += text.slice(lastIndex, index); + const regex = new RegExp(`var\\(\\s*${varName}\\s*\\)`, "gu"); + let match; + + while ((match = regex.exec(text)) !== null) { + result += text.slice(lastIndex, match.index); result += replaceValue; - offsets.push(index); - lastIndex = index + searchValue.length; + offsets.push(match.index); + lastIndex = match.index + match[0].length; } result += text.slice(lastIndex); @@ -129,7 +131,7 @@ export default { if (varValue) { ({ text: value, offsets } = replaceWithOffsets( value, - `var(${name})`, + name, sourceCode.getText(varValue).trim(), )); diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index 6e86ad51..cbc3a806 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/tests/rules/no-invalid-properties.test.js @@ -34,6 +34,7 @@ ruleTester.run("no-invalid-properties", rule, { '@property --foo { syntax: "*"; inherits: false; }', "a { --my-color: red; color: var(--my-color) }", ":root { --my-color: red; }\na { color: var(--my-color) }", + ":root { --my-color: red; }\na { color: var( --my-color ) }", { code: "a { my-custom-color: red; }", languageOptions: { From c4f34ff9f62566a25b58723f66d9117651114888 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Wed, 28 May 2025 17:05:43 -0400 Subject: [PATCH 08/10] Update tests and add comments --- src/rules/no-invalid-properties.js | 7 ++++++- tests/rules/no-invalid-properties.test.js | 16 ++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index 44446975..2055ef97 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -81,7 +81,12 @@ export default { /** @type {Map} */ const vars = new Map(); - /** @type {Array>} */ + /** + * We need to track this as a stack because we can have nested + * rules that use the `var()` function, and we need to + * ensure that we validate the innermost rule first. + * @type {Array>} + */ const replacements = []; return { diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index cbc3a806..e60f31bc 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/tests/rules/no-invalid-properties.test.js @@ -35,6 +35,7 @@ ruleTester.run("no-invalid-properties", rule, { "a { --my-color: red; color: var(--my-color) }", ":root { --my-color: red; }\na { color: var(--my-color) }", ":root { --my-color: red; }\na { color: var( --my-color ) }", + ":root { --my-color: red;\n.foo { color: var(--my-color) }\n}", { code: "a { my-custom-color: red; }", languageOptions: { @@ -263,6 +264,21 @@ ruleTester.run("no-invalid-properties", rule, { }, ], }, + { + code: "a { .foo { color: var(--undefined-var); } }", + errors: [ + { + messageId: "unknownVar", + data: { + var: "--undefined-var", + }, + line: 1, + column: 23, + endLine: 1, + endColumn: 38, + }, + ], + }, { code: "a { --my-color: 10px; color: var(--my-color); }", errors: [ From 063819aca4068ab5140eb20d0e0859f6d5bf501c Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Mon, 9 Jun 2025 11:43:45 -0400 Subject: [PATCH 09/10] Remove unneeded file --- tests/languages/validate-language-options.test.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 tests/languages/validate-language-options.test.js diff --git a/tests/languages/validate-language-options.test.js b/tests/languages/validate-language-options.test.js deleted file mode 100644 index e69de29b..00000000 From 9236c41a7a555ae98e9a5b75bd5e1e63a8feeea5 Mon Sep 17 00:00:00 2001 From: "Nicholas C. Zakas" Date: Mon, 9 Jun 2025 12:05:37 -0400 Subject: [PATCH 10/10] Fix second variable reported location --- src/rules/no-invalid-properties.js | 8 +++++++- tests/rules/no-invalid-properties.test.js | 17 +++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/rules/no-invalid-properties.js b/src/rules/no-invalid-properties.js index 2055ef97..5b785395 100644 --- a/src/rules/no-invalid-properties.js +++ b/src/rules/no-invalid-properties.js @@ -42,8 +42,14 @@ function replaceWithOffsets(text, varName, replaceValue) { while ((match = regex.exec(text)) !== null) { result += text.slice(lastIndex, match.index); + + /* + * We need the offset of the replacement after other replacements have + * been made, so we push the current length of the result before appending + * the replacement value. + */ + offsets.push(result.length); result += replaceValue; - offsets.push(match.index); lastIndex = match.index + match[0].length; } diff --git a/tests/rules/no-invalid-properties.test.js b/tests/rules/no-invalid-properties.test.js index e60f31bc..1d77e5c8 100644 --- a/tests/rules/no-invalid-properties.test.js +++ b/tests/rules/no-invalid-properties.test.js @@ -386,5 +386,22 @@ ruleTester.run("no-invalid-properties", rule, { }, ], }, + { + code: "a { --width: 1px; border-top: var(--width) solid var(--width); }", + errors: [ + { + messageId: "invalidPropertyValue", + data: { + property: "border-top", + value: "1px", + expected: " || || ", + }, + line: 1, + column: 50, + endLine: 1, + endColumn: 62, + }, + ], + }, ], });