@unocss/preset-tagify 0.35.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022-PRESENT Jeff Zou <https://github.com/zojize>
+Copyright (c) 2022-PRESENT Anthony Fu <https://github.com/antfu>
+
+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,77 @@
+# @unocss/preset-tagify
+
+Tagify Mode for [UnoCSS](https://github.com/unocss/unocss).
+
+## Installation
+
+```bash
+npm i -D @unocss/preset-tagify
+```
+
+```ts
+import preseTagify from '@unocss/preset-tagify'
+
+Unocss({
+  presets: [
+    presetTagify({ /* options */ }),
+    // ...other presets
+  ],
+})
+```
+
+## Tagify Mode
+
+This preset can come in handy when you only need a single unocss rule to be apply on an element.
+
+```html
+<span class="text-red"> red text </span>
+<div class="flex"> flexbox </div>
+I'm feeling <span class="i-line-md-emoji-grin"></span> today!
+```
+
+With tagify mode, you can embed CSS styles into HTML tags:
+
+```html
+<text-red> red text </text-red>
+<flex> flexbox </flex>
+I'm feeling <i-line-md-emoji-grin> </i-line-md-emoji-grin> today!
+```
+
+The HTML above works exactly as you would expect.
+
+## With Prefix
+
+```js
+presetTagify({
+  prefix: 'un-'
+})
+```
+
+```html
+<!-- this will be matched -->
+<un-flex> </un-flex>
+<!-- this will not be matched -->
+<flex> </flex>
+```
+
+## Extra Properties
+
+You can inject extra properties to the matched rules:
+
+```js
+presetTagify({
+  // adds display: inline-block to matched icons
+  extraProperties: matched => matched.startsWith('i-')
+    ? { display: 'inline-block' }
+    : { }
+})
+presetTagify({
+  // extraProperties can also be a plain object
+  extraProperties: { display: 'block' }
+})
+```
+
+## License
+
+MIT License &copy; 2022-PRESENT [Jeff Zou](https://github.com/zojize)
+MIT License &copy; 2022-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/index.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const core = require('@unocss/core');
+
+const MARKER = "__TAGIFY__";
+const htmlTagRE = /<([\w\d-:]+)/g;
+const extractorTagify = (options) => {
+  const {
+    prefix = ""
+  } = options;
+  return {
+    name: "tagify",
+    extract({ code }) {
+      return new Set(Array.from(code.matchAll(htmlTagRE)).filter(({ 1: match }) => match.startsWith(prefix)).map(([, matched]) => `${MARKER}${matched}`));
+    }
+  };
+};
+
+const variantTagify = (options) => {
+  const { extraProperties } = options;
+  const prefix = `${MARKER}${options.prefix ?? ""}`;
+  return {
+    name: "tagify",
+    match(input) {
+      if (!input.startsWith(prefix))
+        return;
+      const matcher = input.slice(prefix.length);
+      const handler = {
+        matcher,
+        selector: (i) => i.slice(MARKER.length + 1)
+      };
+      if (extraProperties) {
+        if (typeof extraProperties === "function")
+          handler.body = (entries) => [...entries, ...Object.entries(extraProperties(matcher) ?? {})];
+        else
+          handler.body = (entries) => [...entries, ...Object.entries(extraProperties)];
+      }
+      return handler;
+    }
+  };
+};
+
+const preset = (options = {}) => {
+  const {
+    defaultExtractor = true
+  } = options;
+  const variants = [
+    variantTagify(options)
+  ];
+  const extractors = [
+    extractorTagify(options)
+  ];
+  if (defaultExtractor)
+    extractors.push(core.extractorSplit);
+  return {
+    name: "@unocss/preset-tagify",
+    variants,
+    extractors
+  };
+};
+
+exports.MARKER = MARKER;
+exports["default"] = preset;
+exports.extractorTagify = extractorTagify;
+exports.htmlTagRE = htmlTagRE;
+exports.variantTagify = variantTagify;

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import { Extractor, VariantObject, Preset } from '@unocss/core';
+
+interface TagifyOptions {
+    /**
+     * The prefix to use for the tagify variant.
+     */
+    prefix?: string;
+    /**
+     * Extra CSS properties to apply to matched rules
+     */
+    extraProperties?: Record<string, string> | ((matched: string) => Partial<Record<string, string>>);
+    /**
+     * Enable default extractor
+     * @default true
+     */
+    defaultExtractor?: boolean;
+}
+
+declare const MARKER = "__TAGIFY__";
+declare const htmlTagRE: RegExp;
+declare const extractorTagify: (options: TagifyOptions) => Extractor;
+
+declare const variantTagify: (options: TagifyOptions) => VariantObject;
+
+declare const preset: (options?: TagifyOptions) => Preset;
+
+export { MARKER, TagifyOptions, preset as default, extractorTagify, htmlTagRE, variantTagify };

package/dist/index.mjs

@@ -0,0 +1,60 @@
+import { extractorSplit } from '@unocss/core';
+
+const MARKER = "__TAGIFY__";
+const htmlTagRE = /<([\w\d-:]+)/g;
+const extractorTagify = (options) => {
+  const {
+    prefix = ""
+  } = options;
+  return {
+    name: "tagify",
+    extract({ code }) {
+      return new Set(Array.from(code.matchAll(htmlTagRE)).filter(({ 1: match }) => match.startsWith(prefix)).map(([, matched]) => `${MARKER}${matched}`));
+    }
+  };
+};
+
+const variantTagify = (options) => {
+  const { extraProperties } = options;
+  const prefix = `${MARKER}${options.prefix ?? ""}`;
+  return {
+    name: "tagify",
+    match(input) {
+      if (!input.startsWith(prefix))
+        return;
+      const matcher = input.slice(prefix.length);
+      const handler = {
+        matcher,
+        selector: (i) => i.slice(MARKER.length + 1)
+      };
+      if (extraProperties) {
+        if (typeof extraProperties === "function")
+          handler.body = (entries) => [...entries, ...Object.entries(extraProperties(matcher) ?? {})];
+        else
+          handler.body = (entries) => [...entries, ...Object.entries(extraProperties)];
+      }
+      return handler;
+    }
+  };
+};
+
+const preset = (options = {}) => {
+  const {
+    defaultExtractor = true
+  } = options;
+  const variants = [
+    variantTagify(options)
+  ];
+  const extractors = [
+    extractorTagify(options)
+  ];
+  if (defaultExtractor)
+    extractors.push(extractorSplit);
+  return {
+    name: "@unocss/preset-tagify",
+    variants,
+    extractors
+  };
+};
+
+export { MARKER, preset as default, extractorTagify, htmlTagRE, variantTagify };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@unocss/preset-tagify",
+  "version": "0.35.0",
+  "description": "Tagify preset for UnoCSS",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unocss/unocss.git",
+    "directory": "packages/transformer-variant-group"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss/unocss/issues"
+  },
+  "keywords": [
+    "unocss",
+    "unocss-preset"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@unocss/core": "0.35.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}