feat: add tailwind plugin

.github/workflows/validate.yml

@@ -91,6 +91,45 @@ jobs:
       - name: Build ⚙️
         run: pnpm build
         working-directory: packages/node-cli
+  style-tailwind:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install 🔧
+        run: pnpm install
+      - name: Format 🔍
+        run: |
+          pnpm format
+          pnpm lint
+        working-directory: packages/style-tailwind
+      - name: Test ✅
+        run: pnpm test
+        working-directory: packages/style-tailwind
+      - name: Build ⚙️
+        run: pnpm build
+        working-directory: packages/style-tailwind
   global:
     runs-on: ubuntu-latest
     steps:

README.md

@@ -25,7 +25,9 @@ The project is composed of multiple packages:
 - [documentation-portal](./packages/documentation-portal/README.md): the website that will host the design systems [STARTED]
 - a figma integration to extract the component from figma [DONE]
 - a figma plugin that will help check the code from Figma (see development status, etc) [NOT STARTED]
-- a cli [dshub](./packages//node-cli/README.md) to extract the components from the code [STARTED]
+- a cli [dshub](./packages/node-cli/README.md) to extract the components from the code [STARTED]
+- a [tailwind plugin](./packages/style-tailwind/README.md) to set the theme from design tokens [STARTED]
+- a cli to extract the components from the code [STARTED]
 - a VS Code plugin to help the developer to use the design system [NOT STARTED]
 - a eslint plugin to check the code against the design system [NOT STARTED]
 

packages/style-tailwind/.gitignore

@@ -0,0 +1 @@
+dist

packages/style-tailwind/.npmignore

@@ -0,0 +1,6 @@
+src
+.prettierignore
+.prettierrc
+eslint.config.mjs
+jest.config.ts 
+tsconfig.json

packages/style-tailwind/.prettierignore

@@ -0,0 +1,10 @@
+build
+old
+CHANGELOG.md
+public/icons/*.json
+.cache
+coverage
+playwright-report
+pnpm-lock.yaml
+dist
+templates

packages/style-tailwind/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

packages/style-tailwind/README.md

@@ -0,0 +1,32 @@
+# @design-system-hub/tailwind
+
+## Installation
+
+```bash
+npm install @design-system-hub/tailwind
+# or
+yarn add @design-system-hub/tailwind
+# or
+pnpm add @design-system-hub/tailwind
+```
+
+## Usage
+
+This package is designed to work with the [dshub](../node-cli/README.md) CLI tool.
+
+Once you have run `dshub pull` and have the file `src/tailwind.css` in your project, you can set up tailwind to use CSS variables automatically.
+
+```ts
+// tailwind.config.js
+
+import { generateTailwindConfig } from '@design-system-hub/tailwind'
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  theme: {
+    extends: generateTailwindConfig(),
+  },
+  plugins: [],
+}
+```

packages/style-tailwind/eslint.config.mjs

@@ -0,0 +1,34 @@
+import typescriptParser from '@typescript-eslint/parser'
+import js from '@eslint/js'
+import jest from 'eslint-plugin-jest'
+import tseslint from 'typescript-eslint'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+
+// Following this article: https://www.raulmelo.me/en/blog/migration-eslint-to-flat-config
+
+export default tseslint.config(
+  {
+    ignores: ['dist/**', 'node_modules/**'],
+  },
+  js.configs.recommended,
+  {
+    files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parser: typescriptParser,
+      globals: {
+        document: 'readonly',
+      },
+    },
+    rules: {
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+    },
+  },
+  {
+    files: ['**/*.{test,spec}.tsx?'],
+    ...jest.configs['flat/recommended'],
+  },
+  ...tseslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+)

packages/style-tailwind/jest.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from 'jest'
+
+const config: Config = {
+  testMatch: ['<rootDir>/src/**/*.test.{tsx,ts}'],
+  preset: 'ts-jest',
+  moduleNameMapper: {
+    '~/(.*)$': '<rootDir>/$1',
+  },
+  verbose: true,
+}
+
+export default config

packages/style-tailwind/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@design-systems-hub/tailwind",
+  "description": "A library to override tailwind theme using design tokens",
+  "keywords": [
+    "tailwind",
+    "design system",
+    "design system hub"
+  ],
+  "main": "dist/lib.js",
+  "version": "0.1.0",
+  "scripts": {
+    "lib": "tsx ./src/lib.ts",
+    "build": "ncc build ./src/lib.ts -o dist",
+    "test": "jest",
+    "lint": "eslint .",
+    "format": "prettier --check ."
+  },
+  "dependencies": {
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^8.57.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^11.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^9.2.6",
+    "@semantic-release/npm": "^11.0.3",
+    "@semantic-release/release-notes-generator": "^12.1.0",
+    "@tsconfig/node20": "^20.1.2",
+    "@tsconfig/strictest": "^2.0.3",
+    "@types/configstore": "^6.0.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.12",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vercel/ncc": "^0.38.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "semantic-release": "^23.0.2",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.7.1",
+    "typescript-eslint": "^7.1.1"
+  }
+}

