UI Entropy Scanner - GitHub Action

One-click CSS entropy monitoring for your pull requests

Automatically scan CSS entropy in your GitHub Actions workflows and prevent CSS bloat from creeping into your codebase.

Features

• ✅ Automatic entropy scanning on every pull request
• ✅ Baseline comparison to track changes over time
• ✅ Quality gates - fail builds when CSS quality degrades
• ✅ Beautiful PR comments with entropy reports (coming soon)
• ✅ Zero configuration - works out of the box

Quick Start

Add this to your .github/workflows/ui-entropy.yml:

name: UI Entropy Check

on:
  pull_request:
    branches: [main]

jobs:
  entropy-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Check CSS Entropy
        uses: ui-entropy/ui-entropy-action@v1
        with:
          maxDelta: 5  # Fail if entropy increases by more than 5 points

That's it! The action will:

1. Install UI Entropy CLI
2. Check for .ui-entropy-baseline.json in your repo
3. Scan your CSS and compare against baseline
4. Fail the build if entropy exceeds the threshold

Usage

Inputs

Input	Description	Required	Default
maxDelta	Maximum allowed entropy increase	No	5
createBaseline	Auto-create baseline if missing	No	false
baselineFile	Path to baseline file	No	.ui-entropy-baseline.json
workingDirectory	Working directory for scan	No	.
failOnDegradation	Fail build on entropy increase	No	true

Outputs

Output	Description
entropyScore	Current entropy score (0-100)
delta	Change from baseline
status	improved, degraded, or unchanged

Examples

Basic Setup

- uses: ui-entropy/ui-entropy-action@v1

Custom Threshold

- uses: ui-entropy/ui-entropy-action@v1
  with:
    maxDelta: 10  # More lenient threshold

Auto-create Baseline

- uses: ui-entropy/ui-entropy-action@v1
  with:
    createBaseline: true  # Creates baseline if missing

Warning Only (Don't Fail Build)

- uses: ui-entropy/ui-entropy-action@v1
  with:
    failOnDegradation: false  # Only warn, don't fail

Monorepo Support

- uses: ui-entropy/ui-entropy-action@v1
  with:
    workingDirectory: './packages/web'

Use Outputs in Follow-up Steps

- name: Check CSS Entropy
  id: entropy
  uses: ui-entropy/ui-entropy-action@v1

- name: Comment on PR
  if: steps.entropy.outputs.status == 'degraded'
  run: |
    echo "⚠️ Entropy increased by ${{ steps.entropy.outputs.delta }} points!"

Setting Up Your Repository

1. Create a Baseline

First, create a baseline on your main branch:

npx @ui-entropy/cli baseline --name "Production baseline"
git add .ui-entropy-baseline.json
git commit -m "Add UI Entropy baseline"
git push

2. Add the Workflow

Create .github/workflows/ui-entropy.yml:

name: UI Entropy Check

on:
  pull_request:
    branches: [main]

jobs:
  entropy-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Check CSS Entropy
        uses: ui-entropy/ui-entropy-action@v1
        with:
          maxDelta: 5

3. Open a PR

That's it! Every PR will now be checked for CSS entropy degradation.

Example Output

When the action runs, you'll see output like this:

🎯 UI Entropy Report

Baseline: 28
Current:  43
Delta:    +15  ✗ DEGRADED

Waste:       72.0% (+8.0%)
Duplication: 5% (+2%)

New unused selectors (+3):
  - .btn-outline-danger
  - .card-deck
  - .navbar-expand-lg

✗ FAILED - Delta 15 exceeds threshold 5

Configuration

The action automatically detects your framework (Next.js, React, Vue, etc.) and scans the appropriate files. For custom configuration, add a .ui-entropy.json file:

{
  "cssPatterns": ["**/*.css", ".next/static/css/**/*.css"],
  "sourcePatterns": ["src/**/*.{tsx,jsx}"],
  "ignorePatterns": ["**/*.test.*"]
}

Supported Frameworks

• Next.js
• Create React App
• Vite
• Vue CLI
• Angular
• Svelte
• Astro
• Static HTML

License

MIT

Support

• 📖 Full Documentation
• 🐛 Report Issues
• 💬 Discussions