feat(tokens): compile ts files into js map on generate tokens script (#…

…162)

Co-authored-by: Felipe Fialho <hi@felipefialho.com>

.gitignore

@@ -7,6 +7,7 @@ packages/react/src/components
 packages/vue/src/components
 packages/**/coverage
 packages/**/components.d.ts
+packages/tokens/index.ts
 packages/core/react
 packages/core/vue
 packages/core/core.css

package.json

@@ -35,6 +35,7 @@
     "@stencil/core": "^3.2.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.22.5",
     "@babel/core": "^7.22.1",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
@@ -45,6 +46,7 @@
     "@nrwl/cli": "15.9.2",
     "@nrwl/eslint-plugin-nx": "^16.0.1",
     "@nrwl/workspace": "15.9.2",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@stencil/react-output-target": "^0.4.0",
     "@stencil/sass": "^3.0.3",
     "@stencil/vue-output-target": "^0.7.0",

packages/tokens/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
+}

packages/tokens/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testMatch: ['**/*.spec.ts'],
+  moduleFileExtensions: ['ts', 'js'],
+  collectCoverage: true,
+  coverageReporters: ['lcov'],
+  collectCoverageFrom: ['scripts/*.ts', '!scripts/*.spec.ts'],
+}

packages/tokens/package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0-alpha.18",
   "description": "Tokens and variables for Atomium",
   "access": "public",
-  "type": "module",
-  "main": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/juntossomosmais/atomium.git",
@@ -16,12 +17,18 @@
   },
   "exports": {
     "./*": "./dist/*",
-    ".": "./dist/index.d.ts"
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
   },
   "scripts": {
     "start": "rollup -c -w",
-    "build": "rollup -c && tsc && node dist/scripts/generate-tokens.js",
-    "publish-library": "npm publish --access public"
+    "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",
+    "publish-library": "npm publish --access public",
+    "test": "jest"
   },
   "files": [
     "dist"

packages/tokens/rollup.tokens.config.mjs

@@ -0,0 +1,20 @@
+import typescript from '@rollup/plugin-typescript'
+
+export default [
+  {
+    input: './index.ts',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: 'dist/index.mjs',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [typescript()],
+  },
+]

packages/tokens/scripts/generate-tokens.spec.ts

@@ -0,0 +1,31 @@
+import fs from 'fs'
+import { OUTPUT_DIR, TOKENS_DIR, extractTokensFromCss } from './generate-tokens'
+
+jest.mock('fs', () => ({
+  readFileSync: jest.fn().mockReturnValue(`
+    --color-primary: #ff0000;
+    --spacing-small: 4px;
+    --screen-mobile: 480px;
+  `),
+  writeFileSync: jest.fn(),
+}))
+
+describe('Generate Tokens', () => {
+  it('should extract tokens from CSS content', () => {
+    expect(fs.readFileSync).toHaveBeenCalledWith(TOKENS_DIR, 'utf8')
+    expect(fs.writeFileSync).toHaveBeenCalledWith(
+      `${OUTPUT_DIR}/index.ts`,
+      `export const colorPrimary = '#ff0000';\nexport const spacingSmall = '4px';\nexport const screenMobile = '480px';`,
+      '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({})
+  })
+})

packages/tokens/scripts/generate-tokens.ts

@@ -1,17 +1,15 @@
 import fs from 'fs'
 import path from 'path'
-import { fileURLToPath } from 'url'
 
-const CURRENT_DIR = path.dirname(fileURLToPath(import.meta.url))
-const TOKENS_DIR = path.resolve(CURRENT_DIR, '../tokens.css')
-const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../')
+const CURRENT_DIR = __dirname
+export const TOKENS_DIR = path.resolve(CURRENT_DIR, '../tokens.css')
+export const OUTPUT_DIR = path.resolve(CURRENT_DIR, '../../')
 
 const prefixes = ['color', 'spacing', 'screen']
-const exportStatements: Array<string> = []
+const tokens: Record<string, string> = {}
 
-function extractTokensFromCss(cssContent: string, prefix: string) {
+export function extractTokensFromCss(cssContent: string, prefix: string) {
   const cssVariablePattern = new RegExp(`--(${prefix}[\\w-]+):\\s*([^;]+)`, 'g')
-  const tokens = {}
 
   cssContent.replace(
     cssVariablePattern,
@@ -27,40 +25,25 @@ function extractTokensFromCss(cssContent: string, prefix: string) {
       return ''
     }
   )
-
-  return tokens
 }
 
-function generateJavaScriptFile(
-  tokens: { [token: string]: string },
-  outputFilePath: string
-) {
+export function generateJavaScriptFile(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, prefix: string) {
+function processCssFileByTokenPrefix(cssFilePath: string) {
   const cssContent = fs.readFileSync(cssFilePath, 'utf8')
-  const tokens = extractTokensFromCss(cssContent, prefix)
-
-  const outputFileName = `${prefix}.ts`
-  const outputFilePath = path.join(OUTPUT_DIR, outputFileName)
 
-  generateJavaScriptFile(tokens, outputFilePath)
-  exportStatements.push(`export * from './${prefix}';`)
-}
+  prefixes.forEach((prefix) => extractTokensFromCss(cssContent, prefix))
 
-function generateIndexFile() {
-  const outputFileName = 'index.d.ts'
+  const outputFileName = 'index.ts'
   const outputFilePath = path.join(OUTPUT_DIR, outputFileName)
-  fs.writeFileSync(outputFilePath, exportStatements.join('\n'), 'utf8')
-}
 
-prefixes.forEach((prefix) => {
-  processCssFileByTokenPrefix(TOKENS_DIR, prefix)
-})
+  generateJavaScriptFile(outputFilePath)
+}
 
-generateIndexFile()
+export const generateTokens = processCssFileByTokenPrefix(TOKENS_DIR)

sonar-project.properties

@@ -45,7 +45,7 @@ packages/core/src/storybook-declarations.d.ts,\
 packages/core/src/typings.d.ts,\
 packages/core/src/index.ts,\
 packages/react/**,\
-packages/tokens/scripts/generate-tokens.ts,\
+packages/tokens/scripts/*.ts,\
 packages/vue/**
 
 sonar.typescript.tsconfigPath=tsconfig.base.json