From 11b2853af98c1417032b9e846a3710993b5da461 Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Tue, 1 Oct 2024 11:30:54 +0100 Subject: [PATCH 1/5] Add maths calc function to post-process-css --- .../formatters/maths-calc/maths-calc.spec.ts | 185 ++++++++++++++++++ .../formatters/maths-calc/maths-calc.ts | 128 ++++++++++++ 2 files changed, 313 insertions(+) create mode 100644 scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts create mode 100644 scripts/post-process-css/formatters/maths-calc/maths-calc.ts diff --git a/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts b/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts new file mode 100644 index 00000000..c9832273 --- /dev/null +++ b/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts @@ -0,0 +1,185 @@ +import { expect } from "chai"; +import { BrandTokens } from "../../brand-tokens"; +import { ScreenSizeTokens } from "../../screen-size-tokens"; +import { MathsCalc } from "./maths-calc"; + +describe("MathsCalc", () => { + const mathsCalc = new MathsCalc(); + + describe("mathsCalc", () => { + it("should format tokens as expected", () => { + const tokens = new BrandTokens([ + new ScreenSizeTokens( + [ + { name: "--global-prop1", value: "value1" }, + { name: "--global-prop2", value: "value1 value2" }, + { name: "--global-prop3", value: "value1 * value2" }, + { name: "--global-prop4", value: "value1 / value2" }, + { name: "--global-prop5", value: "value1 + value2" }, + { name: "--global-prop6", value: "value1 - value2" }, + { name: "--global-prop7", value: "value1 * value2 + value3" }, + { name: "--global-prop8", value: "value1 * value2 value3" }, + { name: "--global-prop9", value: "(value1 + value2) * value3" }, + { name: "--global-typography1", value: "900 clamp( 2rem , 1rem + 2vw , 4rem ) / 1.25 'Sage Headline'"}, + ], + [], + [], + { + badge: [ + { + name: "--badge-prop1", + value: "var(--global-prop1)", + }, + { + name: "--badge-prop2", + value: "var(--global-prop1) * 2", + }, + { + name: "--badge-prop3", + value: "var(--global-prop1) / 2", + }, + { + name: "--badge-prop4", + value: "var(--global-prop1) + 2", + }, + { + name: "--badge-prop5", + value: "var(--global-prop1) - 2", + }, + ], + } + ), + new ScreenSizeTokens( + [ + { name: "--global-size-breakpoint-min-width", value: "1024px" }, + { name: "--global-prop1", value: "value1" }, + { name: "--global-prop2", value: "value1 value2" }, + { name: "--global-prop3", value: "value1 * value2" }, + { name: "--global-prop4", value: "value1 / value2" }, + { name: "--global-prop5", value: "value1 + value2" }, + { name: "--global-prop6", value: "value1 - value2" }, + { name: "--global-prop7", value: "value1 * value2 + value3" }, + { name: "--global-prop8", value: "value1 * value2 value3" }, + { name: "--global-prop9", value: "(value1 + value2) * value3" }, + { name: "--global-typography1", value: "900 clamp( 2rem , 1rem + 2vw , 4rem ) / 1.25 'Sage Headline'"}, + ], + [], + [], + { + badge: [ + { + name: "--badge-prop1", + value: "var(--global-prop1)", + }, + { + name: "--badge-prop2", + value: "var(--global-prop1) * 2", + }, + { + name: "--badge-prop3", + value: "var(--global-prop1) / 2", + }, + { + name: "--badge-prop4", + value: "var(--global-prop1) + 2", + }, + { + name: "--badge-prop5", + value: "var(--global-prop1) - 2", + }, + ], + } + ), + ]); + + const result = mathsCalc.formatTokens(tokens); + expect(result).to.deep.equal({ + context: "product", + screenSizes: [ + { + global: [ + { name: "--global-prop1", value: "value1" }, + { name: "--global-prop2", value: "value1 value2" }, + { name: "--global-prop3", value: "calc(value1 * value2)" }, + { name: "--global-prop4", value: "calc(value1 / value2)" }, + { name: "--global-prop5", value: "calc(value1 + value2)" }, + { name: "--global-prop6", value: "calc(value1 - value2)" }, + { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, + { name: "--global-prop8", value: "calc(value1 * value2) value3" }, + { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, + { name: "--global-typography1", value: "900 calc(clamp( 2rem , calc(1rem + 2vw) , 4rem ) / 1.25) 'Sage Headline'"}, + ], + light: [], + dark: [], + components: { + badge: [ + { + name: "--badge-prop1", + value: "var(--global-prop1)", + }, + { + name: "--badge-prop2", + value: "calc(var(--global-prop1) * 2)", + }, + { + name: "--badge-prop3", + value: "calc(var(--global-prop1) / 2)", + }, + { + name: "--badge-prop4", + value: "calc(var(--global-prop1) + 2)", + }, + { + name: "--badge-prop5", + value: "calc(var(--global-prop1) - 2)", + }, + ], + }, + minBreakpoint: 0, + }, + { + global: [ + { name: "--global-prop1", value: "value1" }, + { name: "--global-prop2", value: "value1 value2" }, + { name: "--global-prop3", value: "calc(value1 * value2)" }, + { name: "--global-prop4", value: "calc(value1 / value2)" }, + { name: "--global-prop5", value: "calc(value1 + value2)" }, + { name: "--global-prop6", value: "calc(value1 - value2)" }, + { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, + { name: "--global-prop8", value: "calc(value1 * value2) value3" }, + { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, + { name: "--global-typography1", value: "900 calc(clamp( 2rem , calc(1rem + 2vw) , 4rem ) / 1.25) 'Sage Headline'"}, + ], + light: [], + dark: [], + components: { + badge: [ + { + name: "--badge-prop1", + value: "var(--global-prop1)", + }, + { + name: "--badge-prop2", + value: "calc(var(--global-prop1) * 2)", + }, + { + name: "--badge-prop3", + value: "calc(var(--global-prop1) / 2)", + }, + { + name: "--badge-prop4", + value: "calc(var(--global-prop1) + 2)", + }, + { + name: "--badge-prop5", + value: "calc(var(--global-prop1) - 2)", + }, + ], + }, + minBreakpoint: 1024, + }, + ], + }); + }); + }); +}); \ No newline at end of file diff --git a/scripts/post-process-css/formatters/maths-calc/maths-calc.ts b/scripts/post-process-css/formatters/maths-calc/maths-calc.ts new file mode 100644 index 00000000..0b87646d --- /dev/null +++ b/scripts/post-process-css/formatters/maths-calc/maths-calc.ts @@ -0,0 +1,128 @@ +import { BrandTokens } from "../../brand-tokens"; +import { CssProperty } from "../../css-parser/css-parser.types"; +import { getSymetricalDifference } from "../../helpers"; +import { ScreenSizeTokens } from "../../screen-size-tokens"; +import { Decorator } from "../decorator"; + +interface IPartConditions { + hasClose?: boolean + hasOpen?: boolean + isLeft?: boolean + isMath?: boolean + isMiddle?: boolean + isRight?: boolean + part: string +} + +interface IParIndices { + close: number[] + open: number[] +} + +interface IValueSplit { + parIndices: IParIndices, + valueParts: string[] +} + +export class MathsCalc extends Decorator { + private readonly mathChars = ['+', '-', '*', '/']; + /** + * + * @param tokens Tokens to format. + * @returns Formatted tokens. + */ + public override formatTokens(tokens: BrandTokens) { + + tokens.screenSizes.forEach((screenSize) => { + + screenSize.global.forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); + screenSize.light.forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); + screenSize.dark.forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); + + Object.keys(screenSize.components).forEach((component) => { + if (screenSize.components[component]) { + screenSize.components[component].forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); + } + }); + }) + + + return super.formatTokens(tokens); + } + + private formatTokenValue(valueSplit: IValueSplit): string { + const {parIndices: { close, open }, valueParts} = valueSplit + + open.reverse().forEach((ind, i) => { + const partArray: string[] = [] + + const inner = valueParts.splice(ind, close[i]) + + const conditions = this.checkConditions(inner) + + conditions.forEach((item) => { + if (item.isLeft && !item.isMiddle) item.part = `calc(${item.part}` + if (item.isRight && !item.isMiddle) item.part = `${item.part})` + partArray.push(item.part) + }) + + if (ind) valueParts.splice(ind, 0, partArray.join(' ')) + }) + + const valueConditions = this.checkConditions(valueParts) + + valueConditions.forEach((item, i) => { + if (item.isLeft && !item.isMiddle) valueParts[i] = `calc(${item.part}` + if (item.isRight && !item.isMiddle) valueParts[i] = `${item.part})` + }) + + return valueParts.join(' ') + + } + + private splitTokenValue(value: string): IValueSplit { + const valueParts = value.split(' '); + const parIndices: { close: number[], open: number[] } = {close: [], open: []} + + valueParts.forEach((part, i) => { + if (part.indexOf('(') > -1) parIndices.open.push(i) + if (part.indexOf(')') > -1) parIndices.close.push(i) + }); + + if (parIndices.close.length !== parIndices.open.length) { + throw new Error( + `The parenthesis in the token are not equal and the maths cannot be resolved` + ); + } + + return { + parIndices, + valueParts + } + } + + private checkConditions(valueParts: string[]): IPartConditions[] { + const partConditions: IPartConditions[] = [] + + valueParts.forEach((part, i) => { + const left = i > 0 ? valueParts[i - 1] : ''; + const right = valueParts[i + 1] ?? ''; + + const conditions = { + part, + isMath: this.mathChars.includes(part), + isLeft: this.mathChars.includes(right), + isRight: this.mathChars.includes(left), + isMiddle: this.mathChars.includes(right) && this.mathChars.includes(left), + hasOpen: part.indexOf('(') > -1, + hasClose: part.indexOf(')') > -1 + } + + partConditions.push(conditions) + }); + + return partConditions + } + + +} \ No newline at end of file From efa325bd095ff5c49d2f1ff8ae33c3ca51285047 Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Tue, 1 Oct 2024 13:03:03 +0100 Subject: [PATCH 2/5] refactor maths-calc to remove splitting by parenthesis --- .../formatters/maths-calc/maths-calc.spec.ts | 53 +++++++++++-- .../formatters/maths-calc/maths-calc.ts | 78 +++---------------- 2 files changed, 60 insertions(+), 71 deletions(-) diff --git a/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts b/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts index c9832273..464e758a 100644 --- a/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts +++ b/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts @@ -20,7 +20,10 @@ describe("MathsCalc", () => { { name: "--global-prop7", value: "value1 * value2 + value3" }, { name: "--global-prop8", value: "value1 * value2 value3" }, { name: "--global-prop9", value: "(value1 + value2) * value3" }, - { name: "--global-typography1", value: "900 clamp( 2rem , 1rem + 2vw , 4rem ) / 1.25 'Sage Headline'"}, + { name: "--global-prop10", value: "(value1 + value2) * (value3 - value4)" }, + { name: "--global-prop11", value: "(value1 + value2) * (value3 - value4) value5 - value6" }, + { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, + { name: "--global-typography2", value: "400 20px/1 sage-icons"}, ], [], [], @@ -46,6 +49,14 @@ describe("MathsCalc", () => { name: "--badge-prop5", value: "var(--global-prop1) - 2", }, + { + name: "--badge-prop6", + value: "var(--global-prop1) - var(--global-prop2)", + }, + { + name: "--badge-prop7", + value: "(var(--global-prop1) - var(--global-prop2)) * var(--global-prop3)", + }, ], } ), @@ -61,7 +72,10 @@ describe("MathsCalc", () => { { name: "--global-prop7", value: "value1 * value2 + value3" }, { name: "--global-prop8", value: "value1 * value2 value3" }, { name: "--global-prop9", value: "(value1 + value2) * value3" }, - { name: "--global-typography1", value: "900 clamp( 2rem , 1rem + 2vw , 4rem ) / 1.25 'Sage Headline'"}, + { name: "--global-prop10", value: "(value1 + value2) * (value3 - value4)" }, + { name: "--global-prop11", value: "(value1 + value2) * (value3 - value4) value5 - value6" }, + { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, + { name: "--global-typography2", value: "400 20px/1 sage-icons"}, ], [], [], @@ -87,6 +101,14 @@ describe("MathsCalc", () => { name: "--badge-prop5", value: "var(--global-prop1) - 2", }, + { + name: "--badge-prop6", + value: "var(--global-prop1) - var(--global-prop2)", + }, + { + name: "--badge-prop7", + value: "(var(--global-prop1) - var(--global-prop2)) * var(--global-prop3)", + }, ], } ), @@ -94,7 +116,6 @@ describe("MathsCalc", () => { const result = mathsCalc.formatTokens(tokens); expect(result).to.deep.equal({ - context: "product", screenSizes: [ { global: [ @@ -107,7 +128,10 @@ describe("MathsCalc", () => { { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, { name: "--global-prop8", value: "calc(value1 * value2) value3" }, { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, - { name: "--global-typography1", value: "900 calc(clamp( 2rem , calc(1rem + 2vw) , 4rem ) / 1.25) 'Sage Headline'"}, + { name: "--global-prop10", value: "calc((value1 + value2) * (value3 - value4))" }, + { name: "--global-prop11", value: "calc((value1 + value2) * (value3 - value4)) calc(value5 - value6)" }, + { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, + { name: "--global-typography2", value: "400 20px/1 sage-icons"}, ], light: [], dark: [], @@ -133,6 +157,14 @@ describe("MathsCalc", () => { name: "--badge-prop5", value: "calc(var(--global-prop1) - 2)", }, + { + name: "--badge-prop6", + value: "calc(var(--global-prop1) - var(--global-prop2))", + }, + { + name: "--badge-prop7", + value: "calc((var(--global-prop1) - var(--global-prop2)) * var(--global-prop3))", + }, ], }, minBreakpoint: 0, @@ -148,7 +180,10 @@ describe("MathsCalc", () => { { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, { name: "--global-prop8", value: "calc(value1 * value2) value3" }, { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, - { name: "--global-typography1", value: "900 calc(clamp( 2rem , calc(1rem + 2vw) , 4rem ) / 1.25) 'Sage Headline'"}, + { name: "--global-prop10", value: "calc((value1 + value2) * (value3 - value4))" }, + { name: "--global-prop11", value: "calc((value1 + value2) * (value3 - value4)) calc(value5 - value6)" }, + { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, + { name: "--global-typography2", value: "400 20px/1 sage-icons"}, ], light: [], dark: [], @@ -174,6 +209,14 @@ describe("MathsCalc", () => { name: "--badge-prop5", value: "calc(var(--global-prop1) - 2)", }, + { + name: "--badge-prop6", + value: "calc(var(--global-prop1) - var(--global-prop2))", + }, + { + name: "--badge-prop7", + value: "calc((var(--global-prop1) - var(--global-prop2)) * var(--global-prop3))", + }, ], }, minBreakpoint: 1024, diff --git a/scripts/post-process-css/formatters/maths-calc/maths-calc.ts b/scripts/post-process-css/formatters/maths-calc/maths-calc.ts index 0b87646d..924bfc16 100644 --- a/scripts/post-process-css/formatters/maths-calc/maths-calc.ts +++ b/scripts/post-process-css/formatters/maths-calc/maths-calc.ts @@ -1,29 +1,14 @@ import { BrandTokens } from "../../brand-tokens"; -import { CssProperty } from "../../css-parser/css-parser.types"; -import { getSymetricalDifference } from "../../helpers"; -import { ScreenSizeTokens } from "../../screen-size-tokens"; import { Decorator } from "../decorator"; interface IPartConditions { - hasClose?: boolean - hasOpen?: boolean - isLeft?: boolean - isMath?: boolean - isMiddle?: boolean - isRight?: boolean + isLeft: boolean + isMath: boolean + isMiddle: boolean + isRight: boolean part: string } -interface IParIndices { - close: number[] - open: number[] -} - -interface IValueSplit { - parIndices: IParIndices, - valueParts: string[] -} - export class MathsCalc extends Decorator { private readonly mathChars = ['+', '-', '*', '/']; /** @@ -35,39 +20,26 @@ export class MathsCalc extends Decorator { tokens.screenSizes.forEach((screenSize) => { - screenSize.global.forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); - screenSize.light.forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); - screenSize.dark.forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); + screenSize.global.forEach((token) => token.value = this.formatTokenValue(token.value)); + screenSize.light.forEach((token) => token.value = this.formatTokenValue(token.value)); + screenSize.dark.forEach((token) => token.value = this.formatTokenValue(token.value)); Object.keys(screenSize.components).forEach((component) => { if (screenSize.components[component]) { - screenSize.components[component].forEach((token) => token.value = this.formatTokenValue(this.splitTokenValue(token.value))); + screenSize.components[component].forEach((token) => token.value = this.formatTokenValue(token.value)); } }); }) - return super.formatTokens(tokens); } - private formatTokenValue(valueSplit: IValueSplit): string { - const {parIndices: { close, open }, valueParts} = valueSplit - - open.reverse().forEach((ind, i) => { - const partArray: string[] = [] + private formatTokenValue(value: string): string { + const hasClamp = /clamp\s*\(.*\)/ - const inner = valueParts.splice(ind, close[i]) + if (hasClamp.test(value)) return value - const conditions = this.checkConditions(inner) - - conditions.forEach((item) => { - if (item.isLeft && !item.isMiddle) item.part = `calc(${item.part}` - if (item.isRight && !item.isMiddle) item.part = `${item.part})` - partArray.push(item.part) - }) - - if (ind) valueParts.splice(ind, 0, partArray.join(' ')) - }) + const valueParts = value.split(' '); const valueConditions = this.checkConditions(valueParts) @@ -77,28 +49,6 @@ export class MathsCalc extends Decorator { }) return valueParts.join(' ') - - } - - private splitTokenValue(value: string): IValueSplit { - const valueParts = value.split(' '); - const parIndices: { close: number[], open: number[] } = {close: [], open: []} - - valueParts.forEach((part, i) => { - if (part.indexOf('(') > -1) parIndices.open.push(i) - if (part.indexOf(')') > -1) parIndices.close.push(i) - }); - - if (parIndices.close.length !== parIndices.open.length) { - throw new Error( - `The parenthesis in the token are not equal and the maths cannot be resolved` - ); - } - - return { - parIndices, - valueParts - } } private checkConditions(valueParts: string[]): IPartConditions[] { @@ -114,8 +64,6 @@ export class MathsCalc extends Decorator { isLeft: this.mathChars.includes(right), isRight: this.mathChars.includes(left), isMiddle: this.mathChars.includes(right) && this.mathChars.includes(left), - hasOpen: part.indexOf('(') > -1, - hasClose: part.indexOf(')') > -1 } partConditions.push(conditions) @@ -123,6 +71,4 @@ export class MathsCalc extends Decorator { return partConditions } - - } \ No newline at end of file From 06dbff3d03f8587d418c550db7faa637b5be3fe6 Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Mon, 2 Dec 2024 14:36:18 +0000 Subject: [PATCH 3/5] ci(build): apply mathsCalc function to css files before consolidated css file creation --- scripts/build.js | 3 +- .../formatters/maths-calc/maths-calc.ts | 26 +++++--------- scripts/post-process-css/index.ts | 34 +++++++++++++++++++ 3 files changed, 43 insertions(+), 20 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 66da72e7..72412c51 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -59,7 +59,6 @@ const getGlobalConfig = (contextName, sizeName) => { source: [ './data/tokens/primitives.json', './data/tokens/global/*.json', - `./data/tokens/screensize/${contextName}.json`, `./data/tokens/screensize/${sizeName}.json` ], platforms: { @@ -119,7 +118,7 @@ const getModeConfig = (contextName, modeName, sizeName) => { source: [ './data/tokens/primitives.json', './data/tokens/global/*.json', - `./data/tokens/screensize/${contextName}.json`, + `./data/tokens/screensize/${sizeName}.json`, `./data/tokens/modes/${modeName}.json`, './data/tokens/components/*.json' ], diff --git a/scripts/post-process-css/formatters/maths-calc/maths-calc.ts b/scripts/post-process-css/formatters/maths-calc/maths-calc.ts index 924bfc16..b0fa11ae 100644 --- a/scripts/post-process-css/formatters/maths-calc/maths-calc.ts +++ b/scripts/post-process-css/formatters/maths-calc/maths-calc.ts @@ -1,5 +1,4 @@ -import { BrandTokens } from "../../brand-tokens"; -import { Decorator } from "../decorator"; +import { CssProperty } from "../../css-parser/css-parser.types"; interface IPartConditions { isLeft: boolean @@ -9,29 +8,20 @@ interface IPartConditions { part: string } -export class MathsCalc extends Decorator { +export class MathsCalc { private readonly mathChars = ['+', '-', '*', '/']; /** * * @param tokens Tokens to format. * @returns Formatted tokens. */ - public override formatTokens(tokens: BrandTokens) { + public formatTokens(tokens: CssProperty[]) { - tokens.screenSizes.forEach((screenSize) => { - - screenSize.global.forEach((token) => token.value = this.formatTokenValue(token.value)); - screenSize.light.forEach((token) => token.value = this.formatTokenValue(token.value)); - screenSize.dark.forEach((token) => token.value = this.formatTokenValue(token.value)); - - Object.keys(screenSize.components).forEach((component) => { - if (screenSize.components[component]) { - screenSize.components[component].forEach((token) => token.value = this.formatTokenValue(token.value)); - } - }); + tokens.forEach((token) => { + token.value = this.formatTokenValue(token.value); }) - return super.formatTokens(tokens); + return tokens; } private formatTokenValue(value: string): string { @@ -55,8 +45,8 @@ export class MathsCalc extends Decorator { const partConditions: IPartConditions[] = [] valueParts.forEach((part, i) => { - const left = i > 0 ? valueParts[i - 1] : ''; - const right = valueParts[i + 1] ?? ''; + const left: string = i > 0 ? valueParts[i - 1] ?? '' : ''; + const right: string = valueParts[i + 1] ?? ''; const conditions = { part, diff --git a/scripts/post-process-css/index.ts b/scripts/post-process-css/index.ts index ce42b2fd..2a90256a 100644 --- a/scripts/post-process-css/index.ts +++ b/scripts/post-process-css/index.ts @@ -7,11 +7,45 @@ import { ScreenSizeTokens } from "./screen-size-tokens"; import { BrandTokens } from "./brand-tokens"; import { ConsolidateScreenSizes } from "./formatters/consolidate-screen-sizes/consolidate-screen-sizes"; import { LightDarkModeFormatter } from "./formatters/light-dark-mode/light-dark-mode-formatter"; +import { MathsCalc } from "./formatters/maths-calc/maths-calc"; const cssParser = new CssParser(); // Loop through token contexts const cssDistPath = path.join(__dirname, "../../dist/css"); + +fs.readdirSync(cssDistPath, { recursive: true, withFileTypes: true }).filter((file) => { + return /^(?!all\.css$)[\w,\s-]+\.css$/.test(file.name) +}).forEach((file) => { + const space = " "; + const maths = new MathsCalc() + + const contents = fs.readFileSync(path.join(file.path, file.name), "utf8") + const tokens = maths.formatTokens(cssParser.parseRootVariables(contents)) + + const lines: string[] = []; + lines.push(`:root {`); + + if (tokens.length > 0) { + lines.push( + tokens + .map( + (p) => + `${space}${p.name}: ${p.value};${ + p.comment ? ` ${p.comment}` : "" + }` + ) + .join("\n") + ); + } + + lines.push(`}`); + lines.push(""); + + fs.writeFileSync(path.join(file.path, file.name), lines.join("\n")); +}) + + fs.readdirSync(cssDistPath).forEach((file) => { const screenSizeTokens: ScreenSizeTokens[] = []; From a3f5764d33ce0af1f3a9f1efc1b15e500289d344 Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Mon, 2 Dec 2024 14:47:52 +0000 Subject: [PATCH 4/5] fix: update tests --- .../formatters/maths-calc/maths-calc.spec.ts | 221 ++---------------- 1 file changed, 19 insertions(+), 202 deletions(-) diff --git a/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts b/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts index 464e758a..3adbb43c 100644 --- a/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts +++ b/scripts/post-process-css/formatters/maths-calc/maths-calc.spec.ts @@ -1,6 +1,4 @@ import { expect } from "chai"; -import { BrandTokens } from "../../brand-tokens"; -import { ScreenSizeTokens } from "../../screen-size-tokens"; import { MathsCalc } from "./maths-calc"; describe("MathsCalc", () => { @@ -8,9 +6,7 @@ describe("MathsCalc", () => { describe("mathsCalc", () => { it("should format tokens as expected", () => { - const tokens = new BrandTokens([ - new ScreenSizeTokens( - [ + const tokens = [ { name: "--global-prop1", value: "value1" }, { name: "--global-prop2", value: "value1 value2" }, { name: "--global-prop3", value: "value1 * value2" }, @@ -24,205 +20,26 @@ describe("MathsCalc", () => { { name: "--global-prop11", value: "(value1 + value2) * (value3 - value4) value5 - value6" }, { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, { name: "--global-typography2", value: "400 20px/1 sage-icons"}, - ], - [], - [], - { - badge: [ - { - name: "--badge-prop1", - value: "var(--global-prop1)", - }, - { - name: "--badge-prop2", - value: "var(--global-prop1) * 2", - }, - { - name: "--badge-prop3", - value: "var(--global-prop1) / 2", - }, - { - name: "--badge-prop4", - value: "var(--global-prop1) + 2", - }, - { - name: "--badge-prop5", - value: "var(--global-prop1) - 2", - }, - { - name: "--badge-prop6", - value: "var(--global-prop1) - var(--global-prop2)", - }, - { - name: "--badge-prop7", - value: "(var(--global-prop1) - var(--global-prop2)) * var(--global-prop3)", - }, - ], - } - ), - new ScreenSizeTokens( - [ - { name: "--global-size-breakpoint-min-width", value: "1024px" }, - { name: "--global-prop1", value: "value1" }, - { name: "--global-prop2", value: "value1 value2" }, - { name: "--global-prop3", value: "value1 * value2" }, - { name: "--global-prop4", value: "value1 / value2" }, - { name: "--global-prop5", value: "value1 + value2" }, - { name: "--global-prop6", value: "value1 - value2" }, - { name: "--global-prop7", value: "value1 * value2 + value3" }, - { name: "--global-prop8", value: "value1 * value2 value3" }, - { name: "--global-prop9", value: "(value1 + value2) * value3" }, - { name: "--global-prop10", value: "(value1 + value2) * (value3 - value4)" }, - { name: "--global-prop11", value: "(value1 + value2) * (value3 - value4) value5 - value6" }, - { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, - { name: "--global-typography2", value: "400 20px/1 sage-icons"}, - ], - [], - [], - { - badge: [ - { - name: "--badge-prop1", - value: "var(--global-prop1)", - }, - { - name: "--badge-prop2", - value: "var(--global-prop1) * 2", - }, - { - name: "--badge-prop3", - value: "var(--global-prop1) / 2", - }, - { - name: "--badge-prop4", - value: "var(--global-prop1) + 2", - }, - { - name: "--badge-prop5", - value: "var(--global-prop1) - 2", - }, - { - name: "--badge-prop6", - value: "var(--global-prop1) - var(--global-prop2)", - }, - { - name: "--badge-prop7", - value: "(var(--global-prop1) - var(--global-prop2)) * var(--global-prop3)", - }, - ], - } - ), - ]); + ] const result = mathsCalc.formatTokens(tokens); - expect(result).to.deep.equal({ - screenSizes: [ - { - global: [ - { name: "--global-prop1", value: "value1" }, - { name: "--global-prop2", value: "value1 value2" }, - { name: "--global-prop3", value: "calc(value1 * value2)" }, - { name: "--global-prop4", value: "calc(value1 / value2)" }, - { name: "--global-prop5", value: "calc(value1 + value2)" }, - { name: "--global-prop6", value: "calc(value1 - value2)" }, - { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, - { name: "--global-prop8", value: "calc(value1 * value2) value3" }, - { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, - { name: "--global-prop10", value: "calc((value1 + value2) * (value3 - value4))" }, - { name: "--global-prop11", value: "calc((value1 + value2) * (value3 - value4)) calc(value5 - value6)" }, - { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, - { name: "--global-typography2", value: "400 20px/1 sage-icons"}, - ], - light: [], - dark: [], - components: { - badge: [ - { - name: "--badge-prop1", - value: "var(--global-prop1)", - }, - { - name: "--badge-prop2", - value: "calc(var(--global-prop1) * 2)", - }, - { - name: "--badge-prop3", - value: "calc(var(--global-prop1) / 2)", - }, - { - name: "--badge-prop4", - value: "calc(var(--global-prop1) + 2)", - }, - { - name: "--badge-prop5", - value: "calc(var(--global-prop1) - 2)", - }, - { - name: "--badge-prop6", - value: "calc(var(--global-prop1) - var(--global-prop2))", - }, - { - name: "--badge-prop7", - value: "calc((var(--global-prop1) - var(--global-prop2)) * var(--global-prop3))", - }, - ], - }, - minBreakpoint: 0, - }, - { - global: [ - { name: "--global-prop1", value: "value1" }, - { name: "--global-prop2", value: "value1 value2" }, - { name: "--global-prop3", value: "calc(value1 * value2)" }, - { name: "--global-prop4", value: "calc(value1 / value2)" }, - { name: "--global-prop5", value: "calc(value1 + value2)" }, - { name: "--global-prop6", value: "calc(value1 - value2)" }, - { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, - { name: "--global-prop8", value: "calc(value1 * value2) value3" }, - { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, - { name: "--global-prop10", value: "calc((value1 + value2) * (value3 - value4))" }, - { name: "--global-prop11", value: "calc((value1 + value2) * (value3 - value4)) calc(value5 - value6)" }, - { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, - { name: "--global-typography2", value: "400 20px/1 sage-icons"}, - ], - light: [], - dark: [], - components: { - badge: [ - { - name: "--badge-prop1", - value: "var(--global-prop1)", - }, - { - name: "--badge-prop2", - value: "calc(var(--global-prop1) * 2)", - }, - { - name: "--badge-prop3", - value: "calc(var(--global-prop1) / 2)", - }, - { - name: "--badge-prop4", - value: "calc(var(--global-prop1) + 2)", - }, - { - name: "--badge-prop5", - value: "calc(var(--global-prop1) - 2)", - }, - { - name: "--badge-prop6", - value: "calc(var(--global-prop1) - var(--global-prop2))", - }, - { - name: "--badge-prop7", - value: "calc((var(--global-prop1) - var(--global-prop2)) * var(--global-prop3))", - }, - ], - }, - minBreakpoint: 1024, - }, - ], - }); + expect(result).to.deep.equal( + [ + { name: "--global-prop1", value: "value1" }, + { name: "--global-prop2", value: "value1 value2" }, + { name: "--global-prop3", value: "calc(value1 * value2)" }, + { name: "--global-prop4", value: "calc(value1 / value2)" }, + { name: "--global-prop5", value: "calc(value1 + value2)" }, + { name: "--global-prop6", value: "calc(value1 - value2)" }, + { name: "--global-prop7", value: "calc(value1 * value2 + value3)" }, + { name: "--global-prop8", value: "calc(value1 * value2) value3" }, + { name: "--global-prop9", value: "calc((value1 + value2) * value3)" }, + { name: "--global-prop10", value: "calc((value1 + value2) * (value3 - value4))" }, + { name: "--global-prop11", value: "calc((value1 + value2) * (value3 - value4)) calc(value5 - value6)" }, + { name: "--global-typography1", value: "900 clamp(2.1588rem, 1.7083rem + 2.2525vw, 4.4113rem)/1.25 'Sage Headline'"}, + { name: "--global-typography2", value: "400 20px/1 sage-icons"}, + ] + ); }); }); }); \ No newline at end of file From 3298a21b87f55d7ef107825fd3f3cb9bec09c6fc Mon Sep 17 00:00:00 2001 From: Dru Hill Date: Mon, 2 Dec 2024 15:33:46 +0000 Subject: [PATCH 5/5] fix(data): syntax errors --- data/tokens/components/container.json | 2 +- data/tokens/components/form.json | 6 +++--- data/tokens/components/progress.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json index 41625667..8c3f026c 100644 --- a/data/tokens/components/container.json +++ b/data/tokens/components/container.json @@ -234,7 +234,7 @@ }, "chatbubble": { "maxwidth": { - "value": "{global.size.macro.XXXXL}* 5", + "value": "{global.size.macro.XXXXL} * 5", "type": "sizing", "description": "max width for chat bubbles" } diff --git a/data/tokens/components/form.json b/data/tokens/components/form.json index 424f5735..27f25a4f 100644 --- a/data/tokens/components/form.json +++ b/data/tokens/components/form.json @@ -867,17 +867,17 @@ }, "subtle": { "S": { - "value": "{global.size.macro.M} *2", + "value": "{global.size.macro.M} * 2", "type": "sizing", "description": "Min width of subtle dropdown" }, "M": { - "value": "{global.size.macro.M} *2", + "value": "{global.size.macro.M} * 2", "type": "sizing", "description": "Min width of subtle dropdown" }, "L": { - "value": "{global.size.macro.M} *2", + "value": "{global.size.macro.M} * 2", "type": "sizing", "description": "Min width of subtle dropdown" } diff --git a/data/tokens/components/progress.json b/data/tokens/components/progress.json index c4caba5c..5153cecb 100644 --- a/data/tokens/components/progress.json +++ b/data/tokens/components/progress.json @@ -292,7 +292,7 @@ "type": "color" }, "label-active": { - "value": "modes.color.interactive.monochrome.standard.withActive", + "value": "{modes.color.interactive.monochrome.generic.withActive}", "type": "color" }, "label-complete": {