IanVS/vite-plugin-turbosnap

preview-stats.json "id" and "name" using incorrect path separator on Windows

AlexAtVista opened this issue · 1 comments

Hi,

With webpack builds, even on Windows, the preview-stats.json file fields name and id use posix (/) path separators. This is not currently the case with vite-plugin-turbosnap.

Instead, vite-plugin-turbosnap is using the system default (on windows \\) separators, resulting in Turbosnap failing to identify changed files.

See here in chromatic-cli getDependentStoryFiles.ts line 33 the posix function transforms paths to use the posix separator. This function is used everywhere by chromatic-cli, except for the two places it already expects the correct path separators, git and the preview-stats.json.

To fix this, the normalize function of this package should be updated to include the same posix logic as chromatic-cli.

// Replaces Windows-style backslash path separators with POSIX-style forward slashes, because the
  // Webpack stats use forward slashes in the `name` and `moduleName` fields. Note `changedFiles`
  // already contains forward slashes, because that's what git yields even on Windows.
  const posix = (localPath: string) => localPath.split(path.sep).filter(Boolean).join(path.posix.sep);

  /**
   * Convert an absolute path name to a path relative to the vite root, with a starting `./`
   */
  function normalize(filename: string) {
    // Do not try to resolve virtual files
    if (filename.startsWith("/virtual:")) {
      return filename;
    }
    // Otherwise, we need them in the format `./path/to/file.js`.
    else {
      const posixRootDir = posix(rootDir);
      const posixFilename = posix(filename);

      const relativePath = path.posix.relative(posixRootDir, stripQueryParams(posixFilename));
      // This seems hacky, got to be a better way to add a `./` to the start of a path.
      return `./${relativePath}`;
    }
  }
IanVS commented

Thanks, would you be willing to submit a PR, @AlexAtVista?