Remove problematic chars from asset filenames

__playwright-tests__/fixtures/asset-paths.html

@@ -27,6 +27,7 @@
       <div class="with-rewritten-background-img"></div>
       <div class="with-rewritten-background-img-inline"></div>
       <div style="background: url('/img?url=fixtures/pink.png'); no-repeat center;"></div>
+      <div><img src="/img/another%Cwith%Cpercents"/></div>
     </div>
 
     <h2>srcset</h2>

__playwright-tests__/server.js

@@ -63,6 +63,10 @@ app.get('/img/another', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/pink.png'));
 });
 
+app.get('/img/another%Cwith%Cpercents', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/pink.png'));
+});
+
 app.get('/asset-paths/relative/purple.png', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/purple.png'));
 });

src/write-archive/archive-file.test.ts

@@ -87,7 +87,7 @@ describe('ArchiveFile', () => {
 
       const filePath = archiveFile.toFileSystemPath();
 
-      expect(filePath).toEqual('/localhost%3A9999/some/directory/hi.png');
+      expect(filePath).toEqual('/localhost3A9999/some/directory/hi.png');
     });
   });
 

src/write-archive/archive-file.ts

@@ -14,6 +14,7 @@ import type { ArchiveResponse, UrlString } from '../resource-archive';
  * - encoding the query string into the file name to avoid overwriting files
  *   that have a different response due to the query string
  * - truncating file names and path parts that are too big for some file systems
+ * - removing problematic characters
  * - ensuring the file name has an extension
  */
 export class ArchiveFile {
@@ -43,6 +44,7 @@ export class ArchiveFile {
     sanitizedSrc = this.ensureNonDirectory(sanitizedSrc);
     sanitizedSrc = this.encodeQueryString(sanitizedSrc);
     sanitizedSrc = this.truncateFileName(sanitizedSrc);
+    sanitizedSrc = this.removeSpecialChars(sanitizedSrc);
     sanitizedSrc = this.addExtension(sanitizedSrc);
 
     return sanitizedSrc;
@@ -80,6 +82,11 @@ export class ArchiveFile {
     return `${pathname.startsWith('/') ? '/' : ''}${path.join(...rebuiltPieces)}`;
   }
 
+  private removeSpecialChars(pathname: string) {
+    // The storybook server seems to have a problem with percents in file names
+    return pathname.replace(/[%]/g, '');
+  }
+
   private addExtension(pathname: string) {
     if ('error' in this.response || !this.response.contentType) return pathname;