unomario
v0.3.1
Published
The lightweight helper for building UnoCSS dynamic rules
Downloads
9
Maintainers
Readme
UnoMario
UnoMario
is a lightweight library that combines custom CSS value handlers into the pipeline for processing strings and returning generated CSS styles. Compared to the built-in implementation, the library grants you complete control over every aspect of the process.
If you are willing to help, feel free to do your magic 🧙🏻♂️
Here are ongoing plans:
- [ ] Create a list of basic handlers;
- [ ] Replicate TailwindCSS preset using EM units.
Getting Started
To install the library running the following command:
npm i -D unomario @unocss/core
Create a set of handlers:
// handlers.ts
import type { UnoMapper } from 'unomario'
function auto(opts?: { skip?: boolean }): UnoMapper {
return val => !opts?.skip && val === 'auto' ? 'auto' : null
}
function bracket(): UnoMapper {
return val => val.startsWith('[') && val.endsWith(']') ? val.slice(1, -1) : null
}
Do magic and build DynamicRules
using your handlers created earlier
import { defineConfig } from 'unocss'
import { Mario } from 'unomario'
import { auto, bracket } from './handlers'
const sizeMap = {
h: 'height',
w: 'width',
}
export default defineConfig({
/**
* @example
* min-w-[44vw] → min-width: 44vw;
* h-auto → height: auto;
* max-w-auto → no styles, no selectors 🫢
*/
rules: [
[/^(min-|max-)(w|h)-(.+)$/, ([_, minmax = '', hw, size]) =>
Mario.of(`${minmax}${sizeMap[hw]}`, size)
.toStyles(
bracket(),
auto({ skip: minmax === 'max-' }) // max-width doesn't have the `auto` value
)
]
]
})