From 2ea85da9c846ad0493f2627320ecf37c1e5db7ca Mon Sep 17 00:00:00 2001 From: Robin Cussol Date: Fri, 28 Jun 2024 13:38:45 +0200 Subject: [PATCH] chore(tokens): allow numbers as keys in tokens The change ensures we're correctly transforming the dot notation to access object properties when numbers are used as keys: 'foundations.borderRadius.50' is incorrect JavaScript; 'foundations.borderRadius["50"]' is valid JavaScript. --- .../src/dictionary/formatters/jsTokens.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/orbit-design-tokens/src/dictionary/formatters/jsTokens.ts b/packages/orbit-design-tokens/src/dictionary/formatters/jsTokens.ts index 50894a3ada..b2cff8b65e 100644 --- a/packages/orbit-design-tokens/src/dictionary/formatters/jsTokens.ts +++ b/packages/orbit-design-tokens/src/dictionary/formatters/jsTokens.ts @@ -117,7 +117,17 @@ const typescriptFactory = (allProperties: Dictionary["allProperties"], complete return createObjectProperty(name, `boxShadow(${boxShadowValue})`); } - return createObjectProperty(name, plainValue); + + /** + * This ensures tokens like 'foundations.borderRadius.50' + * will be correctly written as 'foundations.borderRadius["50"]' + * and be correct JavaScript code. + */ + const val = + typeof plainValue === "string" + ? plainValue.replace(/(\w+)\.(\d+)(?=\.|$)/g, '$1["$2"]') + : plainValue; + return createObjectProperty(name, val); }); const plainTokens = createValue(tokens, "javascript");