@exah/prop-styles-system

💔 prop-styles-system (WIP)

Props based system for styled components (glamorous, emotion)

Install

$ yarn add @exah/prop-styles-system

Usage

1. Create prop styles

import { propStylesSystem, sizeProp } from '@exah/prop-styles-system' 

const helperProps = propStylesSystem({
  ht: sizeProp('height'),
  wd: sizeProp('width'),
  hide: { display: 'none' }
})

1. Add to styled component

import styled from 'react-emotion'
import { helperProps } from './props'

const Box = styled.div(helperProps)

1. Add css with props (+ change on values on mobile and tablet)

import { ThemeProvider } from 'emotion-theming'
import { createTheme } from '@exah/prop-styles-system' 

const theme = createTheme({
  media: {
    T: '(min-width: 601px) and (max-width: 1024px)',
    M: '(max-width: 600px)'
  }
})

<ThemeProvider theme={theme}>
  <Box ht={(1 / 2)} htT={300} wdT='100%' hideM />
</ThemeProvider>

1. Expected output

.css-hash {
  height: 50%;
  @media (min-width: 601px) and (max-width: 1024px) {
    height: 300px;
    width: 100%;
  }
  @media (max-width: 600px) {
    display: none;
  }
}

---

MIT © John Grishin

Changelog

0.1.1 - 2018-06-05

Fixed

• c4fa072 🚑 Fix changed result with onMedia style