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 = styled('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.
When using components created with tw() or styled(), you can add additional styling through two different props:
-
clsprop: Primary classes that take precedence over default stylesconst Button = tw('button')`bg-blue-500 text-white` <Button cls="bg-red-500">Red Button</Button> // Result: class="bg-red-500 text-white" (red background takes precedence)
-
classprop: Additional classes that extend the default stylesconst Button = tw('button')`bg-blue-500 text-white` <Button class="px-4 py-2">Blue Button with padding</Button> // Result: class="bg-blue-500 text-white px-4 py-2" (styles are combined)
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