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
directive
npm i -D @unocss/transformer-directives
// uno.config.js
import { defineConfig } from 'unocss'
import transformerDirective from '@unocss/transformer-directives'
export default defineConfig({
// ...
transformers: [
transformerDirective(),
],
})
.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;
}
Currently only
@apply
is supported.
To be compatible with vanilla CSS, you can use CSS Variables 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 prefix --at-
), can you configure it or disable it via:
transformerDirective({
varStyle: '--my-at-',
// or disable with:
// varStyle: false
})
MIT License © 2022-PRESENT hannoeru
FAQs
UnoCSS transformer for `@apply` directive
The npm package @unocss/transformer-directives receives a total of 142,288 weekly downloads. As such, @unocss/transformer-directives popularity was classified as popular.
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.