@unocss/preset-attributify 0.50.7 → 0.51.0

package/README.md

@@ -2,221 +2,9 @@
 
 Attributify Mode for [UnoCSS](https://github.com/unocss/unocss).
 
-## Installation
+## Documentation
 
-```bash
-npm i -D @unocss/preset-attributify
-```
-
-```ts
-import presetAttributify from '@unocss/preset-attributify'
-
-UnoCSS({
-  presets: [
-    presetAttributify({ /* options */ }),
-    // ...other presets
-  ],
-})
-```
-
-## Attributify Mode
-
-This preset enabled [Windi CSS's Attributify Mode](https://windicss.org/posts/v30.html#attributify-mode) for **other presets**.
-
-Imagine you have this button using Tailwind's utilities. When the list gets long, it becomes really hard to read and maintain.
-
-```html
-<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">
-  Button
-</button>
-```
-
-With attributify mode, you can separate utilities into attributes:
-
-```html
-<button 
-  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
-  text="sm white"
-  font="mono light"
-  p="y-2 x-4"
-  border="2 rounded blue-200"
->
-  Button
-</button>
-```
-
-For example, `text-sm text-white` could be grouped into `text="sm white"` without duplicating the same prefix.
-
-### Prefix Self-referencing
-
-For utilities like `flex`, `grid`, `border`, that have the utilities same as the prefix, a special `~` value is provided.
-
-For example:
-
-```html
-<button class="border border-red">
-  Button
-</button>
-```
-
-Can be written as
-
-```html
-<button border="~ red">
-  Button
-</button>
-```
-
-### Valueless Attributify
-
-In addition to Windi CSS's Attributify Mode, this presets also supports valueless attributes.
-
-For example,
-
-```html
-<div class="m-2 rounded text-teal-400" />
-```
-
-now can be
-
-```html
-<div m-2 rounded text-teal-400 />
-```
-
-> Note: If you are using JSX, `<div foo>` might be transformed to `<div foo={true}>` which will make the generate CSS from UnoCSS failed to match the attributes. To solve this, you might want to try [`transformer-attributify-jsx`](https://github.com/unocss/unocss/tree/main/packages/transformer-attributify-jsx) along with this preset.
-
-### Properties Conflicts
-
-If the name of the attributes mode ever conflicts with the elements' or components' properties, you can add `un-` prefix to be specific to UnoCSS's attributify mode.
-
-For example:
-
-```html
-<a text="red">This conflicts with links' `text` prop</a>
-<!-- to -->
-<a un-text="red">Text color to red</a>
-```
-
-Prefix is optional by default, if you want to enforce the usage of prefix, set
-
-```ts
-presetAttributify({
-  prefix: 'un-',
-  prefixedOnly: true, // <--
-})
-```
-
-You can also disable the scanning for certain attributes by:
-
-```ts
-presetAttributify({
-  ignoreAttributes: [
-    'text'
-    // ...
-  ]
-})
-```
-
-## TypeScript Support (JSX/TSX)
-
-Create `shims.d.ts` with the following content:
-
-> 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.
-
-### Vue
-
-Since Volar 0.36, [it's now strict to unknown attributes](https://github.com/johnsoncodehk/volar/issues/1077#issuecomment-1145361472). To opt-out, you can add the following file to your project:
-
-```ts
-// html.d.ts
-declare module '@vue/runtime-dom' {
-  interface HTMLAttributes {
-    [key: string]: any
-  }
-}
-declare module '@vue/runtime-core' {
-  interface AllowedComponentProps {
-    [key: string]: any
-  }
-}
-export {}
-```
-
-### React
-
-```ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
-
-declare module 'react' {
-  interface HTMLAttributes<T> extends AttributifyAttributes {}
-}
-```
-
-### Vue 3
-
-```ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
-
-declare module '@vue/runtime-dom' {
-  interface HTMLAttributes extends AttributifyAttributes {}
-}
-```
-
-### SolidJS
-
-```ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface HTMLAttributes<T> extends AttributifyAttributes {}
-  }
-}
-```
-
-### Svelte & SvelteKit
-
-```ts
-declare namespace svelteHTML {
-  import type { AttributifyAttributes } from '@unocss/preset-attributify'
-
-  type HTMLAttributes = AttributifyAttributes
-}
-```
-
-### Astro
-
-```ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
-
-declare global {
-  namespace astroHTML.JSX {
-    interface HTMLAttributes extends AttributifyAttributes { }
-  }
-}
-```
-
-### Preact
-
-```ts
-import type { AttributifyAttributes } from '@unocss/preset-attributify'
-
-declare module 'preact' {
-  namespace JSX {
-    interface HTMLAttributes extends AttributifyAttributes {}
-  }
-}
-```
-
-### Attributify with Prefix
-
-```ts
-import type { AttributifyNames } from '@unocss/preset-attributify'
-
-type Prefix = 'uno:' // change it to your prefix
-
-interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}
-```
+Please refer to the [documentation](https://unocss.dev/presets/attributify).
 
 ## Credits
 

package/dist/index.cjs

@@ -137,7 +137,7 @@ function extractorAttributify(options) {
   const nonValuedAttribute = options?.nonValuedAttribute ?? true;
   const trueToNonValued = options?.trueToNonValued ?? false;
   return {
-    name: "attributify",
+    name: "@unocss/preset-attributify/extractor",
     extract({ code }) {
       const result = Array.from(code.matchAll(elementRE)).flatMap((match) => Array.from((match[1] || "").matchAll(valuedAttributeRE))).flatMap(([, name, ...contents]) => {
         const content = contents.filter(Boolean).join("");
@@ -172,7 +172,7 @@ function extractorAttributify(options) {
   };
 }
 
-function preset(options = {}) {
+function presetAttributify(options = {}) {
   options.strict = options.strict ?? false;
   options.prefix = options.prefix ?? "un-";
   options.prefixedOnly = options.prefixedOnly ?? false;
@@ -187,22 +187,23 @@ function preset(options = {}) {
   const autocompleteExtractors = [
     autocompleteExtractorAttributify
   ];
-  if (!options.strict)
-    extractors.unshift(core.extractorSplit);
   return {
     name: "@unocss/preset-attributify",
+    enforce: "post",
     variants,
     extractors,
     options,
     autocomplete: {
       extractors: autocompleteExtractors
-    }
+    },
+    extractorDefault: options.strict ? false : void 0
   };
 }
 
 exports.autocompleteExtractorAttributify = autocompleteExtractorAttributify;
-exports["default"] = preset;
+exports["default"] = presetAttributify;
 exports.defaultIgnoreAttributes = defaultIgnoreAttributes;
 exports.extractorAttributify = extractorAttributify;
+exports.presetAttributify = presetAttributify;
 exports.variantAttributify = variantAttributify;
 exports.variantsRE = variantsRE;

package/dist/index.d.ts

@@ -67,6 +67,6 @@ type AttributifyNames<Prefix extends string = ''> = `${Prefix}${BasicAttributes}
 interface AttributifyAttributes extends Partial<Record<AttributifyNames, string | boolean>> {
 }
 
-declare function preset(options?: AttributifyOptions): Preset;
+declare function presetAttributify(options?: AttributifyOptions): Preset;
 
-export { AttributifyAttributes, AttributifyNames, AttributifyOptions, BasicAttributes, PseudoPrefix, SeparateEnabled, SpecialSingleWord, StringNumberComposition, StringNumberCompositionPrefix, TwoStringsComposition, TwoStringsCompositionPrefix, TwoStringsCompositionSuffix, autocompleteExtractorAttributify, preset as default, defaultIgnoreAttributes, extractorAttributify, variantAttributify, variantsRE };
+export { AttributifyAttributes, AttributifyNames, AttributifyOptions, BasicAttributes, PseudoPrefix, SeparateEnabled, SpecialSingleWord, StringNumberComposition, StringNumberCompositionPrefix, TwoStringsComposition, TwoStringsCompositionPrefix, TwoStringsCompositionSuffix, autocompleteExtractorAttributify, presetAttributify as default, defaultIgnoreAttributes, extractorAttributify, presetAttributify, variantAttributify, variantsRE };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { isAttributifySelector, isValidSelector, extractorSplit } from '@unocss/core';
+import { isAttributifySelector, isValidSelector } from '@unocss/core';
 
 const variantsRE = /^(?!.*\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/;
 function variantAttributify(options = {}) {
@@ -133,7 +133,7 @@ function extractorAttributify(options) {
   const nonValuedAttribute = options?.nonValuedAttribute ?? true;
   const trueToNonValued = options?.trueToNonValued ?? false;
   return {
-    name: "attributify",
+    name: "@unocss/preset-attributify/extractor",
     extract({ code }) {
       const result = Array.from(code.matchAll(elementRE)).flatMap((match) => Array.from((match[1] || "").matchAll(valuedAttributeRE))).flatMap(([, name, ...contents]) => {
         const content = contents.filter(Boolean).join("");
@@ -168,7 +168,7 @@ function extractorAttributify(options) {
   };
 }
 
-function preset(options = {}) {
+function presetAttributify(options = {}) {
   options.strict = options.strict ?? false;
   options.prefix = options.prefix ?? "un-";
   options.prefixedOnly = options.prefixedOnly ?? false;
@@ -183,17 +183,17 @@ function preset(options = {}) {
   const autocompleteExtractors = [
     autocompleteExtractorAttributify
   ];
-  if (!options.strict)
-    extractors.unshift(extractorSplit);
   return {
     name: "@unocss/preset-attributify",
+    enforce: "post",
     variants,
     extractors,
     options,
     autocomplete: {
       extractors: autocompleteExtractors
-    }
+    },
+    extractorDefault: options.strict ? false : void 0
   };
 }
 
-export { autocompleteExtractorAttributify, preset as default, defaultIgnoreAttributes, extractorAttributify, variantAttributify, variantsRE };
+export { autocompleteExtractorAttributify, presetAttributify as default, defaultIgnoreAttributes, extractorAttributify, presetAttributify, variantAttributify, variantsRE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/preset-attributify",
-  "version": "0.50.7",
+  "version": "0.51.0",
   "description": "Attributify preset for UnoCSS",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "dist"
   ],
   "dependencies": {
-    "@unocss/core": "0.50.7"
+    "@unocss/core": "0.51.0"
   },
   "scripts": {
     "build": "unbuild",