@csszyx/dynamic 0.4.0

package/tests/css-generator.test.ts

@@ -0,0 +1,339 @@
+/**
+ * Tests for css-generator module.
+ * Verifies CSS rule generation for Tailwind v4 class patterns.
+ */
+
+import { describe, expect, it } from 'vitest';
+
+import { generateCSSRule, generateDeclarations, parseVariants } from '../src/css-generator.js';
+
+describe('parseVariants', () => {
+    it('returns base tier for non-variant class', () => {
+        expect(parseVariants('p-4')).toMatchObject({
+            tier: 'base', pseudoSuffix: '', selectorPrefix: '', utility: 'p-4',
+        });
+    });
+
+    it('parses hover variant', () => {
+        const r = parseVariants('hover:bg-blue-500');
+        expect(r.tier).toBe('base');
+        expect(r.pseudoSuffix).toBe(':hover');
+        expect(r.utility).toBe('bg-blue-500');
+    });
+
+    it('parses dark variant', () => {
+        const r = parseVariants('dark:bg-gray-900');
+        expect(r.tier).toBe('base');
+        expect(r.selectorPrefix).toBe('.dark ');
+        expect(r.utility).toBe('bg-gray-900');
+    });
+
+    it('parses sm breakpoint', () => {
+        const r = parseVariants('sm:p-4');
+        expect(r.tier).toBe('sm');
+        expect(r.utility).toBe('p-4');
+    });
+
+    it('parses lg breakpoint', () => {
+        const r = parseVariants('lg:p-8');
+        expect(r.tier).toBe('lg');
+        expect(r.utility).toBe('p-8');
+    });
+
+    it('parses stacked sm:hover variant (breakpoint first)', () => {
+        const r = parseVariants('sm:hover:bg-blue-600');
+        expect(r.tier).toBe('sm');
+        expect(r.pseudoSuffix).toBe(':hover');
+        expect(r.utility).toBe('bg-blue-600');
+    });
+
+    it('parses max-sm tier', () => {
+        const r = parseVariants('max-sm:p-4');
+        expect(r.tier).toBe('max-sm');
+        expect(r.utility).toBe('p-4');
+    });
+});
+
+describe('generateDeclarations', () => {
+    // ── Spacing ──────────────────────────────────────────────────────────────
+
+    it('generates padding from p-4', () => {
+        expect(generateDeclarations('p-4')).toBe('padding: calc(var(--spacing) * 4)');
+    });
+
+    it('generates padding-inline from px-4', () => {
+        expect(generateDeclarations('px-4')).toBe('padding-inline: calc(var(--spacing) * 4)');
+    });
+
+    it('generates padding-block from py-4', () => {
+        expect(generateDeclarations('py-4')).toBe('padding-block: calc(var(--spacing) * 4)');
+    });
+
+    it('generates margin from m-2', () => {
+        expect(generateDeclarations('m-2')).toBe('margin: calc(var(--spacing) * 2)');
+    });
+
+    it('generates width from w-4', () => {
+        expect(generateDeclarations('w-4')).toBe('width: calc(var(--spacing) * 4)');
+    });
+
+    it('generates height from h-4', () => {
+        expect(generateDeclarations('h-4')).toBe('height: calc(var(--spacing) * 4)');
+    });
+
+    it('generates gap from gap-4', () => {
+        expect(generateDeclarations('gap-4')).toBe('gap: calc(var(--spacing) * 4)');
+    });
+
+    it('handles zero spacing', () => {
+        expect(generateDeclarations('p-0')).toBe('padding: 0');
+    });
+
+    it('handles px spacing (1px)', () => {
+        expect(generateDeclarations('p-px')).toBe('padding: 1px');
+    });
+
+    it('handles auto margin', () => {
+        expect(generateDeclarations('m-auto')).toBe('margin: auto');
+    });
+
+    it('handles w-full', () => {
+        expect(generateDeclarations('w-full')).toBe('width: 100%');
+    });
+
+    it('handles h-screen', () => {
+        expect(generateDeclarations('h-screen')).toBe('height: 100vh');
+    });
+
+    it('handles fractional width w-1/2', () => {
+        expect(generateDeclarations('w-1/2')).toBe('width: 50%');
+    });
+
+    it('handles fractional width w-3/4', () => {
+        expect(generateDeclarations('w-3/4')).toBe('width: 75%');
+    });
+
+    it('handles arbitrary spacing p-[13px]', () => {
+        expect(generateDeclarations('p-[13px]')).toBe('padding: 13px');
+    });
+
+    it('handles arbitrary spacing with spaces p-[calc(100%-2rem)]', () => {
+        expect(generateDeclarations('p-[calc(100%_-_2rem)]')).toBe('padding: calc(100% - 2rem)');
+    });
+
+    it('handles size property', () => {
+        expect(generateDeclarations('size-4')).toBe('width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4)');
+    });
+
+    // ── Colors ───────────────────────────────────────────────────────────────
+
+    it('generates background-color from bg-blue-500', () => {
+        expect(generateDeclarations('bg-blue-500')).toBe('background-color: var(--color-blue-500)');
+    });
+
+    it('generates color from text-red-300', () => {
+        expect(generateDeclarations('text-red-300')).toBe('color: var(--color-red-300)');
+    });
+
+    it('generates border-color from border-gray-200', () => {
+        expect(generateDeclarations('border-gray-200')).toBe('border-color: var(--color-gray-200)');
+    });
+
+    it('handles bg-white as direct keyword', () => {
+        expect(generateDeclarations('bg-white')).toBe('background-color: white');
+    });
+
+    it('handles bg-transparent', () => {
+        expect(generateDeclarations('bg-transparent')).toBe('background-color: transparent');
+    });
+
+    it('handles bg-[#ff6b35] arbitrary color', () => {
+        expect(generateDeclarations('bg-[#ff6b35]')).toBe('background-color: #ff6b35');
+    });
+
+    it('handles color with opacity modifier bg-blue-500/50', () => {
+        const result = generateDeclarations('bg-blue-500/50');
+        expect(result).toContain('color-mix');
+        expect(result).toContain('var(--color-blue-500)');
+        expect(result).toContain('50%');
+    });
+
+    // ── Keywords ─────────────────────────────────────────────────────────────
+
+    it('generates display flex', () => {
+        expect(generateDeclarations('flex')).toBe('display: flex');
+    });
+
+    it('generates display block', () => {
+        expect(generateDeclarations('block')).toBe('display: block');
+    });
+
+    it('generates display none for hidden', () => {
+        expect(generateDeclarations('hidden')).toBe('display: none');
+    });
+
+    it('generates flex-direction column for flex-col', () => {
+        expect(generateDeclarations('flex-col')).toBe('flex-direction: column');
+    });
+
+    it('generates align-items center for items-center', () => {
+        expect(generateDeclarations('items-center')).toBe('align-items: center');
+    });
+
+    it('generates justify-content center', () => {
+        expect(generateDeclarations('justify-center')).toBe('justify-content: center');
+    });
+
+    it('generates font-weight for font-bold', () => {
+        expect(generateDeclarations('font-bold')).toBe('font-weight: 700');
+    });
+
+    it('generates font-weight for font-medium', () => {
+        expect(generateDeclarations('font-medium')).toBe('font-weight: 500');
+    });
+
+    it('generates text-align for text-center', () => {
+        expect(generateDeclarations('text-center')).toBe('text-align: center');
+    });
+
+    it('generates text-transform for uppercase', () => {
+        expect(generateDeclarations('uppercase')).toBe('text-transform: uppercase');
+    });
+
+    it('generates position absolute', () => {
+        expect(generateDeclarations('absolute')).toBe('position: absolute');
+    });
+
+    // ── Text size ─────────────────────────────────────────────────────────────
+
+    it('generates font-size for text-lg', () => {
+        const result = generateDeclarations('text-lg');
+        expect(result).toContain('font-size: var(--text-lg)');
+        expect(result).toContain('line-height');
+    });
+
+    it('generates font-size for text-base', () => {
+        const result = generateDeclarations('text-base');
+        expect(result).toContain('font-size: var(--text-base)');
+    });
+
+    // ── Border radius ─────────────────────────────────────────────────────────
+
+    it('generates border-radius for rounded', () => {
+        expect(generateDeclarations('rounded')).toBe('border-radius: var(--radius)');
+    });
+
+    it('generates border-radius for rounded-lg', () => {
+        expect(generateDeclarations('rounded-lg')).toBe('border-radius: var(--radius-lg)');
+    });
+
+    it('generates border-radius for rounded-full', () => {
+        expect(generateDeclarations('rounded-full')).toBe('border-radius: calc(infinity * 1px)');
+    });
+
+    it('generates border-radius for rounded-none', () => {
+        expect(generateDeclarations('rounded-none')).toBe('border-radius: 0');
+    });
+
+    // ── Border width ──────────────────────────────────────────────────────────
+
+    it('generates border-width: 1px for border', () => {
+        expect(generateDeclarations('border')).toBe('border-width: 1px');
+    });
+
+    it('generates border-width: 2px for border-2', () => {
+        expect(generateDeclarations('border-2')).toBe('border-width: 2px');
+    });
+
+    // ── Opacity ───────────────────────────────────────────────────────────────
+
+    it('generates opacity: 0.5 for opacity-50', () => {
+        expect(generateDeclarations('opacity-50')).toBe('opacity: 0.5');
+    });
+
+    it('generates opacity: 0 for opacity-0', () => {
+        expect(generateDeclarations('opacity-0')).toBe('opacity: 0');
+    });
+
+    it('generates opacity: 1 for opacity-100', () => {
+        expect(generateDeclarations('opacity-100')).toBe('opacity: 1');
+    });
+
+    // ── Z-index ───────────────────────────────────────────────────────────────
+
+    it('generates z-index for z-10', () => {
+        expect(generateDeclarations('z-10')).toBe('z-index: 10');
+    });
+
+    it('generates z-index auto for z-auto', () => {
+        expect(generateDeclarations('z-auto')).toBe('z-index: auto');
+    });
+
+    // ── Unknown ───────────────────────────────────────────────────────────────
+
+    it('returns empty string for unknown class', () => {
+        expect(generateDeclarations('completely-unknown-class')).toBe('');
+    });
+});
+
+describe('generateCSSRule', () => {
+    it('generates full rule for p-4', () => {
+        const rule = generateCSSRule('p-4');
+        expect(rule).toBe('.p-4 { padding: calc(var(--spacing) * 4) }');
+    });
+
+    it('generates full rule for bg-blue-500', () => {
+        const rule = generateCSSRule('bg-blue-500');
+        expect(rule).toBe('.bg-blue-500 { background-color: var(--color-blue-500) }');
+    });
+
+    it('generates rule with :hover pseudo for hover:bg-blue-600', () => {
+        const rule = generateCSSRule('hover:bg-blue-600');
+        expect(rule).toBe('.hover\\:bg-blue-600:hover { background-color: var(--color-blue-600) }');
+    });
+
+    it('generates rule with .dark prefix for dark:bg-gray-900', () => {
+        const rule = generateCSSRule('dark:bg-gray-900');
+        expect(rule).toBe('.dark .dark\\:bg-gray-900 { background-color: var(--color-gray-900) }');
+    });
+
+    it('generates plain rule body for sm:p-4 (no @media — tier handles wrapping)', () => {
+        // generateCSSRule returns the rule; the @media is added by injector.wrapForTier
+        const rule = generateCSSRule('sm:p-4');
+        expect(rule).toBe('.sm\\:p-4 { padding: calc(var(--spacing) * 4) }');
+    });
+
+    it('handles stacked sm:hover:bg-blue-600', () => {
+        const rule = generateCSSRule('sm:hover:bg-blue-600');
+        expect(rule).toContain(':hover');
+        expect(rule).toContain('background-color: var(--color-blue-600)');
+    });
+
+    it('returns empty string for unknown class', () => {
+        expect(generateCSSRule('unknown-xyz-class')).toBe('');
+    });
+
+    // Breakpoint cascade test — key scenario from spec
+    it('produces different rules for lg, md, sm (tier determines cascade, not key order)', () => {
+        // Keys sorted alphabetically by linter: lg, md, sm
+        // generateCSSRule for each is independent — cascade correctness
+        // is guaranteed by injector tier ordering (sheets array index), not rule content
+        const lgRule = generateCSSRule('lg:p-8');
+        const mdRule = generateCSSRule('md:p-6');
+        const smRule = generateCSSRule('sm:p-4');
+
+        expect(lgRule).toContain('padding: calc(var(--spacing) * 8)');
+        expect(mdRule).toContain('padding: calc(var(--spacing) * 6)');
+        expect(smRule).toContain('padding: calc(var(--spacing) * 4)');
+
+        // All use the same @media wrapper approach (applied by injector tier)
+        // CSS content is distinct per tier
+        expect(lgRule).not.toEqual(mdRule);
+        expect(mdRule).not.toEqual(smRule);
+    });
+
+    it('handles arbitrary value p-[13px]', () => {
+        const rule = generateCSSRule('p-[13px]');
+        expect(rule).toBe('.p-\\[13px\\] { padding: 13px }');
+    });
+});

