@unocss/transformer-attributify-jsx 0.45.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-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,118 @@
+# @unocss/transformer-attributify-jsx
+
+<!-- @unocss-ignore -->
+
+Support [valueless attributify](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#valueless-attributify) in JSX/TSX.
+
+```jsx
+export function Component() {
+  return (
+    <div text-red text-center text-5xl animate-bounce>
+      unocss
+    </div>
+  )
+}
+```
+
+Will be transformed to:
+
+```jsx
+export function Component() {
+  return (
+    <div text-red="" text-center="" text-5xl="" animate-bounce="">
+      unocss
+    </div>
+  )
+}
+```
+
+<details>
+<summary>Without this transformer</summary>
+
+JSX by default will treat valueless attributes as boolean attributes.
+
+```jsx
+export function Component() {
+  return (
+    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
+      unocss
+    </div>
+  )
+}
+```
+
+</details>
+
+## Install
+
+```bash
+npm i -D @unocss/transformer-attributify-jsx
+```
+
+```ts
+// uno.config.js
+import { defineConfig, presetAttributify } from 'unocss'
+import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
+
+export default defineConfig({
+  // ...
+  presets: [
+    // ...
+    presetAttributify()
+  ],
+  transformers: [
+    transformerAttributifyJsx(), // <--
+  ],
+})
+```
+
+## Caveats
+
+> ⚠️ The rules are almost the same as those of `preset-attributify`, but there are several precautions
+
+```html
+<div translate-x-100% /> <!-- cannot end with `%` -->
+
+<div hover:text-2xl /> <!-- cannot contain `:` -->
+
+<div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->
+```
+
+Instead, you may want to use valued attributes instead:
+
+```html
+<div translate="x-100%" />
+
+<div hover="text-2xl" />
+
+<div translate="x-[100px]" />
+```
+
+## Blocklist
+
+This transformer will only transform attrubutes that are valid UnoCSS utilities.
+You can also `blocklist` bypass some attributes from been transformed.
+
+```js
+transformerAttributifyJsx({
+  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
+})
+```
+
+```jsx
+<div text-red text-center text-5xl animate-bounce>
+  unocss
+</div>
+```
+
+Will be compiled to:
+
+```html
+<div text-red text-center text-5xl animate-bounce="">
+  unocss
+</div>
+```
+
+## License
+
+MIT License &copy; 2022-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const core = require('@unocss/core');
+
+function createFilter(include, exclude) {
+  const includePattern = core.toArray(include || []);
+  const excludePattern = core.toArray(exclude || []);
+  return (id) => {
+    if (excludePattern.some((p) => id.match(p)))
+      return false;
+    return includePattern.some((p) => id.match(p));
+  };
+}
+const elementRE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gs;
+const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g;
+function transformerAttributifyJsx(options = {}) {
+  const {
+    blocklist = []
+  } = options;
+  const isBlocked = (matchedRule) => {
+    for (const blockedRule of blocklist) {
+      if (blockedRule instanceof RegExp) {
+        if (blockedRule.test(matchedRule))
+          return true;
+      } else if (matchedRule === blockedRule) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const idFilter = createFilter(
+    options.include || [/\.[jt]sx$/, /\.mdx$/],
+    options.exclude || []
+  );
+  return {
+    name: "transformer-jsx",
+    enforce: "pre",
+    idFilter,
+    async transform(code, _, { uno }) {
+      const tasks = [];
+      for (const item of Array.from(code.original.matchAll(elementRE))) {
+        for (const attr of item[3].matchAll(attributeRE)) {
+          const matchedRule = attr[0];
+          if (matchedRule.includes("=") || isBlocked(matchedRule))
+            continue;
+          tasks.push(uno.parseToken(matchedRule).then((matched) => {
+            if (matched) {
+              const tag = item[2];
+              const startIdx = (item.index || 0) + (attr.index || 0) + tag.length + 1;
+              const endIdx = startIdx + matchedRule.length;
+              code.overwrite(startIdx, endIdx, `${matchedRule}=""`);
+            }
+          }));
+        }
+      }
+      await Promise.all(tasks);
+    }
+  };
+}
+
+module.exports = transformerAttributifyJsx;

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { SourceCodeTransformer } from '@unocss/core';
+
+declare type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;
+interface TransformerAttributifyJsxOptions {
+    /**
+     * the list of attributes to ignore
+     * @default []
+     */
+    blocklist?: (string | RegExp)[];
+    /**
+     * Regex of modules to be included from processing
+     * @default [/\.[jt]sx$/, /\.mdx$/]
+     */
+    include?: FilterPattern;
+    /**
+     * Regex of modules to exclude from processing
+     *
+     * @default []
+     */
+    exclude?: FilterPattern;
+}
+declare function transformerAttributifyJsx(options?: TransformerAttributifyJsxOptions): SourceCodeTransformer;
+
+export { FilterPattern, TransformerAttributifyJsxOptions, transformerAttributifyJsx as default };

package/dist/index.mjs

@@ -0,0 +1,59 @@
+import { toArray } from '@unocss/core';
+
+function createFilter(include, exclude) {
+  const includePattern = toArray(include || []);
+  const excludePattern = toArray(exclude || []);
+  return (id) => {
+    if (excludePattern.some((p) => id.match(p)))
+      return false;
+    return includePattern.some((p) => id.match(p));
+  };
+}
+const elementRE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gs;
+const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g;
+function transformerAttributifyJsx(options = {}) {
+  const {
+    blocklist = []
+  } = options;
+  const isBlocked = (matchedRule) => {
+    for (const blockedRule of blocklist) {
+      if (blockedRule instanceof RegExp) {
+        if (blockedRule.test(matchedRule))
+          return true;
+      } else if (matchedRule === blockedRule) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const idFilter = createFilter(
+    options.include || [/\.[jt]sx$/, /\.mdx$/],
+    options.exclude || []
+  );
+  return {
+    name: "transformer-jsx",
+    enforce: "pre",
+    idFilter,
+    async transform(code, _, { uno }) {
+      const tasks = [];
+      for (const item of Array.from(code.original.matchAll(elementRE))) {
+        for (const attr of item[3].matchAll(attributeRE)) {
+          const matchedRule = attr[0];
+          if (matchedRule.includes("=") || isBlocked(matchedRule))
+            continue;
+          tasks.push(uno.parseToken(matchedRule).then((matched) => {
+            if (matched) {
+              const tag = item[2];
+              const startIdx = (item.index || 0) + (attr.index || 0) + tag.length + 1;
+              const endIdx = startIdx + matchedRule.length;
+              code.overwrite(startIdx, endIdx, `${matchedRule}=""`);
+            }
+          }));
+        }
+      }
+      await Promise.all(tasks);
+    }
+  };
+}
+
+export { transformerAttributifyJsx as default };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@unocss/transformer-attributify-jsx",
+  "version": "0.45.1",
+  "description": "Support valueless attributify in JSX/TSX.",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/transformer-attributify-jsx#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unocss/unocss.git",
+    "directory": "packages/transformer-attributify-jsx"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss/unocss/issues"
+  },
+  "keywords": [
+    "unocss",
+    "unocss-transformer"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@unocss/core": "0.45.1"
+  },
+  "devDependencies": {
+    "magic-string": "^0.26.2"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}