@exah/prop-styles-system

💔 prop-styles-system

Design system utils for CSS-in-JS libraries

📦 Install

$ yarn add @exah/prop-styles-system

📖 API

🤔 Why?

Prop What?

Prop Styles is when you can set CSS styles in runtime with component props.

For example if you want prop that hides element on mobile. Usually you will do something like this:

import styled from 'react-emotion'

// Add to component
const Box = styled.div((props) => props.hideOnMobile && {  
  '@media (max-width: 600px)': {
    display: 'none' 
  }
})

// Use prop
<Box hideOnMobile /> // @media (max-width: 600px) { display: none }

And in large scale project with many styles this is to verbose. With prop-styles-system you can add media queries to your theme and any created Prop Style than can be changed in specified media queries with special suffix.

import { createPropStyles, createTheme } from '@exah/prop-styles-system'

const myPropStyles = createPropStyles({
  hide: { display: 'none' },
  makeItRed: { backgroundColor: 'red' }
})

const myTheme = createTheme({
  media: {
    OnMobile: '(max-width: 600px)'
  }
})

import styled from 'react-emotion'
import { ThemeProvider } from 'emotion-theming'

const Box = styled.div(myPropStyles)

<ThemeProvider theme={myTheme}>
  <Box hideOnMobile makeItRed />
</ThemeProvider>

// background-color: red; 
// @media (max-width: 600px) { display: none }

More Useful Example

Add ready to use

• space — for setting margin, padding
• sizes - for width, height, ...
• colors — for color, background-color

prop styles to your component.

import styled from 'react-emotion'
import { space, sizes, colors } from '@exah/prop-styles-system'

const Box = styled.div(
  space,
  sizes,
  colors
)

Use them in runtime:

<Box mgx /> // margin-left: 8px; margin-right: 8px
<Box wd={(1 / 2)} /> // width: 50%
<Box tm='inverted' /> // background-color: #000000; color: #ffffff
<Box wdM='300px' /> // @media (max-width: 600px) { width: 300px }

Provide custom theme:

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

const theme = createTheme({
  media: {
    M: '(max-width: 600px)'
  },
  space: {
    default: [ 0, 16, 32, 64, 128 ],
    M: [ 0, 8, 16, 32, 64 ]
  },
  size: {
    card: '300px',
    site: '1300px'
  }
})

<ThemeProvider theme={theme}>
  <Box tm maxWd='site' mgx='auto' pdx> // .css-1
    <Box minWd='card' wd={(1 / 4)}> // .css-2
      <figure>
        <img src="/pic.png" alt="" />
        <figcaption>
          <Box mgb> // .css-3
            <h3>Title</h3>
          </Box>
          <Box mgt> // .css-4
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu libero libero, sit amet commodo sem. Proin a quam vulputate enim consequat sollicitudin.</p>
          </Box>
        </figcaption>
      </figure>
    </Box>
  </Box>
</ThemeProvider>

CSS-in-JS result:

.css-1 {
  background-color: #ffffff;
  color: #000000;
  max-width: 1300px; 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 16px; 
  padding-right: 16px;
  
  @media (max-width: 600px) { 
    padding-left: 8px; 
    padding-right: 8px; 
  }
}

.css-2 {
  min-width: 300px; 
  width: 25%;
}

.css-3 {
  margin-bottom: 16px;
  
  @media (max-width: 600px) {
    margin-bottom: 8px;
  }
}

.css-4 {
  margin-top: 16px;
  
  @media (max-width: 600px) {
    margin-top: 8px;
  }
}

---

MIT © John Grishin

Changelog

1.0.0 - 2018-07-16

Changed

• 2a22cea 💥 Rename core modules and props → props-styles
• 93e2bb6 💥 Add px to sizeProp result by default
• 51fe6af 💥 Add 'px' to space result
• e0ceadc 🔥 Remove TEXT_STYLE_KEY from constants
• af63a8d 🔥 Temporary remove textStyle

Added

• 7affe84 ✨ Add cssProp prop style
• 7ded2a3 ✨ Add option to add px unit to sizeProp result
• 7ebea7d ✨ Add default theme to createPropStyles
• 7d59e82 ✨ Get value by key path in getColor

Improved

• d5d34ec ♻️ Improve colors prop styles, Add docs
• 7597f4f ♻️ Add space prop styles alias, update docs
• 03f87f5 ♻️ Update default theme
• c8f3cbf ♻️ Use fallbackTo in getters

Fixed

• 5af10dc 🚑 Fix fallback in path fn

Docs & Tests

• c7f49cb 📝 Add createSpace props and styles docs
• a2f19f2 📝 Add sizes prop styles docs
• 4f69d5a 📝 Update docs
• 9294e3d 📝 Add propSelector, combineSelectors docs
• 78ab0bb 📝 Update types
• ee40329 📝 Update README
• 2908a12 📝 Update createSpaceStyle docs
• a8b03f1 📝 Update documentation TOC
• d328f68 ✅ Add themeSelector tests