Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@unocss/extractor-arbitrary-variants
Advanced tools
@unocss/extractor-arbitrary-variants is a package designed to work with UnoCSS, a utility-first CSS framework. This package allows you to extract and apply arbitrary variants to your CSS classes, enabling more dynamic and flexible styling options.
Arbitrary Variants Extraction
This feature allows you to extract arbitrary variants from a given string. In this example, the 'hover:bg-red-500' variant is extracted and logged.
import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
const variants = extractorArbitraryVariants('hover:bg-red-500');
console.log(variants); // Output: ['hover:bg-red-500']
Integration with UnoCSS
This feature demonstrates how to integrate the arbitrary variants extractor with UnoCSS. By adding the extractor to the UnoCSS configuration, you can enable the use of arbitrary variants in your project.
import { defineConfig } from 'unocss';
import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants';
export default defineConfig({
extractors: [
extractorArbitraryVariants(),
],
});
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs. While it does not have a direct equivalent to @unocss/extractor-arbitrary-variants, it offers a similar approach to styling with utility classes and supports custom variants through its configuration.
PostCSS is a tool for transforming CSS with JavaScript plugins. It can be used to create custom plugins that achieve similar functionality to @unocss/extractor-arbitrary-variants, such as extracting and applying custom variants. However, it requires more setup and custom plugin development.
Styled-components is a library for React and React Native that allows you to use component-level styles in your application. While it does not provide the same utility-first approach as @unocss/extractor-arbitrary-variants, it offers a way to create dynamic and reusable styles using JavaScript.
Exactor to support arbitrary variants for utilities.
Please refer to the documentation.
MIT License © 2022-PRESENT Anthony Fu
FAQs
Extractor arbitrary variants for utilities
The npm package @unocss/extractor-arbitrary-variants receives a total of 133,767 weekly downloads. As such, @unocss/extractor-arbitrary-variants popularity was classified as popular.
We found that @unocss/extractor-arbitrary-variants 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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
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.