all files / lib/utils/ build-rule.js

100% Statements 10/10
100% Branches 5/5
100% Functions 7/7
100% Lines 10/10
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                          13×                                                                                      
import prefix from 'inline-style-prefixer/static'
import buildDeclarations from './build-declarations'
import {isPseudoSelector, isMediaQuery} from './helpers'
 
/**
 * Build a css rule.
 * @param {string} selector - A class name.
 * @param {Object} declarations - CSS declarations.
 * @returns {string} formated css rule.
 * @example
 * // returns '.button{border-radius-2px;}'
 * buildDeclarations('button', {borderRadius:'2px'})
 */
export const buildRule = (selector, declarations, globalSelector = false) => {
  return `${globalSelector ? '' : '.'}${selector}{${buildDeclarations(prefix(declarations))}}`
}
 
/**
 * Build a css rule for pseudo selectors.
 * @param {string} selector - A class name.
 * @param {Object} declarations - CSS declarations.
 * @returns {string} formated css rule.
 * @example
 * // returns '.button:before{border-radius-2px;}'
 * buildDeclarations('button', {':before': {borderRadius:'2px'})
 */
export const buildPseudoRule = (
  selector,
  declarations,
  globalSelector = false
) => {
  return Object.keys(declarations)
    .filter(isPseudoSelector)
    .map(declaration =>
      buildRule(
        `${selector}${declaration}`,
        declarations[declaration],
        globalSelector
      )
    )
    .reduce((previous, current) => previous + current, '')
}
 
/**
 * Build a css rule for a media query.
 * @param {string} selector - A class name.
 * @param {Object} declarations - CSS declarations.
 * @returns {string} formated css rule.
 * @example
 * // returns @media (min-width: 700px){app{color:blue;}}
 * buildMediaQueryRule('app', {'@media (min-width: 700px)': {color: 'blue'}})
 */
export const buildMediaQueryRule = (
  selector,
  declarations,
  globalSelector = false
) => {
  return Object.keys(declarations)
    .filter(isMediaQuery)
    .map(
      declaration =>
        `${declaration}{${buildRule(selector, declarations[declaration], globalSelector)}}`
    )
    .reduce((previous, current) => previous + current, '')
}