diff --git a/package.json b/package.json index 3a99d1c75e..f3834b1baf 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "devsite": "yarn workspace dev dev", "build": "lerna run build", "build:react": "yarn workspace @digdir/designsystemet-react build", - "build:tokens": "yarn workspace @digdir/designsystemet-theme build", + "build:tokens": "yarn workspace @digdir/designsystemet-cli build", "build:css": "yarn workspace @digdir/designsystemet-css build", "build:storybook": "storybook build -o ./dist/storybook", "build:storefront": "yarn workspace storefront building", diff --git a/packages/theme/declarations.d.ts b/packages/cli/declarations.d.ts similarity index 100% rename from packages/theme/declarations.d.ts rename to packages/cli/declarations.d.ts diff --git a/packages/cli/package.json b/packages/cli/package.json new file mode 100644 index 0000000000..8eb8b02545 --- /dev/null +++ b/packages/cli/package.json @@ -0,0 +1,37 @@ +{ + "name": "@digdir/designsystemet-cli", + "version": "0.0.1", + "description": "CLI for Designsystemet", + "author": "Designsystemet team", + "repository": "https://github.com/digdir/designsystemet", + "homepage": "https://github.com/digdir/designsystemet/tree/main/scripts/cli", + "license": "MIT", + "type": "module", + "private": true, + "publishConfig": { + "access": "public" + }, + "scripts": { + "start": "esno ./src/build.ts", + "build": "yarn clean && yarn start -t ../../design-tokens -b Digdir Tilsynet Altinn Brreg", + "prepublish": "tsc", + "clean": "yarn workspace @digdir/designsystemet-theme clean" + }, + "files": [ + "./dist/**" + ], + "bin": { + "designsystemet": "./dist/build/build.js" + }, + "devDependencies": { + "@tokens-studio/sd-transforms": "^0.9.3", + "@types/ramda": "^0.29.9", + "@types/yargs": "^17.0.32", + "esno": "^4.7.0", + "ramda": "^0.29.1", + "rimraf": "^5.0.5", + "style-dictionary": "^3.8.0", + "typescript": "^5.4.5", + "yargs": "^17.7.2" + } +} diff --git a/packages/theme/scripts/build.ts b/packages/cli/src/build.ts similarity index 73% rename from packages/theme/scripts/build.ts rename to packages/cli/src/build.ts index d07531614a..a5f2bb000c 100644 --- a/packages/theme/scripts/build.ts +++ b/packages/cli/src/build.ts @@ -1,3 +1,4 @@ +#!/usr/bin/env node import path from 'path'; import StyleDictionary from 'style-dictionary'; @@ -8,6 +9,7 @@ import type { FileHeader, } from 'style-dictionary'; import { registerTransforms } from '@tokens-studio/sd-transforms'; +import yargs from 'yargs'; import { sizePx, @@ -18,18 +20,39 @@ import { calc, fontScaleHackFormat, sizeRem, -} from './transformers'; +} from './transformers.js'; import { scopedReferenceVariables, groupedTokens, setup as setupFormatters, -} from './formatters'; +} from './formatters.js'; + +const argv = yargs(process.argv.slice(2)) + .options({ + brands: { + type: 'array', + default: [], + describe: 'Brand files to build', + alias: 'b', + }, + tokens: { + type: 'string', + describe: 'Location for design-tokens', + demandOption: true, + alias: 't', + }, + preview: { + alias: 'p', + type: 'boolean', + describe: 'Generate typescript token preview files', + }, + }) + .parseSync(); void registerTransforms(StyleDictionary); -// File name under design-tokens/Brand -const brands = ['Digdir', 'Tilsynet', 'Altinn', 'Brreg'] as const; -type Brands = (typeof brands)[number]; +const pickBrands = (x: string | number): x is string => typeof x === 'string'; +type Brand = string; const prefix = 'fds'; const basePxFontSize = 16; @@ -42,7 +65,8 @@ const fileheader: Named<{ fileHeader: FileHeader }> = { }; const storefrontTokensPath = path.resolve('../../apps/storefront/tokens'); -const packageTokensPath = 'brand'; +const packageTokensPath = path.resolve('../../packages/theme/brand'); +const tokensPath = argv.tokens; setupFormatters('./../../prettier.config.js'); @@ -65,8 +89,6 @@ StyleDictionary.registerTransformGroup({ transforms: [ 'ts/resolveMath', nameKebab.name, - // fluidFontSize.name, - // calc.name, typographyShorthand.name, 'ts/size/lineheight', sizeRem.name, @@ -76,9 +98,7 @@ StyleDictionary.registerTransformGroup({ ], }); -const baseConfig = (brand: Brands): Partial => { - const tokensPath = '../../design-tokens'; - +const baseConfig = (brand: Brand): Partial => { return { include: [ `${tokensPath}/Brand/${brand}.json`, @@ -91,7 +111,7 @@ const baseConfig = (brand: Brands): Partial => { const excludeSource = (token: TransformedToken) => !token.filePath.includes('Core.json'); -const getTokensPackageConfig = (brand: Brands, targetFolder = ''): Config => { +const getTokensPackageConfig = (brand: Brand, targetFolder = ''): Config => { const destinationPath = `${targetFolder}/${brand.toLowerCase()}`; return { @@ -131,7 +151,7 @@ const getTokensPackageConfig = (brand: Brands, targetFolder = ''): Config => { }; }; -const getStorefrontConfig = (brand: Brands, targetFolder = ''): Config => { +const getStorefrontConfig = (brand: Brand, targetFolder = ''): Config => { const destinationPath = `${targetFolder}/${brand.toLowerCase()}`; return { @@ -167,22 +187,28 @@ const getStorefrontConfig = (brand: Brands, targetFolder = ''): Config => { }; }; -console.log('🏗️ Started building package tokens…'); +const brands = argv.brands.filter(pickBrands) as string[]; -brands.map((brand) => { - console.log('\n---------------------------------------'); +if (brands.length > 0) { + console.log('➡️ Recieved following brands: ', brands); - console.log(`\n👷 Processing ${brand}`); + console.log('🏗️ Start building CSS tokens'); - const tokensPackageSD = StyleDictionary.extend( - getTokensPackageConfig(brand, packageTokensPath), - ); + brands.map((brand) => { + console.log('\n---------------------------------------'); - tokensPackageSD.buildAllPlatforms(); -}); + console.log(`\n👷 Processing ${brand}`); -console.log('\n---------------------------------------'); -console.log('\n🏁 Finished building package tokens!'); + const tokensPackageSD = StyleDictionary.extend( + getTokensPackageConfig(brand, packageTokensPath), + ); + + tokensPackageSD.buildAllPlatforms(); + }); + + console.log('\n---------------------------------------'); + console.log('\n🏁 Finished building package tokens!'); +} console.log('\n======================================='); console.log('\n🏗️ Started building storefront tokens…'); diff --git a/packages/theme/scripts/formatters.ts b/packages/cli/src/formatters.ts similarity index 100% rename from packages/theme/scripts/formatters.ts rename to packages/cli/src/formatters.ts diff --git a/packages/theme/scripts/noCase.ts b/packages/cli/src/noCase.ts similarity index 100% rename from packages/theme/scripts/noCase.ts rename to packages/cli/src/noCase.ts diff --git a/packages/theme/scripts/transformers.ts b/packages/cli/src/transformers.ts similarity index 99% rename from packages/theme/scripts/transformers.ts rename to packages/cli/src/transformers.ts index 8bda35e4bb..866b47a18b 100644 --- a/packages/theme/scripts/transformers.ts +++ b/packages/cli/src/transformers.ts @@ -7,7 +7,7 @@ import type { } from 'style-dictionary'; import { transformDimension } from '@tokens-studio/sd-transforms'; -import { noCase } from './noCase'; +import { noCase } from './noCase.js'; export const sizePx: Named = { name: 'fds/size/px', diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json new file mode 100644 index 0000000000..4d25c3c48d --- /dev/null +++ b/packages/cli/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist/build", + "declarationDir": "./dist/types", + "composite": false, + "allowSyntheticDefaultImports": true, + "emitDeclarationOnly": false, + "noEmit": false, + "target": "esnext", + "module": "esnext", + "esModuleInterop": true, + "moduleResolution": "node" + }, + "rootDir": "./src", + "include": ["./src/", "./declarations.d.ts"] +} diff --git a/packages/theme/package.json b/packages/theme/package.json index fb20199436..83ae48651b 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -15,15 +15,9 @@ "access": "public" }, "scripts": { - "build": "yarn run clean && esno ./scripts/build.ts", "clean": "rimraf brand" }, "devDependencies": { - "@tokens-studio/sd-transforms": "^0.9.3", - "@types/ramda": "^0.29.9", - "esno": "^4.7.0", - "ramda": "^0.29.1", - "rimraf": "^5.0.5", - "style-dictionary": "^3.8.0" + "rimraf": "^5.0.5" } } diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json deleted file mode 100644 index 4082f16a5d..0000000000 --- a/packages/theme/tsconfig.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../../tsconfig.json" -} diff --git a/yarn.lock b/yarn.lock index bba0a212d7..e8e9661a7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2583,6 +2583,24 @@ __metadata: languageName: unknown linkType: soft +"@digdir/designsystemet-cli@workspace:packages/cli": + version: 0.0.0-use.local + resolution: "@digdir/designsystemet-cli@workspace:packages/cli" + dependencies: + "@tokens-studio/sd-transforms": "npm:^0.9.3" + "@types/ramda": "npm:^0.29.9" + "@types/yargs": "npm:^17.0.32" + esno: "npm:^4.7.0" + ramda: "npm:^0.29.1" + rimraf: "npm:^5.0.5" + style-dictionary: "npm:^3.8.0" + typescript: "npm:^5.4.5" + yargs: "npm:^17.7.2" + bin: + designsystemet: ./dist/build/build.js + languageName: unknown + linkType: soft + "@digdir/designsystemet-css@npm:0.2.3": version: 0.2.3 resolution: "@digdir/designsystemet-css@npm:0.2.3" @@ -2653,12 +2671,7 @@ __metadata: version: 0.0.0-use.local resolution: "@digdir/designsystemet-theme@workspace:packages/theme" dependencies: - "@tokens-studio/sd-transforms": "npm:^0.9.3" - "@types/ramda": "npm:^0.29.9" - esno: "npm:^4.7.0" - ramda: "npm:^0.29.1" rimraf: "npm:^5.0.5" - style-dictionary: "npm:^3.8.0" languageName: unknown linkType: soft @@ -6061,6 +6074,22 @@ __metadata: languageName: node linkType: hard +"@types/yargs-parser@npm:*": + version: 21.0.3 + resolution: "@types/yargs-parser@npm:21.0.3" + checksum: a794eb750e8ebc6273a51b12a0002de41343ffe46befef460bdbb57262d187fdf608bc6615b7b11c462c63c3ceb70abe2564c8dd8ee0f7628f38a314f74a9b9b + languageName: node + linkType: hard + +"@types/yargs@npm:^17.0.32": + version: 17.0.32 + resolution: "@types/yargs@npm:17.0.32" + dependencies: + "@types/yargs-parser": "npm:*" + checksum: 1e2b2673847011ce43607df690d392f137d95a2d6ea85aa319403eadda2ef4277365efd4982354d8843f2611ef3846c88599660aaeb537fa9ccddae83c2a89de + languageName: node + linkType: hard + "@typescript-eslint/eslint-plugin@npm:6.15.0": version: 6.15.0 resolution: "@typescript-eslint/eslint-plugin@npm:6.15.0" @@ -20778,6 +20807,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^5.4.5": + version: 5.4.5 + resolution: "typescript@npm:5.4.5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: d04a9e27e6d83861f2126665aa8d84847e8ebabcea9125b9ebc30370b98cb38b5dff2508d74e2326a744938191a83a69aa9fddab41f193ffa43eabfdf3f190a5 + languageName: node + linkType: hard + "typescript@patch:typescript@npm%3A>=3 < 6#optional!builtin": version: 5.2.2 resolution: "typescript@patch:typescript@npm%3A5.2.2#optional!builtin::version=5.2.2&hash=f3b441" @@ -20798,6 +20837,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A^5.4.5#optional!builtin": + version: 5.4.5 + resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin::version=5.4.5&hash=e012d7" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 584be8bac7112ad49a9eb9992f71d542b1ff2fafb5bb315e1c196145e8feab589f1d7223cfb2d5df6770789582e6918f8287d1f2f89911b38eb80e29c560ad00 + languageName: node + linkType: hard + "ufo@npm:^1.3.2": version: 1.5.3 resolution: "ufo@npm:1.5.3" @@ -21966,7 +22015,7 @@ __metadata: languageName: node linkType: hard -"yargs@npm:17.7.2, yargs@npm:^17.0.0, yargs@npm:^17.6.2": +"yargs@npm:17.7.2, yargs@npm:^17.0.0, yargs@npm:^17.6.2, yargs@npm:^17.7.2": version: 17.7.2 resolution: "yargs@npm:17.7.2" dependencies: