fix(cli): fix deduplication for files containing @media (#3882)

Co-authored-by: Anthony Fu <github@antfu.me>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Author: lzl0304

packages/cli/src/index.ts

@@ -123,64 +123,44 @@ export async function build(_options: CliOptions) {
   async function generate(options: ResolvedCliOptions) {
     const sourceCache = Array.from(fileCache).map(([id, code]) => ({ id, code }))
 
-    const preTransform = await transformFiles(sourceCache, 'pre')
-    const defaultTransform = await transformFiles(preTransform)
-    const postTransform = await transformFiles(defaultTransform, 'post')
+    const afterPreTrans = await transformFiles(sourceCache, 'pre')
+    const afterDefaultTrans = await transformFiles(afterPreTrans)
+    const afterPostTrans = await transformFiles(afterDefaultTrans, 'post')
 
     // update source file
     if (options.writeTransformed) {
       await Promise.all(
-        postTransform
+        afterPostTrans
           .filter(({ transformedCode }) => !!transformedCode)
-          .map(({ transformedCode, id }) => new Promise<void>((resolve) => {
+          .map(async ({ transformedCode, id }) => {
             if (existsSync(id))
-              fs.writeFile(id, transformedCode as string, 'utf-8').then(resolve)
-          })),
+              await fs.writeFile(id, transformedCode as string, 'utf-8')
+          }),
       )
     }
-    const firstIdType = postTransform[0].id.split('.').pop()!
-    const isSameFileType = postTransform.every(({ id }) => id.split('.').pop() === firstIdType)
-    let css!: string
-    let matched: Set<string>
-    if (isSameFileType) {
-      // if all files are the same type, we can generate them all at once
-      const { css: _css, matched: _matched } = await ctx.uno.generate(
-        [...postTransform.map(({ code, transformedCode }) => (transformedCode ?? code).replace(SKIP_COMMENT_RE, ''))].join('\n'),
+
+    const tokens = new Set<string>()
+
+    for (const file of afterPostTrans) {
+      const { matched } = await ctx.uno.generate(
+        (file.transformedCode || file.code).replace(SKIP_COMMENT_RE, ''),
         {
-          preflights: options.preflights,
-          minify: options.minify,
-          id: postTransform[0].id,
+          preflights: false,
+          minify: true,
+          id: file.id,
         },
       )
-      css = _css
-      matched = _matched
-    }
-    else {
-      // if files are different types, we need to generate them one by one
-      const result = await Promise.all(postTransform.map(({ code, transformedCode, id }) =>
-        ctx.uno.generate(transformedCode ?? code, {
-          preflights: options.preflights,
-          minify: options.minify,
-          id,
-        })))
-      const cssCollection: Record<string, string[]> = {}
-      result.forEach(({ css, layers }) => {
-        css
-          .split(/\/\*.*?\*\//g) // Remove inline comments
-          .filter(Boolean).forEach((c, i) => {
-            if (!cssCollection[layers[i]]) {
-              cssCollection[layers[i]] = c.split('\n')
-            }
-            else {
-              // remove duplicates
-              cssCollection[layers[i]] = [...new Set([...cssCollection[layers[i]], ...c.split('\n')])]
-            }
-          })
-      })
-      css = result[0].layers.map(layer => `/* layer: ${layer} */${cssCollection[layer].join('\n')}`).join('\n')
-      matched = new Set(result.map(({ matched }) => [...matched]).flat())
+      matched.forEach(i => tokens.add(i))
     }
 
+    const { css, matched } = await ctx.uno.generate(
+      tokens,
+      {
+        preflights: options.preflights,
+        minify: options.minify,
+      },
+    )
+
     if (options.stdout) {
       process.stdout.write(css)
       return

packages/cli/test/__snapshots__/cli.test.ts.snap

@@ -11,6 +11,20 @@ exports[`cli > builds uno.css 1`] = `
 .p-4{padding:1rem;}"
 `;
 
+exports[`cli > should correctly deduplicate files of different types containing @media 1`] = `
+"/* layer: shortcuts */
+.box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgb(243 244 246 / var(--un-bg-opacity)) /* #f3f4f6 */;padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+/* layer: default */
+@media (min-width: 768px){
+.md\\:p-4{padding:1rem;}
+}
+@media (min-width: 1024px){
+.lg\\:p-8{padding:2rem;}
+}"
+`;
+
+exports[`cli > should correctly deduplicate files of different types containing @media 2`] = `".box {  }@media (min-width: 640px){.box{padding:0.5rem;}}"`;
+
 exports[`cli > supports directives transformer 1`] = `""`;
 
 exports[`cli > supports directives transformer 2`] = `".btn-center{@apply text-center my-0 font-medium;}"`;

packages/cli/test/cli.test.ts

@@ -207,6 +207,27 @@ export default defineConfig({
     }
   })
 
+  it('should correctly deduplicate files of different types containing @media', async () => {
+    const { output, transform } = await runCli(
+      {
+        'views/index1.html': '<div class="lg:p-8"></div>',
+        'views/index2.html': '<div class="md:p-4"></div>',
+        'views/index3.html': '<div class="box"></div>',
+        'views/index.css': '.box { @apply pd-6 sm:p-2; }',
+        'unocss.config.js': `
+          import { defineConfig, transformerDirectives } from 'unocss'
+          export default defineConfig({
+            transformers: [transformerDirectives()]
+          })
+        `.trim(),
+      },
+      { transformFile: 'views/index.css', args: ['--write-transformed'] },
+    )
+
+    expect(output).toMatchSnapshot()
+    expect(transform).toMatchSnapshot()
+  })
+
   it('@unocss-skip uno.css', async () => {
     const { output } = await runCli({
       'views/index.html': `
@@ -300,7 +321,7 @@ async function runCli(files: Record<string, string>, options?: { transformFile?:
   const output = await readFile(testDir)
 
   if (options?.transformFile) {
-    const transform = await readFile(testDir, options?.transformFile)
+    const transform = await readFile(testDir, options.transformFile)
     return {
       output,
       transform,