0.1.0 • Published 5 years ago
hyper-styled v0.1.0
hyper-styled
styled-components like styler for hyperapp.
it can be
define styled component.
const { h, app } = require("hyperapp"); const { styled } = require("hyper-styled"); const Styled = styled.div` font-size: 30px; `; app({}, {}, <Styled>Hello world</Styled>, document.body);
define attribute receiveable styled component.
// define const Colored = styled.div` color: ${({ color }) => color}; `; // use render(<Colored color="blue">Blue</Colored>);
&::before, &::after, &:hover, etc...
styled.div` &:before { content: "---"; } `;
- attribute type definition.
const Comp = styled.div<{ color: string }>` color: ${({ color }) => color}; `;
it can not be
@keyframes
const Comp = styled.div` animation: foo 1s; @keyframes foo { 0% { background-color: yellow; } 100% { background-color: green; } } `;