build-tokens.yaml

name: Build Tokens
on:
  pull_request:
    types: [opened, synchronize, edited, reopened]
    paths:
      - 'packages/tokens/**'

jobs:
  build:
    name: Build Tokens
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup
        uses: ./.github/actions/setup-pnpm

      - name: Install dependencies
        run: pnpm --filter design-system-tokens... install

      - name: Build tokens & dependencies
        run: pnpm --filter design-system-tokens... build

      - name: Create Summary
        id: summary
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs')
            const path = require('path')

            const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated')
            const inputFiles = inputFileNames.map(fileName => ({
              type: path.extname(fileName).replace(/^\./, ''),
              name: fileName,
              content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8')
            }))

            const outputOrder = [
              'index.scss',
              'core.scss',
              'mode.scss',
              'device.scss',
              'channel.scss',
              'theme.scss',
              'components.scss',
            ]
            const outputFileNames = fs.readdirSync('packages/tokens/dist')
            const outputFiles = outputFileNames
              .map(fileName => ({
                type: path.extname(fileName).replace(/^\./, ''),
                name: fileName,
                content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8')
              }))
              .map(({ type, name, content }) => {
                if (type === 'scss') content = content.replaceAll('\n\n', '\n \n').replaceAll('$', '$').replaceAll('  ', '  ')
                return { type, name, content }
              })
              .sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000))

            return `# Token Build
            ## Input
            ${inputFiles.map(({ type, name, content }) => `<details>
              <summary><code>${name}</code></summary>
              <pre lang="${type}">${content}</pre>
            </details>`).join('\n')}

            ## Output
            ${outputFiles.map(({ type, name, content }) => `<details>
              <summary><code>${name}</code></summary>
              <pre lang="${type}">${content}</pre>
            </details>`).join('\n')}
            `

      - name: Output Summary
        run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY