Systyle NPM | npm.io

2.4.1 • Published 6 years ago

Install

Weekly downloads

66

License

-

Repository

Last release

6 years ago

Systyle

A set of moulinette helpers to style components through their props.

Example: creating a styled system for hyperapp

import { h } from "hyperapp"
import { createStyled } from 'systyle'
import { cx, css as emotion } from 'emotion'

const hyperappBuilder = moulinette =>
  function Styled(props, children) {
    const {
      as: type, = 'div',
      css = [],
      className = '',
      ...props
    } = moulinette(props)

    return h(type, { ...props, className: cx(className, emotion(css)) }, children) />
  }

const Styled = createStyled(hyperappBuilder)

const App = props => (
  <Styled as="main" display="flex" flexDirection="column">
    <Styled as="h1">Hi</Styled>
    <Styled as="span">Some text</Styled>
  </Styled>
)

Using a styled component

See react-systyle documentation

kebab-case known-css-properties tslib

@infinitebrahmanuniverse/nolb-sys @everything-registry/sub-chunk-2868 react-systyle

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago