turbopack-unocss-transform 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 vizet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# turbopack-unocss-transform
+A Turbopack loader for Next.js that applies UnoCSS transformers (like variant-group and attributify-jsx) directly to your TS/JS/TSX/JSX source before CSS generation. Actual CSS is produced by @unocss/postcss; this loader only transforms source code.
+
+**Usage**
+
+`next.config.ts`
+```typescript
+import type {NextConfig} from "next"
+import withUnoTransform from "turbopack-unocss-transform"
+
+const nextConfig: NextConfig = withUnoTransform({
+  // your Next.js config
+})
+
+export default nextConfig
+```
+
+`postcss.config.mjs`
+```js
+import unoConfig from "./src/styles/uno.config"
+
+export default {
+  plugins: [
+    ["@unocss/postcss", {
+      configOrPath: unoConfig
+    }],
+    "autoprefixer"
+  ]
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import type {NextConfig} from "next"
+export type WithUnoTransformOptions = Partial<NextConfig>
+export default function withUnoTransform(options?: WithUnoTransformOptions): NextConfig

package/dist/index.mjs

@@ -0,0 +1,44 @@
+import path from "node:path"
+
+export default function withUnoTransform(userConfig = {}) {
+  const loaderPath = path.resolve(process.cwd(), "node_modules/turbopack-unocss-transform/dist/loader.mjs")
+  const base = {
+    turbopack: {
+      rules: {
+        "**/*.{ts,tsx,js,jsx}": {
+          loaders: [loaderPath]
+        }
+      }
+    }
+  }
+
+  return merge(base, userConfig)
+}
+
+function merge(a, b) {
+  if (!b) return a
+
+  const out = JSON.parse(JSON.stringify(a))
+
+  mergeInto(out, b)
+
+  return out
+}
+
+function mergeInto(t, s) {
+  for (const k of Object.keys(s)) {
+    const sv = s[k], tv = t[k]
+
+    if (Array.isArray(sv)) {
+      t[k] = Array.isArray(tv) ? [...tv, ...sv] : [...sv]
+    }
+
+    else if (sv && typeof sv === "object") {
+      if (!tv || typeof tv !== "object") t[k] = {}
+
+      mergeInto(t[k], sv)
+    } else {
+      t[k] = sv
+    }
+  }
+}

package/dist/loader.mjs

@@ -0,0 +1,196 @@
+import path from "node:path"
+import MagicString from "magic-string"
+import {createGenerator} from "unocss"
+import {createRequire} from "node:module"
+
+const nodeRequire = createRequire(import.meta.url)
+
+let uno = null
+let unoInitPromise = null
+let cfg = null
+let cfgLoaded = false
+
+function loadPostcssConfig() {
+  const jiti = nodeRequire("jiti")(import.meta.url, {
+    interopDefault: true,
+    esmResolve: true
+  })
+  const pcPath = path.join(process.cwd(), "postcss.config.mjs")
+
+  let mod = jiti(pcPath)
+
+  return mod?.default ?? mod
+}
+
+function loadUnoConfigFromPostcss() {
+  if (cfgLoaded) return cfg
+
+  try {
+    nodeRequire("tsconfig-paths/register")
+  } catch {}
+
+  const pc = loadPostcssConfig()
+
+  if (!pc || !Array.isArray(pc.plugins)) {
+    throw new Error("[UnoCSS-TP] postcss.config.mjs is invalid (no plugins).")
+  }
+
+  let found = null
+
+  for (const entry of pc.plugins) {
+    if (!Array.isArray(entry)) continue
+
+    const [nameOrFn, opts] = entry
+    const isUno = (
+      typeof nameOrFn === "string" && nameOrFn === "@unocss/postcss"
+    ) || (
+      typeof nameOrFn === "function" && (nameOrFn.name?.toLowerCase().includes("unocss") || nameOrFn.name?.includes("Uno"))
+    )
+
+    if (!isUno) continue
+
+    found = opts?.configOrPath
+
+    break
+  }
+
+  if (!found || typeof found !== "object") {
+    throw new Error("[UnoCSS-TP] Required object unoConfig: [\"@unocss/postcss\", { configOrPath: unoConfig }]")
+  }
+
+  cfg = found
+  cfgLoaded = true
+
+  return cfg
+}
+
+async function getUno() {
+  if (uno) return uno
+  if (unoInitPromise) return unoInitPromise
+
+  const config = loadUnoConfigFromPostcss()
+
+  unoInitPromise = createGenerator(config).then(u => (uno = u))
+
+  return unoInitPromise
+}
+
+function isProcessable(id) {
+  return !!id
+    && !id.includes("node_modules")
+    && !/\.d\.ts$/.test(id)
+    && !/\.(test|spec)\.(t|j)sx?$/.test(id)
+    && /\.(t|j)sx?$/.test(id)
+}
+
+function pickTransformers(enforce = "default") {
+  const list = (cfg?.transformers || [])
+
+  return list.filter(t => (t?.enforce || "default") === enforce)
+}
+
+async function applyTransformersPipeline(code, id) {
+  const u = await getUno()
+  const original = code
+  const phases = ["pre","default","post"]
+  let current = code
+
+  for (const phase of phases) {
+    const transformers = pickTransformers(phase)
+
+    if (!transformers.length) continue
+
+    let s = new MagicString(current)
+    let changed = false
+
+    for (const t of transformers) {
+      if (!t) continue
+
+      if (t.idFilter) {
+        try {
+          if (!t.idFilter(id)) continue
+        } catch {}
+      }
+
+      const fn = t.transform || t
+
+      if (typeof fn !== "function") continue
+
+      const ctx = {
+        uno: u,
+        filename: id,
+        tokens: new Set(),
+        filter: isProcessable
+      }
+
+      try {
+        await fn(s, id, ctx)
+      } catch (error) {
+        console.error(`[UnoCSS-TP] transform failed in ${t.name || "transform"} for ${path.relative(process.cwd(), id)}:`, error?.stack || error?.message || error)
+      }
+
+      if (s.hasChanged()) {
+        current = s.toString()
+        s = new MagicString(current)
+        changed = true
+      }
+    }
+
+    if (!changed) continue
+  }
+
+  if (current !== original) {
+    return {
+      code: current
+    }
+  }
+
+  return null
+}
+
+const memo = new Map()
+const MEMO_LIMIT = 500
+
+function sha1Sync(s) {
+  const {createHash} = nodeRequire("node:crypto")
+
+  return createHash("sha1").update(s).digest("hex")
+}
+function memoGet(key) {
+  if (!memo.has(key)) return null
+
+  const v = memo.get(key)
+
+  memo.delete(key)
+  memo.set(key, v)
+
+  return v
+}
+
+function memoSet(key, val) {
+  memo.set(key, val)
+
+  if (memo.size > MEMO_LIMIT) {
+    memo.delete(memo.keys().next().value)
+  }
+}
+
+export default async function unoLoader(source) {
+  const code = String(source)
+  const file = this?.resourcePath || this?.resource || ""
+
+  if (!isProcessable(file)) return code
+  if (code.length < 10) return code
+
+  const key = file + ":" + sha1Sync(code)
+  const cached = memoGet(key)
+
+  if (cached) return cached
+
+  const res = await applyTransformersPipeline(code, file)
+  const out = (res?.code && res.code !== code) ? res.code : code
+
+  memoSet(key, out)
+
+  return out
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "turbopack-unocss-transform",
+  "version": "1.0.0",
+  "license": "MIT",
+  "author": "vizet <v@kogita.net>",
+  "description": "A Turbopack loader for Next.js that applies UnoCSS transformers (like variant-group and attributify-jsx) directly to your TS/JS/TSX/JSX source before CSS generation.",
+  "homepage": "https://github.com/vizet/turbopack-unocss-transform",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vizet/turbopack-unocss-transform.git"
+  },
+  "keywords": [
+    "nextjs",
+    "turbopack",
+    "unocss",
+    "postcss",
+    "loader",
+    "transform",
+    "transformer",
+    "transformers",
+    "attributify",
+    "attributify-jsx"
+  ],
+  "type": "module",
+  "main": "dist/loader.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./loader": "./dist/loader.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "unocss": ">=0.58.0"
+  },
+  "dependencies": {
+    "jiti": "^1.21.0",
+    "magic-string": "^0.30.10",
+    "next": "^16.0.1",
+    "tsconfig-paths": "^4.2.0"
+  }
+}