Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@unocss/transformer-directives
Advanced tools
@unocss/transformer-directives is a transformer for UnoCSS that allows you to use CSS directives within your stylesheets. It provides a way to use utility-first CSS directly in your stylesheets, making it easier to manage and apply styles dynamically.
Using @apply directive
The @apply directive allows you to apply multiple utility classes to a single CSS rule. This makes it easier to manage and reuse styles across your project.
/* styles.css */
.button {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
Using @screen directive
The @screen directive allows you to apply styles based on breakpoints. This is useful for creating responsive designs that adapt to different screen sizes.
/* styles.css */
@screen md {
.container {
@apply p-4;
}
}
Using @variants directive
The @variants directive allows you to apply styles based on different states like hover, focus, etc. This is useful for creating interactive elements that change styles based on user interactions.
/* styles.css */
@variants hover, focus {
.button {
@apply bg-blue-700;
}
}
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. It also supports directives like @apply, @screen, and @variants, making it similar to @unocss/transformer-directives. However, Tailwind CSS is a full-fledged framework, whereas @unocss/transformer-directives is a transformer for UnoCSS.
PostCSS is a tool for transforming CSS with JavaScript plugins. It can be used to create custom directives and utilities similar to those provided by @unocss/transformer-directives. However, PostCSS is more general-purpose and requires additional configuration and plugins to achieve similar functionality.
WindiCSS is a utility-first CSS framework inspired by Tailwind CSS. It offers similar functionalities like utility classes and directives. WindiCSS is designed to be faster and more efficient, making it a good alternative to @unocss/transformer-directives for projects that require high performance.
UnoCSS transformer for @apply
、@screen
and theme()
directive
npm i -D @unocss/transformer-directives
// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
export default defineConfig({
// ...
transformers: [
transformerDirectives(),
],
})
@apply
.custom-div {
@apply text-center my-0 font-medium;
}
Will be transformed to:
.custom-div {
margin-top: 0rem;
margin-bottom: 0rem;
text-align: center;
font-weight: 500;
}
To be compatible with vanilla CSS, you can use CSS custom properties to replace the @apply
directive.
.custom-div {
--at-apply: text-center my-0 font-medium;
}
To use rules with :
, you will need to quote the value
.custom-div {
--at-apply: "hover:text-red";
}
This feature is enabled by default with a few alias, you can configure or disable it via:
transformerDirectives({
// the defaults
applyVariable: ['--at-apply', '--uno-apply', '--uno'],
// or disable with:
// applyVariable: false
})
@screen
The @screen
directive allows you to create media queries that reference your breakpoints by name comes from theme.breakpoints
.
.grid {
--uno: grid grid-cols-2;
}
@screen xs {
.grid {
--uno: grid-cols-1;
}
}
@screen sm {
.grid {
--uno: grid-cols-3;
}
}
/* ... */
...
Will be transformed to:
.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));
}
}
/* ... */
@screen
also supports lt
、at
variants
@screen lt
.grid {
--uno: grid grid-cols-2;
}
@screen lt-xs {
.grid {
--uno: grid-cols-1;
}
}
@screen lt-sm {
.grid {
--uno: grid-cols-3;
}
}
/* ... */
Will be transformed to:
.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 {
--uno: grid grid-cols-2;
}
@screen at-xs {
.grid {
--uno: grid-cols-1;
}
}
@screen at-xl {
.grid {
--uno: grid-cols-3;
}
}
@screen at-xxl {
.grid {
--uno: grid-cols-4;
}
}
/* ... */
Will be transformed to:
.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()
Use the theme()
function to access your theme config values using dot notation.
.btn-blue {
background-color: theme('colors.blue.500');
}
Will be compiled to:
.btn-blue {
background-color: #3b82f6;
}
MIT License © 2022-PRESENT hannoeru
FAQs
UnoCSS transformer for `@apply` directive
We found that @unocss/transformer-directives demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.