feat: generate tokens with theo (#136)

Co-authored-by: Andre Luiz Rabello <andre.luiz_r@hotmail.com>

.github/workflows/deploy.yml

@@ -28,7 +28,9 @@ jobs:
         env:
           STORYBOOK_MODE: production
           STORYBOOK_GA_ID: ${{ secrets.STORYBOOK_GA_ID }}
-        run: npx build-storybook -o public
+        run: |
+          yarn generate
+          npx build-storybook -o public
 
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@3.7.1

.github/workflows/preview.yml

@@ -26,6 +26,7 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           build: |
             yarn install --frozen-lockfile
+            yarn generate
             npx build-storybook -o public
           dist: 'public'
           failOnError: 'failed'

.gitignore

@@ -8,7 +8,6 @@ Desktop.ini
 
 # Editor configuration
 .idea
-.vscode
 *.sublime-project
 *.sublime-workspace
 
@@ -25,3 +24,4 @@ package-lock.json
 .castor*
 coverage
 dist
+packages/core/src/theme/tokens.scss

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "[handlebars]": {
+    "editor.tabSize": 2
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true,
+  "html.format.endWithNewline": true,
+  "html.format.indentHandlebars": true,
+  "html.format.maxPreserveNewLines": 0
+}

CONTRIBUTING.md

@@ -62,10 +62,10 @@ Castor consists of multiple packages. You can build them by running:
 
     yarn build
 
-It will concurrently execute multiple steps for each package:
+It generates style tokens, then concurrently executes multiple steps for each package by:
 
-- generates compressed `.css` files (without source map) for vanilla integration
-- generates ESM compiled `.js` from `.ts` files with `tsc` and `tsconfig.json`
+- generating compressed `.css` files (without source map) for vanilla integration
+- generating ESM compiled `.js` from `.ts` files with `tsc` and `tsconfig.json`
 
 ## Publish new version
 

package.json

@@ -10,8 +10,11 @@
     "node": ">= 14"
   },
   "scripts": {
+    "prestart": "yarn generate",
     "start": "start-storybook -p 6006",
-    "prebuild": "shx rm -rf packages/*/dist",
+    "generate": "concurrently yarn:generate:*",
+    "generate:tokens": "esbuild scripts/generate-tokens.ts --bundle --platform=node --target=es2019 --format=cjs --external:theo | node",
+    "prebuild": "shx rm -rf packages/*/dist && yarn generate",
     "build": "concurrently yarn:build:*",
     "build:core:css": "sass packages/core/style:packages/core/dist --no-source-map -s compressed",
     "build:core:esm": "tsc -p packages/core/tsconfig.json",
@@ -37,16 +40,19 @@
     "@storybook/react": "^6.1.11",
     "@types/jest": "^26.0.19",
     "@types/react": "^17.0.0",
+    "@types/theo": "^8.1.3",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
     "@typescript-eslint/parser": "^4.12.0",
     "commitizen": "^4.2.2",
     "concurrently": "^5.3.0",
     "cz-conventional-changelog": "^3.3.0",
+    "esbuild": "^0.8.29",
     "eslint": "^7.17.0",
     "eslint-plugin-react": "^7.22.0",
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
+    "optimist": "^0.6.1",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -56,6 +62,7 @@
     "standard-version": "^9.1.0",
     "stylelint": "^13.8.0",
     "stylelint-config-sass-guidelines": "^7.1.0",
+    "theo": "^8.1.5",
     "ts-jest": "^26.4.4",
     "typescript": "^4.1.3"
   }