From 916f6f59af5798f4650f198229c15de8717b2e98 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Thu, 27 Jul 2023 15:03:56 -0300 Subject: [PATCH 01/10] chore: add function to generate json file --- .../tokens/scripts/generate-tokens.spec.ts | 32 ++++++++++- packages/tokens/scripts/generate-tokens.ts | 57 +++++++++++++++++++ 2 files changed, 88 insertions(+), 1 deletion(-) diff --git a/packages/tokens/scripts/generate-tokens.spec.ts b/packages/tokens/scripts/generate-tokens.spec.ts index e2d1b8723..e0daeb75e 100644 --- a/packages/tokens/scripts/generate-tokens.spec.ts +++ b/packages/tokens/scripts/generate-tokens.spec.ts @@ -1,5 +1,12 @@ import fs from 'fs' -import { OUTPUT_DIR, TOKENS_DIR, extractTokensFromCss } from './generate-tokens' +import path from 'path' + +import { + OUTPUT_DIR, + TOKENS_DIR, + extractTokensFromCss, + generateJsonFile, +} from './generate-tokens' jest.mock('fs', () => ({ readFileSync: jest.fn().mockReturnValue(` @@ -11,6 +18,10 @@ jest.mock('fs', () => ({ })) describe('Generate Tokens', () => { + afterEach(() => { + jest.clearAllMocks() + }) + it('should extract tokens from CSS content', () => { expect(fs.readFileSync).toHaveBeenCalledWith(TOKENS_DIR, 'utf8') expect(fs.writeFileSync).toHaveBeenCalledWith( @@ -28,4 +39,23 @@ describe('Generate Tokens', () => { extractTokensFromCss(cssContent, 'color') expect(tokens).toEqual({}) }) + + it('should generate JSON file with tokens', () => { + generateJsonFile(` + --color-neutral-black: #000; + --color-contextual-success-dark-1: #106105; + --color-brand-primary-dark-1: #b85000; + --color-neutral-black-rgb: 0 0 0; + --spacing-small: 4px; + --zindex-1: 1; + `) + + const expectedTokens = `{\n "spacing-small\": \"4px\",\n "color-neutral-black\": \"#000\",\n "color-contextual-success-dark-1\": \"#106105\",\n "color-brand-primary-dark-1\": \"#b85000\",\n "zindex-1\": \"1\"\n}` + + expect(fs.writeFileSync).toHaveBeenCalledWith( + path.join(__dirname, '../../dist/tokens.json'), + expectedTokens, + 'utf8' + ) + }) }) diff --git a/packages/tokens/scripts/generate-tokens.ts b/packages/tokens/scripts/generate-tokens.ts index 96277d61f..e682b4a03 100644 --- a/packages/tokens/scripts/generate-tokens.ts +++ b/packages/tokens/scripts/generate-tokens.ts @@ -35,6 +35,62 @@ export function generateJavaScriptFile(outputFilePath: string) { fs.writeFileSync(outputFilePath, jsCode, 'utf8') } +export function generateJsonFile(cssContent: string) { + const spacingRegex = /--spacing-(\w+):\s*([\d\w.#]+);/g + const colorRegex = + /--color-((?:neutral|brand|contextual)-\w+(?:-\w+)*)(?:-(rgb))?:\s*(#(?:[a-fA-F0-9]{3}){1,2})?;?/g + const zIndexRegex = /--zindex-(\w+):\s*([\d]+);/g + + function extractValues(css: string, regex: RegExp) { + const values: Record = {} + let match + while ((match = regex.exec(css)) !== null) { + const [, name, value] = match + values[name] = value + } + return values + } + + function extractColorValues(css: string, regex: RegExp) { + const values: Record = {} + let match + while ((match = regex.exec(css)) !== null) { + const [, name, rgb, value] = match + values[name] = rgb ? `rgb(${value})` : value + } + return values + } + + const spacingValues = extractValues(cssContent, spacingRegex) + const zIndexValues = extractValues(cssContent, zIndexRegex) + const colorValues = extractColorValues(cssContent, colorRegex) + + const spacingOutput = Object.fromEntries( + Object.entries(spacingValues).map(([name, value]) => [ + `spacing-${name}`, + value, + ]) + ) + const colorOutput = Object.fromEntries( + Object.entries(colorValues).map(([name, value]) => [`color-${name}`, value]) + ) + const zIndexOutput = Object.fromEntries( + Object.entries(zIndexValues).map(([name, value]) => [ + `zindex-${name}`, + value, + ]) + ) + const output = { + ...spacingOutput, + ...colorOutput, + ...zIndexOutput, + } + + const jsonOutputFileName = 'tokens.json' + const jsonOutputFilePath = path.join(`${OUTPUT_DIR}/dist`, jsonOutputFileName) + fs.writeFileSync(jsonOutputFilePath, JSON.stringify(output, null, 2), 'utf8') +} + function processCssFileByTokenPrefix(cssFilePath: string) { const cssContent = fs.readFileSync(cssFilePath, 'utf8') @@ -44,6 +100,7 @@ function processCssFileByTokenPrefix(cssFilePath: string) { const outputFilePath = path.join(OUTPUT_DIR, outputFileName) generateJavaScriptFile(outputFilePath) + generateJsonFile(cssContent) } processCssFileByTokenPrefix(TOKENS_DIR) From 1425c0665ca7ad7c5f5d0f442378ca8767b13090 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Thu, 27 Jul 2023 18:36:11 -0300 Subject: [PATCH 02/10] docs: add information about json tokens --- packages/tokens/README.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 51cb3fca0..d2c134ba1 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -2,6 +2,8 @@ This is the tokens of the Atomium design system using CSS Variables to be used in any Framework or Vanilla JS +You should see all the tokens in the [Tokens section of the Storybook](https://juntossomosmais.github.io/atomium/?path=/docs/tokens-colors--docs) + ## Getting Started ### Installation @@ -12,7 +14,9 @@ npm i @juntossomosmais/atomium-tokens ### Basic Usage -The variables can be used in CSS +#### CSS + +The variables can be used in **CSS** ```js import '@juntossomosmais/atomium-tokens/tokens.css' @@ -24,7 +28,9 @@ import '@juntossomosmais/atomium-tokens/tokens.css' } ``` -Or in Javascript +#### JavaScript + +You can also use the variables in **JavaScript** ```js @@ -35,6 +41,10 @@ import * as tokens from '@juntossomosmais/atomium-tokens' primary: tokens.colorBrandPrimaryDark1; ``` -You should see all the tokens in the [Tokens section of the Storybook](https://juntossomosmais.github.io/atomium/?path=/docs/tokens-colors--docs) +#### Json +We also provide a **JSON** file with tokens of **zindex**, **colors** and **spacings**. It is useful for using to compare tokens in Stylelint, for example. +```js +import tokens from '@juntossomosmais/atomium-tokens/tokens.json' +``` From 1a70343b85b4e484639a34ee70ee7e4c1020f9d2 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 14:54:49 -0300 Subject: [PATCH 03/10] chore: add tslib to use ts-node --- package-lock.json | 17 +++++++++-------- package.json | 3 ++- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index ce87ed447..e17c96e4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44,7 +44,7 @@ "@storybook/web-components-webpack5": "^7.0.27", "@testing-library/jest-dom": "^5.16.5", "@types/jest": "^27.0.3", - "@types/node": "^20.4.2", + "@types/node": "^20.4.5", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.1.0", @@ -87,6 +87,7 @@ "stylelint-order": "^6.0.3", "stylelint-scss": "^5.0.1", "ts-jest": "^29.1.1", + "tslib": "^2.6.1", "typescript": "^5.1.6", "vue": "^3.3.4" }, @@ -9487,9 +9488,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.4.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.4.tgz", - "integrity": "sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==", + "version": "20.4.5", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.5.tgz", + "integrity": "sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg==", "dev": true }, "node_modules/@types/node-fetch": { @@ -30933,9 +30934,9 @@ } }, "node_modules/tslib": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", - "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==", "dev": true }, "node_modules/tsutils": { @@ -32394,7 +32395,7 @@ }, "packages/core": { "name": "@juntossomosmais/atomium", - "version": "0.1.0-alpha.23" + "version": "0.1.0-alpha.25" }, "packages/icons": { "name": "@juntossomosmais/atomium-icons" diff --git a/package.json b/package.json index 201e2343c..2fba7d372 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "@storybook/web-components-webpack5": "^7.0.27", "@testing-library/jest-dom": "^5.16.5", "@types/jest": "^27.0.3", - "@types/node": "^20.4.2", + "@types/node": "^20.4.5", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.1.0", @@ -107,6 +107,7 @@ "stylelint-order": "^6.0.3", "stylelint-scss": "^5.0.1", "ts-jest": "^29.1.1", + "tslib": "^2.6.1", "typescript": "^5.1.6", "vue": "^3.3.4" }, From e587f2b7df3db997af8b50a3bee147d64fa96c41 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 14:56:20 -0300 Subject: [PATCH 04/10] feat(tokens): uncouple generate files --- packages/tokens/scripts/generate-tokens.ts | 106 ------------------ .../generate-javascript-tokens.spec.ts} | 31 +---- .../__tests__/generate-json-tokens.spec.ts | 48 ++++++++ .../generate-javascript-tokens.ts | 54 +++++++++ .../generate-tokens/generate-json-tokens.ts | 49 ++++++++ .../tokens/scripts/generate-tokens/index.ts | 10 ++ 6 files changed, 167 insertions(+), 131 deletions(-) delete mode 100644 packages/tokens/scripts/generate-tokens.ts rename packages/tokens/scripts/{generate-tokens.spec.ts => generate-tokens/__tests__/generate-javascript-tokens.spec.ts} (52%) create mode 100644 packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts create mode 100644 packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts create mode 100644 packages/tokens/scripts/generate-tokens/generate-json-tokens.ts create mode 100644 packages/tokens/scripts/generate-tokens/index.ts diff --git a/packages/tokens/scripts/generate-tokens.ts b/packages/tokens/scripts/generate-tokens.ts deleted file mode 100644 index e682b4a03..000000000 --- a/packages/tokens/scripts/generate-tokens.ts +++ /dev/null @@ -1,106 +0,0 @@ -import fs from 'fs' -import path from 'path' - -const CURRENT_DIR = __dirname -export const TOKENS_DIR = path.resolve(CURRENT_DIR, '../tokens.css') -export const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../../') - -const variablePrefixes = ['color', 'spacing', 'screen'] -const tokens: Record = {} - -export function extractTokensFromCss(cssContent: string, prefix: string) { - const cssVariablePattern = new RegExp(`--(${prefix}[\\w-]+):\\s*([^;]+)`, 'g') - - cssContent.replace( - cssVariablePattern, - (_, variable: string, value: string) => { - const variableParts = variable.split('-') - const variableCamelCase = variableParts - .map((part, index) => - index !== 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part - ) - .join('') - - tokens[variableCamelCase] = value.trim() - return '' - } - ) -} - -export function generateJavaScriptFile(outputFilePath: string) { - const jsCode = Object.entries(tokens) - .map(([variable, value]) => `export const ${variable} = '${value}';`) - .join('\n') - - fs.writeFileSync(outputFilePath, jsCode, 'utf8') -} - -export function generateJsonFile(cssContent: string) { - const spacingRegex = /--spacing-(\w+):\s*([\d\w.#]+);/g - const colorRegex = - /--color-((?:neutral|brand|contextual)-\w+(?:-\w+)*)(?:-(rgb))?:\s*(#(?:[a-fA-F0-9]{3}){1,2})?;?/g - const zIndexRegex = /--zindex-(\w+):\s*([\d]+);/g - - function extractValues(css: string, regex: RegExp) { - const values: Record = {} - let match - while ((match = regex.exec(css)) !== null) { - const [, name, value] = match - values[name] = value - } - return values - } - - function extractColorValues(css: string, regex: RegExp) { - const values: Record = {} - let match - while ((match = regex.exec(css)) !== null) { - const [, name, rgb, value] = match - values[name] = rgb ? `rgb(${value})` : value - } - return values - } - - const spacingValues = extractValues(cssContent, spacingRegex) - const zIndexValues = extractValues(cssContent, zIndexRegex) - const colorValues = extractColorValues(cssContent, colorRegex) - - const spacingOutput = Object.fromEntries( - Object.entries(spacingValues).map(([name, value]) => [ - `spacing-${name}`, - value, - ]) - ) - const colorOutput = Object.fromEntries( - Object.entries(colorValues).map(([name, value]) => [`color-${name}`, value]) - ) - const zIndexOutput = Object.fromEntries( - Object.entries(zIndexValues).map(([name, value]) => [ - `zindex-${name}`, - value, - ]) - ) - const output = { - ...spacingOutput, - ...colorOutput, - ...zIndexOutput, - } - - const jsonOutputFileName = 'tokens.json' - const jsonOutputFilePath = path.join(`${OUTPUT_DIR}/dist`, jsonOutputFileName) - fs.writeFileSync(jsonOutputFilePath, JSON.stringify(output, null, 2), 'utf8') -} - -function processCssFileByTokenPrefix(cssFilePath: string) { - const cssContent = fs.readFileSync(cssFilePath, 'utf8') - - variablePrefixes.forEach((prefix) => extractTokensFromCss(cssContent, prefix)) - - const outputFileName = 'index.ts' - const outputFilePath = path.join(OUTPUT_DIR, outputFileName) - - generateJavaScriptFile(outputFilePath) - generateJsonFile(cssContent) -} - -processCssFileByTokenPrefix(TOKENS_DIR) diff --git a/packages/tokens/scripts/generate-tokens.spec.ts b/packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts similarity index 52% rename from packages/tokens/scripts/generate-tokens.spec.ts rename to packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts index e0daeb75e..beb1f47ad 100644 --- a/packages/tokens/scripts/generate-tokens.spec.ts +++ b/packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts @@ -1,12 +1,11 @@ import fs from 'fs' -import path from 'path' +import { TOKENS_DIR } from '..' import { OUTPUT_DIR, - TOKENS_DIR, extractTokensFromCss, - generateJsonFile, -} from './generate-tokens' + generateJsTokensFromCssFile, +} from '../generate-javascript-tokens' jest.mock('fs', () => ({ readFileSync: jest.fn().mockReturnValue(` @@ -17,12 +16,13 @@ jest.mock('fs', () => ({ writeFileSync: jest.fn(), })) -describe('Generate Tokens', () => { - afterEach(() => { +describe('Generate JavaScript tokens', () => { + beforeEach(() => { jest.clearAllMocks() }) it('should extract tokens from CSS content', () => { + generateJsTokensFromCssFile(TOKENS_DIR) expect(fs.readFileSync).toHaveBeenCalledWith(TOKENS_DIR, 'utf8') expect(fs.writeFileSync).toHaveBeenCalledWith( `${OUTPUT_DIR}/index.ts`, @@ -39,23 +39,4 @@ describe('Generate Tokens', () => { extractTokensFromCss(cssContent, 'color') expect(tokens).toEqual({}) }) - - it('should generate JSON file with tokens', () => { - generateJsonFile(` - --color-neutral-black: #000; - --color-contextual-success-dark-1: #106105; - --color-brand-primary-dark-1: #b85000; - --color-neutral-black-rgb: 0 0 0; - --spacing-small: 4px; - --zindex-1: 1; - `) - - const expectedTokens = `{\n "spacing-small\": \"4px\",\n "color-neutral-black\": \"#000\",\n "color-contextual-success-dark-1\": \"#106105\",\n "color-brand-primary-dark-1\": \"#b85000\",\n "zindex-1\": \"1\"\n}` - - expect(fs.writeFileSync).toHaveBeenCalledWith( - path.join(__dirname, '../../dist/tokens.json'), - expectedTokens, - 'utf8' - ) - }) }) diff --git a/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts b/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts new file mode 100644 index 000000000..ab5397b9d --- /dev/null +++ b/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts @@ -0,0 +1,48 @@ +import fs from 'fs' +import path from 'path' + +import { TOKENS_DIR } from '..' +import { + OUTPUT_DIR, + extractTokensFromCss, + generateJsonTokensFromCssFile, +} from '../generate-json-tokens' + +jest.mock('fs', () => ({ + readFileSync: jest.fn().mockReturnValue(` + --color-neutral-black: #000; + --color-contextual-success-dark-1: #106105; + --color-brand-primary-dark-1: #b85000; + --spacing-small: 4px; + --z-index-1: 1; + `), + writeFileSync: jest.fn(), +})) + +describe('Generate tokens.json', () => { + beforeEach(() => { + jest.clearAllMocks() + }) + + it('should generate JSON file with tokens', () => { + generateJsonTokensFromCssFile(TOKENS_DIR) + + const expectedTokens = `{\n "color-neutral-black\": \"#000\",\n "color-contextual-success-dark-1\": \"#106105\",\n "color-brand-primary-dark-1\": \"#b85000\",\n "spacing-small\": \"4px\",\n "z-index-1\": \"1\"\n}` + + expect(fs.readFileSync).toHaveBeenCalledWith(TOKENS_DIR, 'utf8') + expect(fs.writeFileSync).toHaveBeenCalledWith( + path.join(`${OUTPUT_DIR}/tokens.json`), + expectedTokens, + 'utf8' + ) + }) + + it('should ignore CSS content without prefix tokens', () => { + const cssContent = ` + --any-variable: any_value; + ` + const tokens: Record = {} + extractTokensFromCss(cssContent, 'color') + expect(tokens).toEqual({}) + }) +}) diff --git a/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts b/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts new file mode 100644 index 000000000..827079f55 --- /dev/null +++ b/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts @@ -0,0 +1,54 @@ +import fs from 'fs' +import path from 'path' + +const CURRENT_DIR = __dirname +export const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../../') + +const variablePrefixes = [ + 'color', + 'spacing', + 'screen', + 'font', + 'border', + 'z-index', + 'transition', +] +const tokens: Record = {} + +export function extractTokensFromCss(cssContent: string, prefix: string) { + const cssVariablePattern = new RegExp(`--(${prefix}[\\w-]+):\\s*([^;]+)`, 'g') + + cssContent.replace( + cssVariablePattern, + (_, variable: string, value: string) => { + const variableParts = variable.split('-') + const variableCamelCase = variableParts + .map((part, index) => + index !== 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part + ) + .join('') + + tokens[variableCamelCase] = value.trim() + return '' + } + ) +} + +export function generateJsFile(outputFilePath: string) { + const jsCode = Object.entries(tokens) + .map(([variable, value]) => `export const ${variable} = '${value}';`) + .join('\n') + + fs.writeFileSync(outputFilePath, jsCode, 'utf8') +} + +export function generateJsTokensFromCssFile(cssFilePath: string) { + const cssContent = fs.readFileSync(cssFilePath, 'utf8') + + variablePrefixes.forEach((prefix) => extractTokensFromCss(cssContent, prefix)) + + const outputFileName = 'index.ts' + const outputFilePath = path.join(OUTPUT_DIR, outputFileName) + + generateJsFile(outputFilePath) +} diff --git a/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts b/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts new file mode 100644 index 000000000..2ab2f4b93 --- /dev/null +++ b/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts @@ -0,0 +1,49 @@ +import fs from 'fs' +import path from 'path' + +const CURRENT_DIR = __dirname +export const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../../dist') + +const variablePrefixes = [ + 'color', + 'spacing', + 'screen', + 'font', + 'border', + 'z-index', + 'transition', +] +const tokens: Record = {} + +export function extractTokensFromCss(cssContent: string, prefix: string) { + const cssVariablePattern = new RegExp(`--(${prefix}[\\w-]+):\\s*([^;]+)`, 'g') + + cssContent.replace( + cssVariablePattern, + (_, variable: string, value: string) => { + const variableKebabCase = variable + .replace(/([a-z])([A-Z])/g, '$1-$2') + .toLowerCase() + + tokens[variableKebabCase] = value.trim() + return '' + } + ) +} + +export function generateJsonFile(outputFilePath: string) { + const jsonOutput = JSON.stringify(tokens, null, 2) + + fs.writeFileSync(outputFilePath, jsonOutput, 'utf8') +} + +export function generateJsonTokensFromCssFile(cssFilePath: string) { + const cssContent = fs.readFileSync(cssFilePath, 'utf8') + + variablePrefixes.forEach((prefix) => extractTokensFromCss(cssContent, prefix)) + + const outputFileName = 'tokens.json' + const outputFilePath = path.join(OUTPUT_DIR, outputFileName) + + generateJsonFile(outputFilePath) +} diff --git a/packages/tokens/scripts/generate-tokens/index.ts b/packages/tokens/scripts/generate-tokens/index.ts new file mode 100644 index 000000000..b82797aae --- /dev/null +++ b/packages/tokens/scripts/generate-tokens/index.ts @@ -0,0 +1,10 @@ +import path from 'path' + +import { generateJsTokensFromCssFile } from './generate-javascript-tokens' +import { generateJsonTokensFromCssFile } from './generate-json-tokens' + +const CURRENT_DIR = __dirname +export const TOKENS_DIR = path.resolve(CURRENT_DIR, '../../dist/tokens.css') + +generateJsTokensFromCssFile(TOKENS_DIR) +generateJsonTokensFromCssFile(TOKENS_DIR) From b632ced7a5af59fb86b3cb345dde0cbd6f80f698 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 14:57:20 -0300 Subject: [PATCH 05/10] feat(tokens): use ts-node to generate tokens --- packages/tokens/package.json | 3 +-- packages/tokens/tsconfig.json | 5 +++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index b91555f3f..55288dbaf 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -25,8 +25,7 @@ "scripts": { "start": "rollup -c -w", "build:css": "rollup -c", - "build:gen-tokens": "npx babel ./scripts/generate-tokens.ts --out-file ./dist/scripts/generate-tokens.js && node ./dist/scripts/generate-tokens.js", - "build": "npm run build:css && npm run build:gen-tokens && rollup -c rollup.tokens.config.mjs && tsc --module commonjs && rimraf dist/scripts", + "build": "npm run build:css && ts-node ./scripts/generate-tokens/index.ts && rollup -c rollup.tokens.config.mjs && tsc --module commonjs", "publish-library": "npm publish --access public", "test:ci": "jest --coverage --no-cache --updateSnapshot --ci", "test": "jest" diff --git a/packages/tokens/tsconfig.json b/packages/tokens/tsconfig.json index 8121b4be7..019f5928c 100644 --- a/packages/tokens/tsconfig.json +++ b/packages/tokens/tsconfig.json @@ -10,5 +10,10 @@ "esModuleInterop": true, "skipLibCheck": true }, + "ts-node": { + "compilerOptions": { + "module": "commonjs" + } + }, "exclude": ["node_modules", "dist"] } From bd003e4d05a875fdc2a132f1fa3dad027315477d Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 14:58:27 -0300 Subject: [PATCH 06/10] docs(tokens): improve text about json --- packages/tokens/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/README.md b/packages/tokens/README.md index d2c134ba1..c966ce1bb 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -43,7 +43,7 @@ primary: tokens.colorBrandPrimaryDark1; #### Json -We also provide a **JSON** file with tokens of **zindex**, **colors** and **spacings**. It is useful for using to compare tokens in Stylelint, for example. +We also provide a **JSON** file with tokens. It is useful for using to compare tokens in Stylelint, for example. ```js import tokens from '@juntossomosmais/atomium-tokens/tokens.json' From 6dbc285c56e0e99fce96f238f573b960117de92d Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 15:23:36 -0300 Subject: [PATCH 07/10] feat(tokens): add zindex to tokens output --- .../generate-tokens/__tests__/generate-json-tokens.spec.ts | 4 ++-- .../scripts/generate-tokens/generate-javascript-tokens.ts | 2 +- .../tokens/scripts/generate-tokens/generate-json-tokens.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts b/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts index ab5397b9d..f55963a10 100644 --- a/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts +++ b/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts @@ -14,7 +14,7 @@ jest.mock('fs', () => ({ --color-contextual-success-dark-1: #106105; --color-brand-primary-dark-1: #b85000; --spacing-small: 4px; - --z-index-1: 1; + --zindex-1: 1; `), writeFileSync: jest.fn(), })) @@ -27,7 +27,7 @@ describe('Generate tokens.json', () => { it('should generate JSON file with tokens', () => { generateJsonTokensFromCssFile(TOKENS_DIR) - const expectedTokens = `{\n "color-neutral-black\": \"#000\",\n "color-contextual-success-dark-1\": \"#106105\",\n "color-brand-primary-dark-1\": \"#b85000\",\n "spacing-small\": \"4px\",\n "z-index-1\": \"1\"\n}` + const expectedTokens = `{\n "color-neutral-black\": \"#000\",\n "color-contextual-success-dark-1\": \"#106105\",\n "color-brand-primary-dark-1\": \"#b85000\",\n "spacing-small\": \"4px\",\n "zindex-1\": \"1\"\n}` expect(fs.readFileSync).toHaveBeenCalledWith(TOKENS_DIR, 'utf8') expect(fs.writeFileSync).toHaveBeenCalledWith( diff --git a/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts b/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts index 827079f55..0c6e2322c 100644 --- a/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts +++ b/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts @@ -10,7 +10,7 @@ const variablePrefixes = [ 'screen', 'font', 'border', - 'z-index', + 'zindex', 'transition', ] const tokens: Record = {} diff --git a/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts b/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts index 2ab2f4b93..bba2c5406 100644 --- a/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts +++ b/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts @@ -10,7 +10,7 @@ const variablePrefixes = [ 'screen', 'font', 'border', - 'z-index', + 'zindex', 'transition', ] const tokens: Record = {} From a1aa21d484912fe13215620397bff53203876960 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 15:23:59 -0300 Subject: [PATCH 08/10] chore: change path to get coverage --- packages/tokens/jest.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tokens/jest.config.js b/packages/tokens/jest.config.js index 1cf5a06ee..50f308e70 100644 --- a/packages/tokens/jest.config.js +++ b/packages/tokens/jest.config.js @@ -9,8 +9,8 @@ module.exports = { coverageReporters: ['lcov'], coveragePathIgnorePatterns: ['/node_modules/'], collectCoverageFrom: [ - 'scripts/*.ts', - '!scripts/*.spec.ts', + 'scripts/**/*.ts', + '!scripts/**/*.spec.ts', '!src/**/stories/**', '!src/**/*.mock.ts', '!src/**/*.spec.ts', From 4cef77c3a6da40a8ad33e573e97a4d24e8699974 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 15:33:12 -0300 Subject: [PATCH 09/10] feat(tokens): share variables prefixes between files --- .../__tests__/generate-javascript-tokens.spec.ts | 4 ++-- .../__tests__/generate-json-tokens.spec.ts | 4 ++-- .../generate-tokens/generate-javascript-tokens.ts | 14 ++++---------- .../generate-tokens/generate-json-tokens.ts | 14 ++++---------- packages/tokens/scripts/generate-tokens/index.ts | 14 ++++++++++++-- 5 files changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts b/packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts index beb1f47ad..9716a1189 100644 --- a/packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts +++ b/packages/tokens/scripts/generate-tokens/__tests__/generate-javascript-tokens.spec.ts @@ -1,6 +1,6 @@ import fs from 'fs' -import { TOKENS_DIR } from '..' +import { TOKENS_DIR, variablePrefixes } from '..' import { OUTPUT_DIR, extractTokensFromCss, @@ -22,7 +22,7 @@ describe('Generate JavaScript tokens', () => { }) it('should extract tokens from CSS content', () => { - generateJsTokensFromCssFile(TOKENS_DIR) + generateJsTokensFromCssFile(TOKENS_DIR, variablePrefixes) expect(fs.readFileSync).toHaveBeenCalledWith(TOKENS_DIR, 'utf8') expect(fs.writeFileSync).toHaveBeenCalledWith( `${OUTPUT_DIR}/index.ts`, diff --git a/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts b/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts index f55963a10..e78c234a7 100644 --- a/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts +++ b/packages/tokens/scripts/generate-tokens/__tests__/generate-json-tokens.spec.ts @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { TOKENS_DIR } from '..' +import { TOKENS_DIR, variablePrefixes } from '..' import { OUTPUT_DIR, extractTokensFromCss, @@ -25,7 +25,7 @@ describe('Generate tokens.json', () => { }) it('should generate JSON file with tokens', () => { - generateJsonTokensFromCssFile(TOKENS_DIR) + generateJsonTokensFromCssFile(TOKENS_DIR, variablePrefixes) const expectedTokens = `{\n "color-neutral-black\": \"#000\",\n "color-contextual-success-dark-1\": \"#106105\",\n "color-brand-primary-dark-1\": \"#b85000\",\n "spacing-small\": \"4px\",\n "zindex-1\": \"1\"\n}` diff --git a/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts b/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts index 0c6e2322c..6ed42505d 100644 --- a/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts +++ b/packages/tokens/scripts/generate-tokens/generate-javascript-tokens.ts @@ -4,15 +4,6 @@ import path from 'path' const CURRENT_DIR = __dirname export const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../../') -const variablePrefixes = [ - 'color', - 'spacing', - 'screen', - 'font', - 'border', - 'zindex', - 'transition', -] const tokens: Record = {} export function extractTokensFromCss(cssContent: string, prefix: string) { @@ -42,7 +33,10 @@ export function generateJsFile(outputFilePath: string) { fs.writeFileSync(outputFilePath, jsCode, 'utf8') } -export function generateJsTokensFromCssFile(cssFilePath: string) { +export function generateJsTokensFromCssFile( + cssFilePath: string, + variablePrefixes: string[] +) { const cssContent = fs.readFileSync(cssFilePath, 'utf8') variablePrefixes.forEach((prefix) => extractTokensFromCss(cssContent, prefix)) diff --git a/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts b/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts index bba2c5406..1f8404bf0 100644 --- a/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts +++ b/packages/tokens/scripts/generate-tokens/generate-json-tokens.ts @@ -4,15 +4,6 @@ import path from 'path' const CURRENT_DIR = __dirname export const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../../dist') -const variablePrefixes = [ - 'color', - 'spacing', - 'screen', - 'font', - 'border', - 'zindex', - 'transition', -] const tokens: Record = {} export function extractTokensFromCss(cssContent: string, prefix: string) { @@ -37,7 +28,10 @@ export function generateJsonFile(outputFilePath: string) { fs.writeFileSync(outputFilePath, jsonOutput, 'utf8') } -export function generateJsonTokensFromCssFile(cssFilePath: string) { +export function generateJsonTokensFromCssFile( + cssFilePath: string, + variablePrefixes: string[] +) { const cssContent = fs.readFileSync(cssFilePath, 'utf8') variablePrefixes.forEach((prefix) => extractTokensFromCss(cssContent, prefix)) diff --git a/packages/tokens/scripts/generate-tokens/index.ts b/packages/tokens/scripts/generate-tokens/index.ts index b82797aae..d9710c945 100644 --- a/packages/tokens/scripts/generate-tokens/index.ts +++ b/packages/tokens/scripts/generate-tokens/index.ts @@ -6,5 +6,15 @@ import { generateJsonTokensFromCssFile } from './generate-json-tokens' const CURRENT_DIR = __dirname export const TOKENS_DIR = path.resolve(CURRENT_DIR, '../../dist/tokens.css') -generateJsTokensFromCssFile(TOKENS_DIR) -generateJsonTokensFromCssFile(TOKENS_DIR) +export const variablePrefixes = [ + 'color', + 'spacing', + 'screen', + 'font', + 'border', + 'zindex', + 'transition', +] + +generateJsTokensFromCssFile(TOKENS_DIR, variablePrefixes) +generateJsonTokensFromCssFile(TOKENS_DIR, variablePrefixes) From 4db7039cc4ca80c668d5f3619bffeb339557e2c0 Mon Sep 17 00:00:00 2001 From: felipefialho Date: Fri, 28 Jul 2023 15:35:24 -0300 Subject: [PATCH 10/10] chore: remove @babel/cli --- package-lock.json | 61 ----------------------------------------------- package.json | 1 - 2 files changed, 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index e17c96e4f..9a8708f36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@stencil/core": "^4.0.1" }, "devDependencies": { - "@babel/cli": "^7.22.9", "@babel/core": "^7.22.9", "@babel/preset-env": "^7.22.9", "@babel/preset-react": "^7.22.5", @@ -159,35 +158,6 @@ "x-default-browser": "bin/x-default-browser.js" } }, - "node_modules/@babel/cli": { - "version": "7.22.9", - "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.22.9.tgz", - "integrity": "sha512-nb2O7AThqRo7/E53EGiuAkMaRbb7J5Qp3RvN+dmua1U+kydm0oznkhqbTEG15yk26G/C3yL6OdZjzgl+DMXVVA==", - "dev": true, - "dependencies": { - "@jridgewell/trace-mapping": "^0.3.17", - "commander": "^4.0.1", - "convert-source-map": "^1.1.0", - "fs-readdir-recursive": "^1.1.0", - "glob": "^7.2.0", - "make-dir": "^2.1.0", - "slash": "^2.0.0" - }, - "bin": { - "babel": "bin/babel.js", - "babel-external-helpers": "bin/babel-external-helpers.js" - }, - "engines": { - "node": ">=6.9.0" - }, - "optionalDependencies": { - "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3", - "chokidar": "^3.4.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, "node_modules/@babel/code-frame": { "version": "7.22.5", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz", @@ -5061,13 +5031,6 @@ "tar-stream": "^2.1.4" } }, - "node_modules/@nicolo-ribaudo/chokidar-2": { - "version": "2.1.8-no-fsevents.3", - "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", - "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", - "dev": true, - "optional": true - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -13002,15 +12965,6 @@ "node": ">= 0.8" } }, - "node_modules/commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "dev": true, - "engines": { - "node": ">= 6" - } - }, "node_modules/common-path-prefix": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz", @@ -16743,12 +16697,6 @@ "integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ==", "dev": true }, - "node_modules/fs-readdir-recursive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", - "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", - "dev": true - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -28529,15 +28477,6 @@ "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==", "dev": true }, - "node_modules/slash": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", - "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", - "dev": true, - "engines": { - "node": ">=6" - } - }, "node_modules/slice-ansi": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz", diff --git a/package.json b/package.json index 2fba7d372..28321e01d 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,6 @@ "@stencil/core": "^4.0.1" }, "devDependencies": { - "@babel/cli": "^7.22.9", "@babel/core": "^7.22.9", "@babel/preset-env": "^7.22.9", "@babel/preset-react": "^7.22.5",