react-sc 🎨

A tiny library to create styled components, it's inspired by the great styled-components and styled-jsx. These two libraries use postcss to generate proper scoped CSS, react-sc use the new kid in town: stylis.

It's just a POC, it should be used with caution or not ...

Example

If you're using basic css you can replace styled-components import with react-sc

import React from 'react'
import styled from 'react-sc'
 
const blue = (opacity) => `rgba(63, 81, 181, ${opacity})`
 
const Test = styled.h1`
  cursor: pointer;
  user-select: none;
  color: ${blue(0.6)};
  padding: 20px;
  font-family: sans-serif;
  animation: appear 2s linear;
 
  @keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
  }
 
  &:hover {
    color: ${blue(0.8)};
  }
 
  &:active {
    color: ${blue(1)};
  }
`

Auto-prefixing

There is no built-in auto-prefixer bundled with react-sc, I advise you to use prefixfree (2.7kB gzipped) it will add only the needed prefixes for your browser.

stylis come with some prefixing but you can always use the good old prefixfree !

Support

Actual support is pretty basic. Currently you should be able to use every features of stylis

Comparison

Library	Size (gzipped)
styled-component	20 993 B
react-sc	4 362 B