rinss v4.0.8

Rinss: CSS-in-JS library that simplifies complex styles

Rinss is a tiny library (7.27KB gzipped) that automatically prefixes your styles for browsers with market shares larger than 0.1% (down to IE8). In addition, it supports the following tricks:

inline animations

{
    '.test0': {
        width: { from: 100, to: 200 }
    },
    '.test1': {
        background: { '0%': 'red', '50%': 'green', '100%': 'blue' }
    },
    '.test2': {
        height: {
            from: 100,
            to: 200,
            duration: 1000,
            delay: 100,
            easing: 'ease',
            count: 1,
            direction: 'reverse',
            fill: 'both', 
            state: 'running'
        }
    }
}

compiles to

@keyframes rinss-keyframes-0-0 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}
.test0 {
    animation: rinss-keyframes-0-0 350ms both;
}
@keyframes rinss-keyframes-0-1 {
    0% {
        background: red;
    }
    50% {
        background: green;
    }
    100% {
        background: blue;
    }
}
.test1 {
    animation: rinss-keyframes-0-1 350ms both;
}
@keyframes rinss-keyframes-0-2 {
    0% {
        height: 100px;
    }
    100% {
        height: 200px;
    }
}
.test2 {
    animation: rinss-keyframes-0-2 1000ms 100ms ease 1 reverse both running;
}

inline transitions

{
    '.test0': {
        width: { to: 200 }
    },
    '.test1': {
        height: { to: 200, duration: 1000, delay: 100, easing: 'ease' }
    }
}

compiles to

.test0 {
    width: 200px;
    transition: width 350ms;
}
.test1 {
    height: 200px;
    transition: height 1000ms 100ms ease;
}

Independent transforms (CSS Transforms Level 2)

{
    '.test0': {
        translateX: 100,
        scale: 2,
        rotate: 45
    },
    '.test1': {
        translateX: { from: 0, to: 100 },
        scale: 2,
        rotate: 45
    }
}

compiles to

.test0 {
    transform: translateX(100px) scale(2) rotate(45deg);
}
.test1 {
    animation: rinss-keyframes-0-0 350ms both;
}
@keyframes rinss-keyframes-0-0 {
    0% {
        transform: translateX(0px) scale(2) rotate(45deg);
    }
    100% {
        transform: translateX(100px) scale(2) rotate(45deg);
    }
}

scoped media queries

{
    '.test0': {
        width: 200,
        '@media (max-width: 600px)': {
            width: 100
        }
    },
    '.test1': {
        background: 'red',
        '@media (max-width: 600px)': {
            background: 'blue'
        }
    }
}

compiles to

.test0 {
    width: 200px;
}
.test1 {
    background: red;
}
@media (max-width: 600px) {
    .test0 {
        width: 100px;
    }
    .test1 {
        background: blue;
    }
}

nested selectors

{
    '.test0': {
        width: 100,
        '.test1': {
            height: 100,
            ':hover': {
                height: { to: 300 }
            },
            '@media (max-width: 600px)': {
                height: 200
            }
        }
    }
}

compiles to

.test0 {
    width: 100px;
}
.test0 .test1 {
    height: 100px;
}
.test0 .test1:hover {
    height: 300px;
    transition: height 350ms;
}
@media (max-width: 600px) {
    .test0 .test1 {
        height: 200px;
    }
}

Example

import rinss from 'rinss';

const classes = rinss.create({
    button: {
        fontSize: 12,
        ':hover': {
            background: 'blue'
        }
    },
    ctaButton: {
        extend: 'button',
        ':hover': {
            background: 'green'
        }
    },
    '@media (min-width: 1024px)': {
        button: {
            width: 200
        }
    }
});

document.body.innerHTML = `
  <button class="${ classes.button }">Button</button>
  <button class="${ classes.ctaButton }">CTA Button</button>
`