feat(cli): support for transformers

packages/cli/package.json

@@ -43,6 +43,8 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
+    "@ampproject/remapping": "^2.2.0",
+    "@rollup/pluginutils": "^4.2.1",
     "@unocss/config": "workspace:*",
     "@unocss/core": "workspace:*",
     "@unocss/preset-uno": "workspace:*",
@@ -51,6 +53,7 @@
     "colorette": "^2.0.19",
     "consola": "^2.15.3",
     "fast-glob": "^3.2.11",
+    "magic-string": "^0.26.3",
     "pathe": "^0.3.5",
     "perfect-debounce": "^0.1.3"
   }

packages/cli/src/index.ts

@@ -4,9 +4,12 @@ import fg from 'fast-glob'
 import consola from 'consola'
 import { cyan, dim, green } from 'colorette'
 import { debounce } from 'perfect-debounce'
-import { createGenerator, toArray } from '@unocss/core'
+import { toArray } from '@unocss/core'
 import { loadConfig } from '@unocss/config'
+import type { UserConfig } from '@unocss/core'
 import { version } from '../package.json'
+import { createContext } from '../../shared-integration/src/context'
+import { applyTransformers } from '../../shared-integration/src/transformers'
 import { PrettyError, handleError } from './errors'
 import { defaultConfig } from './config'
 import type { CliOptions, ResolvedCliOptions } from './types'
@@ -30,10 +33,7 @@ export async function build(_options: CliOptions) {
   const options = await resolveOptions(_options)
   const { config, sources: configSources } = await loadConfig(cwd, options.config)
 
-  const uno = createGenerator(
-    config,
-    defaultConfig,
-  )
+  const ctx = createContext<UserConfig>(config, defaultConfig)
 
   const files = await fg(options.patterns, { cwd, absolute: true })
   await Promise.all(
@@ -74,7 +74,7 @@ export async function build(_options: CliOptions) {
       const absolutePath = resolve(cwd, file)
 
       if (configSources.includes(absolutePath)) {
-        uno.setConfig((await loadConfig()).config)
+        await ctx.reloadConfig()
         consola.info(`${cyan(basename(file))} changed, setting new config`)
       }
       else {
@@ -103,8 +103,16 @@ export async function build(_options: CliOptions) {
 
   async function generate(options: ResolvedCliOptions) {
     const outFile = resolve(options.cwd || process.cwd(), options.outFile ?? 'uno.css')
-    const { css, matched } = await uno.generate(
-      [...fileCache].join('\n'),
+
+    const transformsRes = await Promise.all(
+      Array.from(fileCache)
+        .map(([id, code]) => new Promise((resolve) => {
+          applyTransformers(ctx, code, id, 'pre')
+            .then(transformRes => resolve(transformRes?.code || code))
+        })))
+
+    const { css, matched } = await ctx.uno.generate(
+      [...transformsRes].join('\n'),
       {
         preflights: options.preflights,
         minify: options.minify,

test/__snapshots__/cli.test.ts.snap

@@ -6,7 +6,21 @@ exports[`cli > builds uno.css 1`] = `
 .p-4{padding:1rem;}"
 `;
 
+exports[`cli > supports directives transformer 1`] = `
+"/* layer: default */
+.my-0{margin-top:0rem;margin-bottom:0rem;}
+.text-center{text-align:center;}
+.font-medium{font-weight:500;}"
+`;
+
 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 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;}"
+`;

test/cli.test.ts

@@ -37,6 +37,32 @@ export default defineConfig({
     expect(output).toMatchSnapshot()
   })
 
+  it('supports variantGroup transformer', async () => {
+    const { output } = await runCli({
+      '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(),
+    })
+    expect(output).toMatchSnapshot()
+  })
+
+  it('supports directives transformer', async () => {
+    const { output } = await runCli({
+      '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(),
+    })
+    expect(output).toMatchSnapshot()
+  })
+
   it('uno.css exclude initialized class after changing file', async () => {
     const fileName = 'views/index.html'
     const initializedContent = '<div class="bg-blue"></div>'