@unocss/transformer-directives 0.47.4 → 0.47.5

package/README.md

@@ -62,13 +62,14 @@ To use rules with `:`, you will need to quote the value
 }
 ```
 
-This feature is enabled by default (with prefix `--at-`), you can configure it or disable it via:
+This feature is enabled by default with a few alias, you can configure or disable it via:
 
 ```js
 transformerDirectives({
-  varStyle: '--my-at-',
+  // the defaults
+  applyVariable: ['--at-apply', '--uno-apply', '--uno'],
   // or disable with:
-  // varStyle: false
+  // applyVariable: false
 })
 ```
 
@@ -78,16 +79,16 @@ The `@screen` directive allows you to create media queries that reference your b
 
 ```css
 .grid {
-  @apply grid grid-cols-2;
+  --uno: grid grid-cols-2;
 }
 @screen xs {
   .grid {
-    @apply grid-cols-1;
+    --uno: grid-cols-1;
   }
 }
 @screen sm {
   .grid {
-    @apply grid-cols-3;
+    --uno: grid-cols-3;
   }
 }
 /* ... */
@@ -121,16 +122,16 @@ Will be transformed to:
 
 ```css
 .grid {
-  @apply grid grid-cols-2;
+  --uno: grid grid-cols-2;
 }
 @screen lt-xs {
   .grid {
-    @apply grid-cols-1;
+    --uno: grid-cols-1;
   }
 }
 @screen lt-sm {
   .grid {
-    @apply grid-cols-3;
+    --uno: grid-cols-3;
   }
 }
 /* ... */
@@ -160,21 +161,21 @@ Will be transformed to:
 
 ```css
 .grid {
-  @apply grid grid-cols-2;
+  --uno: grid grid-cols-2;
 }
 @screen at-xs {
   .grid {
-    @apply grid-cols-1;
+    --uno: grid-cols-1;
   }
 }
 @screen at-xl {
   .grid {
-    @apply grid-cols-3;
+    --uno: grid-cols-3;
   }
 }
 @screen at-xxl {
   .grid {
-    @apply grid-cols-4;
+    --uno: grid-cols-4;
   }
 }
 /* ... */

package/dist/index.cjs

@@ -107,13 +107,12 @@ async function handleApply(ctx, node) {
     }).toArray()
   );
 }
