woby-styled
v1.0.12
Published
Styled/css library designed for Voby.
Downloads
158
Readme
woby-styled
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
Installation
NPM
pnpm add woby-styledUsage
Classed Styles - styled()
Convert 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
Stringed Styles - css()
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.
Tailwind Styles - tw()
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.
Keyframes - keyframes()
Convert inline keyframes to class and update 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>License
MIT