Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@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
The npm package @unocss/transformer-directives receives a total of 174,384 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.