packages/style-tailwind/src/actions/__fixtures__/with-tokens/colors.json

@@ -0,0 +1,25 @@
+{
+  "$type": "color",
+  "slate": {
+    "500": {
+      "$value": "rgba(55, 65, 81, 1)"
+    },
+    "900": {
+      "$value": "rgba(29, 0, 7, 1)"
+    }
+  },
+  "white": {
+    "$value": "rgba(255, 255, 255, 1)"
+  },
+  "primary": {
+    "500": {
+      "$value": "rgba(231, 30, 77, 1)"
+    },
+    "600": {
+      "$value": "rgba(226, 26, 95, 1)"
+    },
+    "700": {
+      "$value": "rgba(215, 4, 102, 1)"
+    }
+  }
+}

packages/style-tailwind/src/actions/__fixtures__/with-tokens/dimensions.json

@@ -0,0 +1 @@
+{}

packages/style-tailwind/src/actions/__fixtures__/with-tokens/object-values.json

@@ -0,0 +1,21 @@
+{
+  "shadows": {
+    "$type": "shadow",
+    "raised": {
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.25)",
+        "offsetX": 0,
+        "offsetY": 4,
+        "blur": 4
+      }
+    },
+    "overlay": {
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.25)",
+        "offsetX": 0,
+        "offsetY": 15,
+        "blur": 11
+      }
+    }
+  }
+}

packages/style-tailwind/src/actions/__fixtures__/with-tokens/text.json

@@ -0,0 +1,21 @@
+{
+  "typography": {
+    "$type": "typography",
+    "h2": {
+      "$value": {
+        "fontFamily": "Geist",
+        "fontSize": 30,
+        "fontWeight": 600,
+        "lineHeight": 1
+      }
+    },
+    "h1": {
+      "$value": {
+        "fontFamily": "Geist",
+        "fontSize": 39,
+        "fontWeight": 700,
+        "lineHeight": 1
+      }
+    }
+  }
+}

packages/style-tailwind/src/actions/__tests__/find-design-tokens.test.ts

@@ -0,0 +1,46 @@
+import path from 'node:path'
+import { findDesignTokens } from '../find-design-tokens'
+
+describe('findDesignTokens', () => {
+  it('should return empty object', async () => {
+    const tokenPath = path.join(__dirname, '../__fixtures__/empty')
+
+    const result = await findDesignTokens(tokenPath)
+
+    expect(result).toEqual({})
+  })
+
+  it('should return tokens', async () => {
+    const tokenPath = path.join(__dirname, '../__fixtures__/with-tokens')
+
+    const result = await findDesignTokens(tokenPath)
+
+    expect(result).toEqual({
+      colors: {
+        $type: 'color',
+        primary: {
+          '500': {
+            $value: 'rgba(231, 30, 77, 1)',
+          },
+          '600': {
+            $value: 'rgba(226, 26, 95, 1)',
+          },
+          '700': {
+            $value: 'rgba(215, 4, 102, 1)',
+          },
+        },
+        slate: {
+          '500': {
+            $value: 'rgba(55, 65, 81, 1)',
+          },
+          '900': {
+            $value: 'rgba(29, 0, 7, 1)',
+          },
+        },
+        white: {
+          $value: 'rgba(255, 255, 255, 1)',
+        },
+      },
+    })
+  })
+})

packages/style-tailwind/src/actions/__tests__/generate-tailwind-theme.test.ts

@@ -0,0 +1,44 @@
+import { generateTailwindTheme } from '../generate-tailwind-theme'
+
+describe('generateTailwindTheme', () => {
+  it('should return empty config', () => {
+    const tokens = {}
+
+    const result = generateTailwindTheme(tokens)
+
+    expect(result).toEqual({
+      colors: {},
+    })
+  })
+
+  it('should return config with primary', () => {
+    const tokens = {
+      colors: {
+        $type: 'color',
+        slate: {
+          '500': {
+            $value: 'rgba(55, 65, 81, 1)',
+          },
+          '900': {
+            $value: 'rgba(29, 0, 7, 1)',
+          },
+        },
+        white: {
+          $value: 'rgba(255, 255, 255, 1)',
+        },
+      },
+    }
+
+    const result = generateTailwindTheme(tokens)
+
+    expect(result).toEqual({
+      colors: {
+        slate: {
+          500: 'var(--slate-500)',
+          900: 'var(--slate-900)',
+        },
+        white: 'var(--white)',
+      },
+    })
+  })
+})