Test for new file creation in the PostCSS plugin

tailwindlabs · Oct 30, 2024 · 5e9a595 · 5e9a595
1 parent b0c93c1
commit 5e9a595
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 26 deletions.
diff --git a/integrations/postcss/index.test.ts b/integrations/postcss/index.test.ts
@@ -947,32 +947,42 @@ test(
     ])
 
     // Creating new files in the "root" of auto source detected folders
-    // await fs.write(
-    //   'project-b/new-file.html',
-    //   html`<div class="[.created_&]:content-['project-b/new-file.html']"></div>`,
-    // )
-    // await fs.write(
-    //   'project-b/new-folder/new-file.html',
-    //   html`<div class="[.created_&]:content-['project-b/new-folder/new-file.html']"></div>`,
-    // )
-    // await fs.write(
-    //   'project-c/new-file.html',
-    //   html`<div class="[.created_&]:content-['project-c/new-file.html']"></div>`,
-    // )
-    // await fs.write(
-    //   'project-c/new-folder/new-file.html',
-    //   html`<div class="[.created_&]:content-['project-c/new-folder/new-file.html']"></div>`,
-    // )
-
-    // await fs.write('project-a/src/index.css', await fs.read('project-a/src/index.css'))
-    // await new Promise((resolve) => setTimeout(resolve, 1000))
-
-    // await fs.expectFileToContain('./project-a/dist/out.css', [
-    //   candidate`[.created_&]:content-['project-b/new-file.html']`,
-    //   candidate`[.created_&]:content-['project-b/new-folder/new-file.html']`,
-    //   candidate`[.created_&]:content-['project-c/new-file.html']`,
-    //   candidate`[.created_&]:content-['project-c/new-folder/new-file.html']`,
-    // ])
+    // We need to create the files and *then* update them because postcss-cli
+    // does not pick up new files — only changes to existing files.
+    await fs.create([
+      'project-b/new-file.html',
+      'project-b/new-folder/new-file.html',
+      'project-c/new-file.html',
+      'project-c/new-folder/new-file.html',
+    ])
+
+    // If we don't wait writes will be coalesced into a "add" event which
+    // isn't picked up by postcss-cli.
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    await fs.write(
+      'project-b/new-file.html',
+      html`<div class="[.created_&]:content-['project-b/new-file.html']"></div>`,
+    )
+    await fs.write(
+      'project-b/new-folder/new-file.html',
+      html`<div class="[.created_&]:content-['project-b/new-folder/new-file.html']"></div>`,
+    )
+    await fs.write(
+      'project-c/new-file.html',
+      html`<div class="[.created_&]:content-['project-c/new-file.html']"></div>`,
+    )
+    await fs.write(
+      'project-c/new-folder/new-file.html',
+      html`<div class="[.created_&]:content-['project-c/new-folder/new-file.html']"></div>`,
+    )
+
+    await fs.expectFileToContain('./project-a/dist/out.css', [
+      candidate`[.created_&]:content-['project-b/new-file.html']`,
+      candidate`[.created_&]:content-['project-b/new-folder/new-file.html']`,
+      candidate`[.created_&]:content-['project-c/new-file.html']`,
+      candidate`[.created_&]:content-['project-c/new-folder/new-file.html']`,
+    ])
   },
 )
 

diff --git a/integrations/utils.ts b/integrations/utils.ts
@@ -39,6 +39,7 @@ interface TestContext {
   getFreePort(): Promise<number>
   fs: {
     write(filePath: string, content: string): Promise<void>
+    create(filePaths: string[]): Promise<void>
     read(filePath: string): Promise<string>
     glob(pattern: string): Promise<[string, string][]>
     dumpFiles(pattern: string): Promise<string>
@@ -294,6 +295,20 @@ export function test(
             await fs.mkdir(dir, { recursive: true })
             await fs.writeFile(full, content)
           },
+
+          async create(filenames: string[]): Promise<void> {
+            for (let filename of filenames) {
+              let full = path.join(root, filename)
+
+              let dir = path.dirname(full)
+              await fs.mkdir(dir, { recursive: true })
+
+              // Create the file _then_ write to it which is necessary because
+              // postcss-cli doesn't listen for new files just updates to them
+              await fs.writeFile(full, '')
+            }
+          },
+
           async read(filePath: string) {
             let content = await fs.readFile(path.resolve(root, filePath), 'utf8')