Styled-style NPM

styled-style

css modules like styled-components

Why?

styled-components are wonderful!!! However, if there are many existing css, it can not be transferred immediately. styled-style can be transferred step by step. You can use readable components immediately.

Install

$ yarn add styled-style

Usage

styles.module.css

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;
}

.primary {
  background: palevioletred;
  color: white;
}

import { styledStyle } from 'styled-style'
import styles from './styles.module.css'

const { div, button } = styledStyle(styles)

const Center = div('center')
const Button = button('btn')
const PrimaryButton = button(['btn', 'primary'])

render(
  <Center>
    <Button>Normal Button</Button>
    <PrimaryButton>Primary Button</PrimaryButton>
  </Center>
)

Passed props

const Button = button(['btn', p => p.color === 'primary' && 'primary'])

render(
  <div>
    <Button>Normal Button</Button>
    <Button color="primary">Primary Button</Button>
  </div>
)