feat: Implement

Author: pzehrel

README.md

@@ -2,19 +2,19 @@
 <img src="logo" alt='logo' style="width:100px;" />
 </p>
 
-<h1 align="center">unocss-transformer-starter</h1>
+<h1 align="center">unocss-transformer-css-url-rebase</h1>
 
-<p align="center">A Unocss transformer starter template.</p>
+<p align="center">A Unocss transformer that converts relative paths in 'url(...)' to absolute paths based on the project root, allowing Vite to recognize and handle these assets.</p>
 
 <p align="center">
 <a>
-<img src="https://img.shields.io/npm/v/unocss-transformer-starter?style=flat&colorA=080f12&colorB=1fa669" alt="npm version" />
+<img src="https://img.shields.io/npm/v/unocss-transformer-css-url-rebase?style=flat&colorA=080f12&colorB=1fa669" alt="npm version" />
 </a>
 <a>
-<img src="https://img.shields.io/npm/dm/unocss-transformer-starter?style=flat&colorA=080f12&colorB=1fa669" alt="npm downloads" />
+<img src="https://img.shields.io/npm/dm/unocss-transformer-css-url-rebase?style=flat&colorA=080f12&colorB=1fa669" alt="npm downloads" />
 </a>
 <a>
-<img src="https://img.shields.io/github/license/unpreset/unocss-transformer-starter.svg?style=flat&colorA=080f12&colorB=1fa669" alt="License" />
+<img src="https://img.shields.io/github/license/unocss-community/unocss-transformer-css-url-rebase.svg?style=flat&colorA=080f12&colorB=1fa669" alt="License" />
 </a>
 </p>
 
@@ -26,16 +26,21 @@ pnpm i -D unocss-transformer-starter
 ```ts
 // uno.config.ts
 import { defineConfig } from 'unocss'
-import transformerAlias from 'unocss-transformer-starter'
+import transformerCssUrlRebase from 'unocss-transformer-css-url-rebase'
 
 export default defineConfig({
   // ...
   transformers: [
-    transformerAlias(),
+    transformerCssUrlRebase({
+      root: __dirname,
+    }),
   ],
 })
 ```
 
-## License
+## Configuration
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `root` | `string` | `undefined` | The root directory of the project. Not setting this will not affect the actual generated styles, it only affects the prompt function of the VSCode Unocss extension. |
 
