From 4fbd75cdcfb14c80c98434e05ffe3893e3f82450 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Fri, 23 Feb 2024 15:56:14 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(tokens)=20fix=20invalid=20sass=20w?= =?UTF-8?q?ith=20comma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The generated sass from tokens containing commas, like font families was not valid due to the way maps are made in sass. So we wrap those value in quotes. --- .changeset/lazy-clocks-agree.md | 5 +++++ packages/react/src/cunningham-tokens.scss | 12 ++++++------ .../src/bin/Generators/CssGenerator.spec.ts | 4 ++-- .../src/bin/Generators/JsGenerator.spec.ts | 2 +- .../src/bin/Generators/SassGenerator.spec.ts | 4 ++-- .../tokens/src/bin/Generators/SassGenerator.ts | 17 +++++++++++++++-- .../src/bin/Generators/TsGenerator.spec.ts | 2 +- packages/tokens/src/bin/__mocks__/cunningham.ts | 2 +- .../tokens/src/bin/tests/Cunningham.spec.ts | 6 +++--- 9 files changed, 36 insertions(+), 18 deletions(-) create mode 100644 .changeset/lazy-clocks-agree.md diff --git a/.changeset/lazy-clocks-agree.md b/.changeset/lazy-clocks-agree.md new file mode 100644 index 0000000..0b19f15 --- /dev/null +++ b/.changeset/lazy-clocks-agree.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-tokens": patch +--- + +fix invalid sass with comma diff --git a/packages/react/src/cunningham-tokens.scss b/packages/react/src/cunningham-tokens.scss index 58383b8..cd96391 100644 --- a/packages/react/src/cunningham-tokens.scss +++ b/packages/react/src/cunningham-tokens.scss @@ -95,8 +95,8 @@ $themes: ( 'black': 800 ), 'families': ( - 'base': \Roboto Flex Variable\, sans-serif, - 'accent': \Roboto Flex Variable\, sans-serif + 'base': #{\Roboto Flex Variable\, sans-serif}, + 'accent': #{\Roboto Flex Variable\, sans-serif} ), 'letterSpacings': ( 'h1': normal, @@ -119,9 +119,9 @@ $themes: ( 'st': 0.25rem ), 'transitions': ( - 'ease-in': cubic-bezier(0.32, 0, 0.67, 0), - 'ease-out': cubic-bezier(0.33, 1, 0.68, 1), - 'ease-in-out': cubic-bezier(0.65, 0, 0.35, 1), + 'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)}, + 'ease-out': #{cubic-bezier(0.33, 1, 0.68, 1)}, + 'ease-in-out': #{cubic-bezier(0.65, 0, 0.35, 1)}, 'duration': 250ms ), 'breakpoints': ( @@ -315,7 +315,7 @@ $themes: ( 'nano-font-size': 0.8125rem, 'nano-icon-font-size': 1rem, 'font-weight': 400, - 'font-family': \Roboto Flex Variable\, sans-serif, + 'font-family': #{\Roboto Flex Variable\, sans-serif}, 'text-font-weight': 500 ), 'alert': ( diff --git a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts index 543b2a8..af56404 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts @@ -35,7 +35,7 @@ describe("CssGenerator", () => { --c--theme--spacings--s: 1rem; --c--theme--transitions--ease: linear; --c--theme--input--border-color: var(--c--theme--colors--ternary-900); - --c--components--button--font-family: Times New Roman; + --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ --c--theme--colors--primary: black; @@ -71,7 +71,7 @@ describe("CssGenerator", () => { --c--theme--spacings--s: 1rem; --c--theme--transitions--ease: linear; --c--theme--input--border-color: var(--c--theme--colors--ternary-900); - --c--components--button--font-family: Times New Roman; + --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ --c--theme--colors--primary: black; diff --git a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts index 9f76876..bfecfa0 100644 --- a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("JsGenerator", () => { await run(["", "", "-g", "js"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` -"export const tokens = {"themes":{"default":{"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}}; +"export const tokens = {"themes":{"default":{"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman,Helvetica Neue,Segoe UI"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}}; " `); }); diff --git a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts index 8759c7f..1513e0f 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts @@ -10,7 +10,7 @@ jest.mock("../Paths", () => ({ describe("SassGenerator", () => { beforeAll(() => { - jest.spyOn(console, "log").mockImplementation(() => {}); + // jest.spyOn(console, "log").mockImplementation(() => {}); cleanup(__dirname); }); @@ -57,7 +57,7 @@ describe("SassGenerator", () => { ), 'components': ( 'button': ( - 'font-family': Times New Roman + 'font-family': #{Times New Roman,Helvetica Neue,Segoe UI} ) ) ), diff --git a/packages/tokens/src/bin/Generators/SassGenerator.ts b/packages/tokens/src/bin/Generators/SassGenerator.ts index e3a5fce..a8d0fa9 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.ts @@ -28,12 +28,23 @@ function toSassVariable(varName: string, value: any, isDefault = true) { } function JSONToSassMap(json: Object, isDefault = true) { + function toSassValue(value: any) { + if (typeof value === "object") { + return deepQuoteObjectKeys(value); + } + if (typeof value === "string") { + // If we have value = Font 1, Font 2 it will break the map so we need to use interpolation operator. + if (value.indexOf(",") >= 0) { + return `#__OPEN_BRACKET__${value}__CLOSE_BRACKET__`; + } + } + return value; + } function deepQuoteObjectKeys(object: Object) { return Object.entries(object).reduce( (acc, [key, value]): Record => ({ ...acc, - [`'${key}'`]: - typeof value === "object" ? deepQuoteObjectKeys(value) : value, + [`'${key}'`]: toSassValue(value), }), {}, ); @@ -44,5 +55,7 @@ function JSONToSassMap(json: Object, isDefault = true) { .replace(/{/g, "(") .replace(/}/g, ")") .replace(/"/g, "") + .replace(/__OPEN_BRACKET__/g, "{") + .replace(/__CLOSE_BRACKET__/g, "}") .concat(isDefault ? " !default;" : ""); } diff --git a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts index cda1c58..8a3fac2 100644 --- a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("TsGenerator", () => { await run(["", "", "-g", "ts"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` -"export const tokens = {"themes":{"default":{"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}}; +"export const tokens = {"themes":{"default":{"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman,Helvetica Neue,Segoe UI"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}}; " `); }); diff --git a/packages/tokens/src/bin/__mocks__/cunningham.ts b/packages/tokens/src/bin/__mocks__/cunningham.ts index 0f2dd8a..b0b4a7a 100644 --- a/packages/tokens/src/bin/__mocks__/cunningham.ts +++ b/packages/tokens/src/bin/__mocks__/cunningham.ts @@ -31,7 +31,7 @@ module.exports = { }, components: { button: { - "font-family": "Times New Roman", + "font-family": "Times New Roman,Helvetica Neue,Segoe UI", }, }, }, diff --git a/packages/tokens/src/bin/tests/Cunningham.spec.ts b/packages/tokens/src/bin/tests/Cunningham.spec.ts index 35231c2..5986d2e 100644 --- a/packages/tokens/src/bin/tests/Cunningham.spec.ts +++ b/packages/tokens/src/bin/tests/Cunningham.spec.ts @@ -67,7 +67,7 @@ describe("Cunningham Bin", () => { --c--theme--spacings--s: 1rem; --c--theme--transitions--ease: linear; --c--theme--input--border-color: var(--c--theme--colors--ternary-900); - --c--components--button--font-family: Times New Roman; + --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ --c--theme--colors--primary: black; @@ -106,7 +106,7 @@ describe("Cunningham Bin", () => { --c--theme--spacings--s: 1rem; --c--theme--transitions--ease: linear; --c--theme--input--border-color: var(--c--theme--colors--ternary-900); - --c--components--button--font-family: Times New Roman; + --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ --c--theme--colors--primary: black; @@ -158,7 +158,7 @@ describe("Cunningham Bin", () => { --c--theme--spacings--s: 1rem; --c--theme--transitions--ease: linear; --c--theme--input--border-color: var(--c--theme--colors--ternary-900); - --c--components--button--font-family: Times New Roman; + --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ --c--theme--colors--primary: black;