diff-v8.yml

# Posts a comment listing all the variables that changed in a PR
name: v8 Diff for design tokens
on:
  pull_request:
    branches-ignore:
      - 'changeset-release/**'
  workflow_dispatch:

jobs:
  changes:
    uses: ./.github/workflows/hasChanged.yml

  diff:
    needs: changes
    if: needs.changes.outputs.outputAffected == 'true' || github.event_name == 'workflow_dispatch'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Checkout base branch
        uses: actions/checkout@v4
        with:
          ref: ${{ github.base_ref }}
          path: base

      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies (pr)
        run: npm ci --no-audit --no-fund --include=dev --ignore-scripts

      - name: Build tokens (pr)
        run: npm run build:v8

      - name: Install dependencies (base)
        run: pushd base; npm i --no-audit --no-fund --ignore-scripts; popd

      - name: Build tokens (base)
        run: pushd base; npm run build:v8; popd

      - name: Install dependecies for diffing
        run: npm install shelljs

      - name: Diff v8 tokens
        id: diff-files
        uses: actions/github-script@v7
        with:
          script: |
            const cssFolder = 'dist/css'
            const shell = require('shelljs')
            const globber = await glob.create(cssFolder + '/**/**/*.css')
            const files = await globber.glob()

            // create diffs
            const diffs = files.map(file => {
              // run diff
              const diff = shell.exec(`diff -u ${file.replace(cssFolder, 'base/' + cssFolder)} ${file}`)
              // get filename
              const regexRunnerPath = new RegExp('^[a-z\/]+\/dist', 'g')
              const filename = file.replaceAll(regexRunnerPath,'')

              console.log('Checking diff for ' + filename + '...')

              if (diff.stderr) {
                console.error(diff.stderr)
                core.setFailed(diff.stderr)
              }
              
              if (diff.stdout === '') {
                console.log('No diff for ' + filename + '\n')
              } else {
                console.log(diff.stdout + '\n')
              }
              
              return {
                file: filename,
                diff: diff.stdout || ''
              }
            })
            // filter files with no diffs
            .filter(item => {
              return item.diff !== ''
            })
            
            // set output to use diff in pr comment
            core.setOutput('diffs', diffs);

      - name: Write summary
        uses: actions/github-script@v7
        with:
          script: |
            const diffs = ${{ steps.diff-files.outputs.diffs }}
            
            core.summary.clear()
            
            core.summary.addHeading('V8 Design Token Diff', '1')
            
            if (diffs.length === 0) {
              core.summary.addRaw('No design tokens changed', true)
            } else {

              diffs.forEach(({file: fileName, diff: content}) => {
                const diffDetails = `<details><summary><h3>${fileName}</h3></summary>\n\n`+
                '```diff\n'+
                `${content}\n`+
                '```\n\n'+
                '</details>'

                core.summary.addRaw(diffDetails, true)
              })

            }

            // write summary
            core.summary.write({overwrite: true})

      - name: Comment on pr
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            const diffs = ${{ steps.diff-files.outputs.diffs }}

            // prepare comment body
            let body = '## Design Token Diff\n\n'
            if (diffs.length === 0) {
              body += 'No design tokens changed'
            } else {
              body += diffs.map(({file, diff}) => 
                '<details>' +
                `<summary><h3>${file}</h3></summary>\n` +
                "  \n"+
                "  ```diff"+
                `  ${diff}` +
                "  ```"+
                '\n</details>'
              ).join('\n')
            }

            // get comments
            const {data: comments} = await github.rest.issues.listComments({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo
            });

            // get comment if exists
            const existingComment = comments.filter(comment => comment.body.includes('## Design Token Diff'));
            // if token issue exists, update it
            if(existingComment.length > 0) {
              await github.rest.issues.updateComment({
                comment_id: existingComment[0].id,
                owner: context.repo.owner,
                repo: context.repo.repo,
                body
              })
            }

            // if comment does not exist, create it
            else {
              await github.rest.issues.createComment({
                issue_number: context.issue.number,
                owner: context.repo.owner,
                repo: context.repo.repo,
                body
              })
            }