-MIT License &copy; 2023-PRESENT [Chris](https://github.com/zyyv)

package.json

@@ -1,22 +1,23 @@
 {
-  "name": "unocss-transformer-starter",
+  "name": "unocss-transformer-css-url-rebase",
   "type": "module",
   "version": "0.0.0",
-  "packageManager": "pnpm@10.6.2",
-  "description": "A Unocss transformer starter template.",
+  "packageManager": "pnpm@10.10.0",
+  "description": "A Unocss transformer that converts relative paths in 'url(...)' to absolute paths based on the project root, allowing Vite to recognize and handle these assets.",
   "license": "MIT",
-  "homepage": "https://github.com/unpreset/unocss-transformer-starter#readme",
+  "homepage": "https://github.com/pzehrel/unocss-transformer-css-url-rebase#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/unpreset/unocss-transformer-starter.git"
+    "url": "git+https://github.com/pzehrel/unocss-transformer-css-url-rebase.git"
   },
   "bugs": {
-    "url": "https://github.com/unpreset/unocss-transformer-starter/issues"
+    "url": "https://github.com/pzehrel/unocss-transformer-css-url-rebase/issues"
   },
   "keywords": [
     "unpreset",
     "unocss",
-    "unocss transformer"
+    "unocss transformer",
+    "url"
   ],
   "sideEffects": false,
   "exports": {
@@ -52,6 +53,9 @@
     "typecheck": "tsc --noEmit",
     "play": "npm -C playground run dev"
   },
+  "dependencies": {
+    "pathe": "^2.0.3"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^4.8.1",
     "@babel/types": "^7.26.10",

playground/package.json

@@ -15,7 +15,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "typescript": "^5.8.2",
     "unocss": "^66.0.0",
-    "unocss-transformer-starter": "workspace:*",
+    "unocss-transformer-css-url-rebase": "workspace:*",
     "vite": "^6.2.1",
     "vue-tsc": "^2.2.8"
   }

playground/src/App.vue

@@ -1,6 +1,4 @@
 <template>
-  <div>
-    <h1>Playground</h1>
-    <p>hello UnoCSS</p>
-  </div>
+  <div class="bg-[url(./assets/vite.png)] w-100px h-100px" />
+  <div class="bg-[url(assets/vite.png)] w-100px h-100px" />
 </template>

playground/src/assets/vite.png

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-// @ts-expect-error anyway
 import App from './App.vue'
 import 'uno.css'
 

playground/src/main.ts

@@ -1,14 +1,16 @@
 import {
   defineConfig,
-  presetUno,
+  presetMini,
 } from 'unocss'
-import transformerStarter from 'unocss-transformer-starter'
+import { transformerCssUrlRebase } from 'unocss-transformer-css-url-rebase'
 
 export default defineConfig({
   presets: [
-    presetUno(),
+    presetMini(),
   ],
   transformers: [
-    transformerStarter(),
+    transformerCssUrlRebase({
+      root: __dirname,
+    }),
   ],
 })

playground/uno.config.ts

@@ -1,26 +1,18 @@
-import type MagicString from 'magic-string'
-import type { SourceCodeTransformer, UnoGenerator } from 'unocss'
+import type { SourceCodeTransformer } from 'unocss'
+import type { TransformerCssUrlRebaseOptions } from './options'
+import { withTransformCssUrlRebase } from './transform'
 
-export interface TransformerStarterOptions {
-
-}
-
-export default function transformStarter(options?: TransformerStarterOptions): SourceCodeTransformer {
+export function transformerCssUrlRebase(options?: TransformerCssUrlRebaseOptions): SourceCodeTransformer {
   return {
-    name: 'unocss-transformer-starter',
+    name: 'unocss-transformer-css-url-rebase',
     enforce: 'pre',
-    async transform(code, _, { uno }) {
-      await transformStarterMain(code, uno, options)
+    transform(code, id, { root }) {
+      const highlightAnnotations = withTransformCssUrlRebase(code, id, undefined, Object.assign({ root }, options))
+      return { highlightAnnotations }
     },
   }
 }
 
-export async function transformStarterMain(
-  code: MagicString,
-  uno: UnoGenerator,
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  options: TransformerStarterOptions = {},
-) {
-  // Your logic here
-  code.replace('UnoCSS', 'UnoCSS is awesome')
-}
+export default transformerCssUrlRebase
+
+export { withTransformCssUrlRebase }

pnpm-lock.yaml

@@ -0,0 +1,8 @@
+export interface TransformerCssUrlRebaseOptions {
+  /**
+   * The root directory of the project.
+   *
+   * vscode extensions will not pass in root, so this parameter is used to fix the extension's intelligent prompt. It will not affect the actual generated styles.
+   */
+  root?: string
+}

src/index.ts

@@ -0,0 +1,49 @@
+import type MagicString from 'magic-string'
+import type { HighlightAnnotation } from 'unocss/index'
+import type { TransformerCssUrlRebaseOptions } from './options'
+import { dirname, isAbsolute, join, normalize } from 'pathe'
+
+const RULE_RE = /[.:\w()[\]\-]+url\(.+?\)[.:\w()[\]\-]+/g
+const URL_RE = /url\(("|')?(.+?)("|')?\)/
+
+export function withTransformCssUrlRebase(
+  code: MagicString,
+  id: string,
+  globalRegexp: RegExp = RULE_RE,
+  options?: TransformerCssUrlRebaseOptions,
+) {
+  if (!id || !options?.root) {
+    return
+  }
+
+  const dir = dirname(id)
+  const root = normalize(options.root)
+
+  const annotations: HighlightAnnotation[] = []
+
+  const matches = code.original.matchAll(globalRegexp)
+  for (const { 0: rule, index } of matches) {
+    const newRule = rule.replace(URL_RE, (_, q1 = '', url, q2 = '') => {
+      if (isRelative(url)) {
+        url = join(dir, url)
+        url = url.replace(root, '')
+      }
+      return `url(${q1}${url}${q2})`
+    })
+
+    if (newRule !== rule) {
+      code.overwrite(index, index + rule.length, newRule)
+      annotations.push({
+        offset: index,
+        length: rule.length,
+        className: newRule,
+      })
+    }
+  }
+
+  return annotations
+}
+
+export function isRelative(url: string) {
+  return url && !/^\w+:\/\//.test(url) && !isAbsolute(url) && !url.startsWith('data:')
+}

src/options.ts

@@ -1,24 +1,51 @@
-import type { UnoGenerator } from 'unocss'
 import MagicString from 'magic-string'
-import { createGenerator, presetWind3 } from 'unocss'
 import { expect, it } from 'vitest'
-import { transformStarterMain } from '../src'
+import { withTransformCssUrlRebase } from '../src/transform'
 
-async function createTransformer() {
-  const uno = await createGenerator({
-    presets: [presetWind3()],
-  })
-
-  return async (code: string, _uno: UnoGenerator = uno) => {
+function createTransformer() {
+  return (code: string, id: string, root?: string) => {
     const s = new MagicString(code)
-    await transformStarterMain(s, _uno, {})
+    withTransformCssUrlRebase(s, id, undefined, { root })
     return s.toString()
   }
 }
 
-it('basic', async () => {
-  const transform = await createTransformer()
-  const code = `hello UnoCSS`
+it('relative path should be transformed', async () => {
+  const code = `<div class="bg-[url(./assets/vite.png)]" />`
+  const root = '/apps/app'
+  const id = `${root}/src/App.vue`
+
+  const transform = createTransformer()
+  const result = transform(code, id, root)
+  expect(result).toMatchInlineSnapshot(`"<div class="bg-[url(/src/assets/vite.png)]" />"`)
+})
+
+it('windows relative path should be transformed', async () => {
+  const code = `<div class="bg-[url(assets\\vite.png)]" />`
+  const root = 'C:\\Users\\user\\Desktop\\apps\\app'
+  const id = `${root}\\src\\App.vue`
+
+  const transform = createTransformer()
+  const result = transform(code, id, root)
+  expect(result).toMatchInlineSnapshot(`"<div class="bg-[url(/src/assets/vite.png)]" />"`)
+})
+
+it('absolute path should not be transformed', async () => {
+  const code = `<div class="bg-[url(/assets/vite.png)]" />`
+  const root = '/apps/app'
+  const id = `${root}/src/App.vue`
+
+  const transform = createTransformer()
+  const result = transform(code, id, root)
+  expect(result).toMatchInlineSnapshot(`"<div class="bg-[url(/assets/vite.png)]" />"`)
+})
+
+it('http url should not be transformed', async () => {
+  const code = `<div class="bg-[url(https://vite.dev/logo.svg)]" />`
+  const root = '/apps/app'
+  const id = `${root}/src/App.vue`
 
-  expect(await transform(code)).toMatchInlineSnapshot(`"hello UnoCSS is awesome"`)
+  const transform = createTransformer()
+  const result = transform(code, id, root)
+  expect(result).toMatchInlineSnapshot(`"<div class="bg-[url(https://vite.dev/logo.svg)]" />"`)
 })