// reproduce sass darken/lighten/fade function syntax on top of
// postcss-color-function (https://github.com/postcss/postcss-color-function) via 
// postcss-functions https://github.com/andyjansson/postcss-functions
// https://github.com/jonathantneal/precss/issues/38

// postcss-sass-colors.js
const colorFn = require('css-color-function')

function applyFn(value, fn, frac) {
    return colorFn.convert('color(' + value + ' ' + fn + '(' + frac + '))')
}

module.exports = {
    functions: {
        darken(value, frac) {
            return applyFn(value, 'shade', frac)
        },
        lighten(value, frac) {
            return applyFn(value, 'tint', frac)
        },
        fade(value, frac) {
            return applyFn(value, 'a', frac)
        }
    }
}


// webpack.config.js
...
loader: 'postcss-loader',
options: {
   plugins: [
     ...
     require('precss'),
     require('postcss-color-function'),
     require('postcss-functions')(require('./postcss-sass-colors'))
   ]
}