@unocss/transformer-directives 0.26.0 → 0.26.3

package/README.md

@@ -21,7 +21,24 @@ Unocss({
 
 ## Usage
 
-Currently only `@apply` is supported.
+```css
+.custom-div {
+  @apply text-center my-0 font-medium;
+}
+```
+
+Will be transformed to:
+
+```css
+.custom-div {
+  margin-top: 0rem;
+  margin-bottom: 0rem;
+  text-align: center;
+  font-weight: 500;
+}
+```
+
+> Currently only `@apply` is supported.
 
 ## License
 

package/dist/index.cjs

@@ -5,11 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const core = require('@unocss/core');
 const cssTree = require('css-tree');
 
+const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
+
 function transformerDirectives() {
   return {
     name: "css-directive",
     enforce: "pre",
-    idFilter: (id) => id.endsWith(".css"),
+    idFilter: (id) => !!id.match(regexCssId),
     transform: (code, id, ctx) => {
       return transformDirectives(code, ctx.uno, id);
     }
@@ -47,21 +49,26 @@ async function transformDirectives(css, uno, filename) {
         return;
       const parentSelector = cssTree.generate(node.prelude);
       for (const i of utils) {
-        const [, selector, body, parent] = i;
+        const [, _selector, body, parent] = i;
+        const selector = _selector?.replace(core.regexScopePlaceholder, " ") || _selector;
         if (parent) {
           const newNodeCss = `${parent}{${parentSelector}{${body}}}`;
           const insertNodeAst = cssTree.parse(newNodeCss);
           list.insertList(insertNodeAst.children, item);
         } else if (selector && selector !== ".\\-") {
-          const pseudoClassSelectors = cssTree.parse(selector, {
+          const selectorAST = cssTree.parse(selector, {
             context: "selector"
-          }).children.filter((i2) => i2.type === "PseudoClassSelector");
-          const parentSelectorAst = cssTree.clone(node.prelude);
-          parentSelectorAst.children.forEach((i2) => {
-            if (i2.type === "Selector")
-              i2.children.appendList(pseudoClassSelectors.copy());
           });
-          const newNodeCss = `${cssTree.generate(parentSelectorAst)}{${body}}`;
+          const prelude = cssTree.clone(node.prelude);
+          prelude.children.forEach((child) => {
+            const parentSelectorAst = cssTree.clone(selectorAST);
+            parentSelectorAst.children.forEach((i2) => {
+              if (i2.type === "ClassSelector" && i2.name === "\\-")
+                Object.assign(i2, cssTree.clone(child));
+            });
+            Object.assign(child, parentSelectorAst);
+          });
+          const newNodeCss = `${cssTree.generate(prelude)}{${body}}`;
           const insertNodeAst = cssTree.parse(newNodeCss);
           list.insertList(insertNodeAst.children, item);
         } else {

package/dist/index.mjs

@@ -1,11 +1,13 @@
-import { expandVariantGroup, notNull } from '@unocss/core';
+import { expandVariantGroup, notNull, regexScopePlaceholder } from '@unocss/core';
 import { parse, walk, generate, clone, List } from 'css-tree';
 
+const regexCssId = /\.(css|postcss|sass|scss|less|stylus|styl)$/;
+
 function transformerDirectives() {
   return {
     name: "css-directive",
     enforce: "pre",
-    idFilter: (id) => id.endsWith(".css"),
+    idFilter: (id) => !!id.match(regexCssId),
     transform: (code, id, ctx) => {
       return transformDirectives(code, ctx.uno, id);
     }
@@ -43,21 +45,26 @@ async function transformDirectives(css, uno, filename) {
         return;
       const parentSelector = generate(node.prelude);
       for (const i of utils) {
-        const [, selector, body, parent] = i;
+        const [, _selector, body, parent] = i;
+        const selector = _selector?.replace(regexScopePlaceholder, " ") || _selector;
         if (parent) {
           const newNodeCss = `${parent}{${parentSelector}{${body}}}`;
           const insertNodeAst = parse(newNodeCss);
           list.insertList(insertNodeAst.children, item);
         } else if (selector && selector !== ".\\-") {
-          const pseudoClassSelectors = parse(selector, {
+          const selectorAST = parse(selector, {
             context: "selector"
-          }).children.filter((i2) => i2.type === "PseudoClassSelector");
-          const parentSelectorAst = clone(node.prelude);
-          parentSelectorAst.children.forEach((i2) => {
-            if (i2.type === "Selector")
-              i2.children.appendList(pseudoClassSelectors.copy());
           });
-          const newNodeCss = `${generate(parentSelectorAst)}{${body}}`;
+          const prelude = clone(node.prelude);
+          prelude.children.forEach((child) => {
+            const parentSelectorAst = clone(selectorAST);
+            parentSelectorAst.children.forEach((i2) => {
+              if (i2.type === "ClassSelector" && i2.name === "\\-")
+                Object.assign(i2, clone(child));
+            });
+            Object.assign(child, parentSelectorAst);
+          });
+          const newNodeCss = `${generate(prelude)}{${body}}`;
           const insertNodeAst = parse(newNodeCss);
           list.insertList(insertNodeAst.children, item);
         } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/transformer-directives",
-  "version": "0.26.0",
+  "version": "0.26.3",
   "description": "UnoCSS transformer for `@apply` directive",
   "keywords": [
     "unocss",
@@ -30,15 +30,10 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "peerDependencies": {
-    "@unocss/core": "0.26.0"
-  },
   "dependencies": {
+    "@unocss/core": "0.26.3",
     "css-tree": "^2.0.4"
   },
-  "devDependencies": {
-    "@unocss/core": "0.26.0"
-  },
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub"