Skip to content

Instantly share code, notes, and snippets.

@ahamid
Created September 18, 2019 17:26
Show Gist options
  • Save ahamid/a85f8741332ccce0485df33dc7610ffc to your computer and use it in GitHub Desktop.
Save ahamid/a85f8741332ccce0485df33dc7610ffc to your computer and use it in GitHub Desktop.
implement sass color functions on top of postcss-color-function/postcss-functions
// 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'))
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment