Plugin PostCSS

Plugin PostCSS pour UnoCSS. Prend en charge les directives @apply, @screen et theme().

Code Source

WARNING

Ce package est actuellement dans un état expérimental. Il ne suit pas le semver et peut introduire des changements breaking dans les versions patch.

Installation

pnpm

pnpm add -D unocss @unocss/postcss

yarn

yarn add -D unocss @unocss/postcss

npm

npm install -D unocss @unocss/postcss

bun

bun add -D unocss @unocss/postcss

import UnoCSS from '@unocss/postcss'

export default {
  plugins: [
    UnoCSS(),
  ],
}

import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  content: {
    filesystem: [
      '**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}',
    ],
  },
  presets: [
    presetWind3(),
  ],
})

@unocss;

Utilisation

@unocss

La règle @unocss est un placeholder. Elle sera remplacée par le CSS généré.

Vous pouvez aussi injecter chaque couche individuellement :

@unocss preflights;
@unocss default;

/*
  Couche de fallback. Il est toujours recommandé de l'inclure.
  Seules les couches non utilisées seront injectées ici.
*/
@unocss;

Si vous voulez inclure toutes les couches peu importe si elles ont été précédemment incluses ou non, vous pouvez utiliser @unocss all. C'est utile si vous voulez inclure le CSS généré dans plusieurs fichiers.

@unocss all;

@apply

.custom-div {
  @apply text-center my-0 font-medium;
}

Sera transformé en :

.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}

@screen

La directive @screen vous permet de créer des media queries qui référencent vos breakpoints par nom, provenant de theme.breakpoints.

.grid {
  @apply grid grid-cols-2;
}
@screen xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen sm {
  .grid {
    @apply grid-cols-3;
  }
}
/* ... */

Sera transformé en :

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */

Support des Variantes de Breakpoint

@screen supporte aussi les variantes lt et at

@screen lt

.grid {
  @apply grid grid-cols-2;
}
@screen lt-xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen lt-sm {
  .grid {
    @apply grid-cols-3;
  }
}
/* ... */

Sera transformé en :

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 319.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */

@screen at

.grid {
  @apply grid grid-cols-2;
}
@screen at-xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen at-xl {
  .grid {
    @apply grid-cols-3;
  }
}
@screen at-xxl {
  .grid {
    @apply grid-cols-4;
  }
}
/* ... */

Sera transformé en :

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) and (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) and (max-width: 1535.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ... */

theme()

Utilisez la fonction theme() pour accéder aux valeurs de votre configuration de thème en utilisant la notation par points.

.btn-blue {
  background-color: theme('colors.blue.500');
}

Sera compilé en :

.btn-blue {
  background-color: #3b82f6;
}