From 7de28bcf9b47cd4cf8cec12471aa0b5be9c7ce8e Mon Sep 17 00:00:00 2001 From: Romain Le Cellier Date: Wed, 9 Aug 2023 14:49:45 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(tokens)=20fix=20generators?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When customized tokens have multiple entries like theme and components, each variable definition needs to end with a ;. --- .changeset/yellow-meals-mix.md | 5 +++++ packages/tokens/src/bin/Generators/JsGenerator.spec.ts | 2 +- packages/tokens/src/bin/Generators/SassGenerator.spec.ts | 7 ++++++- packages/tokens/src/bin/Generators/SassGenerator.ts | 2 +- packages/tokens/src/bin/Generators/TsGenerator.spec.ts | 2 +- packages/tokens/src/bin/__mocks__/cunningham.ts | 5 +++++ .../tests/assets/expected-default-cunningham-tokens.css | 1 + .../src/bin/tests/assets/expected-js-cunningham-tokens.css | 1 + .../expected-with-utility-classes-cunningham-tokens.css | 1 + 9 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 .changeset/yellow-meals-mix.md diff --git a/.changeset/yellow-meals-mix.md b/.changeset/yellow-meals-mix.md new file mode 100644 index 0000000..2872b7f --- /dev/null +++ b/.changeset/yellow-meals-mix.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-tokens": patch +--- + +Fix bug on sass token generation diff --git a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts index 68b6ab8..b8188a8 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 = {"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"}}}; + "export const tokens = {"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"}}}; " `); }); diff --git a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts index fbe9477..6b59367 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts @@ -52,7 +52,12 @@ describe("SassGenerator", () => { 'input': ( 'border-color': #022858 ) - ) !default + ) !default; + $components: ( + 'button': ( + 'font-family': Times New Roman + ) + ) !default; " `); }); diff --git a/packages/tokens/src/bin/Generators/SassGenerator.ts b/packages/tokens/src/bin/Generators/SassGenerator.ts index d519ee1..e3a5fce 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.ts @@ -44,5 +44,5 @@ function JSONToSassMap(json: Object, isDefault = true) { .replace(/{/g, "(") .replace(/}/g, ")") .replace(/"/g, "") - .concat(isDefault ? " !default" : ""); + .concat(isDefault ? " !default;" : ""); } diff --git a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts index b6eb3f3..c3896e0 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 = {"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"}}}; + "export const tokens = {"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"}}}; " `); }); diff --git a/packages/tokens/src/bin/__mocks__/cunningham.ts b/packages/tokens/src/bin/__mocks__/cunningham.ts index 0aa1e51..cc1bd34 100644 --- a/packages/tokens/src/bin/__mocks__/cunningham.ts +++ b/packages/tokens/src/bin/__mocks__/cunningham.ts @@ -27,4 +27,9 @@ module.exports = { "border-color": "ref(theme.colors.ternary-900)", }, }, + components: { + button: { + "font-family": "Times New Roman", + }, + }, }; diff --git a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css index 4da1bd0..00ad945 100644 --- a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css @@ -9,4 +9,5 @@ --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; } diff --git a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css index 7b02866..22d299b 100644 --- a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css @@ -9,4 +9,5 @@ --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; } diff --git a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css index 6f9b396..9bd9c32 100644 --- a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css @@ -9,6 +9,7 @@ --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; } .clr-primary { color: var(--c--theme--colors--primary); } .clr-secondary { color: var(--c--theme--colors--secondary); } .clr-ternary-900 { color: var(--c--theme--colors--ternary-900); }