@booleon/modules
v3.0.0
Published
Booleon CSS modules
Downloads
38
Readme
Booleon modules are a pre-defined
entry of css with keys that can be static (string
) or dynamic (RegEx
).
Get Started
Instalation
npm i @booleon/modules
yarn add @booleon/modules
Examples
Key also can be Symbol
whose value will be instantiated as a new RegExp()
to be matched.
export const background = {
[sym<'bg_color_COLOR'>('bg_color_(.*)')]: (value: string) =>
`background-color:${handleColor(value)};`,
bg_img: (value: string) => `background-image:url(${value});`,
bg_transparent: () => 'background-color:transparent;',
bg_repeat: () => 'background-repeat:repeat;',
bg_norepeat: () => 'background-repeat:no-repeat;',
bg_auto: () => 'background-size:auto;',
bg_cover: () => 'background-size:cover;',
bg_contain: () => 'background-size:contain;',
bg_fixed: () => 'background-attachment:fixed;',
bg_local: () => 'background-attachment:local;',
bg_scroll: () => 'background-attachment:scroll;',
};
Available Modules
- animation
- background
- border
- container
- cursor
- filter
- flex
- font
- gradient
- grid
- outline
- shadow
- sizing
- spacing
- transform
- transition