package/tests/injector.test.ts

@@ -0,0 +1,222 @@
+/**
+ * Tests for the CSSOM injector module.
+ * Uses a simulated CSSStyleSheet environment.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { cleanup, injectRule, isInjected, resolveTier, TIER_ORDER } from '../src/injector.js';
+
+// ── Mock constructable stylesheets ────────────────────────────────────────────
+
+/**
+ *
+ */
+class MockCSSStyleSheet {
+    cssRules: Array<{ cssText: string }> = [];
+    /**
+     * @param text - CSS rule text to insert
+     * @param index - position in cssRules at which to insert the rule
+     */
+    insertRule(text: string, index: number): void {
+        this.cssRules.splice(index, 0, { cssText: text });
+    }
+}
+
+// Track the current value of adoptedStyleSheets via the mock document object.
+// The injector does `document.adoptedStyleSheets = [...]` (assignment), so we
+// must use a getter/setter to capture that and update mockAdoptedSheets in place.
+let _adoptedSheets: MockCSSStyleSheet[] = [];
+const mockAdoptedSheets: MockCSSStyleSheet[] = [];
+
+const mockDocument = {
+    get adoptedStyleSheets() { return _adoptedSheets; },
+    set adoptedStyleSheets(val: MockCSSStyleSheet[]) {
+        _adoptedSheets = val;
+        // Keep mockAdoptedSheets in sync so tests can reference it
+        mockAdoptedSheets.length = 0;
+        mockAdoptedSheets.push(...val);
+    },
+    head: { appendChild: vi.fn() },
+    createElement: vi.fn(() => ({
+        id: '',
+        remove: vi.fn(),
+        sheet: { insertRule: vi.fn(), cssRules: [] },
+    })),
+};
+
+beforeEach(() => {
+    _adoptedSheets = [];
+    mockAdoptedSheets.length = 0;
+
+    vi.stubGlobal('CSSStyleSheet', MockCSSStyleSheet);
+    vi.stubGlobal('document', mockDocument);
+});
+
+afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+});
+
+// ── resolveTier ───────────────────────────────────────────────────────────────
+
+describe('resolveTier', () => {
+    it('returns base for non-breakpoint class', () => {
+        expect(resolveTier('p-4')).toBe('base');
+        expect(resolveTier('bg-blue-500')).toBe('base');
+        expect(resolveTier('flex')).toBe('base');
+    });
+
+    it('returns base for hover variant (not a breakpoint)', () => {
+        expect(resolveTier('hover:bg-blue-500')).toBe('base');
+    });
+
+    it('returns base for dark variant', () => {
+        expect(resolveTier('dark:bg-gray-900')).toBe('base');
+    });
+
+    it('returns sm for sm:p-4', () => {
+        expect(resolveTier('sm:p-4')).toBe('sm');
+    });
+
+    it('returns lg for lg:p-8', () => {
+        expect(resolveTier('lg:p-8')).toBe('lg');
+    });
+
+    it('returns max-sm for max-sm:p-4', () => {
+        expect(resolveTier('max-sm:p-4')).toBe('max-sm');
+    });
+
+    it('returns first breakpoint segment for stacked sm:hover:', () => {
+        expect(resolveTier('sm:hover:bg-blue-600')).toBe('sm');
+    });
+});
+
+// ── TIER_ORDER ────────────────────────────────────────────────────────────────
+
+describe('TIER_ORDER cascade ordering', () => {
+    it('has 21 tiers', () => {
+        expect(TIER_ORDER).toHaveLength(21);
+    });
+
+    it('base is first (index 0)', () => {
+        expect(TIER_ORDER[0]).toBe('base');
+    });
+
+    it('sm comes before md comes before lg (ascending min-width)', () => {
+        const smIdx = TIER_ORDER.indexOf('sm');
+        const mdIdx = TIER_ORDER.indexOf('md');
+        const lgIdx = TIER_ORDER.indexOf('lg');
+        expect(smIdx).toBeLessThan(mdIdx);
+        expect(mdIdx).toBeLessThan(lgIdx);
+    });
+
+    it('max-2xl comes before max-sm (descending for max-width)', () => {
+        // max-sm must have HIGHER index (later in array = wins at small viewport)
+        const max2xlIdx = TIER_ORDER.indexOf('max-2xl');
+        const maxSmIdx = TIER_ORDER.indexOf('max-sm');
+        expect(max2xlIdx).toBeLessThan(maxSmIdx);
+    });
+
+    it('container @sm before @md before @lg', () => {
+        const smIdx = TIER_ORDER.indexOf('@sm');
+        const mdIdx = TIER_ORDER.indexOf('@md');
+        const lgIdx = TIER_ORDER.indexOf('@lg');
+        expect(smIdx).toBeLessThan(mdIdx);
+        expect(mdIdx).toBeLessThan(lgIdx);
+    });
+
+    it('@max-2xl comes before @max-sm', () => {
+        const max2xlIdx = TIER_ORDER.indexOf('@max-2xl');
+        const maxSmIdx = TIER_ORDER.indexOf('@max-sm');
+        expect(max2xlIdx).toBeLessThan(maxSmIdx);
+    });
+});
+
+// ── injectRule ────────────────────────────────────────────────────────────────
+
+describe('injectRule', () => {
+    it('initializes 21 adopted stylesheets on first inject', () => {
+        injectRule('p-4', '.p-4 { padding: calc(var(--spacing) * 4) }', 'base');
+        expect(mockAdoptedSheets).toHaveLength(21);
+    });
+
+    it('injects rule into correct sheet by tier', () => {
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        injectRule('sm:p-4', '.sm\\:p-4 { padding: 1rem }', 'sm');
+
+        // Base sheet is index 0, sm sheet is index 1
+        const baseSheet = mockAdoptedSheets[0] as unknown as MockCSSStyleSheet;
+        const smSheet = mockAdoptedSheets[1] as unknown as MockCSSStyleSheet;
+
+        expect(baseSheet.cssRules.some(r => r.cssText.includes('.p-4'))).toBe(true);
+        expect(smSheet.cssRules.length).toBeGreaterThan(0);
+    });
+
+    it('wraps non-base tier rules in @media', () => {
+        injectRule('sm:p-4', '.sm\\:p-4 { padding: 1rem }', 'sm');
+
+        const smSheet = mockAdoptedSheets[1] as unknown as MockCSSStyleSheet;
+        const rule = smSheet.cssRules[0];
+        expect(rule.cssText).toContain('@media');
+        expect(rule.cssText).toContain('40rem');
+    });
+
+    it('wraps max-sm tier in max-width media query', () => {
+        injectRule('max-sm:p-4', '.max-sm\\:p-4 { padding: 1rem }', 'max-sm');
+
+        const maxSmIdx = TIER_ORDER.indexOf('max-sm');
+        const maxSmSheet = mockAdoptedSheets[maxSmIdx] as unknown as MockCSSStyleSheet;
+        expect(maxSmSheet.cssRules[0].cssText).toContain('max-width');
+    });
+
+    it('does not double-inject same class', () => {
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base'); // duplicate
+
+        const baseSheet = mockAdoptedSheets[0] as unknown as MockCSSStyleSheet;
+        const p4Rules = baseSheet.cssRules.filter(r => r.cssText.includes('.p-4'));
+        expect(p4Rules).toHaveLength(1);
+    });
+
+    it('isInjected returns true after inject', () => {
+        expect(isInjected('p-4')).toBe(false);
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        expect(isInjected('p-4')).toBe(true);
+    });
+
+    it('marks class as injected even when cssRule is empty (unknown class)', () => {
+        injectRule('unknown-class', '', 'base');
+        expect(isInjected('unknown-class')).toBe(true);
+    });
+});
+
+// ── cleanup ───────────────────────────────────────────────────────────────────
+
+describe('cleanup', () => {
+    it('removes all csszyx sheets from adoptedStyleSheets', () => {
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        expect(mockAdoptedSheets).toHaveLength(21);
+
+        cleanup();
+        expect(mockAdoptedSheets).toHaveLength(0);
+    });
+
+    it('clears injected cache', () => {
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        expect(isInjected('p-4')).toBe(true);
+
+        cleanup();
+        expect(isInjected('p-4')).toBe(false);
+    });
+
+    it('allows re-injection after cleanup', () => {
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        cleanup();
+
+        // Re-init happens on next inject
+        injectRule('p-4', '.p-4 { padding: 1rem }', 'base');
+        expect(isInjected('p-4')).toBe(true);
+        expect(mockAdoptedSheets).toHaveLength(21);
+    });
+});