feat(cli)!: add --write-transformed option, disable source write ba…

…ck by default (#2948)

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

packages/cli/src/cli-start.ts

@@ -21,6 +21,7 @@ export async function startCli(cwd = process.cwd(), argv = process.argv, options
     })
     .option('-c, --config [file]', 'Config file')
     .option('-w, --watch', 'Watch for file changes')
+    .option('--write-transformed', 'Update source files with transformed utilities', { default: false })
     .option('--preflights', 'Enable preflights', { default: true })
     .option('-m, --minify', 'Minify generated CSS', { default: false })
     .action(async (patterns: Array<string>, flags) => {

packages/cli/src/index.ts

@@ -118,14 +118,16 @@ export async function build(_options: CliOptions) {
     const postTransform = await transformFiles(defaultTransform, 'post')
 
     // update source file
-    await Promise.all(
-      postTransform
-        .filter(({ transformedCode }) => !!transformedCode)
-        .map(({ transformedCode, id }) => new Promise<void>((resolve) => {
-          if (existsSync(id))
-            fs.writeFile(id, transformedCode as string, 'utf-8').then(resolve)
-        })),
-    )
+    if (options.writeTransformed) {
+      await Promise.all(
+        postTransform
+          .filter(({ transformedCode }) => !!transformedCode)
+          .map(({ transformedCode, id }) => new Promise<void>((resolve) => {
+            if (existsSync(id))
+              fs.writeFile(id, transformedCode as string, 'utf-8').then(resolve)
+          })),
+      )
+    }
 
     const { css, matched } = await ctx.uno.generate(
       [...postTransform.map(({ code, transformedCode }) => transformedCode ?? code)].join('\n'),

packages/cli/src/types.ts

@@ -8,6 +8,7 @@ export interface CliOptions {
   watch?: boolean
   config?: string
   stdout?: boolean
+  writeTransformed?: boolean
 
   // generate options
   preflights?: boolean

test/__snapshots__/cli.test.ts.snap

@@ -8,18 +8,31 @@ exports[`cli > builds uno.css 1`] = `
 
 exports[`cli > supports directives transformer 1`] = `""`;
 
-exports[`cli > supports directives transformer 2`] = `".btn-center{margin-top:0;margin-bottom:0;text-align:center;font-weight:500;}"`;
+exports[`cli > supports directives transformer 2`] = `".btn-center{@apply text-center my-0 font-medium;}"`;
 
 exports[`cli > supports unocss.config.js 1`] = `
 "/* layer: shortcuts */
 .box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}"
 `;
 
+exports[`cli > supports updating source files with transformed utilities ('directives transformer') 1`] = `""`;
+
+exports[`cli > supports updating source files with transformed utilities ('directives transformer') 2`] = `".btn-center{margin-top:0;margin-bottom:0;text-align:center;font-weight:500;}"`;
+
+exports[`cli > supports updating source files with transformed utilities ('variant group transformer') 1`] = `
+"/* layer: default */
+.border-red{--un-border-opacity:1;border-color:rgba(248,113,113,var(--un-border-opacity));}
+.border-solid{border-style:solid;}
+.p-4{padding:1rem;}"
+`;
+
+exports[`cli > supports updating source files with transformed utilities ('variant group transformer') 2`] = `"<div class=\\"p-4 border-solid border-red\\"></div>"`;
+
 exports[`cli > supports variantGroup transformer 1`] = `
 "/* layer: default */
 .border-red{--un-border-opacity:1;border-color:rgba(248,113,113,var(--un-border-opacity));}
 .border-solid{border-style:solid;}
 .p-4{padding:1rem;}"
 `;
 
-exports[`cli > supports variantGroup transformer 2`] = `"<div class=\\"p-4 border-solid border-red\\"></div>"`;
+exports[`cli > supports variantGroup transformer 2`] = `"<div class=\\"p-4 border-(solid red)\\"></div>"`;

test/cli.test.ts

@@ -67,6 +67,40 @@ export default defineConfig({
     expect(transform).toMatchSnapshot()
   })
 
+  it.each([
+    {
+      transformer: 'variant group transformer',
+      files: {
+        'views/index.html': '<div class="p-4 border-(solid red)"></div>',
+        'unocss.config.js': `
+import { defineConfig, transformerVariantGroup } from 'unocss'
+export default defineConfig({
+  transformers: [transformerVariantGroup()]
+})
+      `.trim(),
+      } as Record<string, string>,
+      transformFile: 'views/index.html',
+    },
+    {
+      transformer: 'directives transformer',
+      files: {
+        'views/index.css': '.btn-center{@apply text-center my-0 font-medium;}',
+        'unocss.config.js': `
+import { defineConfig, transformerDirectives } from 'unocss'
+export default defineConfig({
+  transformers: [transformerDirectives()]
+})
+      `.trim(),
+      },
+      transformFile: 'views/index.css',
+    },
+  ])('supports updating source files with transformed utilities ($transformer)',
+    async ({ files, transformFile }) => {
+      const { output, transform } = await runCli(files, { transformFile, args: ['--write-transformed'] })
+      expect(output).toMatchSnapshot()
+      expect(transform).toMatchSnapshot()
+    })
+
   it('uno.css exclude initialized class after changing file', async () => {
     const fileName = 'views/index.html'
     const initializedContent = '<div class="bg-blue"></div>'