@unocss/preset-attributify 0.32.0 → 0.32.8

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Anthony Fu <https://github.com/antfu>
+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

package/README.md

@@ -72,7 +72,7 @@ Create `shims.d.ts` with the following content:
 ### React
 
 ```ts
-import { AttributifyAttributes } from '@unocss/preset-attributify'
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
 
 declare module 'react' {
   interface HTMLAttributes<T> extends AttributifyAttributes {}
@@ -82,7 +82,7 @@ declare module 'react' {
 ### Vue 3
 
 ```ts
-import { AttributifyAttributes } from '@unocss/preset-attributify'
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
 
 declare module '@vue/runtime-dom' {
   interface HTMLAttributes extends AttributifyAttributes {}
@@ -92,9 +92,9 @@ declare module '@vue/runtime-dom' {
 ### SolidJS
 
 ```ts
-import { AttributifyAttributes } from '@unocss/preset-attributify'
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
 
-declare module "solid-js" {
+declare module 'solid-js' {
   namespace JSX {
     interface HTMLAttributes<T> extends AttributifyAttributes {}
   }
@@ -104,7 +104,7 @@ declare module "solid-js" {
 ### Attributify with Prefix
 
 ```ts
-import { AttributifyNames } from '@unocss/preset-attributify'
+import type { AttributifyNames } from '@unocss/preset-attributify'
 
 type Prefix = 'uno:' // change it to your prefix
 
@@ -117,4 +117,4 @@ Initial idea by [@Tahul](https://github.com/Tahul) and [@antfu](https://github.c
 
 ## License
 
-MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)
+MIT License &copy; 2021-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/index.cjs

@@ -8,21 +8,25 @@ const variantsRE = /^(?!\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/;
 const variantAttributify = (options = {}) => {
   const prefix = options.prefix ?? "un-";
   const prefixedOnly = options.prefixedOnly ?? false;
-  return (input) => {
-    const match = core.isAttributifySelector(input);
-    if (!match)
-      return;
-    let name = match[1];
-    if (name.startsWith(prefix))
-      name = name.slice(prefix.length);
-    else if (prefixedOnly)
-      return;
-    const content = match[2];
-    const [, variants = "", body = content] = content.match(variantsRE) || [];
-    if (body === "~" || !body)
-      return `${variants}${name}`;
-    else
-      return `${variants}${name}-${body}`;
+  const trueToNonValued = options.trueToNonValued ?? false;
+  return {
+    name: "attributify",
+    match(input) {
+      const match = core.isAttributifySelector(input);
+      if (!match)
+        return;
+      let name = match[1];
+      if (name.startsWith(prefix))
+        name = name.slice(prefix.length);
+      else if (prefixedOnly)
+        return;
+      const content = match[2];
+      const [, variants = "", body = content] = content.match(variantsRE) || [];
+      if (body === "~" || trueToNonValued && body === "true" || !body)
+        return `${variants}${name}`;
+      else
+        return `${variants}${name}-${body}`;
+    }
   };
 };
 
@@ -118,6 +122,7 @@ const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(
 const extractorAttributify = (options) => {
   const ignoreAttributes = options?.ignoreAttributes ?? [];
   const nonValuedAttribute = options?.nonValuedAttribute ?? true;
+  const trueToNonValued = options?.trueToNonValued ?? false;
   return {
     name: "attributify",
     extract({ code }) {
@@ -131,8 +136,12 @@ const extractorAttributify = (options) => {
           }
         }
         if (!content) {
-          if (core.isValidSelector(name) && nonValuedAttribute !== false)
-            return [`[${name}=""]`];
+          if (core.isValidSelector(name) && nonValuedAttribute !== false) {
+            const result2 = [`[${name}=""]`];
+            if (trueToNonValued)
+              result2.push(`[${name}="true"]`);
+            return result2;
+          }
           return [];
         }
         if (["class", "className"].includes(name)) {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PresetOptions, AutoCompleteExtractor, Extractor, VariantFunction, Preset } from '@unocss/core';
+import { PresetOptions, AutoCompleteExtractor, Extractor, VariantObject, Preset } from '@unocss/core';
 
 interface AttributifyOptions extends PresetOptions {
     /**
@@ -32,6 +32,14 @@ interface AttributifyOptions extends PresetOptions {
      * A list of attributes to be ignored from extracting.
      */
     ignoreAttributes?: string[];
+    /**
+     * Non-valued attributes will also match if the actual value represented in DOM is `true`.
+     * This option exists for supporting frameworks that encodes non-valued attributes as `true`.
+     * Enabling this option will break rules that ends with `true`.
+     *
+     * @default false
+     */
+    trueToNonValued?: boolean;
 }
 
 declare const autocompleteExtractorAttributify: AutoCompleteExtractor;
@@ -39,7 +47,7 @@ declare const autocompleteExtractorAttributify: AutoCompleteExtractor;
 declare const extractorAttributify: (options?: AttributifyOptions | undefined) => Extractor;
 
 declare const variantsRE: RegExp;
-declare const variantAttributify: (options?: AttributifyOptions) => VariantFunction;
+declare const variantAttributify: (options?: AttributifyOptions) => VariantObject;
 
 declare type UtilityNames = 'align' | 'animate' | 'backdrop' | 'bg' | 'blend' | 'border' | 'box' | 'container' | 'content' | 'cursor' | 'display' | 'divide' | 'filter' | 'flex' | 'font' | 'gap' | 'gradient' | 'grid' | 'h' | 'icon' | 'justify' | 'list' | 'm' | 'opacity' | 'order' | 'outline' | 'overflow' | 'p' | 'place' | 'pos' | 'ring' | 'select' | 'shadow' | 'space' | 'table' | 'text' | 'transform' | 'transition' | 'underline' | 'w' | 'z';
 declare type VariantNames = 'active' | 'after' | 'all' | 'before' | 'child' | 'dark' | 'enabled' | 'first' | 'focus' | 'hover' | 'last' | 'lg' | 'light' | 'md' | 'root' | 'sm' | 'xl' | 'xxl';

package/dist/index.mjs

@@ -4,21 +4,25 @@ const variantsRE = /^(?!\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/;
 const variantAttributify = (options = {}) => {
   const prefix = options.prefix ?? "un-";
   const prefixedOnly = options.prefixedOnly ?? false;
-  return (input) => {
-    const match = isAttributifySelector(input);
-    if (!match)
-      return;
-    let name = match[1];
-    if (name.startsWith(prefix))
-      name = name.slice(prefix.length);
-    else if (prefixedOnly)
-      return;
-    const content = match[2];
-    const [, variants = "", body = content] = content.match(variantsRE) || [];
-    if (body === "~" || !body)
-      return `${variants}${name}`;
-    else
-      return `${variants}${name}-${body}`;
+  const trueToNonValued = options.trueToNonValued ?? false;
+  return {
+    name: "attributify",
+    match(input) {
+      const match = isAttributifySelector(input);
+      if (!match)
+        return;
+      let name = match[1];
+      if (name.startsWith(prefix))
+        name = name.slice(prefix.length);
+      else if (prefixedOnly)
+        return;
+      const content = match[2];
+      const [, variants = "", body = content] = content.match(variantsRE) || [];
+      if (body === "~" || trueToNonValued && body === "true" || !body)
+        return `${variants}${name}`;
+      else
+        return `${variants}${name}-${body}`;
+    }
   };
 };
 
@@ -114,6 +118,7 @@ const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(
 const extractorAttributify = (options) => {
   const ignoreAttributes = options?.ignoreAttributes ?? [];
   const nonValuedAttribute = options?.nonValuedAttribute ?? true;
+  const trueToNonValued = options?.trueToNonValued ?? false;
   return {
     name: "attributify",
     extract({ code }) {
@@ -127,8 +132,12 @@ const extractorAttributify = (options) => {
           }
         }
         if (!content) {
-          if (isValidSelector(name) && nonValuedAttribute !== false)
-            return [`[${name}=""]`];
+          if (isValidSelector(name) && nonValuedAttribute !== false) {
+            const result2 = [`[${name}=""]`];
+            if (trueToNonValued)
+              result2.push(`[${name}="true"]`);
+            return result2;
+          }
           return [];
         }
         if (["class", "className"].includes(name)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-attributify",
-  "version": "0.32.0",
+  "version": "0.32.8",
   "description": "Attributify preset for UnoCSS",
   "keywords": [
     "unocss",
@@ -33,11 +33,10 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@unocss/core": "0.32.0"
+    "@unocss/core": "0.32.8"
   },
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub"
-  },
-  "readme": "# @unocss/preset-attributify\n\nAttributify Mode for [UnoCSS](https://github.com/unocss/unocss).\n\n## Installation\n\n```bash\nnpm i -D @unocss/preset-attributify\n```\n\n```ts\nimport presetAttributify from '@unocss/preset-attributify'\n\nUnocss({\n  presets: [\n    presetAttributify({ /* options */ }),\n    // ...other presets\n  ],\n})\n```\n\n## Attributify Mode\n\nThis preset enabled [Windi CSS's Attributify Mode](https://windicss.org/posts/v30.html#attributify-mode) for **other presets**.\n\nImagine you have this button using Tailwind's utilities. When the list gets long, it becomes really hard to read and maintain.\n\n```html\n<button class=\"bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600\">\n  Button\n</button>\n```\n\nWith attributify mode, you can separate utilities into attributes:\n\n```html\n<button \n  bg=\"blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600\"\n  text=\"sm white\"\n  font=\"mono light\"\n  p=\"y-2 x-4\"\n  border=\"2 rounded blue-200\"\n>\n  Button\n</button>\n```\n\nFor example, `text-sm text-white` could be grouped into `text=\"sm white\"` without duplicating the same prefix.\n\n###### Valueless Attributify\n\nIn addition to Windi CSS's Attributify Mode, this presets also supports valueless attributes.\n\nFor example, \n\n```html\n<div class=\"m-2 rounded text-teal-400\" />\n```\n\nnow can be\n\n```html\n<div m-2 rounded text-teal-400 />\n```\n\n## TypeScript Support (JSX/TSX)\n\nCreate `shims.d.ts` with the following content:\n\n> By default, the type includes common attributes from `@unocss/preset-uno`. If you need custom attributes, refer to the [type source](https://github.com/antfu/unocss/blob/main/packages/preset-attributify/src/jsx.ts) to implement your own type.\n\n### React\n\n```ts\nimport { AttributifyAttributes } from '@unocss/preset-attributify'\n\ndeclare module 'react' {\n  interface HTMLAttributes<T> extends AttributifyAttributes {}\n}\n```\n\n### Vue 3\n\n```ts\nimport { AttributifyAttributes } from '@unocss/preset-attributify'\n\ndeclare module '@vue/runtime-dom' {\n  interface HTMLAttributes extends AttributifyAttributes {}\n}\n```\n\n### SolidJS\n\n```ts\nimport { AttributifyAttributes } from '@unocss/preset-attributify'\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface HTMLAttributes<T> extends AttributifyAttributes {}\n  }\n}\n```\n\n### Attributify with Prefix\n\n```ts\nimport { AttributifyNames } from '@unocss/preset-attributify'\n\ntype Prefix = 'uno:' // change it to your prefix\n\ninterface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}\n```\n\n## Credits\n\nInitial idea by [@Tahul](https://github.com/Tahul) and [@antfu](https://github.com/antfu). Pior implementation in Windi CSS by [@voorjaar](https://github.com/voorjaar).\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
+  }
 }