158 lines
2.3 KiB
Markdown
158 lines
2.3 KiB
Markdown
---
|
|
name: transformer-directives
|
|
description: CSS directives @apply, @screen, theme(), and icon()
|
|
---
|
|
|
|
# Transformer Directives
|
|
|
|
Enables `@apply`, `@screen`, `theme()`, and `icon()` directives in CSS.
|
|
|
|
## Installation
|
|
|
|
```ts
|
|
import { defineConfig, transformerDirectives } from 'unocss'
|
|
|
|
export default defineConfig({
|
|
transformers: [
|
|
transformerDirectives(),
|
|
],
|
|
})
|
|
```
|
|
|
|
## @apply
|
|
|
|
Apply utility classes in CSS:
|
|
|
|
```css
|
|
.custom-btn {
|
|
@apply py-2 px-4 font-semibold rounded-lg;
|
|
}
|
|
|
|
/* With variants - use quotes */
|
|
.custom-btn {
|
|
@apply 'hover:bg-blue-600 focus:ring-2';
|
|
}
|
|
```
|
|
|
|
### CSS Custom Property Alternative
|
|
|
|
For vanilla CSS compatibility:
|
|
|
|
```css
|
|
.custom-div {
|
|
--at-apply: text-center my-0 font-medium;
|
|
}
|
|
```
|
|
|
|
Supported aliases: `--at-apply`, `--uno-apply`, `--uno`
|
|
|
|
Configure aliases:
|
|
|
|
```ts
|
|
transformerDirectives({
|
|
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
|
|
// or disable: applyVariable: false
|
|
})
|
|
```
|
|
|
|
## @screen
|
|
|
|
Create breakpoint media queries:
|
|
|
|
```css
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
@screen sm {
|
|
.grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@screen lg {
|
|
.grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Breakpoint Variants
|
|
|
|
```css
|
|
/* Less than breakpoint */
|
|
@screen lt-sm {
|
|
.item { display: none; }
|
|
}
|
|
|
|
/* At specific breakpoint only */
|
|
@screen at-md {
|
|
.item { width: 50%; }
|
|
}
|
|
```
|
|
|
|
## theme()
|
|
|
|
Access theme values in CSS:
|
|
|
|
```css
|
|
.btn-blue {
|
|
background-color: theme('colors.blue.500');
|
|
padding: theme('spacing.4');
|
|
border-radius: theme('borderRadius.lg');
|
|
}
|
|
```
|
|
|
|
Dot notation paths into your theme config.
|
|
|
|
## icon()
|
|
|
|
Convert icon utility to SVG (requires preset-icons):
|
|
|
|
```css
|
|
.icon-sun {
|
|
background-image: icon('i-carbon-sun');
|
|
}
|
|
|
|
/* With custom color */
|
|
.icon-moon {
|
|
background-image: icon('i-carbon-moon', '#fff');
|
|
}
|
|
|
|
/* Using theme color */
|
|
.icon-alert {
|
|
background-image: icon('i-carbon-warning', 'theme("colors.red.500")');
|
|
}
|
|
```
|
|
|
|
## Complete Example
|
|
|
|
```css
|
|
.card {
|
|
@apply rounded-lg shadow-md p-4;
|
|
background-color: theme('colors.white');
|
|
}
|
|
|
|
.card-header {
|
|
@apply 'font-bold text-lg border-b';
|
|
padding-bottom: theme('spacing.2');
|
|
}
|
|
|
|
@screen md {
|
|
.card {
|
|
@apply flex gap-4;
|
|
}
|
|
}
|
|
|
|
.card-icon {
|
|
background-image: icon('i-carbon-document');
|
|
@apply w-6 h-6;
|
|
}
|
|
```
|
|
|
|
<!--
|
|
Source references:
|
|
- https://unocss.dev/transformers/directives
|
|
-->
|