@unocss/transformer-compile-class 0.52.2 → 0.52.4

package/dist/index.cjs

@@ -4,21 +4,21 @@ const core = require('@unocss/core');
 
 function transformerCompileClass(options = {}) {
   const {
-    trigger = ":uno:",
+    trigger = /(["'`]):uno:\s([^\1]*?)\1/g,
     classPrefix = "uno-",
     hashFn = hash,
     keepUnknown = true
   } = options;
-  const regex = new RegExp(`(["'\`])${core.escapeRegExp(trigger)}\\s([^\\1]*?)\\1`, "g");
+  const regexp = typeof trigger === "string" ? RegExp(`(["'\`])${core.escapeRegExp(trigger)}\\s([^\\1]*?)\\1`, "g") : trigger;
   return {
     name: "@unocss/transformer-compile-class",
     enforce: "pre",
     async transform(s, _, { uno, tokens }) {
-      const matches = [...s.original.matchAll(regex)];
+      const matches = [...s.original.matchAll(regexp)];
       if (!matches.length)
         return;
       for (const match of matches) {
-        let body = core.expandVariantGroup(match[2].trim());
+        let body = match.length === 4 && match.groups ? core.expandVariantGroup(match[3].trim()) : core.expandVariantGroup(match[2].trim());
         const start = match.index;
         const replacements = [];
         if (keepUnknown) {
@@ -30,14 +30,16 @@ function transformerCompileClass(options = {}) {
         }
         if (body) {
           body = body.split(/\s+/).sort().join(" ");
-          const hash2 = hashFn(body);
-          const className = `${classPrefix}${hash2}`;
+          const className = match.groups && match.groups.name ? `${classPrefix}${match.groups.name}` : `${classPrefix}${hashFn(body)}`;
+          if (tokens && tokens.has(className))
+            throw new Error(`duplicate compile class name '${className}', please choose different class name`);
           replacements.unshift(className);
           if (options.layer)
             uno.config.shortcuts.push([className, body, { layer: options.layer }]);
           else
             uno.config.shortcuts.push([className, body]);
-          tokens.add(className);
+          if (tokens)
+            tokens.add(className);
         }
         s.overwrite(start + 1, start + match[0].length - 1, replacements.join(" "));
       }

package/dist/index.d.ts

@@ -2,10 +2,35 @@ import { SourceCodeTransformer } from '@unocss/core';
 
 interface CompileClassOptions {
     /**
-     * Trigger string
-     * @default ':uno:'
+     * Trigger regex literal. The default trigger regex literal matches `:uno:`,
+     * for example: `<div class=":uno: font-bold text-white">`.
+     *
+     * @example
+     * The trigger additionally allows defining a capture group named `name`, which
+     * allows custom class names. One possible regex would be:
+     *
+     * ```
+     * export default defineConfig({
+     *   transformers: [
+     *     transformerCompileClass({
+     *       trigger: /(["'`]):uno(?:-)?(?<name>[^\s\1]+)?:\s([^\1]*?)\1/g
+     *     }),
+     *   ],
+     * })
+     * ```
+     *
+     * This regular expression matches `:uno-MYNAME:` and uses `MYNAME` in
+     * combination with the class prefix as the final class name, for example:
+     * `.uno-MYNAME`. It should be noted that the regex literal needs to include
+     * the global flag `/g`.
+     *
+     * @note
+     * This parameter is backwards compatible. It accepts string only trigger
+     * words, like `:uno:` or a regex literal.
+     *
+     * @default `/(["'`]):uno:\s([^\1]*?)\1/g`
      */
-    trigger?: string;
+    trigger?: string | RegExp;
     /**
      * Prefix for compile class name
      * @default 'uno-'

package/dist/index.mjs

@@ -2,21 +2,21 @@ import { escapeRegExp, expandVariantGroup } from '@unocss/core';
 
 function transformerCompileClass(options = {}) {
   const {
-    trigger = ":uno:",
+    trigger = /(["'`]):uno:\s([^\1]*?)\1/g,
     classPrefix = "uno-",
     hashFn = hash,
     keepUnknown = true
   } = options;
-  const regex = new RegExp(`(["'\`])${escapeRegExp(trigger)}\\s([^\\1]*?)\\1`, "g");
+  const regexp = typeof trigger === "string" ? RegExp(`(["'\`])${escapeRegExp(trigger)}\\s([^\\1]*?)\\1`, "g") : trigger;
   return {
     name: "@unocss/transformer-compile-class",
     enforce: "pre",
     async transform(s, _, { uno, tokens }) {
-      const matches = [...s.original.matchAll(regex)];
+      const matches = [...s.original.matchAll(regexp)];
       if (!matches.length)
         return;
       for (const match of matches) {
-        let body = expandVariantGroup(match[2].trim());
+        let body = match.length === 4 && match.groups ? expandVariantGroup(match[3].trim()) : expandVariantGroup(match[2].trim());
         const start = match.index;
         const replacements = [];
         if (keepUnknown) {
@@ -28,14 +28,16 @@ function transformerCompileClass(options = {}) {
         }
         if (body) {
           body = body.split(/\s+/).sort().join(" ");
-          const hash2 = hashFn(body);
-          const className = `${classPrefix}${hash2}`;
+          const className = match.groups && match.groups.name ? `${classPrefix}${match.groups.name}` : `${classPrefix}${hashFn(body)}`;
+          if (tokens && tokens.has(className))
+            throw new Error(`duplicate compile class name '${className}', please choose different class name`);
           replacements.unshift(className);
           if (options.layer)
             uno.config.shortcuts.push([className, body, { layer: options.layer }]);
           else
             uno.config.shortcuts.push([className, body]);
-          tokens.add(className);
+          if (tokens)
+            tokens.add(className);
         }
         s.overwrite(start + 1, start + match[0].length - 1, replacements.join(" "));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/transformer-compile-class",
-  "version": "0.52.2",
+  "version": "0.52.4",
   "description": "Compile group of classes into one class",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "0.52.2"
+    "@unocss/core": "0.52.4"
   },
   "devDependencies": {
     "magic-string": "^0.30.0"