Aphrodite-freestyle

A tool for writing style and media query more efficiently with Aphrodite

Feature

• Substate: support the substate nested in style:

item: {
    color: 'blue',
    selected: {
        color: 'red'
    }
}

• Standalone breakpoint definition: it can be used to convert into the styles Aphrodite need.

• Build-in global selector extension for supporting global style.

Install

npm install aphrodite-freestyle

Notice

• The name you defined for substate should not start with :, because it was used in pseudo-selector

• The def param in your style is required.

• The media name in your styles and breakpoints definition should be the same.

• The alias param's value is a abbreviation for writing the media name convinent, it use as param name in creatStyle function's return. So that I can write this way : css(dt.box) not css(desktop.box).

• Ensure writing param media and alias both in your breakpoints if you use alias.

Usage

1. Defined your breakpoint

//breakpoints.js
export default {
    
    mobile : '@media (max-width: 600px)',
    
    desktop : {media:'@media (min-width: 601px) and (max-width: 1200px)', alias:'dt'}
    
}

2. Design your styles

//styles.js
export default {
  def: {
      item: {
        color: 'green',
        selected: {
           color: 'yellow'
        }
      },
      box: {
          //this won't be work because of the breakpoint definition
          width: '600px'
      }
  },
  mobile: {
      box: {
          width: '400px',
      }
  },
  desktop : {
      box: {
          width: '800px',
          '*a': {
               color: 'orange'
          }
      }
  }
}

3. Import in

//App.js
import React, { Component } from 'react'
import {creatStyle, css} from 'aphrodite-freestyle'
import breakpoints from './breakpoints'
import styles from './styles'
 
class App extends Component{
   
  render() {
  
    let {def,mobile,dt} = creatStyle(styles, breakpoints)
    
    return (
      <div className={css(def.box,mobile.box,dt.box)}>
        <div className={css(def.item, this.props.activeItem == 'home' && def.item.selected)}>
            <a href="#">Home</a>
        </div>
      </div>
    )
  }
}
 
App.defaultProps = {
   activeItem: 'home'
}

API

/**
 * @description 
 * The convert function.
 * @param @required {object} styles: the style definition
 * @param @required {object} breakpoints: the breakpoint definition
 * @return {object} the converted styles, the param is alias in breakpoints if you use it.
 */
 creatStyle(styles, breakpoints)
 
 /**
 * @description 
 * Aphrodite origin function, but with some extensions.
 * @param @required {object} the same as aphrodite 
 * @return {object} the converted styles by aphrodite
 */
 css(...)

Changelog

0.0.3

• Created a global selector extension to support global style

0.0.2

• Support the substate nested in style
• change name aphrodite-breakpoint to aphrodite-freestyle

0.0.1

First version, support add media query prefix.