simple styled-components

styled.js

/*
 * Usages
 *
 * native tags
 * styled.div`color: red;`
 *
 * custom components
 * styled((props) => <div {...props} />)`color: red;`
 *
 */


const generateStylesheet = (strings, bubbles, props) => {
  const chunks = []
  let i = 0
  while (i < strings.length) {
    chunks.push(strings[i])
    chunks.push(typeof bubbles[i] === 'function' ? bubbles[i](props) : bubbles[i])
    i += 1
  }
  return chunks.join('')
}

const hashClassName = stylesheet => {
  return /* hash */
}

const make = key => {
  return (strings, ...bubbles) => {
    return (props) => {
      const stylesheet = generateStylesheet(strings, bubbles, props)
      const className = hashClassName(stylesheet)
      return React.createElement(key, {...props, className })
    }
  }
}

const styled = new Proxy(null, {
  get(_m, stringKey) {
    return make(stringKey)
  },
  apply(_, _, [componentType]) {
    return make(componentType)
  }
})

styled.ts

import styled, { StyledFunction } from "styled-components"

interface YourProps {
  invalid: boolean
}

const input: StyledFunction<YourProps & React.HTMLProps<HTMLInputElement>> = styled.input

const Input = input`
  border: ${p => p.invalid ? 'red' : 'blue'};
`