@convoy/dapper


Dapper is a Javascript/TypeScript styling library (CSS-in-JS or CSS-in-TS). It features:
- Dynamic styles using modes, (i.e. in React, it styles based on props and state)
- TypeScript autocomplete and build-time checks

- Utilizes some of the best features of LESS/SASS CSS such as
- nested styles
- parent selectors
- CSS features such as
- media queries
- keyframes
- pseudo classes and psuedo elements
- auto-prefixing (for cross-browser compatibility)
- unitless values (use 5 instead of '5px')
- paddingHorizontal, paddingVertical, and same for margin
- Additional helpers to inject arbitrary CSS (great when styling 3rd party code)

Getting Started

npm install @convoy/dapper

TypeScript/Javascript

Most examples are shown in TypeScript, but dapper works great with Javascript. TypeScript provides autocompletion of your styles and at build time checks that those styles exist.

React usage

$3

``tsx
import * as dapper from '@convoy/dapper';

const STYLES = dapper.compile({
root: {
padding: 5,
},
});

export default class Button extends React.Component {
styles = dapper.reactTo(this, STYLES);

render() {
return (