ook/index.js at master · UniversalStandard/ook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React from 'react'
import knownCssProperties from 'known-css-properties'
import styled from 'styled-components'
import mqpacker from 'mqpacker'
const kebabCase = require('lodash/kebabCase')

const postcss = require('postcss')

// Ook! Ook! 🍌

const OokContext = React.createContext()
OokContext.displayName = 'Ook'

export const OokConfig = ({
  breakpoints = {},
  cssProperties = knownCssProperties.all,
  children,
}) => (
  <OokContext.Provider value={{ breakpoints, cssProperties }}>
    <OokContext.Consumer>
      {ctx => {
        return children
      }}
    </OokContext.Consumer>
  </OokContext.Provider>
)

const states = ['active', 'hover', 'focus', 'visited']
const notValidCSSProperties = ['children', 'el', 'src']

const Ook = ({ children, el = 'div', ...props }) => {
  const breakpoints = OokContext['1']
    ? OokContext['1']?.breakpoints
    : OokContext?.Consumer?._currentValue?.breakpoints
    ? OokContext.Consumer._currentValue.breakpoints
    : {}

  const cssProperties = OokContext['1']
    ? OokContext['1']?.cssProperties
    : OokContext?.Consumer?._currentValue?.cssProperties
    ? OokContext.Consumer._currentValue.cssProperties
    : []

  const sortedBpNamesBySize = Object.keys(breakpoints).sort(
    (a, b) => parseInt(breakpoints[a], 10) - parseInt(breakpoints[b], 10),
  )

  const jsonifiedProps = props

  const styledString = Object.entries(props).reduce((acc, [key, val]) => {
    if (notValidCSSProperties.includes(key)) return acc

    let prefixed = false
    if (key.match(/^_/)) {
      prefixed = true
    }
    const keb = prefixed ? `-${kebabCase(key)}` : kebabCase(key)

    // Pseudo classes
    if (states.includes(key) || key === 'after' || key === 'before') {
      Object.entries(val).forEach(([cssProp, _v]) => {
        if (cssProp === 'content' && !_v.trim()) {
          _v = "''"
        }

        const _key =
          key === 'after' || key === 'before' ? `&::${key}` : `&:${key}`

        const keb = prefixed ? `-${kebabCase(cssProp)}` : kebabCase(cssProp)

        if (cssProperties.includes(keb)) {
          // TODO: A bunch of this is duplicated below. Should probably be combined into a function.
          if (typeof _v === 'object') {
            Object.entries(_v).forEach(([bp, v]) => {
              if (bp === sortedBpNamesBySize[0]) {
                acc += `${_key} { ${keb}: ${v}; }`
              } else {
                acc += `@media (min-width: ${
                  breakpoints[bp]
                }) { ${_key} { ${keb}: ${v}; } }`
              }
            })
          }

          if (typeof _v === 'string') {
            acc += `${_key} { ${keb}: ${_v}; }`
          }
        }
      })
    }

    // Generic css and media queries
    if (cssProperties.includes(keb)) {
      if (typeof val === 'object') {
        jsonifiedProps[key] = JSON.stringify(val)

        // Overwrite global breakpoint rules
        Object.entries(val).forEach(([bp, v]) => {
          if (bp === sortedBpNamesBySize[0]) {
            acc += `${keb}: ${v};`
          } else {
            acc += `@media (min-width: ${breakpoints[bp]}) { ${keb}: ${v}; }`
          }
        })
      }

      if (typeof val === 'string') {
        acc += `${keb}: ${val};`
      }
    }

    return acc
  }, '')

  const S = styled(el)`
    ${mqpacker.pack(styledString).css}
  `

  return <S {...jsonifiedProps}>{children}</S>
}

export default Ook