-async function parseApply({ code, uno, options, offset }, node, childNode) {
-  const { varStyle = "--at-" } = options;
+async function parseApply({ code, uno, offset, applyVariable }, node, childNode) {
   const calcOffset = (pos) => offset ? pos + offset : pos;
   let body;
   if (childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude && childNode.prelude.type === "Raw") {
     body = childNode.prelude.value.trim();
-  } else if (varStyle !== false && childNode.type === "Declaration" && childNode.property === `${varStyle}apply` && childNode.value.type === "Raw") {
+  } else if (childNode.type === "Declaration" && applyVariable.includes(childNode.property) && childNode.value.type === "Raw") {
     body = childNode.value.value.trim();
     if (body.match(/^(['"]).*\1$/))
       body = body.slice(1, -1);
@@ -178,11 +177,18 @@ function transformerDirectives(options = {}) {
   };
 }
 async function transformDirectives(code, uno, options, filename, originalCode, offset) {
-  const { varStyle = "--at-" } = options;
-  const isApply = code.original.includes("@apply") || varStyle !== false && code.original.includes(varStyle);
-  const isScreen = code.original.includes("@screen");
+  let { applyVariable } = options;
+  const varStyle = options.varStyle;
+  if (applyVariable === void 0) {
+    if (varStyle !== void 0)
+      applyVariable = varStyle ? [`${varStyle}apply`] : [];
+    applyVariable = ["--at-apply", "--uno-apply", "--uno"];
+  }
+  applyVariable = core.toArray(applyVariable || []);
+  const hasApply = code.original.includes("@apply") || applyVariable.some((s) => code.original.includes(s));
+  const hasScreen = code.original.includes("@screen");
   const hasThemeFn = code.original.match(themeFnRE);
-  if (!isApply && !hasThemeFn && !isScreen)
+  if (!hasApply && !hasThemeFn && !hasScreen)
     return;
   const ast = cssTree.parse(originalCode || code.original, {
     parseAtrulePrelude: false,
@@ -192,13 +198,20 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   if (ast.type !== "StyleSheet")
     return;
   const stack = [];
+  const ctx = {
+    options,
+    applyVariable,
+    uno,
+    code,
+    filename,
+    offset
+  };
   const processNode = async (node, _item, _list) => {
-    const ctx = { options, uno, code, filename, offset };
-    if (isScreen && node.type === "Atrule")
+    if (hasScreen && node.type === "Atrule")
       handleScreen(ctx, node);
     if (hasThemeFn && node.type === "Declaration")
       handleThemeFn(ctx, node);
-    if (isApply && node.type === "Rule")
+    if (hasApply && node.type === "Rule")
       await handleApply(ctx, node);
   };
   cssTree.walk(ast, (...args) => stack.push(processNode(...args)));

package/dist/index.d.ts

@@ -3,25 +3,35 @@ import MagicString from 'magic-string';
 
 interface TransformerDirectivesOptions {
     enforce?: SourceCodeTransformer['enforce'];
+    /**
+     * Throw an error if utils or themes are not found.
+     *
+     * @default true
+     */
+    throwOnMissing?: boolean;
+    /**
+     * Treat CSS variables as @apply directives for CSS syntax compatible.
+     *
+     * Pass `false` to disable.
+     *
+     * @default ['--at-apply', '--uno-apply', '--uno']
+     */
+    applyVariable?: false | string | string[];
     /**
      * Treat CSS variables as directives for CSS syntax compatible.
      *
      * Pass `false` to disable, or a string to use as a prefix.
      *
+     * @deprecated use `applyVariable` to specify the full var name instead.
      * @default '--at-'
      */
     varStyle?: false | string;
-    /**
-     * Throw an error if utils or themes are not found.
-     *
-     * @default true
-     */
-    throwOnMissing?: boolean;
 }
 interface TransformerDirectivesContext {
     code: MagicString;
     uno: UnoGenerator;
     options: TransformerDirectivesOptions;
+    applyVariable: string[];
     offset?: number;
     filename?: string;
 }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { expandVariantGroup, notNull, regexScopePlaceholder, cssIdRE } from '@unocss/core';
+import { expandVariantGroup, notNull, regexScopePlaceholder, cssIdRE, toArray } from '@unocss/core';
 import { generate, parse, clone, walk } from 'css-tree';
 
 const themeFnRE = /theme\((.*?)\)/g;
@@ -103,13 +103,12 @@ async function handleApply(ctx, node) {
     }).toArray()
   );
 }
-async function parseApply({ code, uno, options, offset }, node, childNode) {
-  const { varStyle = "--at-" } = options;
+async function parseApply({ code, uno, offset, applyVariable }, node, childNode) {
   const calcOffset = (pos) => offset ? pos + offset : pos;
   let body;
   if (childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude && childNode.prelude.type === "Raw") {
     body = childNode.prelude.value.trim();
-  } else if (varStyle !== false && childNode.type === "Declaration" && childNode.property === `${varStyle}apply` && childNode.value.type === "Raw") {
+  } else if (childNode.type === "Declaration" && applyVariable.includes(childNode.property) && childNode.value.type === "Raw") {
     body = childNode.value.value.trim();
     if (body.match(/^(['"]).*\1$/))
       body = body.slice(1, -1);
@@ -174,11 +173,18 @@ function transformerDirectives(options = {}) {
   };
 }
 async function transformDirectives(code, uno, options, filename, originalCode, offset) {
-  const { varStyle = "--at-" } = options;
-  const isApply = code.original.includes("@apply") || varStyle !== false && code.original.includes(varStyle);
-  const isScreen = code.original.includes("@screen");
+  let { applyVariable } = options;
+  const varStyle = options.varStyle;
+  if (applyVariable === void 0) {
+    if (varStyle !== void 0)
+      applyVariable = varStyle ? [`${varStyle}apply`] : [];
+    applyVariable = ["--at-apply", "--uno-apply", "--uno"];
+  }
+  applyVariable = toArray(applyVariable || []);
+  const hasApply = code.original.includes("@apply") || applyVariable.some((s) => code.original.includes(s));
+  const hasScreen = code.original.includes("@screen");
   const hasThemeFn = code.original.match(themeFnRE);
-  if (!isApply && !hasThemeFn && !isScreen)
+  if (!hasApply && !hasThemeFn && !hasScreen)
     return;
   const ast = parse(originalCode || code.original, {
     parseAtrulePrelude: false,
@@ -188,13 +194,20 @@ async function transformDirectives(code, uno, options, filename, originalCode, o
   if (ast.type !== "StyleSheet")
     return;
   const stack = [];
+  const ctx = {
+    options,
+    applyVariable,
+    uno,
+    code,
+    filename,
+    offset
+  };
   const processNode = async (node, _item, _list) => {
-    const ctx = { options, uno, code, filename, offset };
-    if (isScreen && node.type === "Atrule")
+    if (hasScreen && node.type === "Atrule")
       handleScreen(ctx, node);
     if (hasThemeFn && node.type === "Declaration")
       handleThemeFn(ctx, node);
-    if (isApply && node.type === "Rule")
+    if (hasApply && node.type === "Rule")
       await handleApply(ctx, node);
   };
   walk(ast, (...args) => stack.push(processNode(...args)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/transformer-directives",
-  "version": "0.47.4",
+  "version": "0.47.5",
   "description": "UnoCSS transformer for `@apply` directive",
   "author": "hannoeru <me@hanlee.co>",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "0.47.4",
+    "@unocss/core": "0.47.5",
     "css-tree": "^2.2.1"
   },
   "devDependencies": {