@unocss/transformer-directives 0.57.7 → 0.58.1

package/README.md

@@ -46,7 +46,7 @@ Will be transformed to:
 
 #### CSS Variable Style
 
-To be compatible with vanilla CSS, you can use CSS Variables to replace the `@apply` directive.
+To be compatible with vanilla CSS, you can use CSS custom properties to replace the `@apply` directive.
 
 ```css
 .custom-div {

package/dist/index.cjs

@@ -87,7 +87,7 @@ async function parseApply({ code, uno, offset, applyVariable }, node, childNode)
     body = childNode.prelude.value.trim();
   } else if (childNode.type === "Declaration" && applyVariable.includes(childNode.property) && childNode.value.type === "Raw") {
     body = childNode.value.value.trim();
-    if (body.match(/^(['"]).*\1$/))
+    if (/^(['"]).*\1$/.test(body))
       body = body.slice(1, -1);
   }
   if (!body)
@@ -130,7 +130,10 @@ async function parseApply({ code, uno, offset, applyVariable }, node, childNode)
         css = `${parent}{${css}}`;
       code.appendLeft(calcOffset(node.loc.end.offset), css);
     } else {
-      code.appendRight(calcOffset(childNode.loc.end.offset), body2);
+      if (body2.includes("@"))
+        code.appendRight(code.original.length, body2);
+      else
+        code.appendRight(calcOffset(childNode.loc.end.offset), body2);
     }
   }
   code.remove(
@@ -143,7 +146,7 @@ function transformerDirectives(options = {}) {
   return {
     name: "@unocss/transformer-directives",
     enforce: options?.enforce,
-    idFilter: (id) => !!id.match(core.cssIdRE),
+    idFilter: (id) => core.cssIdRE.test(id),
     transform: (code, id, ctx) => {
       return transformDirectives(code, ctx.uno, options, id);
     }

package/dist/index.d.cts

@@ -10,7 +10,7 @@ interface TransformerDirectivesOptions {
      */
     throwOnMissing?: boolean;
     /**
-     * Treat CSS variables as @apply directives for CSS syntax compatible.
+     * Treat CSS custom properties as @apply directives for CSS syntax compatibility.
      *
      * Pass `false` to disable.
      *
@@ -18,7 +18,7 @@ interface TransformerDirectivesOptions {
      */
     applyVariable?: false | string | string[];
     /**
-     * Treat CSS variables as directives for CSS syntax compatible.
+     * Treat CSS custom properties as directives for CSS syntax compatibility.
      *
      * Pass `false` to disable, or a string to use as a prefix.
      *

package/dist/index.d.mts

@@ -10,7 +10,7 @@ interface TransformerDirectivesOptions {
      */
     throwOnMissing?: boolean;
     /**
-     * Treat CSS variables as @apply directives for CSS syntax compatible.
+     * Treat CSS custom properties as @apply directives for CSS syntax compatibility.
      *
      * Pass `false` to disable.
      *
@@ -18,7 +18,7 @@ interface TransformerDirectivesOptions {
      */
     applyVariable?: false | string | string[];
     /**
-     * Treat CSS variables as directives for CSS syntax compatible.
+     * Treat CSS custom properties as directives for CSS syntax compatibility.
      *
      * Pass `false` to disable, or a string to use as a prefix.
      *

package/dist/index.d.ts

@@ -10,7 +10,7 @@ interface TransformerDirectivesOptions {
      */
     throwOnMissing?: boolean;
     /**
-     * Treat CSS variables as @apply directives for CSS syntax compatible.
+     * Treat CSS custom properties as @apply directives for CSS syntax compatibility.
      *
      * Pass `false` to disable.
      *
@@ -18,7 +18,7 @@ interface TransformerDirectivesOptions {
      */
     applyVariable?: false | string | string[];
     /**
-     * Treat CSS variables as directives for CSS syntax compatible.
+     * Treat CSS custom properties as directives for CSS syntax compatibility.
      *
      * Pass `false` to disable, or a string to use as a prefix.
      *

package/dist/index.mjs

@@ -83,7 +83,7 @@ async function parseApply({ code, uno, offset, applyVariable }, node, childNode)
     body = childNode.prelude.value.trim();
   } else if (childNode.type === "Declaration" && applyVariable.includes(childNode.property) && childNode.value.type === "Raw") {
     body = childNode.value.value.trim();
-    if (body.match(/^(['"]).*\1$/))
+    if (/^(['"]).*\1$/.test(body))
       body = body.slice(1, -1);
   }
   if (!body)
@@ -126,7 +126,10 @@ async function parseApply({ code, uno, offset, applyVariable }, node, childNode)
         css = `${parent}{${css}}`;
       code.appendLeft(calcOffset(node.loc.end.offset), css);
     } else {
-      code.appendRight(calcOffset(childNode.loc.end.offset), body2);
+      if (body2.includes("@"))
+        code.appendRight(code.original.length, body2);
+      else
+        code.appendRight(calcOffset(childNode.loc.end.offset), body2);
     }
   }
   code.remove(
@@ -139,7 +142,7 @@ function transformerDirectives(options = {}) {
   return {
     name: "@unocss/transformer-directives",
     enforce: options?.enforce,
-    idFilter: (id) => !!id.match(cssIdRE),
+    idFilter: (id) => cssIdRE.test(id),
     transform: (code, id, ctx) => {
       return transformDirectives(code, ctx.uno, options, id);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/transformer-directives",
-  "version": "0.57.7",
+  "version": "0.58.1",
   "description": "UnoCSS transformer for `@apply` directive",
   "author": "hannoeru <me@hanlee.co>",
   "license": "MIT",
@@ -33,8 +33,8 @@
   ],
   "dependencies": {
     "css-tree": "^2.3.1",
-    "@unocss/core": "0.57.7",
-    "@unocss/rule-utils": "0.57.7"
+    "@unocss/core": "0.58.1",
+    "@unocss/rule-utils": "0.58.1"
   },
   "devDependencies": {
     "magic-string": "^0.30.5"