meno-core 1.1.3 → 1.1.5

package/lib/server/cssAudit.test.ts

@@ -0,0 +1,270 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  auditStylesheet,
+  collectClassesFromPageData,
+  extractRules,
+  sectionPrefix,
+  type PageClassUsage,
+} from './cssAudit';
+
+const CSS = `
+body { margin: 0; color: #111; }
+h1 { font-size: 2em; }
+.w-button { display: inline-block; padding: 9px 15px; }
+
+/* shared design-system + utilities */
+.container { max-width: 1200px; margin: 0 auto; }
+.section-label { font-size: 12px; }
+.left-arrow { transform: rotate(180deg); }
+.type-2 { opacity: 0.5; }
+.margin-bottom-16 { margin-bottom: 16px; }
+
+/* team section (kept: 3 classes) */
+.team-card { border: 1px solid #ccc; }
+.team-grid { display: grid; }
+.team-avatar { border-radius: 50%; }
+.teem-badge { color: gold; }
+
+/* home section (kept: 3 classes) */
+.home-hero { min-height: 100vh; }
+.home-grid { display: grid; }
+.home-cta { color: #fff; }
+
+/* webflow auto-generated element wrappers (fix 2) */
+.div-block-3 { display: block; }
+.text-block-2 { color: #333; }
+.heading-5 { font-size: 20px; }
+.image { max-width: 100%; }
+
+/* numeric-suffixed section id — should strip to \`home\` (fix 1) */
+.home42 { color: teal; }
+
+/* button section (kept: 4) + a distance-2 false-typo candidate \`bottom\` (fix 3) */
+.button-cta { background: blue; }
+.button-ghost { border: 1px solid; }
+.button-wide { width: 100%; }
+.bottom { position: absolute; }
+
+/* small + dead + compound-only */
+.case-card { padding: 8px; }
+.unused-thing { color: red; }
+.promo-tag.is-featured { color: gold; }
+
+/* relationships */
+.team-card .button { font-weight: bold; }
+.team-card.home-hero { gap: 4px; }
+
+@media screen and (max-width: 767px) {
+  .team-card { padding: 8px; }
+  .container { max-width: 100%; }
+}
+`;
+
+const PAGES: PageClassUsage[] = [
+  { path: '/a', classes: ['container', 'section-label', 'team-card', 'team-grid', 'home-hero'] },
+  { path: '/b', classes: ['container', 'section-label', 'team-avatar', 'teem-badge', 'home-grid'] },
+  { path: '/c', classes: ['container', 'section-label', 'case-card', 'home-cta'] },
+  { path: '/d', classes: ['container', 'margin-bottom-16', 'mystery-util', 'div-block-3'] },
+  { path: '/e', classes: ['container', 'team-card', 'button-cta'] },
+];
+
+function byName(report: ReturnType<typeof auditStylesheet>, name: string) {
+  const info = report.classes.find((c) => c.name === name);
+  if (!info) throw new Error(`class .${name} not found in report`);
+  return info;
+}
+
+describe('auditStylesheet', () => {
+  const report = auditStylesheet({ css: CSS, pages: PAGES });
+
+  test('counts source totals and threshold', () => {
+    expect(report.source.pageCount).toBe(5);
+    expect(report.source.sharedMinPages).toBe(3); // max(2, ceil(5/2))
+    expect(report.source.rules).toBeGreaterThan(0);
+  });
+
+  test('element-only rules go to the base bucket', () => {
+    expect(report.buckets.base.rules).toBe(2); // body + h1
+    expect(report.buckets.base.declarations).toBe(3);
+  });
+
+  test('classifies vendor / shared (usage + hints) / section', () => {
+    expect(byName(report, 'w-button').category).toBe('vendor');
+    expect(byName(report, 'container').category).toBe('shared'); // hint + used on 5 pages
+    expect(byName(report, 'section-label').category).toBe('shared'); // used on 3 pages (>= threshold)
+    expect(byName(report, 'team-card').proposedBucket).toBe('team');
+    expect(byName(report, 'home-hero').proposedBucket).toBe('home');
+  });
+
+  test('utility hints fold obvious utilities into shared', () => {
+    expect(byName(report, 'left-arrow').category).toBe('shared'); // `arrow`
+    expect(byName(report, 'type-2').category).toBe('shared'); // combo variant
+    expect(byName(report, 'margin-bottom-16').category).toBe('shared'); // spacing
+  });
+
+  test('folds small section buckets into misc', () => {
+    expect(byName(report, 'case-card').proposedBucket).toBe('misc');
+    expect(byName(report, 'unused-thing').proposedBucket).toBe('misc');
+    expect(report.flags.foldedSections.find((f) => f.from === 'case')).toMatchObject({
+      into: 'misc',
+      reason: 'small',
+    });
+  });
+
+  test('merges typo prefixes into the nearest kept section', () => {
+    // `teem-badge` (prefix `teem`) merges into the kept `team` section.
+    expect(byName(report, 'teem-badge').proposedBucket).toBe('team');
+    expect(report.flags.foldedSections.find((f) => f.from === 'teem')).toMatchObject({
+      into: 'team',
+      reason: 'typo',
+    });
+  });
+
+  test('collapses to a small set of real sections + misc', () => {
+    const prefixes = Object.keys(report.buckets.sections);
+    expect(prefixes).toContain('team');
+    expect(prefixes).toContain('home');
+    expect(prefixes).toContain('button');
+    expect(prefixes).toContain('misc');
+    expect(prefixes).not.toContain('teem'); // typo → team
+    expect(prefixes).not.toContain('case'); // singleton → misc
+    expect(prefixes).not.toContain('unused');
+    expect(prefixes).not.toContain('bottom'); // distance-2 false typo → misc, not button
+  });
+
+  test('fix 1 — strips trailing digits from section prefixes (Webflow numeric IDs)', () => {
+    // `.home42` is a numeric-suffixed section id → merges into the `home` section, not its own bucket.
+    expect(byName(report, 'home42').proposedBucket).toBe('home');
+  });
+
+  test('fix 2 — routes Webflow auto-generated wrappers to the webflow-auto bucket', () => {
+    expect(byName(report, 'div-block-3').category).toBe('webflow-auto'); // auto beats page-usage
+    expect(byName(report, 'text-block-2').category).toBe('webflow-auto');
+    expect(byName(report, 'heading-5').category).toBe('webflow-auto');
+    expect(report.buckets.webflowAuto.classes).toBeGreaterThanOrEqual(3);
+    // A bare ambiguous element word is NOT auto — `.image` could be a real design-system class.
+    expect(byName(report, 'image').category).not.toBe('webflow-auto');
+  });
+
+  test('fix 3 — typo-merge rejects distance-2 / low-overlap false pairs', () => {
+    // `.bottom` must NOT fold into the kept `button` section (edit distance 2, shared "b").
+    expect(byName(report, 'bottom').proposedBucket).toBe('misc');
+    expect(report.flags.foldedSections.find((f) => f.from === 'bottom')?.into).not.toBe('button');
+  });
+
+  test('re-unites responsive variants with the base rule', () => {
+    const team = byName(report, 'team-card');
+    expect(team.breakpoints).toContain('');
+    expect(team.breakpoints).toContain('screen and (max-width:767px)');
+    expect(team.declarations).toBe(4); // base + descendant + compound + @media
+    expect(team.ruleCount).toBe(4);
+    expect(report.breakpoints).toContain('screen and (max-width:767px)');
+  });
+
+  test('detects compound-only classes', () => {
+    // promo-tag only ever appears as `.promo-tag.is-featured`.
+    expect(byName(report, 'promo-tag').compoundOnly).toBe(true);
+    // team-card has a lone `.team-card { … }` rule.
+    expect(byName(report, 'team-card').compoundOnly).toBe(false);
+  });
+
+  test('flags selectors that straddle two kept section buckets (misc excluded)', () => {
+    const flag = report.flags.crossBoundarySelectors.find(
+      (f) => f.buckets.includes('team') && f.buckets.includes('home'),
+    );
+    expect(flag).toBeTruthy();
+    expect(report.flags.crossBoundarySelectors.every((f) => f.buckets.length >= 2)).toBe(true);
+  });
+
+  test('reports dead classes and page-only classes', () => {
+    expect(report.flags.deadClasses).toContain('unused-thing');
+    expect(report.flags.pageOnlyClasses).toContain('mystery-util');
+    expect(report.flags.pageOnlyClasses).not.toContain('container');
+  });
+
+  test('minSectionClasses is tunable — 1 disables folding', () => {
+    const loose = auditStylesheet({ css: CSS, pages: PAGES, options: { minSectionClasses: 1 } });
+    expect(loose.flags.foldedSections).toHaveLength(0);
+    expect(loose.classes.find((c) => c.name === 'case-card')?.proposedBucket).toBe('case');
+    expect(Object.keys(loose.buckets.sections)).not.toContain('misc');
+  });
+
+  test('mergeTypos=false sends typos to misc instead of a kept section', () => {
+    const noTypo = auditStylesheet({ css: CSS, pages: PAGES, options: { mergeTypos: false } });
+    expect(noTypo.classes.find((c) => c.name === 'teem-badge')?.proposedBucket).toBe('misc');
+  });
+});
+
+describe('collectClassesFromPageData', () => {
+  test('harvests class/className strings anywhere in the tree', () => {
+    const pageData = {
+      root: {
+        tag: 'div',
+        attributes: { class: 'page-wrapper has-overflow' },
+        children: [
+          { tag: 'span', props: { class: 'label' }, children: ['hi'] },
+          { tag: 'a', attributes: { class: 'button is-primary' } },
+        ],
+      },
+      components: {
+        Card: { component: { structure: { className: 'card-root', children: [] } } },
+      },
+    };
+    const classes = collectClassesFromPageData(pageData);
+    expect(classes).toEqual(
+      expect.arrayContaining(['page-wrapper', 'has-overflow', 'label', 'button', 'is-primary', 'card-root']),
+    );
+  });
+
+  test('ignores non-string class values and empties', () => {
+    const classes = collectClassesFromPageData({ class: { _i18n: true }, other: '   ', nested: [{ class: '' }] });
+    expect(classes).toEqual([]);
+  });
+});
+
+describe('sectionPrefix', () => {
+  test('takes the first dash/underscore segment', () => {
+    expect(sectionPrefix('team-card-inner')).toBe('team');
+    expect(sectionPrefix('home_v1_hero')).toBe('home');
+    expect(sectionPrefix('solo')).toBe('solo');
+  });
+
+  test('strips trailing digits (Webflow numeric section IDs)', () => {
+    expect(sectionPrefix('header76')).toBe('header');
+    expect(sectionPrefix('cta39')).toBe('cta');
+    expect(sectionPrefix('tda06-grid')).toBe('tda');
+    expect(sectionPrefix('testimonial26')).toBe('testimonial');
+  });
+});
+
+describe('extractRules', () => {
+  const rules = extractRules(CSS);
+  const find = (selector: string, media: string | null = null) =>
+    rules.find((r) => r.selector === selector && r.media === media);
+
+  test('emits only class-bearing selectors (element/reset rules omitted)', () => {
+    // body {} and h1 {} carry no class → excluded.
+    expect(rules.some((r) => r.selector === 'body')).toBe(false);
+    expect(rules.some((r) => r.selector === 'h1')).toBe(false);
+    expect(find('.container')).toBeTruthy();
+    expect(find('.w-button')).toBeTruthy();
+  });
+
+  test('captures classes, subject classes, and compound shape', () => {
+    // descendant: subject is `.button`, scope adds `.team-card`.
+    const descendant = find('.team-card .button');
+    expect(descendant?.classes.sort()).toEqual(['button', 'team-card']);
+    expect(descendant?.subjectClasses).toEqual(['button']);
+    expect(descendant?.compound).toBe(true);
+    // lone class → not compound.
+    expect(find('.container')?.compound).toBe(false);
+  });
+
+  test('threads @media context onto responsive variants', () => {
+    const responsive = find('.team-card', 'screen and (max-width:767px)');
+    expect(responsive).toBeTruthy();
+    expect(responsive?.declarations).toBe(1); // padding: 8px
+    // The base .team-card rule is a separate entry with null media.
+    expect(find('.team-card', null)).toBeTruthy();
+  });
+});