Styled/css library designed for Voby
- styled - Convert inline css style to class and update <style></style> elements.
- css - css style in style attribute.
- tw - tailwindCss style
- keyframes - Convert inline keyframes to class and update <style></style> elements.
- Tailwind CSS
This library inspired by styled-component, @emotion and supoort Tailwind Css
pnpm add woby-styledConvert inline css style to class and update <style></style> elements.
@returns hashed CSS class name
const color = ${'red'}
<div class={styled`color:${color};`}></div>Output:
<head>
<style>
.hash-name {
color:red;
}
</style>
<head>
<body>
<div class='hash-name'></div>
</body>Updating <style> in head and prepend className into ND component.
const ND = cls('div')`color:${color};`Note: styled method apply to class or className attribute
Convert inline css style to HTMLElement style string.
const color = ${'red'}
<div style={css`color:${color};`}></div>Output:
<div style='color:red;'></div>const ND = css('div')`color:blue;`Output:
<ND>blue color text here in a div container</ND>Note: css method apply to style attribute Only string styles css is supported to reduce libarary size. Object bases css (CSSProperties) may or may not be implemented.
Inline tailwind css style to element class
const color = ${'text-[red]'}
<div class={tw`absolute font-bold ${color}`}></div>Output:
<div class='absolute font-bold text-red'></div>const ND = tw('div')`text-red`Prepend 'text-red' as className into ND component.
Convert inline keyframes to class and update <style></style> element
Should work together with css()/styled() not tw()
const className = keyframes`
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}`Output:
<head>
<style>
keyframes hash-name {
from {
transform: scale(0) rotate(45deg);
opacity: 0;
}
to {
transform: scale(1) rotate(45deg);
opacity: 1;
}
}
</style>
<head>
<body>
<div style='animation: hash-name 1s'></div>
</body>MIT