fix(cli): generate styles in text that should be skipped (#3213)

Co-authored-by: Chris <1633711653@qq.com>

packages/cli/src/index.ts

@@ -10,6 +10,7 @@ import type { SourceCodeTransformerEnforce, UserConfig } from '@unocss/core'
 import { createContext } from '../../shared-integration/src/context'
 import { applyTransformers } from '../../shared-integration/src/transformers'
 import { version } from '../package.json'
+import { SKIP_COMMENT_RE } from '../../shared-integration/src/constants'
 import { defaultConfig } from './config'
 import { PrettyError, handleError } from './errors'
 import { getWatcher } from './watcher'
@@ -131,7 +132,7 @@ export async function build(_options: CliOptions) {
     }
 
     const { css, matched } = await ctx.uno.generate(
-      [...postTransform.map(({ code, transformedCode }) => transformedCode ?? code)].join('\n'),
+      [...postTransform.map(({ code, transformedCode }) => (transformedCode ?? code).replace(SKIP_COMMENT_RE, ''))].join('\n'),
       {
         preflights: options.preflights,
         minify: options.minify,

test/__snapshots__/cli.test.ts.snap

@@ -1,5 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`cli > @unocss-skip uno.css 1`] = `
+"/* layer: default */
+.w-10{width:2.5rem;}"
+`;
+
 exports[`cli > builds uno.css 1`] = `
 "/* layer: default */
 .max-w-screen-md{max-width:768px;}

test/cli.test.ts

@@ -206,6 +206,62 @@ export default defineConfig({
       }
     }
   })
+
+  it('@unocss-skip uno.css', async () => {
+    const { output } = await runCli({
+      'views/index.html': `
+import clsx from "clsx"
+import React, { useCallback, useEffect, useRef, useState } from "react"
+
+const Navbar: React.FC<any> = ({
+  className,
+  children,
+  show,
+  id,
+  navbar,
+  tag: Tag = "div",
+  collapseRef,
+  style,
+  ...props
+}): JSX.Element => {
+
+  const [showCollapse, setShowCollapse] = useState<boolean | undefined>(false)
+  //  @unocss-skip-start
+  const [transition, setTransition] = useState(false)
+
+  const classes = clsx(
+    transition ? "collapsing" : "collapse", // transition is not used in the app
+    !transition && showCollapse && "show", // transition is not used in the app
+    navbar && "navbar-collapse",
+    className
+  )
+  const handleResize = useCallback(() => {
+
+  }, [])
+
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize) // resize is not used in the app
+
+    return () => {
+      window.removeEventListener("resize", handleResize) // resize is not used in the app
+    }
+  }, [handleResize])
+  //  @unocss-skip-end
+
+  return (
+    <div className="w-10">
+
+    </div>
+  )
+}
+
+export default Navbar
+`,
+    })
+
+    expect(output).toMatchSnapshot()
+  })
 })
 
 // ----- Utils -----