Attributify preset

Detta aktiverar attributify-läge för andra presets.

Källkod

Installation

pnpm

pnpm add -D @unocss/preset-attributify

yarn

yarn add -D @unocss/preset-attributify

npm

npm install -D @unocss/preset-attributify

bun

bun add -D @unocss/preset-attributify

import presetAttributify from '@unocss/preset-attributify'

export default defineConfig({
  presets: [
    presetAttributify({ /* preset-alternativ */ }),
    // ...
  ],
})

TIP

Denna preset ingår i unocss-paketet, du kan också importera den därifrån:

import { presetAttributify } from 'unocss'

Attributify-läge

Tänk dig att du har denna knapp med Tailwind CSS:s verktyg. När listan blir längre blir den verkligen svår att läsa och underhålla.

<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>

Med attributify-läge kan du separera verktyg i attribut:

<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>

Till exempel kan text-sm text-white grupperas till text="sm white" utan att duplicera samma prefix.

Prefix självrefererande

För verktyg som flex, grid, border, som har samma verktyg som prefix, tillhandahålls ett speciellt ~-värde.

Till exempel:

<button class="border border-red">Button</button>

Kan skrivas som:

<button border="~ red">Button</button>

Värdelösa attribut

Utöver Windi CSS:s attributify-läge stöder denna preset också värdelösa attribut.

Till exempel,

<div class="m-2 rounded text-teal-400" />

kan nu bli

<div m-2 rounded text-teal-400 />

INFO

Obs: Om du använder JSX kan <div foo> transformeras till <div foo={true}> vilket gör att den genererade CSS:en från UnoCSS inte kan matcha attributen. För att lösa detta kan du prova transformer-attributify-jsx tillsammans med denna preset.

Egenskapskonflikter

Om namnet på attributläget någonsin kolliderar med elementens eller komponenternas egenskaper kan du lägga till un--prefix för att vara specifik för UnoCSS:s attributify-läge.

Till exempel:

<a text="red">Detta kolliderar med länkars `text`-egenskap</a>
<!-- till -->
<a un-text="red">Textfärg till röd</a>

Prefix är valfritt som standard, om du vill tvinga användningen av prefix, ställ in

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

Du kan också inaktivera skanning för vissa attribut genom:

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

TypeScript-stöd (JSX/TSX)

Skapa shims.d.ts med följande innehåll:

Som standard inkluderar typen vanliga attribut från @unocss/preset-wind3. Om du behöver anpassade attribut, se till typkällan för att implementera din egen typ.

Vue

Sedan Volar 0.36 är det nu strikt med okända attribut. För att välja bort kan du lägga till följande fil i ditt projekt:

declare module '@vue/runtime-dom' {
  interface HTMLAttributes {
    [key: string]: any
  }
}
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any
  }
}
export {}

React

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

Vue 3

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module '@vue/runtime-dom' {
  interface HTMLAttributes extends AttributifyAttributes {}
}

SolidJS

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> extends AttributifyAttributes {}
  }
}

Svelte & SvelteKit

declare namespace svelteHTML {
  import type { AttributifyAttributes } from '@unocss/preset-attributify'

  type HTMLAttributes = AttributifyAttributes
}

Astro

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare global {
  namespace astroHTML.JSX {
    interface HTMLAttributes extends AttributifyAttributes { }
  }
}

Preact

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'preact' {
  namespace JSX {
    interface HTMLAttributes extends AttributifyAttributes {}
  }
}

Attributify med prefix

import type { AttributifyNames } from '@unocss/preset-attributify'

type Prefix = 'uno:' // ändra det till ditt prefix

interface HTMLAttributes extends Partial<Record<AttributifyNames<Prefix>, string>> {}

Alternativ

strict

• typ: boolean
• standard: false

Generera endast CSS för attributify eller class.

prefix

• typ: string
• standard: 'un-'

Prefix för attributify-läge.

prefixedOnly

• typ: boolean
• standard: false

Matcha endast prefixade attribut.

nonValuedAttribute

• typ: boolean
• standard: true

Stöd matchning av icke-värderade attribut.

ignoreAttributes

• typ: string[]

En lista över attribut som ska ignoreras vid extrahering.

trueToNonValued

• typ: boolean
• standard: false

Icke-värderade attribut kommer också att matchas om det faktiska värdet som representeras i DOM är true. Detta alternativ finns för att stödja ramverk som kodar icke-värderade attribut som true. Att aktivera detta alternativ kommer att bryta regler som slutar med true.

Erkännanden

Ursprunglig idé av @Tahul och @antfu. Tidigare implementation i Windi CSS av @voorjaar.