Cos'è UnoCSS?

UnoCSS è il motore CSS atomico istantaneo, progettato per essere flessibile ed estensibile. Il nucleo è non-opinionato e tutte le utility CSS sono fornite tramite preset.

Ad esempio, potresti definire le tue utility CSS personalizzate, fornendo regole nel tuo file di configurazione locale.

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
  ],
})

Questo aggiungerà una nuova utility CSS m-1 al tuo progetto. Poiché UnoCSS è on-demand, non farà nulla finché non lo usi nella tua codebase. Quindi diciamo che abbiamo un componente come questo:

html

<div class="m-1">Hello</div>

m-1 sarà rilevato e verrà generato il seguente CSS:

css

.m-1 { margin: 1px; }

Per renderlo più flessibile, puoi rendere la tua regola dinamica cambiando il primo argomento della regola (lo chiamiamo matcher) in un RegExp, e il corpo in una funzione, ad esempio:

diff

export default defineConfig({
  rules: [
-    ['m-1', { margin: '1px' }],
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

Facendo questo, ora puoi avere utility di margine arbitrarie, come m-1, m-100 o m-52.43. E ancora, UnoCSS le genera solo quando le usi.

html

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

css

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

Preset

Una volta create alcune regole, puoi estrarle in un preset e condividerle con altri. Ad esempio, puoi creare un preset per il sistema di design della tua azienda e condividerlo con il tuo team.

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // il tuo preset personalizzato
  ],
})