svelte-ag 1.0.64 → 1.0.66

package/dist/vite/vite-plugin-component-source-collector.d.ts

@@ -15,12 +15,6 @@ interface Options {
      */
     safePackages: string[];
 }
-type NormalizeCollectedSourceFilePathOptions = {
-    outputFilePath: string;
-    root: string;
-    safePackages: string[];
-};
-export declare function normalizeCollectedSourceFilePath(file: string, opts: NormalizeCollectedSourceFilePathOptions): Promise<string>;
 export default function componentSourceCollector(opts?: Options): Promise<Plugin>;
 export {};
 //# sourceMappingURL=vite-plugin-component-source-collector.d.ts.map

package/dist/vite/vite-plugin-component-source-collector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin-component-source-collector.d.ts","sourceRoot":"","sources":["../../src/lib/vite/vite-plugin-component-source-collector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAMnD,UAAU,OAAO;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAuCD,KAAK,uCAAuC,GAAG;IAC7C,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,wBAAsB,gCAAgC,CACpD,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,uCAAuC,GAC5C,OAAO,CAAC,MAAM,CAAC,CA6BjB;AAED,wBAA8B,wBAAwB,CAAC,IAAI,GAAE,OAA8B,GAAG,OAAO,CAAC,MAAM,CAAC,CAgL5G"}
+{"version":3,"file":"vite-plugin-component-source-collector.d.ts","sourceRoot":"","sources":["../../src/lib/vite/vite-plugin-component-source-collector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAMnD,UAAU,OAAO;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AA2CD,wBAA8B,wBAAwB,CAAC,IAAI,GAAE,OAA8B,GAAG,OAAO,CAAC,MAAM,CAAC,CAuN5G"}

package/dist/vite/vite-plugin-component-source-collector.js

@@ -7,10 +7,14 @@ const componentFiles = new Set();
 let firstRound = true;
 const packageJsonCache = new Map();
 function ensureDotRelative(filePath) {
-    if (filePath.startsWith('.'))
+    if (filePath.startsWith('./'))
         return filePath;
     return `./${filePath}`;
 }
+async function touch(path) {
+    const handle = await open(path, 'a');
+    await handle.close();
+}
 function isPathInside(parentPath, childPath) {
     const relativePath = relative(parentPath, childPath);
     return relativePath === '' || (!relativePath.startsWith('..') && !isAbsolute(relativePath));
@@ -35,65 +39,63 @@ async function readPackageNameAt(directory) {
     packageJsonCache.set(directory, packageNamePromise);
     return packageNamePromise;
 }
-export async function normalizeCollectedSourceFilePath(file, opts) {
-    const cleanedFileName = file.replace(/[?#].*$/, '');
-    const resolvedFilePath = isAbsolute(cleanedFileName)
-        ? resolve(cleanedFileName)
-        : resolve(dirname(opts.outputFilePath), cleanedFileName);
-    let currentDirectory = dirname(resolvedFilePath);
-    while (true) {
-        const packageName = await readPackageNameAt(currentDirectory);
-        if (packageName !== null) {
-            const currentDirectoryPosix = toPosixPath(currentDirectory);
-            const isExternalPackage = !isPathInside(opts.root, currentDirectory) || currentDirectoryPosix.includes('/node_modules/');
-            if (isExternalPackage && opts.safePackages.includes(packageName)) {
-                return resolve(opts.root, 'node_modules', packageName, relative(currentDirectory, resolvedFilePath));
-            }
-            return resolvedFilePath;
-        }
-        const parentDirectory = dirname(currentDirectory);
-        if (parentDirectory === currentDirectory) {
-            return resolvedFilePath;
-        }
-        currentDirectory = parentDirectory;
-    }
-}
 export default async function componentSourceCollector(opts = { safePackages: [] }) {
     // constants
     const outFileName = opts.outputFile ?? 'component-sources.css';
-    const classRegex = /class(?:=|:)/;
+    const classAttributeRegex = /\bclass\s*=/;
     const importRegex = /@import\s+['"]([^'"]+)['"]/g;
-    let outputFilePath = undefined;
-    let root = undefined;
     // state
+    let outputFilePath;
+    let nodeModulesPath;
     let config;
     let initialTransformDone = false;
     let initialTransformTimer = null;
-    // init
-    function shouldAdd(code) {
-        return classRegex.test(code);
+    function shouldAdd(code, id) {
+        // Svelte's `class:` directive toggles local classes and should not be treated as
+        // a Tailwind source signal. Including those files can pull in component-local
+        // style modules that Tailwind should never parse directly.
+        if (id.includes('?svelte&type=style'))
+            return false;
+        return classAttributeRegex.test(code);
     }
-    async function addPath(file) {
-        if (outputFilePath &&
-            file !== '' && // No nothing
-            root) {
-            const normalizedFilePath = await normalizeCollectedSourceFilePath(file, {
-                outputFilePath,
-                root,
-                safePackages: opts.safePackages
-            });
-            if (!/\.svelte-kit/.test(normalizedFilePath) && // No svelte-kit files
-                // No dep files unless marked as safe
-                (!/(?:\.pnpm|\.vite)/.test(normalizedFilePath) ||
-                    opts.safePackages.some((p) => normalizedFilePath.includes(`node_modules/${p}`)))) {
-                const relativeFilePath = toPosixPath(relative(dirname(outputFilePath), normalizedFilePath));
-                if (normalizedFilePath === outputFilePath || relativeFilePath === outFileName)
-                    return;
-                // Dont add itself
-                componentFiles.add(ensureDotRelative(relativeFilePath));
+    async function normalizeCollectedSourceFilePath(file) {
+        const cleanedFileName = file.replace(/[?#].*$/, '');
+        const resolvedFilePath = isAbsolute(cleanedFileName)
+            ? resolve(cleanedFileName)
+            : resolve(dirname(outputFilePath), cleanedFileName);
+        let currentDirectory = dirname(resolvedFilePath);
+        while (true) {
+            const packageName = await readPackageNameAt(currentDirectory);
+            if (packageName !== null) {
+                const currentDirectoryPosix = toPosixPath(currentDirectory);
+                const isExternalPackage = !isPathInside(dirname(nodeModulesPath), currentDirectory) || currentDirectoryPosix.includes('/node_modules/');
+                if (isExternalPackage && opts.safePackages.includes(packageName)) {
+                    return resolve(nodeModulesPath, packageName, relative(currentDirectory, resolvedFilePath));
+                }
+                return resolvedFilePath;
             }
+            const parentDirectory = dirname(currentDirectory);
+            if (parentDirectory === currentDirectory) {
+                return resolvedFilePath;
+            }
+            currentDirectory = parentDirectory;
         }
     }
+    async function addPath(file) {
+        if (!outputFilePath || file === '')
+            return;
+        const normalizedFilePath = await normalizeCollectedSourceFilePath(file);
+        if (/\.svelte-kit/.test(normalizedFilePath) ||
+            (/(?:\.pnpm|\.vite)/.test(normalizedFilePath) &&
+                !opts.safePackages?.some((packageName) => normalizedFilePath.includes(`node_modules/${packageName}`)))) {
+            return;
+        }
+        const relativeFilePath = toPosixPath(relative(dirname(outputFilePath), normalizedFilePath));
+        if (normalizedFilePath === outputFilePath || relativeFilePath === outFileName)
+            return;
+        // Dont add itself
+        componentFiles.add(ensureDotRelative(relativeFilePath));
+    }
     function scheduleInitialWrite() {
         if (initialTransformTimer)
             clearTimeout(initialTransformTimer);
@@ -102,11 +104,7 @@ export default async function componentSourceCollector(opts = { safePackages: []
                 writeOutFile();
                 initialTransformDone = true;
             }
-        }, 1000); // adjust delay as needed
-    }
-    async function touch(path) {
-        const handle = await open(path, 'a');
-        await handle.close();
+        }, 1000);
     }
     const writeOutFile = async () => {
         const lines = Array.from(componentFiles)
@@ -115,7 +113,7 @@ export default async function componentSourceCollector(opts = { safePackages: []
         if (outputFilePath) {
             const didWrite = await writeIfDifferent(outputFilePath, lines.join('\n'));
             if (didWrite)
-                console.log('Wrote', lines.length);
+                console.log('tailwind-sources:wrote', lines.length);
         }
     };
     // ---- plugin ---- //
@@ -127,8 +125,16 @@ export default async function componentSourceCollector(opts = { safePackages: []
          */
         async configResolved(resolved) {
             config = resolved;
-            root = config.root;
-            outputFilePath = resolve(root, outFileName);
+            outputFilePath = resolve(config.root, outFileName);
+            let current = config.root;
+            while (true) {
+                if (await exists(join(current, 'package.json'))) {
+                    nodeModulesPath = join(current, 'node_modules');
+                    break;
+                }
+                else
+                    current = dirname(current);
+            }
             console.log('tailwind-sources:configResolved: Command is', config.command);
             await touch(outputFilePath);
             if (config.command === 'build' && firstRound) {
@@ -136,13 +142,26 @@ export default async function componentSourceCollector(opts = { safePackages: []
                 componentFiles.clear();
                 firstRound = false;
             }
-            else if (config.command === 'serve') {
-                if (await exists(outputFilePath)) {
-                    const fileLines = (await readFile(outputFilePath, 'utf8')).split('\n');
-                    for (const fileLine of fileLines) {
-                        await addPath(fileLine.replace(/@source\s+'(.*?)';/, '$1'));
+            else if (config.command === 'serve' && (await exists(outputFilePath))) {
+                const fileLines = (await readFile(outputFilePath, 'utf8')).split('\n');
+                for (const fileLine of fileLines) {
+                    const sourcePath = fileLine.replace(/@source\s+'(.*?)';/, '$1');
+                    if (sourcePath === fileLine)
+                        continue;
+                    const resolvedSourcePath = resolve(dirname(outputFilePath), sourcePath);
+                    if (resolvedSourcePath.endsWith('.css')) {
+                        await addPath(sourcePath);
+                        continue;
+                    }
+                    try {
+                        const code = await readFile(resolvedSourcePath, 'utf8');
+                        if (shouldAdd(code, resolvedSourcePath)) {
+                            await addPath(sourcePath);
+                        }
+                    }
+                    catch {
+                        // Ignore stale source entries that no longer resolve on disk.
                     }
-                    // console.log('config resolved', componentFiles);
                 }
             }
         },
@@ -159,7 +178,7 @@ export default async function componentSourceCollector(opts = { safePackages: []
                 'npm-shrinkwrap.json',
                 // pnpm install-state changes:
                 'node_modules/.modules.yaml'
-            ].map((p) => join(root, p));
+            ].map((p) => join(config.root, p));
             server.watcher.add(lockFiles);
             const onChange = async (file) => {
                 if (!lockFiles.includes(file))
@@ -192,7 +211,7 @@ export default async function componentSourceCollector(opts = { safePackages: []
                 }
             }
             // Adds all other files with the classRegex
-            if (shouldAdd(code)) {
+            if (shouldAdd(code, id)) {
                 await addPath(id);
             }
             if (!initialTransformDone) {

package/dist/vite/vite-plugin-component-source-collector.unit.test.js

@@ -1,64 +1,108 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { mkdir, mkdtemp, rm, writeFile } from 'fs/promises';
-import { dirname, join } from 'path';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mkdir, mkdtemp, readFile, rm, symlink, writeFile } from 'fs/promises';
+import { join } from 'path';
 import { tmpdir } from 'os';
-import { normalizeCollectedSourceFilePath } from './vite-plugin-component-source-collector.js';
-const temporaryDirectories = [];
-async function createTemporaryDirectory() {
-    const directory = await mkdtemp(join(tmpdir(), 'svelte-ag-component-source-collector-'));
-    temporaryDirectories.push(directory);
+import { build, normalizePath } from 'vite';
+const tempDirectories = [];
+function svelteFixtureLoader() {
+    return {
+        name: 'svelte-fixture-loader',
+        async load(id) {
+            if (!id.endsWith('.svelte'))
+                return null;
+            const source = await readFile(id, 'utf8');
+            return `export default ${JSON.stringify(source)};`;
+        }
+    };
+}
+async function createTempDirectory(prefix) {
+    const directory = await mkdtemp(join(tmpdir(), prefix));
+    tempDirectories.push(directory);
     return directory;
 }
-async function createFile(filePath, contents = '') {
-    await mkdir(dirname(filePath), { recursive: true });
-    await writeFile(filePath, contents);
+async function writeJson(filePath, value) {
+    await writeFile(filePath, JSON.stringify(value, null, 2));
 }
-afterEach(async () => {
-    await Promise.all(temporaryDirectories.splice(0).map((directory) => rm(directory, { force: true, recursive: true })));
-});
-describe('normalizeCollectedSourceFilePath', () => {
-    it('canonicalizes pnpm store paths for safe packages', async () => {
-        const baseDirectory = await createTemporaryDirectory();
-        const appRoot = join(baseDirectory, 'app');
-        const outputFilePath = join(appRoot, 'component-sources.css');
-        const pnpmPackageRoot = join(appRoot, 'node_modules', '.pnpm', 'svelte-ag@1.0.56_hash', 'node_modules', 'svelte-ag');
-        const sourceFilePath = join(pnpmPackageRoot, 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte');
-        await createFile(join(pnpmPackageRoot, 'package.json'), JSON.stringify({ name: 'svelte-ag' }));
-        await createFile(sourceFilePath);
-        const normalizedPath = await normalizeCollectedSourceFilePath(sourceFilePath, {
-            outputFilePath,
-            root: appRoot,
-            safePackages: ['svelte-ag']
-        });
-        expect(normalizedPath).toBe(join(appRoot, 'node_modules', 'svelte-ag', 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte'));
+async function createProjectRoot() {
+    const root = await createTempDirectory('vite-plugin-component-source-collector-');
+    await mkdir(join(root, 'src'), { recursive: true });
+    await mkdir(join(root, 'node_modules'), { recursive: true });
+    await writeJson(join(root, 'package.json'), {
+        name: 'collector-test-app',
+        private: true,
+        type: 'module'
+    });
+    await writeFile(join(root, 'src', 'main.js'), ["import 'safe-pkg/Button.svelte';", "import './app.css';", ''].join('\n'));
+    await writeFile(join(root, 'src', 'app.css'), ['@import "safe-pkg/theme.css";', ''].join('\n'));
+    return root;
+}
+async function createSafePackage(packageRoot) {
+    await mkdir(packageRoot, { recursive: true });
+    await writeJson(join(packageRoot, 'package.json'), {
+        name: 'safe-pkg',
+        version: '1.0.0',
+        type: 'module'
+    });
+    await writeFile(join(packageRoot, 'Button.svelte'), '<button class="pkg-button">Click</button>\n');
+    await writeFile(join(packageRoot, 'theme.css'), '.pkg-theme { color: red; }\n');
+}
+async function runCollectorBuild(root) {
+    vi.resetModules();
+    const { default: componentSourceCollector } = await import('./vite-plugin-component-source-collector.js');
+    const collector = await componentSourceCollector({ safePackages: ['safe-pkg'] });
+    await build({
+        configFile: false,
+        logLevel: 'silent',
+        publicDir: false,
+        resolve: {
+            preserveSymlinks: false
+        },
+        root,
+        plugins: [collector, svelteFixtureLoader()],
+        build: {
+            write: false,
+            rollupOptions: {
+                input: join(root, 'src', 'main.js')
+            }
+        }
+    });
+    const contents = await readFile(join(root, 'component-sources.css'), 'utf8');
+    return contents
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean);
+}
+describe('vite-plugin-component-source-collector', () => {
+    beforeEach(() => {
+        vi.restoreAllMocks();
+        vi.spyOn(console, 'log').mockImplementation(() => { });
+    });
+    afterEach(async () => {
+        vi.restoreAllMocks();
+        await Promise.all(tempDirectories.splice(0).map((directory) => rm(directory, {
+            recursive: true,
+            force: true
+        })));
     });
-    it('canonicalizes linked package paths outside the project root', async () => {
-        const baseDirectory = await createTemporaryDirectory();
-        const appRoot = join(baseDirectory, 'app');
-        const outputFilePath = join(appRoot, 'component-sources.css');
-        const linkedPackageRoot = join(baseDirectory, 'packages', 'svelte-ag');
-        const sourceFilePath = join(linkedPackageRoot, 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte');
-        await createFile(join(linkedPackageRoot, 'package.json'), JSON.stringify({ name: 'svelte-ag' }));
-        await createFile(sourceFilePath);
-        const normalizedPath = await normalizeCollectedSourceFilePath(sourceFilePath, {
-            outputFilePath,
-            root: appRoot,
-            safePackages: ['svelte-ag']
-        });
-        expect(normalizedPath).toBe(join(appRoot, 'node_modules', 'svelte-ag', 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte'));
+    it('collects safe package component and css sources from installed node_modules packages', async () => {
+        const root = await createProjectRoot();
+        await createSafePackage(join(root, 'node_modules', 'safe-pkg'));
+        const lines = await runCollectorBuild(root);
+        expect(lines).toEqual([
+            "@source './node_modules/safe-pkg/Button.svelte';",
+            "@source './node_modules/safe-pkg/theme.css';"
+        ]);
     });
-    it('leaves project files unchanged even when the project matches a safe package name', async () => {
-        const baseDirectory = await createTemporaryDirectory();
-        const appRoot = join(baseDirectory, 'svelte-ag');
-        const outputFilePath = join(appRoot, 'component-sources.css');
-        const sourceFilePath = join(appRoot, 'src', 'lib', 'components', 'Button.svelte');
-        await createFile(join(appRoot, 'package.json'), JSON.stringify({ name: 'svelte-ag' }));
-        await createFile(sourceFilePath);
-        const normalizedPath = await normalizeCollectedSourceFilePath(sourceFilePath, {
-            outputFilePath,
-            root: appRoot,
-            safePackages: ['svelte-ag']
-        });
-        expect(normalizedPath).toBe(sourceFilePath);
+    it('normalizes symlinked pnpm-style package sources back to node_modules paths', async () => {
+        const root = await createProjectRoot();
+        const linkedPackageRoot = await createTempDirectory('vite-plugin-component-source-linked-package-');
+        await createSafePackage(linkedPackageRoot);
+        await symlink(linkedPackageRoot, join(root, 'node_modules', 'safe-pkg'), process.platform === 'win32' ? 'junction' : 'dir');
+        const lines = await runCollectorBuild(root);
+        expect(lines).toEqual([
+            "@source './node_modules/safe-pkg/Button.svelte';",
+            "@source './node_modules/safe-pkg/theme.css';"
+        ]);
+        expect(lines.join('\n')).not.toContain(normalizePath(linkedPackageRoot));
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-ag",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "description": "Useful svelte components",
   "bugs": "https://github.com/ageorgeh/svelte-ag/issues",
   "repository": {

package/src/lib/vite/vite-plugin-component-source-collector.ts

@@ -27,9 +27,13 @@ let firstRound = true;
 const packageJsonCache = new Map<string, Promise<string | null>>();
 
 function ensureDotRelative(filePath: string): string {
-  if (filePath.startsWith('.')) return filePath;
+  if (filePath.startsWith('./')) return filePath;
   return `./${filePath}`;
 }
+async function touch(path: string) {
+  const handle = await open(path, 'a');
+  await handle.close();
+}
 
 function isPathInside(parentPath: string, childPath: string): boolean {
   const relativePath = relative(parentPath, childPath);
@@ -58,90 +62,74 @@ async function readPackageNameAt(directory: string): Promise<string | null> {
   return packageNamePromise;
 }
 
-type NormalizeCollectedSourceFilePathOptions = {
-  outputFilePath: string;
-  root: string;
-  safePackages: string[];
-};
-
-export async function normalizeCollectedSourceFilePath(
-  file: string,
-  opts: NormalizeCollectedSourceFilePathOptions
-): Promise<string> {
-  const cleanedFileName = file.replace(/[?#].*$/, '');
-  const resolvedFilePath = isAbsolute(cleanedFileName)
-    ? resolve(cleanedFileName)
-    : resolve(dirname(opts.outputFilePath), cleanedFileName);
-
-  let currentDirectory = dirname(resolvedFilePath);
-
-  while (true) {
-    const packageName = await readPackageNameAt(currentDirectory);
-    if (packageName !== null) {
-      const currentDirectoryPosix = toPosixPath(currentDirectory);
-      const isExternalPackage =
-        !isPathInside(opts.root, currentDirectory) || currentDirectoryPosix.includes('/node_modules/');
-
-      if (isExternalPackage && opts.safePackages.includes(packageName)) {
-        return resolve(opts.root, 'node_modules', packageName, relative(currentDirectory, resolvedFilePath));
-      }
-
-      return resolvedFilePath;
-    }
-
-    const parentDirectory = dirname(currentDirectory);
-    if (parentDirectory === currentDirectory) {
-      return resolvedFilePath;
-    }
-
-    currentDirectory = parentDirectory;
-  }
-}
-
 export default async function componentSourceCollector(opts: Options = { safePackages: [] }): Promise<Plugin> {
   // constants
   const outFileName = opts.outputFile ?? 'component-sources.css';
-  const classRegex = /class(?:=|:)/;
+  const classAttributeRegex = /\bclass\s*=/;
   const importRegex = /@import\s+['"]([^'"]+)['"]/g;
 
-  let outputFilePath: string | undefined = undefined;
-  let root: string | undefined = undefined;
-
   // state
+  let outputFilePath: string;
+  let nodeModulesPath: string;
   let config: ResolvedConfig;
   let initialTransformDone = false;
   let initialTransformTimer: NodeJS.Timeout | null = null;
 
-  // init
-  function shouldAdd(code: string) {
-    return classRegex.test(code);
+  function shouldAdd(code: string, id: string) {
+    // Svelte's `class:` directive toggles local classes and should not be treated as
+    // a Tailwind source signal. Including those files can pull in component-local
+    // style modules that Tailwind should never parse directly.
+    if (id.includes('?svelte&type=style')) return false;
+    return classAttributeRegex.test(code);
   }
 
+  async function normalizeCollectedSourceFilePath(file: string): Promise<string> {
+    const cleanedFileName = file.replace(/[?#].*$/, '');
+    const resolvedFilePath = isAbsolute(cleanedFileName)
+      ? resolve(cleanedFileName)
+      : resolve(dirname(outputFilePath), cleanedFileName);
+
+    let currentDirectory = dirname(resolvedFilePath);
+
+    while (true) {
+      const packageName = await readPackageNameAt(currentDirectory);
+      if (packageName !== null) {
+        const currentDirectoryPosix = toPosixPath(currentDirectory);
+        const isExternalPackage =
+          !isPathInside(dirname(nodeModulesPath), currentDirectory) || currentDirectoryPosix.includes('/node_modules/');
+
+        if (isExternalPackage && opts.safePackages.includes(packageName)) {
+          return resolve(nodeModulesPath, packageName, relative(currentDirectory, resolvedFilePath));
+        }
+
+        return resolvedFilePath;
+      }
+
+      const parentDirectory = dirname(currentDirectory);
+      if (parentDirectory === currentDirectory) {
+        return resolvedFilePath;
+      }
+
+      currentDirectory = parentDirectory;
+    }
+  }
   async function addPath(file: string) {
+    if (!outputFilePath || file === '') return;
+
+    const normalizedFilePath = await normalizeCollectedSourceFilePath(file);
     if (
-      outputFilePath &&
-      file !== '' && // No nothing
-      root
+      /\.svelte-kit/.test(normalizedFilePath) ||
+      (/(?:\.pnpm|\.vite)/.test(normalizedFilePath) &&
+        !opts.safePackages?.some((packageName) => normalizedFilePath.includes(`node_modules/${packageName}`)))
     ) {
-      const normalizedFilePath = await normalizeCollectedSourceFilePath(file, {
-        outputFilePath,
-        root,
-        safePackages: opts.safePackages
-      });
-
-      if (
-        !/\.svelte-kit/.test(normalizedFilePath) && // No svelte-kit files
-        // No dep files unless marked as safe
-        (!/(?:\.pnpm|\.vite)/.test(normalizedFilePath) ||
-          opts.safePackages.some((p) => normalizedFilePath.includes(`node_modules/${p}`)))
-      ) {
-        const relativeFilePath = toPosixPath(relative(dirname(outputFilePath), normalizedFilePath));
-
-        if (normalizedFilePath === outputFilePath || relativeFilePath === outFileName) return;
-        // Dont add itself
-        componentFiles.add(ensureDotRelative(relativeFilePath));
-      }
+      return;
     }
+
+    const relativeFilePath = toPosixPath(relative(dirname(outputFilePath), normalizedFilePath));
+    if (normalizedFilePath === outputFilePath || relativeFilePath === outFileName) return;
+
+    // Dont add itself
+    componentFiles.add(ensureDotRelative(relativeFilePath));
   }
 
   function scheduleInitialWrite() {
@@ -151,12 +139,7 @@ export default async function componentSourceCollector(opts: Options = { safePac
         writeOutFile();
         initialTransformDone = true;
       }
-    }, 1000); // adjust delay as needed
-  }
-
-  async function touch(path: string) {
-    const handle = await open(path, 'a');
-    await handle.close();
+    }, 1000);
   }
 
   const writeOutFile = async () => {
@@ -166,7 +149,7 @@ export default async function componentSourceCollector(opts: Options = { safePac
 
     if (outputFilePath) {
       const didWrite = await writeIfDifferent(outputFilePath, lines.join('\n'));
-      if (didWrite) console.log('Wrote', lines.length);
+      if (didWrite) console.log('tailwind-sources:wrote', lines.length);
     }
   };
 
@@ -181,8 +164,15 @@ export default async function componentSourceCollector(opts: Options = { safePac
      */
     async configResolved(resolved) {
       config = resolved;
-      root = config.root;
-      outputFilePath = resolve(root, outFileName);
+      outputFilePath = resolve(config.root, outFileName);
+
+      let current = config.root;
+      while (true) {
+        if (await exists(join(current, 'package.json'))) {
+          nodeModulesPath = join(current, 'node_modules');
+          break;
+        } else current = dirname(current);
+      }
 
       console.log('tailwind-sources:configResolved: Command is', config.command);
 
@@ -192,13 +182,26 @@ export default async function componentSourceCollector(opts: Options = { safePac
         console.log('tailwind-sources: Clearing files list');
         componentFiles.clear();
         firstRound = false;
-      } else if (config.command === 'serve') {
-        if (await exists(outputFilePath)) {
-          const fileLines = (await readFile(outputFilePath, 'utf8')).split('\n');
-          for (const fileLine of fileLines) {
-            await addPath(fileLine.replace(/@source\s+'(.*?)';/, '$1'));
+      } else if (config.command === 'serve' && (await exists(outputFilePath))) {
+        const fileLines = (await readFile(outputFilePath, 'utf8')).split('\n');
+        for (const fileLine of fileLines) {
+          const sourcePath = fileLine.replace(/@source\s+'(.*?)';/, '$1');
+          if (sourcePath === fileLine) continue;
+
+          const resolvedSourcePath = resolve(dirname(outputFilePath), sourcePath);
+          if (resolvedSourcePath.endsWith('.css')) {
+            await addPath(sourcePath);
+            continue;
+          }
+
+          try {
+            const code = await readFile(resolvedSourcePath, 'utf8');
+            if (shouldAdd(code, resolvedSourcePath)) {
+              await addPath(sourcePath);
+            }
+          } catch {
+            // Ignore stale source entries that no longer resolve on disk.
           }
-          // console.log('config resolved', componentFiles);
         }
       }
     },
@@ -216,7 +219,7 @@ export default async function componentSourceCollector(opts: Options = { safePac
         'npm-shrinkwrap.json',
         // pnpm install-state changes:
         'node_modules/.modules.yaml'
-      ].map((p) => join(root!, p));
+      ].map((p) => join(config.root!, p));
       server.watcher.add(lockFiles);
       const onChange = async (file: string) => {
         if (!lockFiles.includes(file)) return;
@@ -251,7 +254,7 @@ export default async function componentSourceCollector(opts: Options = { safePac
       }
 
       // Adds all other files with the classRegex
-      if (shouldAdd(code)) {
+      if (shouldAdd(code, id)) {
         await addPath(id);
       }
 

package/src/lib/vite/vite-plugin-component-source-collector.unit.test.ts

@@ -1,91 +1,142 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { mkdir, mkdtemp, rm, writeFile } from 'fs/promises';
-import { dirname, join } from 'path';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mkdir, mkdtemp, readFile, rm, symlink, writeFile } from 'fs/promises';
+import { join } from 'path';
 import { tmpdir } from 'os';
-import { normalizeCollectedSourceFilePath } from './vite-plugin-component-source-collector.js';
+import { build, normalizePath, type Plugin } from 'vite';
 
-const temporaryDirectories: string[] = [];
+const tempDirectories: string[] = [];
 
-async function createTemporaryDirectory() {
-  const directory = await mkdtemp(join(tmpdir(), 'svelte-ag-component-source-collector-'));
-  temporaryDirectories.push(directory);
+function svelteFixtureLoader(): Plugin {
+  return {
+    name: 'svelte-fixture-loader',
+    async load(id) {
+      if (!id.endsWith('.svelte')) return null;
+
+      const source = await readFile(id, 'utf8');
+      return `export default ${JSON.stringify(source)};`;
+    }
+  };
+}
+
+async function createTempDirectory(prefix: string): Promise<string> {
+  const directory = await mkdtemp(join(tmpdir(), prefix));
+  tempDirectories.push(directory);
   return directory;
 }
 
-async function createFile(filePath: string, contents = '') {
-  await mkdir(dirname(filePath), { recursive: true });
-  await writeFile(filePath, contents);
+async function writeJson(filePath: string, value: unknown): Promise<void> {
+  await writeFile(filePath, JSON.stringify(value, null, 2));
 }
 
-afterEach(async () => {
-  await Promise.all(temporaryDirectories.splice(0).map((directory) => rm(directory, { force: true, recursive: true })));
-});
+async function createProjectRoot(): Promise<string> {
+  const root = await createTempDirectory('vite-plugin-component-source-collector-');
 
-describe('normalizeCollectedSourceFilePath', () => {
-  it('canonicalizes pnpm store paths for safe packages', async () => {
-    const baseDirectory = await createTemporaryDirectory();
-    const appRoot = join(baseDirectory, 'app');
-    const outputFilePath = join(appRoot, 'component-sources.css');
-    const pnpmPackageRoot = join(
-      appRoot,
-      'node_modules',
-      '.pnpm',
-      'svelte-ag@1.0.56_hash',
-      'node_modules',
-      'svelte-ag'
-    );
-    const sourceFilePath = join(pnpmPackageRoot, 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte');
+  await mkdir(join(root, 'src'), { recursive: true });
+  await mkdir(join(root, 'node_modules'), { recursive: true });
 
-    await createFile(join(pnpmPackageRoot, 'package.json'), JSON.stringify({ name: 'svelte-ag' }));
-    await createFile(sourceFilePath);
+  await writeJson(join(root, 'package.json'), {
+    name: 'collector-test-app',
+    private: true,
+    type: 'module'
+  });
 
-    const normalizedPath = await normalizeCollectedSourceFilePath(sourceFilePath, {
-      outputFilePath,
-      root: appRoot,
-      safePackages: ['svelte-ag']
-    });
+  await writeFile(
+    join(root, 'src', 'main.js'),
+    ["import 'safe-pkg/Button.svelte';", "import './app.css';", ''].join('\n')
+  );
+  await writeFile(join(root, 'src', 'app.css'), ['@import "safe-pkg/theme.css";', ''].join('\n'));
 
-    expect(normalizedPath).toBe(
-      join(appRoot, 'node_modules', 'svelte-ag', 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte')
-    );
+  return root;
+}
+
+async function createSafePackage(packageRoot: string): Promise<void> {
+  await mkdir(packageRoot, { recursive: true });
+  await writeJson(join(packageRoot, 'package.json'), {
+    name: 'safe-pkg',
+    version: '1.0.0',
+    type: 'module'
   });
+  await writeFile(join(packageRoot, 'Button.svelte'), '<button class="pkg-button">Click</button>\n');
+  await writeFile(join(packageRoot, 'theme.css'), '.pkg-theme { color: red; }\n');
+}
 
-  it('canonicalizes linked package paths outside the project root', async () => {
-    const baseDirectory = await createTemporaryDirectory();
-    const appRoot = join(baseDirectory, 'app');
-    const outputFilePath = join(appRoot, 'component-sources.css');
-    const linkedPackageRoot = join(baseDirectory, 'packages', 'svelte-ag');
-    const sourceFilePath = join(linkedPackageRoot, 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte');
+async function runCollectorBuild(root: string): Promise<string[]> {
+  vi.resetModules();
+  const { default: componentSourceCollector } = await import('./vite-plugin-component-source-collector.js');
+  const collector = await componentSourceCollector({ safePackages: ['safe-pkg'] });
+
+  await build({
+    configFile: false,
+    logLevel: 'silent',
+    publicDir: false,
+    resolve: {
+      preserveSymlinks: false
+    },
+    root,
+    plugins: [collector, svelteFixtureLoader()],
+    build: {
+      write: false,
+      rollupOptions: {
+        input: join(root, 'src', 'main.js')
+      }
+    }
+  });
 
-    await createFile(join(linkedPackageRoot, 'package.json'), JSON.stringify({ name: 'svelte-ag' }));
-    await createFile(sourceFilePath);
+  const contents = await readFile(join(root, 'component-sources.css'), 'utf8');
+  return contents
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
 
-    const normalizedPath = await normalizeCollectedSourceFilePath(sourceFilePath, {
-      outputFilePath,
-      root: appRoot,
-      safePackages: ['svelte-ag']
-    });
+describe('vite-plugin-component-source-collector', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+  });
 
-    expect(normalizedPath).toBe(
-      join(appRoot, 'node_modules', 'svelte-ag', 'dist', 'lib', 'components', 'dnd', 'DndDroppable.svelte')
+  afterEach(async () => {
+    vi.restoreAllMocks();
+
+    await Promise.all(
+      tempDirectories.splice(0).map((directory) =>
+        rm(directory, {
+          recursive: true,
+          force: true
+        })
+      )
     );
   });
 
-  it('leaves project files unchanged even when the project matches a safe package name', async () => {
-    const baseDirectory = await createTemporaryDirectory();
-    const appRoot = join(baseDirectory, 'svelte-ag');
-    const outputFilePath = join(appRoot, 'component-sources.css');
-    const sourceFilePath = join(appRoot, 'src', 'lib', 'components', 'Button.svelte');
+  it('collects safe package component and css sources from installed node_modules packages', async () => {
+    const root = await createProjectRoot();
+    await createSafePackage(join(root, 'node_modules', 'safe-pkg'));
+
+    const lines = await runCollectorBuild(root);
 
-    await createFile(join(appRoot, 'package.json'), JSON.stringify({ name: 'svelte-ag' }));
-    await createFile(sourceFilePath);
+    expect(lines).toEqual([
+      "@source './node_modules/safe-pkg/Button.svelte';",
+      "@source './node_modules/safe-pkg/theme.css';"
+    ]);
+  });
+
+  it('normalizes symlinked pnpm-style package sources back to node_modules paths', async () => {
+    const root = await createProjectRoot();
+    const linkedPackageRoot = await createTempDirectory('vite-plugin-component-source-linked-package-');
+
+    await createSafePackage(linkedPackageRoot);
+    await symlink(
+      linkedPackageRoot,
+      join(root, 'node_modules', 'safe-pkg'),
+      process.platform === 'win32' ? 'junction' : 'dir'
+    );
 
-    const normalizedPath = await normalizeCollectedSourceFilePath(sourceFilePath, {
-      outputFilePath,
-      root: appRoot,
-      safePackages: ['svelte-ag']
-    });
+    const lines = await runCollectorBuild(root);
 
-    expect(normalizedPath).toBe(sourceFilePath);
+    expect(lines).toEqual([
+      "@source './node_modules/safe-pkg/Button.svelte';",
+      "@source './node_modules/safe-pkg/theme.css';"
+    ]);
+    expect(lines.join('\n')).not.toContain(normalizePath(linkedPackageRoot));
   });
 });