![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@unocss/transformer-directives
Advanced tools
Package description
@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.
Readme
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 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 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
Unknown package
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 2 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.