Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@woby/styled) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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/styled

Usage

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