design.js

const gr8 = require('gr8')
const recsst = require('recsst')
const lilcss = require('lilcss')

const colors = {
  white: '#fff',
  black: '#000',
  grey: '#ccc'
}

const gr8Colors = {
  prop: 'color',
  prefix: 'c',
  hyphenate: true,
  vals: colors
}

const gr8BgColors = {
  prop: 'background-color',
  prefix: 'bg',
  hyphenate: true,
  vals: colors
}

const margins = {
  prop: 'margin',
  prefix: 'mx',
  vals: {
    'a': 'auto'
  }
}

const gr8css = gr8({
  breakpoints: {
    lrg: '(min-width: 1200px)',
    md: '(max-width: 768px)',
    sm: '(max-width: 500px)'
  },
  fontSize: [{ 1: 1.25 }],
  spacing: [1, 1.5, 2, 2.5, 3, 4, 5, 'auto'],
  responsive: true,
  utils: [
    gr8BgColors,
    gr8Colors,
    margins
  ]
})

const custom = `
  html {
    color: red;
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings:"kern" 1;
    -ms-font-feature-settings:"kern" 1;
    -o-font-feature-settings:"kern" 1;
    -webkit-font-feature-settings:"kern" 1;
    font-feature-settings:"kern" 1;
    font-kerning: normal;
  }
`

const lilsrc = [
  'src/*.js'
]

const lilopts = {
  ignore: ['psa', 'psr', 't0', 'b0', 'l0', 'r0', 'h100', 'w100', 'curp']
}

const lilgr8 = lilcss(gr8css.toString(), lilsrc, lilopts)

const built = [
  recsst.toString(),
//  lilgr8.toString(),
  gr8css.toString(),
  custom
]

module.exports = built