name: CSS & Visual Regression

on:
  pull_request:
    paths:
      - "css/**"
      - "docs/**"
      - "tests/visual/**"
      - "package-lock.json"
      - "package.json"
      - "playwright.config.ts"
      - "tailwind.config.cjs"
      - ".github/workflows/css.yml"
  push:
    branches:
      - main
    paths:
      - "css/**"
      - "docs/**"
      - "tests/visual/**"
      - "package-lock.json"
      - "package.json"
      - "playwright.config.ts"
      - "tailwind.config.cjs"
      - ".github/workflows/css.yml"

jobs:
  css:
    runs-on: ubuntu-latest

    steps:
      - name: Check out repository
        uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm ci

      - name: Check CSS build artifacts are committed
        run: npm run check:css

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium

      - name: Run visual regression tests
        id: visual
        run: npm run test:visual
        continue-on-error: true

      - name: Upload Playwright artifacts
        if: steps.visual.outcome == 'failure'
        uses: actions/upload-artifact@v4
        with:
          name: playwright-visual-diffs
          path: |
            playwright-report
            test-results
          if-no-files-found: ignore

      - name: Fail if visual regressions detected
        if: steps.visual.outcome == 'failure'
        run: exit 1