@unocss/transformer-directives 0.26.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 hannoeru
+
+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,28 @@
+# @unocss/transformer-directives
+
+UnoCSS transformer for `@apply` directive
+
+## Install
+
+```bash
+npm i -D @unocss/transformer-directives
+```
+
+```ts
+import Unocss from 'unocss/vite'
+import transformerDirective from '@unocss/transformer-directives'
+
+Unocss({
+  transformers: [
+    transformerDirective(),
+  ]
+})
+```
+
+## Usage
+
+Currently only `@apply` is supported.
+
+## License
+
+MIT License © 2022 [hannoeru](https://github.com/hannoeru)

package/dist/index.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const core = require('@unocss/core');
+const cssTree = require('css-tree');
+
+function transformerDirectives() {
+  return {
+    name: "css-directive",
+    enforce: "pre",
+    idFilter: (id) => id.endsWith(".css"),
+    transform: (code, id, ctx) => {
+      return transformDirectives(code, ctx.uno, id);
+    }
+  };
+}
+async function transformDirectives(css, uno, filename) {
+  if (!css.includes("@apply"))
+    return css;
+  const ast = cssTree.parse(css, {
+    parseAtrulePrelude: false,
+    positions: true,
+    filename
+  });
+  if (ast.type !== "StyleSheet")
+    return css;
+  const stack = [];
+  const processNode = async (node, item, list) => {
+    if (node.type !== "Rule")
+      return;
+    await Promise.all(node.block.children.map(async (childNode, childItem) => {
+      if (!(childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude))
+        return;
+      if (childNode.prelude.type !== "Raw")
+        return;
+      const classNames = core.expandVariantGroup(childNode.prelude.value).split(/\s+/g);
+      const utils = (await Promise.all(classNames.map((i) => uno.parseToken(i, "-")))).filter(core.notNull).flat().sort((a, b) => a[0] - b[0]).reduce((acc, item2) => {
+        const target = acc.find((i) => i[1] === item2[1] && i[3] === item2[3]);
+        if (target)
+          target[2] += item2[2];
+        else
+          acc.push([...item2]);
+        return acc;
+      }, []);
+      if (!utils.length)
+        return;
+      const parentSelector = cssTree.generate(node.prelude);
+      for (const i of utils) {
+        const [, selector, body, parent] = i;
+        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, {
+            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 insertNodeAst = cssTree.parse(newNodeCss);
+          list.insertList(insertNodeAst.children, item);
+        } else {
+          const rules = new cssTree.List().fromArray(body.replace(/;$/, "").split(";")).map((i2) => cssTree.parse(i2, {
+            context: "declaration"
+          }));
+          node.block.children.insertList(rules, childItem);
+        }
+      }
+      node.block.children.remove(childItem);
+    }).toArray());
+  };
+  cssTree.walk(ast, (...args) => stack.push(processNode(...args)));
+  await Promise.all(stack);
+  return cssTree.generate(ast);
+}
+
+exports["default"] = transformerDirectives;
+exports.transformDirectives = transformDirectives;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { SourceCodeTransformer, UnoGenerator } from '@unocss/core';
+
+declare function transformerDirectives(): SourceCodeTransformer;
+declare function transformDirectives(css: string, uno: UnoGenerator, filename?: string): Promise<string>;
+
+export { transformerDirectives as default, transformDirectives };

package/dist/index.mjs

@@ -0,0 +1,78 @@
+import { expandVariantGroup, notNull } from '@unocss/core';
+import { parse, walk, generate, clone, List } from 'css-tree';
+
+function transformerDirectives() {
+  return {
+    name: "css-directive",
+    enforce: "pre",
+    idFilter: (id) => id.endsWith(".css"),
+    transform: (code, id, ctx) => {
+      return transformDirectives(code, ctx.uno, id);
+    }
+  };
+}
+async function transformDirectives(css, uno, filename) {
+  if (!css.includes("@apply"))
+    return css;
+  const ast = parse(css, {
+    parseAtrulePrelude: false,
+    positions: true,
+    filename
+  });
+  if (ast.type !== "StyleSheet")
+    return css;
+  const stack = [];
+  const processNode = async (node, item, list) => {
+    if (node.type !== "Rule")
+      return;
+    await Promise.all(node.block.children.map(async (childNode, childItem) => {
+      if (!(childNode.type === "Atrule" && childNode.name === "apply" && childNode.prelude))
+        return;
+      if (childNode.prelude.type !== "Raw")
+        return;
+      const classNames = expandVariantGroup(childNode.prelude.value).split(/\s+/g);
+      const utils = (await Promise.all(classNames.map((i) => uno.parseToken(i, "-")))).filter(notNull).flat().sort((a, b) => a[0] - b[0]).reduce((acc, item2) => {
+        const target = acc.find((i) => i[1] === item2[1] && i[3] === item2[3]);
+        if (target)
+          target[2] += item2[2];
+        else
+          acc.push([...item2]);
+        return acc;
+      }, []);
+      if (!utils.length)
+        return;
+      const parentSelector = generate(node.prelude);
+      for (const i of utils) {
+        const [, selector, body, parent] = i;
+        if (parent) {
+          const newNodeCss = `${parent}{${parentSelector}{${body}}}`;
+          const insertNodeAst = parse(newNodeCss);
+          list.insertList(insertNodeAst.children, item);
+        } else if (selector && selector !== ".\\-") {
+          const pseudoClassSelectors = 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 insertNodeAst = parse(newNodeCss);
+          list.insertList(insertNodeAst.children, item);
+        } else {
+          const rules = new List().fromArray(body.replace(/;$/, "").split(";")).map((i2) => parse(i2, {
+            context: "declaration"
+          }));
+          node.block.children.insertList(rules, childItem);
+        }
+      }
+      node.block.children.remove(childItem);
+    }).toArray());
+  };
+  walk(ast, (...args) => stack.push(processNode(...args)));
+  await Promise.all(stack);
+  return generate(ast);
+}
+
+export { transformerDirectives as default, transformDirectives };

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@unocss/transformer-directives",
+  "version": "0.26.0",
+  "description": "UnoCSS transformer for `@apply` directive",
+  "keywords": [
+    "unocss",
+    "unocss-transformer"
+  ],
+  "homepage": "https://github.com/antfu/unocss/tree/main/packages/transformer-directives#readme",
+  "bugs": {
+    "url": "https://github.com/antfu/unocss/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antfu/unocss.git",
+    "directory": "packages/transformer-directives"
+  },
+  "author": "hannoeru <me@hanlee.co>",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "@unocss/core": "0.26.0"
+  },
+  "dependencies": {
+    "css-tree": "^2.0.4"
+  },
+  "devDependencies": {
+    "@unocss/core": "0.26.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}