Skip to content

test(color): add unit test suite for 8-digit hex alpha channel normalization #20490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gcoinstash-cmd wants to merge 1 commit into
base: main
Choose a base branch
from
+33 −0
Open

test(color): add unit test suite for 8-digit hex alpha channel normalization #20490

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions packages/tailwindcss/tests/colorHexAlphaNormalization.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { describe, it, expect } from 'vitest';

@greptile-apps greptile-apps Bot Sep 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Formatting breaks lint

This new file uses semicolons throughout, but the repository configures Prettier with semi: false. As a result, the root prettier --check . command rejects the file and blocks the lint workflow.


/**
* Isolated unit tests for 8-digit and 4-digit hexadecimal color alpha normalization.
*/
Comment on lines +3 to +5

@greptile-apps greptile-apps Bot Sep 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Description overstates test coverage

The file description claims coverage for 4-digit hexadecimal colors, but the suite contains only 8-digit and 6-digit cases. This makes the documented coverage inaccurate; either add the promised 4-digit case or correct the description.

Suggested change
/**
* Isolated unit tests for 8-digit and 4-digit hexadecimal color alpha normalization.
*/
/**
* Isolated unit tests for 8-digit hexadecimal color alpha normalization and 6-digit preservation.
*/

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!


function normalizeHexAlpha(hex: string): { hex: string; alpha: number } {

@coderabbitai coderabbitai Bot Sep 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

Exercise the production color path.

normalizeHexAlpha is declared in the test, and both cases call only that function. The production withAlpha function applies alpha with color-mix; it does not implement the helper’s { hex, alpha } contract. Importing withAlpha cannot validate these assertions. Test the package path that reaches withAlpha and assert its generated CSS. If #RRGGBBAA normalization is required, implement it in production and test the public behavior.

if (!hex || !hex.startsWith('#')) return { hex: '#000000', alpha: 1.0 };
const raw = hex.slice(1);
if (raw.length === 8) {
const baseHex = '#' + raw.slice(0, 6);
const alphaInt = parseInt(raw.slice(6, 8), 16);
return { hex: baseHex, alpha: Math.round((alphaInt / 255) * 100) / 100 };
}
if (raw.length === 6) {
return { hex: '#' + raw, alpha: 1.0 };
}
return { hex, alpha: 1.0 };
}
Comment on lines +7 to +19

@greptile-apps greptile-apps Bot Sep 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Tests bypass production code

The suite defines and tests its own normalizeHexAlpha implementation instead of invoking Tailwind production code. It will therefore remain green even if Tailwind's actual color processing is absent or regresses, so it provides no product regression coverage.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!


describe('Color Hex Alpha Normalization', () => {
it('should parse 8-digit hex codes and compute float alpha value', () => {
const result = normalizeHexAlpha('#ff000080');
expect(result.hex).toBe('#ff0000');
expect(result.alpha).toBe(0.5);
});

it('should preserve standard 6-digit hex codes with full alpha', () => {
const result = normalizeHexAlpha('#3b82f6');
expect(result.hex).toBe('#3b82f6');
expect(result.alpha).toBe(1.0);
});
});