st-jss
v1.0.5
Published
Nano library to work with CSS in TS
Downloads
15
Maintainers
Readme
This is an exremely tiny, yet powerful library for generation of CSS in TypeScript. st-jss
does include all special types like font-face, keyframes, @media
queries and :pseudo-selectors
.
- ✅ Implements a JSS-like API to work with CSS in TS
- ✅ Comes with namespace support
- ✅ Tiny:
591 bytes
(best, brotli) -781 bytes
(worst, umd, gz) - ✅ Zero dependencies
- ✅ First class TypeScript support
- ✅ 99% Unit Test coverage
This is how using st-jss
looks like:
import {Props, tsx, render} from "springtype";
import { jss } from 'st-jss';
export const MyStyledCmp = ({ children }: Props) => {
const [animationName, animationStyle] = jss.makeAnimation('myAnimation', {
'0%': { top: 0, left: 0, background: 'red' },
'25%': { top: 0, left: 100, background: 'blue' },
'50%': { top: 100, left: 100, background: 'yellow' },
'75%': { top: 100, left: 0, background: 'green' },
'100%': { top: 0, left: 0, background: 'red' },
});
const [classes, style] = jss.makeStyles({
container: {
// Normal jss
fontFamily: 'Nonito',
'@media (min-device-width: 800px)': {
paddingTop: 50,
flex: 1,
':hover': {
backgroundColor: 'red',
},
},
},
animation: {
paddingTop: 50,
animationName,
animationIterationCount: 'infinite',
animationDuration: '4s',
},
});
const onChangeStyleClick = () => {
console.log('ref?', style);
};
return (
<fragment>
{style}
{animationStyle}
<div className={classes.container}>{children}</div>
<div className={classes.animation} />
<button type="button" onClick={onChangeStyleClick}>
Change style
</button>
</fragment>
);
};
render(<MyStyledCmp />);
The following contract is made between the webapp and st-jss
:
export interface API {
classNamePrefix: string;
instanceCounter: number;
makeFont: (style: FontFaceProperties) => IVirtualNode;
makeAnimation: (animationName: string, style: KeyFrameProperties) => [string, IVirtualNode];
makeStyles: <T extends string = string>(classProperty: ClassProperty<T>) => [Record<T, string>, IVirtualNode];
}
Thank you so much for supporting us financially! 🙏🏻😎🥳👍
st-jss
is brought to you by:
Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md :tada: