feat(tokens): add function to generate json file (#206)

juntossomosmais · Jul 31, 2023 · 89328fa · 89328fa
1 parent d87bc19
commit 89328fa
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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",
@@ -64,7 +63,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 +106,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"
   },

diff --git 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. It is useful for using to compare tokens in Stylelint, for example.
 
+```js
+import tokens from '@juntossomosmais/atomium-tokens/tokens.json'
+```
diff --git 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',

diff --git 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/...es/tokens/scripts/generate-tokens.spec.ts → ...ests__/generate-javascript-tokens.spec.ts b/...es/tokens/scripts/generate-tokens.spec.ts → ...ests__/generate-javascript-tokens.spec.ts
@@ -1,5 +1,11 @@
 import fs from 'fs'
-import { OUTPUT_DIR, TOKENS_DIR, extractTokensFromCss } from './generate-tokens'
+
+import { TOKENS_DIR, variablePrefixes } from '..'
+import {
+  OUTPUT_DIR,
+  extractTokensFromCss,
+  generateJsTokensFromCssFile,
+} from '../generate-javascript-tokens'
 
 jest.mock('fs', () => ({
   readFileSync: jest.fn().mockReturnValue(`
@@ -10,8 +16,13 @@ jest.mock('fs', () => ({
   writeFileSync: jest.fn(),
 }))
 
-describe('Generate Tokens', () => {
+describe('Generate JavaScript tokens', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('should extract tokens from CSS content', () => {
+    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
@@ -0,0 +1,48 @@
+import fs from 'fs'
+import path from 'path'
+
+import { TOKENS_DIR, variablePrefixes } 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;
+    --zindex-1: 1;
+  `),
+  writeFileSync: jest.fn(),
+}))
+
+describe('Generate tokens.json', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should generate JSON file with tokens', () => {
+    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}`
+
+    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<string, string> = {}
+    extractTokensFromCss(cssContent, 'color')
+    expect(tokens).toEqual({})
+  })
+})
diff --git a/packages/tokens/scripts/generate-tokens.ts → ...rate-tokens/generate-javascript-tokens.ts b/packages/tokens/scripts/generate-tokens.ts → ...rate-tokens/generate-javascript-tokens.ts
@@ -2,10 +2,8 @@ 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<string, string> = {}
 
 export function extractTokensFromCss(cssContent: string, prefix: string) {
@@ -27,23 +25,24 @@ export function extractTokensFromCss(cssContent: string, prefix: string) {
   )
 }
 
-export function generateJavaScriptFile(outputFilePath: string) {
+export function generateJsFile(outputFilePath: string) {
   const jsCode = Object.entries(tokens)
     .map(([variable, value]) => `export const ${variable} = '${value}';`)
     .join('\n')
 
   fs.writeFileSync(outputFilePath, jsCode, 'utf8')
 }
 
-function processCssFileByTokenPrefix(cssFilePath: string) {
+export function generateJsTokensFromCssFile(
+  cssFilePath: string,
+  variablePrefixes: 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)
+  generateJsFile(outputFilePath)
 }
-
-processCssFileByTokenPrefix(TOKENS_DIR)