@blotch/dolan 22.2.3 → 22.2.5

package/dist/commands/doctor.test.js

@@ -1,7 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { rmSync, writeFileSync } from 'node:fs';
+import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
-import { createFixture, DEFAULT_CONFIG } from '../test-utils';
+import { stripVTControlCharacters } from 'node:util';
+import { hashContent } from '../lockfile';
+import { createFixture, DEFAULT_CONFIG, installPackage, onTailwind, } from '../test-utils';
 vi.mock('@clack/prompts', () => ({
     intro: vi.fn(),
     outro: vi.fn(),
@@ -22,6 +24,8 @@ vi.mock('../utils/resolve-paths.js', () => ({
             return ['card.ts', 'index.ts'];
         return [`${name}.ts`];
     },
+    // dolan's own theme, which the fixture's `themeFiles` write.
+    getUiSourceDir: () => fixture.uiDir,
 }));
 beforeEach(() => {
     vi.clearAllMocks();
@@ -35,13 +39,22 @@ afterEach(() => {
 });
 const writePackageJson = (dir, content) => writeFileSync(join(dir, 'package.json'), JSON.stringify(content));
 // What doctor requires (no router: no component imports it), plus the
-// package button imports.
+// package button imports. Not Tailwind: doctor reads the version installed
+// (see installPackage), not the one package.json lists.
 const FULL_ANGULAR_DEPS = {
     '@angular/core': '^20.0.0',
     '@blotch/angular-lynx': '^0.0.1',
     '@blotch/dolan': '^0.0.1',
     'class-variance-authority': '^0.7.1',
-    tailwindcss: '^4.0.0',
+};
+/**
+ * Every message logged at a level, without the colors picocolors adds in CI.
+ */
+const logged = async (level) => {
+    const p = await import('@clack/prompts');
+    return vi
+        .mocked(p.log[level])
+        .mock.calls.map(([message]) => stripVTControlCharacters(String(message)));
 };
 /**
  * A lockfile that tracks the given components, as `dolan add` writes it.
@@ -84,6 +97,7 @@ describe('doctorCommand', () => {
             components: { card: { 'card.ts': '', 'index.ts': '' } },
         });
         writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        installPackage(fixture.dir, 'tailwindcss', '3.4.19');
         writeFileSync(join(fixture.dir, DEFAULT_CONFIG.aliases.theme, 'tailwind-plugin.ts'), '');
         writeFileSync(join(fixture.dir, DEFAULT_CONFIG.aliases.theme, 'default.css'), '');
         writeFileSync(join(fixture.dir, 'tailwind.config.ts'), "import { blotchPlugin } from './src/styles/tailwind-plugin';\nexport default { plugins: [blotchPlugin] };\n");
@@ -92,6 +106,8 @@ describe('doctorCommand', () => {
         await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
         const p = await import('@clack/prompts');
         expect(p.log.error).not.toHaveBeenCalled();
+        expect(p.log.warn).not.toHaveBeenCalled();
+        expect(await logged('success')).toContain('tailwindcss 3.4.19 found, set up for Tailwind 3 (tailwind.config.ts)');
         expect(p.log.success).toHaveBeenCalledWith(expect.stringContaining('component(s) healthy'));
     });
     it('fails when the components or theme directories are missing', async () => {
@@ -115,6 +131,7 @@ describe('doctorCommand', () => {
     it('warns when tailwind-plugin.ts and theme CSS are both missing', async () => {
         fixture = createFixture({ config: DEFAULT_CONFIG });
         writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        installPackage(fixture.dir, 'tailwindcss', '3.4.19');
         vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
         const { doctorCommand } = await import('./doctor');
         await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
@@ -132,18 +149,50 @@ describe('doctorCommand', () => {
         const p = await import('@clack/prompts');
         expect(p.log.success).toHaveBeenCalledWith('Theme CSS found');
     });
-    it('warns when no tailwind config is found', async () => {
+    it('warns when no tailwind config is found on Tailwind 3', async () => {
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        installPackage(fixture.dir, 'tailwindcss', '3.4.19');
+        vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
+        const { doctorCommand } = await import('./doctor');
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+        // The build runs Tailwind 3 only from a config.
+        expect(await logged('warn')).toContain('tailwindcss 3.4.19 found, but no Tailwind config: the build runs Tailwind 3 only from a tailwind.config.*. Add one with ng generate @blotch/angular-lynx:add-tailwind --tailwind-version=3');
+        expect(await logged('success')).not.toContainEqual(expect.stringContaining('set up for'));
+    });
+    it("passes when a Tailwind 4 stylesheet imports the theme's tailwind.css", async () => {
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        installPackage(fixture.dir, 'tailwindcss', '4.3.3');
+        writeFileSync(join(fixture.dir, DEFAULT_CONFIG.aliases.theme, 'tailwind.css'), '');
+        writeFileSync(join(fixture.dir, 'src/styles.css'), "@import 'tailwindcss/utilities.css';\n@import './styles/tailwind.css';\n");
+        vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
+        const { doctorCommand } = await import('./doctor');
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+        const p = await import('@clack/prompts');
+        expect(await logged('success')).toContain('tailwindcss 4.3.3 found, set up for Tailwind 4');
+        expect(p.log.success).toHaveBeenCalledWith(expect.stringContaining('imported in'));
+        expect(p.log.success).toHaveBeenCalledWith(expect.stringContaining('found in theme'));
+    });
+    it("warns when a Tailwind 4 stylesheet, or its absence, doesn't import tailwind.css", async () => {
         fixture = createFixture({ config: DEFAULT_CONFIG });
         writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        installPackage(fixture.dir, 'tailwindcss', '4.3.3');
         vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
         const { doctorCommand } = await import('./doctor');
         await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+        // Tailwind's own imports don't count.
+        writeFileSync(join(fixture.dir, 'src/styles.css'), "@import 'tailwindcss/utilities.css';");
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
         const p = await import('@clack/prompts');
-        expect(p.log.warn).toHaveBeenCalledWith(expect.stringContaining('No Tailwind config found'));
+        expect(vi
+            .mocked(p.log.warn)
+            .mock.calls.filter(([message]) => message.includes('not imported in'))).toHaveLength(2);
     });
     it('warns when a tailwind config exists but does not reference blotchPlugin', async () => {
         fixture = createFixture({ config: DEFAULT_CONFIG });
         writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        installPackage(fixture.dir, 'tailwindcss', '3.4.19');
         writeFileSync(join(fixture.dir, 'tailwind.config.js'), 'module.exports = { plugins: [] };');
         vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
         const { doctorCommand } = await import('./doctor');
@@ -177,7 +226,7 @@ describe('doctorCommand', () => {
         await expect(doctorCommand()).rejects.toThrow('process.exit(1)');
         const p = await import('@clack/prompts');
         expect(p.log.error).toHaveBeenCalledWith(expect.stringMatching(/Missing packages: .*@angular\/core.*@blotch\/angular-lynx.*@blotch\/dolan/));
-        expect(p.log.warn).toHaveBeenCalledWith(expect.stringContaining('tailwindcss'));
+        expect(await logged('warn')).toContain('tailwindcss not found — required if using dolan UI components. Install it with npm install tailwindcss, or set it up with ng generate @blotch/angular-lynx:add-tailwind');
     });
     it('reads Angular deps from devDependencies too', async () => {
         fixture = createFixture({ config: DEFAULT_CONFIG });
@@ -267,15 +316,16 @@ describe('doctorCommand', () => {
         expect(p.log.warn).toHaveBeenCalledWith(expect.stringContaining('dolan add spinner'));
     });
     it('does not warn about a dependency that is also installed', async () => {
-        // button depends on spinner, and spinner on icon (registry.ts) —
-        // installing all three means the `!installed.includes(dep)` check in
-        // checkComponentHealth is false for every dependency, so no "requires ...
-        // run dolan add" warning fires.
+        // button depends on spinner, glass and icon, and spinner and glass on
+        // icon (registry.ts) — installing all four means the
+        // `!installed.includes(dep)` check in checkComponentHealth is false for
+        // every dependency, so no "requires ... run dolan add" warning fires.
         fixture = createFixture({
             config: DEFAULT_CONFIG,
             components: {
                 button: { 'button.ts': '' },
                 spinner: { 'spinner.ts': '' },
+                glass: { 'glass.ts': '' },
                 icon: { 'icon.ts': '' },
             },
         });
@@ -382,4 +432,368 @@ describe('doctorCommand', () => {
         expect(p.log.warn).not.toHaveBeenCalledWith(expect.stringContaining('is missing files'));
     });
 });
+describe('doctorCommand Tailwind', () => {
+    /**
+     * A project in `dir` with nothing wrong but its Tailwind, which the test
+     * installs. Runs doctor.
+     */
+    const runDoctor = async (dir, files = {}) => {
+        writePackageJson(dir, { dependencies: FULL_ANGULAR_DEPS });
+        for (const [file, content] of Object.entries(files)) {
+            writeFileSync(join(dir, file), content);
+        }
+        vi.spyOn(process, 'cwd').mockReturnValue(dir);
+        const { doctorCommand } = await import('./doctor');
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+    };
+    /** The theme's tailwind.css, imported as dolan init shows. */
+    const IMPORTED = { 'src/styles.css': "@import './styles/tailwind.css';" };
+    it('finds the Tailwind a workspace root installs', async () => {
+        // The app's package.json lists no Tailwind: the root's is every package's.
+        fixture = createFixture({});
+        installPackage(fixture.dir, 'tailwindcss', '4.3.3');
+        const app = join(fixture.dir, 'apps', 'app');
+        for (const dir of Object.values(DEFAULT_CONFIG.aliases)) {
+            mkdirSync(join(app, dir), { recursive: true });
+        }
+        writeFileSync(join(app, 'dolan.config.json'), JSON.stringify(DEFAULT_CONFIG));
+        await runDoctor(app, IMPORTED);
+        expect(await logged('success')).toContain('tailwindcss 4.3.3 found, set up for Tailwind 4');
+        expect(await logged('warn')).not.toContainEqual(expect.stringContaining('tailwindcss'));
+    });
+    it('finds the Tailwind @tailwindcss/postcss depends on, hoisted next to it', async () => {
+        // npm's layout, for an app that lists only the plugin.
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        installPackage(fixture.dir, '@tailwindcss/postcss', '4.3.3');
+        installPackage(fixture.dir, 'tailwindcss', '4.3.3');
+        await runDoctor(fixture.dir, IMPORTED);
+        expect(await logged('success')).toContain('tailwindcss 4.3.3 found, set up for Tailwind 4');
+    });
+    it("finds the Tailwind @tailwindcss/postcss depends on in the plugin's own folder", async () => {
+        // pnpm's layout, out of the app's reach. The build still finds it: pnpm
+        // runs `ng` with the packages it hoists on NODE_PATH.
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        installPackage(installPackage(fixture.dir, '@tailwindcss/postcss', '4.3.3'), 'tailwindcss', '4.3.3');
+        await runDoctor(fixture.dir, IMPORTED);
+        expect(await logged('success')).toEqual(expect.arrayContaining([
+            'tailwindcss 4.3.3 found, set up for Tailwind 4',
+            'tailwind.css imported in src/styles.css',
+        ]));
+    });
+    it('warns about a Tailwind config with Tailwind 4 installed, as the build does', async () => {
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        installPackage(fixture.dir, 'tailwindcss', '4.3.3');
+        await runDoctor(fixture.dir, {
+            'tailwind.config.js': 'module.exports = { plugins: [blotchPlugin] };',
+        });
+        expect(await logged('warn')).toContain("Found tailwind.config.js, but Tailwind CSS 4.3.3 is installed, which doesn't run from a Tailwind config file. While it's there, dolan sets the theme up for Tailwind 3. Move its settings into your stylesheet and delete it, then run dolan update for the theme's tailwind.css.");
+        // Tailwind 4 doesn't run the config, so its plugin isn't a pass.
+        expect(await logged('success')).not.toContainEqual(expect.stringMatching(/set up for|blotchPlugin/));
+    });
+    it("names the package manager's command when Tailwind isn't installed", async () => {
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        writeFileSync(join(fixture.dir, 'yarn.lock'), '');
+        await runDoctor(fixture.dir);
+        expect(await logged('warn')).toContainEqual(expect.stringContaining('tailwindcss not found — required if using dolan UI components. Install it with yarn add tailwindcss'));
+        // Without a version, there's no setup to check.
+        expect(await logged('warn')).not.toContainEqual(expect.stringMatching(/Tailwind config|tailwind\.css not imported/));
+    });
+});
+describe('doctorCommand theme channels', () => {
+    /**
+     * A plugin that maps primary and border with themeColor(), as dolan's does.
+     */
+    const PLUGIN = `colors: {
+  primary: { DEFAULT: themeColor('primary') },
+  border: themeColor("border"),
+  destructive: { subtle: 'var(--destructive-subtle)' },
+}`;
+    /**
+     * Writes the theme's plugin and stylesheets, then runs doctor.
+     */
+    const runDoctor = async (plugin, css) => {
+        fixture = createFixture({ config: DEFAULT_CONFIG });
+        writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        const themeDir = join(fixture.dir, DEFAULT_CONFIG.aliases.theme);
+        writeFileSync(join(themeDir, 'tailwind-plugin.ts'), plugin);
+        for (const [file, content] of Object.entries(css)) {
+            writeFileSync(join(themeDir, file), content);
+        }
+        vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
+        const { doctorCommand } = await import('./doctor');
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+        return import('@clack/prompts');
+    };
+    it('passes when every mapped color has matching channels', async () => {
+        const p = await runDoctor(PLUGIN, {
+            'default.css': `/* --primary: red; */
+page {
+  --primary: rgba(24, 24, 27, 1);
+  --primary-rgb: 24, 24, 27;
+  --border: #e4e4e7;
+  --border-rgb: 228,228,231;
+}`,
+            // A theme that sets only some colors is checked for those alone.
+            'ocean.css': 'page { --primary: rgb(37 99 235); --primary-rgb: 37,99, 235; }',
+        });
+        expect(p.log.success).toHaveBeenCalledWith('Theme colors have the channels opacity modifiers need');
+        expect(p.log.warn).not.toHaveBeenCalledWith(expect.stringContaining('channels'));
+    });
+    it('warns about colors without channels, with the line to add', async () => {
+        // A theme copied before the -rgb variables, kept by dolan update.
+        const p = await runDoctor(PLUGIN, {
+            'default.css': 'page { --primary: rgba(24, 24, 27, 1); --border: hsl(240, 6%, 90%); }',
+        });
+        expect(p.log.warn).toHaveBeenCalledWith(expect.stringMatching(/default\.css.*--primary.*--border.*bg-primary\/50.*--primary-rgb: 24, 24, 27;/));
+    });
+    it("suggests placeholder channels when it can't read the color", async () => {
+        const p = await runDoctor(PLUGIN, {
+            'dark.css': 'page.dark { --border: hsl(240, 4%, 16%); }',
+        });
+        expect(p.log.warn).toHaveBeenCalledWith(expect.stringContaining('--border-rgb: r, g, b;'));
+    });
+    it("warns about channels that don't match their color", async () => {
+        // The brand color changed, its channels didn't.
+        const p = await runDoctor(PLUGIN, {
+            'default.css': `page {
+  --primary: #2563eb;
+  --primary-rgb: 24, 24, 27;
+  --border: #fff;
+  --border-rgb: 0, 0, 0;
+}`,
+        });
+        expect(p.log.warn).toHaveBeenCalledWith(expect.stringMatching(/default\.css.*--primary-rgb.*--border-rgb.*don't/));
+    });
+    it('warns about space-separated channels, which rgba() reads as one argument', async () => {
+        const p = await runDoctor(PLUGIN, {
+            'default.css': 'page { --primary: rgba(24, 24, 27, 1); --primary-rgb: 24 24 27; }',
+        });
+        expect(p.log.warn).toHaveBeenCalledWith(expect.stringMatching(/--primary-rgb.* doesn't hold .*comma-separated/));
+        expect(p.log.success).not.toHaveBeenCalledWith(expect.stringContaining('channels'));
+    });
+    it('says "doesn\'t" for one differing color, and skips colors it can\'t read', async () => {
+        const p = await runDoctor(PLUGIN, {
+            'default.css': `page {
+  --primary: rgba(37, 99, 235, 1);
+  --primary-rgb: 24, 24, 27;
+  --border: hsl(240, 6%, 90%);
+  --border-rgb: 1, 2, 3;
+}`,
+        });
+        expect(p.log.warn).toHaveBeenCalledWith(expect.stringMatching(/--primary-rgb.* doesn't hold/));
+        expect(p.log.warn).not.toHaveBeenCalledWith(expect.stringContaining('--border-rgb'));
+    });
+    it("doesn't check a plugin that maps no themeColor()", async () => {
+        // An older plugin: its modifiers never worked, so nothing needs channels.
+        const p = await runDoctor("colors: { primary: 'var(--primary)' }", {
+            'default.css': 'page { --primary: rgba(24, 24, 27, 1); }',
+        });
+        expect(p.log.warn).not.toHaveBeenCalledWith(expect.stringContaining('channels'));
+        expect(p.log.success).not.toHaveBeenCalledWith(expect.stringContaining('channels'));
+    });
+    describe('on Tailwind 4', () => {
+        /**
+         * Writes the theme's tailwind.css and stylesheets, then runs doctor.
+         */
+        const runDoctor4 = async (css) => {
+            fixture = createFixture({ config: DEFAULT_CONFIG });
+            writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+            installPackage(fixture.dir, 'tailwindcss', '4.3.3');
+            const themeDir = join(fixture.dir, DEFAULT_CONFIG.aliases.theme);
+            for (const [file, content] of Object.entries(css)) {
+                writeFileSync(join(themeDir, file), content);
+            }
+            vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
+            const { doctorCommand } = await import('./doctor');
+            await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+            return import('@clack/prompts');
+        };
+        /**
+         * The colors tailwind.css maps, as the theme's does.
+         */
+        const TAILWIND_CSS = `@theme inline {
+  --color-primary: var(--primary);
+  --color-destructive-subtle: var(--destructive-subtle);
+}`;
+        it('checks the colors tailwind.css maps, skipping translucent ones', async () => {
+            const p = await runDoctor4({
+                'tailwind.css': TAILWIND_CSS,
+                'default.css': 'page { --primary: rgba(24, 24, 27, 1); --primary-rgb: 24, 24, 27; --destructive-subtle: rgba(239, 68, 68, 0.1); }',
+            });
+            expect(p.log.success).toHaveBeenCalledWith('Theme colors have the channels opacity modifiers need');
+        });
+        it('warns about a color tailwind.css maps without channels', async () => {
+            const p = await runDoctor4({
+                'tailwind.css': TAILWIND_CSS,
+                'default.css': 'page { --primary: rgba(24, 24, 27, 1); }',
+            });
+            expect(p.log.warn).toHaveBeenCalledWith(expect.stringMatching(/default\.css.*--primary-rgb: 24, 24, 27;/));
+        });
+        it("doesn't check a theme without tailwind.css or the plugin", async () => {
+            const p = await runDoctor4({
+                'default.css': 'page { --primary: rgba(24, 24, 27, 1); }',
+            });
+            expect(p.log.success).not.toHaveBeenCalledWith(expect.stringContaining('channels'));
+        });
+    });
+});
+describe('doctorCommand theme colors components read', () => {
+    /** Every glass color, as dolan's default.css sets them. */
+    const GLASS_CSS = `page {
+  --glass-tint: rgba(24, 24, 27, 1);
+  --glass-tint-rgb: 24, 24, 27;
+  --glass-tint-foreground: rgba(250, 250, 250, 1);
+  --glass-tint-foreground-rgb: 250, 250, 250;
+  --glass-foreground: rgba(9, 9, 11, 1);
+  --glass-foreground-rgb: 9, 9, 11;
+  --glass-muted-foreground: rgba(63, 63, 70, 1);
+  --glass-muted-foreground-rgb: 63, 63, 70;
+  --glass-clear-foreground: rgba(255, 255, 255, 1);
+  --glass-clear-foreground-rgb: 255, 255, 255;
+  --glass-dim: rgba(0, 0, 0, 0.35);
+}`;
+    /** The glass colors mapped as dolan's tailwind.css maps them. */
+    const GLASS_TAILWIND_CSS = `@theme inline {
+  --color-glass-tint: var(--glass-tint);
+  --color-glass-tint-foreground: var(--glass-tint-foreground);
+  --color-glass-foreground: var(--glass-foreground);
+  --color-glass-muted-foreground: var(--glass-muted-foreground);
+  --color-glass-clear-foreground: var(--glass-clear-foreground);
+  --color-glass-dim: var(--glass-dim);
+}`;
+    /**
+     * A Tailwind 4 project with glass installed and the given theme files,
+     * and dolan's own theme if `bundled` is given. Runs doctor.
+     */
+    const runDoctor = async (theme, bundled, root = {}) => {
+        fixture = createFixture({
+            config: DEFAULT_CONFIG,
+            lockfile: tracking('glass', 'icon'),
+            components: {
+                glass: { 'glass.ts': '' },
+                icon: { 'icon.ts': '' },
+            },
+            themeFiles: bundled,
+        });
+        writePackageJson(fixture.dir, { dependencies: FULL_ANGULAR_DEPS });
+        // A Tailwind config is a Tailwind 3 setup.
+        installPackage(fixture.dir, 'tailwindcss', root['tailwind.config.ts'] ? '3.4.19' : '4.3.3');
+        const themeDir = join(fixture.dir, DEFAULT_CONFIG.aliases.theme);
+        for (const [file, content] of Object.entries(theme)) {
+            writeFileSync(join(themeDir, file), content);
+        }
+        for (const [file, content] of Object.entries(root)) {
+            writeFileSync(join(fixture.dir, file), content);
+        }
+        vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
+        const { doctorCommand } = await import('./doctor');
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+        return import('@clack/prompts');
+    };
+    it('passes when the theme has and maps every color the components read', async () => {
+        const p = await runDoctor({
+            'default.css': GLASS_CSS,
+            'tailwind.css': GLASS_TAILWIND_CSS,
+        });
+        expect(p.log.success).toHaveBeenCalledWith('Theme has the colors your components read');
+    });
+    it("lists the colors a theme lacks, with dolan's lines for them", async () => {
+        // A theme copied before glass, and edited, so dolan update kept it.
+        const p = await runDoctor({
+            'default.css': 'page { --primary: rgba(24, 24, 27, 1); }',
+            'dark.css': GLASS_CSS.replace('page', 'page.dark'),
+        }, { 'default.css': GLASS_CSS });
+        expect(await logged('warn')).toContainEqual(expect.stringMatching(/default\.css lacks theme colors that glass read: --glass-tint, .*--glass-dim\..*dolan update.*\n--glass-tint: rgba\(24, 24, 27, 1\);\n--glass-tint-rgb: 24, 24, 27;\n/s));
+        expect(await logged('warn')).not.toContainEqual(expect.stringContaining('dark.css lacks'));
+        expect(p.log.success).not.toHaveBeenCalledWith('Theme has the colors your components read');
+    });
+    it("points at dolan update alone without dolan's theme to quote", async () => {
+        await runDoctor({ 'default.css': 'page {}' });
+        expect(await logged('warn')).toContainEqual(expect.stringMatching(/default\.css lacks .*haven't edited\.$/));
+    });
+    it("lists the colors tailwind.css doesn't map", async () => {
+        await runDoctor({
+            'default.css': GLASS_CSS,
+            'tailwind.css': GLASS_TAILWIND_CSS.replace('  --color-glass-dim: var(--glass-dim);\n', ''),
+        });
+        expect(await logged('warn')).toContainEqual(expect.stringMatching(/tailwind\.css doesn't map theme colors that glass read to classes: glass-dim\./));
+    });
+    it("accepts the Tailwind 3 plugin's themeColor() and var() mappings", async () => {
+        const p = await runDoctor({
+            'default.css': GLASS_CSS,
+            'tailwind-plugin.ts': `glass: {
+  tint: { DEFAULT: themeColor('glass-tint'), foreground: themeColor("glass-tint-foreground") },
+  foreground: themeColor('glass-foreground'),
+  'muted-foreground': themeColor('glass-muted-foreground'),
+  'clear-foreground': themeColor('glass-clear-foreground'),
+  dim: 'var(--glass-dim)',
+}`,
+        }, undefined, { 'tailwind.config.ts': 'export default { plugins: [blotchPlugin] };' });
+        expect(p.log.success).toHaveBeenCalledWith('Theme has the colors your components read');
+    });
+});
+// A move between Tailwind versions leaves the other version's theme files,
+// which nothing uses: the plugin is dead code the app's coverage counts.
+describe('doctorCommand — theme files for the Tailwind version the app left', () => {
+    /**
+     * Runs doctor in an app on `tailwind` whose theme folder has `files`, which
+     * the lockfile records unless `tracked` says otherwise, and returns its
+     * warnings about them, colors stripped.
+     */
+    const leftoverWarnings = async (tailwind, files, tracked = files) => {
+        fixture = createFixture({
+            config: DEFAULT_CONFIG,
+            lockfile: {
+                version: 1,
+                components: {},
+                theme: Object.fromEntries(tracked.map((file) => [file, { hash: hashContent('') }])),
+            },
+        });
+        const dependencies = FULL_ANGULAR_DEPS;
+        if (tailwind === null)
+            writePackageJson(fixture.dir, { dependencies });
+        else
+            onTailwind(fixture.dir, tailwind, { dependencies });
+        for (const file of files) {
+            writeFileSync(join(fixture.dir, DEFAULT_CONFIG.aliases.theme, file), '');
+        }
+        vi.spyOn(process, 'cwd').mockReturnValue(fixture.dir);
+        const { doctorCommand } = await import('./doctor');
+        await expect(doctorCommand()).rejects.toThrow('process.exit(0)');
+        const p = await import('@clack/prompts');
+        return vi
+            .mocked(p.log.warn)
+            .mock.calls.map(([message]) => stripVTControlCharacters(message))
+            .filter((message) => message.startsWith('Found '));
+    };
+    it('warns about the Tailwind 3 plugin and its test in a Tailwind 4 app, for dolan update to delete', async () => {
+        expect(await leftoverWarnings(4, [
+            'tailwind.css',
+            'tailwind-plugin.ts',
+            'tailwind-plugin.test.ts',
+        ])).toEqual([
+            "Found tailwind-plugin.ts, tailwind-plugin.test.ts in src/styles, but the app uses Tailwind 4, which takes the theme's classes from tailwind.css. Run dolan update to delete them, or delete them.",
+        ]);
+    });
+    it('warns about tailwind.css in a Tailwind 3 app', async () => {
+        expect(await leftoverWarnings(3, ['tailwind.css', 'tailwind-plugin.ts'])).toEqual([
+            "Found tailwind.css in src/styles, but the app uses Tailwind 3, which takes the theme's classes from tailwind-plugin.ts. Run dolan update to delete it, or delete it.",
+        ]);
+    });
+    it("doesn't send the app to dolan update for a plugin it doesn't delete", async () => {
+        // Kept when `update` asked, so the app's own now.
+        expect(await leftoverWarnings(4, ['tailwind.css', 'tailwind-plugin.ts'], [])).toEqual([
+            "Found tailwind-plugin.ts in src/styles, but the app uses Tailwind 4, which takes the theme's classes from tailwind.css. Delete it, unless your own code uses it.",
+        ]);
+    });
+    it.each([
+        [4, ['tailwind.css']],
+        [3, ['tailwind-plugin.ts', 'tailwind-plugin.test.ts']],
+    ])('says nothing when a Tailwind %s theme has only the files the app takes', async (tailwind, files) => {
+        expect(await leftoverWarnings(tailwind, [...files])).toEqual([]);
+    });
+    it('says nothing without Tailwind, which has no version to have left', async () => {
+        expect(await leftoverWarnings(null, ['tailwind.css'])).toEqual([]);
+    });
+});
 //# sourceMappingURL=doctor.test.js.map