akameco / styled-style

css modules like styled-components

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>
)

API

styledStyle(styles: {[key: string]: string})

Examples

akameco/styled-style-example

Contributors

Thanks goes to these wonderful people (emoji key):

akameco 💻 📖 ⚠️ 🚇

純 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © akameco

styled-style's Issues

[feature request] TypeScriptの型定義ファイルがほしい

Do you want to request a feature or report a bug?: feature

What is the current behavior?: TypeScript用の型定義がない(ため、tsconfig.jsonでnoImplictitAnyをtrueにしているとimport文でimportできなかったりいろいろ不便)。

What is the expected behavior?: TypeScript用の型定義ファイルが存在し、tsconfig.jsonでnoImplictitAnyをtrueにしている環境でもimport文でimportできるようになる

Suggested solution: 🤔

ref: https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.