Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@exah/prop-styles-system

exah49MITdeprecated1.2.0

This package has been renamed to 'pss'. Please install 'pss' instead

Prop styles system for styled components

readme

prop-styles-system

Design system utils for CSS-in-JS libraries

  • <input checked="" disabled="" type="checkbox"> Support emotion, styled-components and glamorous
  • <input checked="" disabled="" type="checkbox"> All styles are responsive by default
  • <input checked="" disabled="" type="checkbox"> Customizable

📦 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

Edit prop-styles-system-demo-1

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'
  },
  palette: {
    default: {
      bg: '#ffffff',
      fg: '#000000'
    },
    inverted: {
      bg: '#000000',
      fg: '#ffffff'
    }
  }
})

<ThemeProvider theme={theme}>
  <Box bg="inverted" ht> // css-0
    <Box maxWd="site" mgx="auto" pdx> // css-1
      <Box tm wd={1 / 4} minWd="card" minWdM> // css-2
        <figure>
          <img src="/pic.jpg" alt="" />
          <figcaption>
            <Box pdx pdy={2}> // css-3
              <Box mgb> // css-4
                <h3>
                  Title
                </h3>
              </Box>
              <Box mgt> // css-5
                <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>
            </Box>
          </figcaption>
        </figure>
      </Box>
    </Box>
  </Box>
</ThemeProvider>

CSS-in-JS result:


.css-0 {
  background-color: #000000;
}

.css-1 {
  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 {
  background-color: #ffffff;
  color: #000000;
  width: 25%;
  min-width: 300px;

  @media (max-width: 600px) { 
    min-width: 100%;
  }
}

.css-3 {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 32px;
  padding-bottom: 32px;

  @media (max-width: 600px) {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

.css-4 {
  margin-bottom: 16px;

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

.css-5 {
  margin-top: 16px;

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

Sites

Packages

  • defaults.css — CSS reset
  • styled-system — "Design system utilities for styled-components and other css-in-js libraries." Similiar project and probably better.
  • prop-styles — "Utility to create flexible React components which accept props to enable/disable certain styles."
  • polished — "A lightweight toolset for writing styles in JavaScript"

MIT © John Grishin

changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

Generated by auto-changelog.

1.2.0 - 2018-07-25

Added

  • ✨ Add propStylesInTheme a25bdb3

Changed

  • 💥 Change everyMedia signature (internal) af5ad5d

Improved

  • ♻️ Restructure utils/* import due to flow re-export bug d90ae11
  • ♻️ Improve mapObj a8dd441
  • ♻️ Remove units from 0 in sizes 6372b74

Docs & Tests

  • 📝 Add propStylesInTheme docs 8528e61

1.1.0 - 2018-07-19

Added

  • ✨ Add ability to disable media props 6b0429b

1.0.2 - 2018-07-18

Fixed

  • 🚑 Fix converting negative numbers to pixels c44104c

Docs & Tests

1.0.1 - 2018-07-17

Improved

  • ♻️ Use defaultTheme inside getters 0efde90

Docs & Tests

  • ✅ Basic test with emotion 9f1510d
  • ✅ Basic test with styled-components 111ff7d
  • 📝 Update README 094b091

1.0.0 - 2018-07-16

Added

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

Changed

  • 💥 Add px to sizeProp result by default 93e2bb6
  • 💥 Add 'px' to space result 51fe6af
  • 🔥 Remove TEXT_STYLE_KEY from constants e0ceadc
  • 🔥 Temporary remove textStyle af63a8d

Improved

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

Docs & Tests

  • 📝 Add createSpace props and styles docs c7f49cb
  • 📝 Add sizes prop styles docs a2f19f2
  • 📝 Add propSelector, combineSelectors docs 9294e3d
  • 📝 Update README ee40329
  • 📝 Update createSpaceStyle docs 2908a12
  • ✅ Add themeSelector tests d328f68

0.2.0 - 2018-06-15

Added

Changed

  • 💥 Remove style label option from propStylesSystem befa211
  • 💥 Remove themeDefaultMediaKey use DEFAULT_KEY const 7444bd2

Improved

  • ♻️ Convert SHORT_DIRECTIONS values to array b7d37b3

Dependencies

  • ➖ Remove ramda from deps 79f9a35

Docs & Tests

0.1.1 - 2018-06-05

Fixed

  • 🚑 Fix changed result with onMedia style c4fa072

0.1.0 - 2018-06-05

Merged

  • 📝 Flow types, Docs generation #1

Improved

  • ♻️ Rewrite mediaPropStyles → propStylesSystem 8ee44d2

Dependencies

Docs & Tests

0.0.2 - 2018-05-28

Added

  • ✨ Support customCssValue in colorProp 7651917
  • ✨ Export getters and helpers with module cd98701
  • ✨ Pass props to style in everyMedia a52e73c

Changed

Fixed

  • 🚑 Fix boolean space prop value 5dee9e2
  • 🚑 Fix default borderColor 38a0e38

0.0.1 - 2018-05-28

Added

Changed

  • 🔥 Remove unused isPlainObj function 4b54d22
  • 🔥 Remove default theme 1a0a82d
  • 🔥 Remove ensureStyleObj fn 6bc3588
  • 🔥 Cleanup old files 6dddf09

Improved

  • ♻️ Rewrite space, sizes test, Fix bugs 5d6d997
  • ♻️ Add constants for theme keys d604420
  • ♻️ Simplify function names fc0bfe6
  • ♻️ Support arrays in props styles maps values 6ab07f2

Fixed

  • 🚑 Fix onMedia arguments style 0f9e108

Docs & Tests

  • ✅ Replace snapshot tests with deep equal 4ce04d4