Doesn't work with postcss-color-functions

[eduarddotgg]

It would be great if postcss-map worked with postcss-color-functions. Usage of postcss-color-functions is

color: color(#fff lightness(50%));

but if i use like so

color: color(map(white) lightness(50%));

it doesn't work. it troughs an error Unable to parse color from string "map(white)".

[pascalduez]

What's the plugins order in your process ? Maybe try to include postcss-map before postcss -color-functions ?

[eduarddotgg]

i did so but still doesn't work.

var autoprefixer      = require('autoprefixer');
var precss            = require('precss');
var pxtorem           = require('postcss-pxtorem');
var modularscale      = require('postcss-modular-scale');
var colorFunction     = require("postcss-color-function");
var customProperties  = require("postcss-custom-properties");
var minmax            = require('postcss-media-minmax');
var customMedia       = require("postcss-custom-media");
var grid              = require('postcss-grid');
var map               = require('postcss-map');
var calc              = require("postcss-math");
var cssnano           = require('cssnano');

var cssMaps = {
    basePath: path.resolve(__dirname, 'app', 'assets', 'css'),
    maps: [ 'settings.yml' ]
}

...
var config = {
...
postcss: function () {
        var settingsPath = path.resolve(__dirname, 'app', 'assets', 'css', 'settings.yml');
        this.addDependency(settingsPath);
        return [
            precss({
                onImport: function (files) {
                    files.forEach(this.addDependency);
                }.bind(this)
            }),
            modularscale,
            grid(gridOptions), 
            map(cssMaps), 
            customMedia, 
            customProperties, 
            calc, 
            minmax, 
            autoprefixer, 
            pxtorem(pxtoremWhiteList), 
            colorFunction,
            cssnano
        ];
    },
...

[pascalduez]

I ran a quick test, and it seem to be working fine. Maybe try to investigate through your plugins stack ?

# config.yml
foo: '#fff'

'use strict';

var postcss = require('postcss');
var map = require('./');
var colorFunction = require('postcss-color-function');

var opts = {
  basePath: 'test/fixture',
  maps: [ 'config.yml' ],
};

var input = '.foo { color: color(map(foo) lightness(50%)); }';
var css = postcss([ map(opts), colorFunction ]).process(input).css;
console.log(css);

.foo { color: rgb(128, 128, 128); }

[pascalduez]

Closing, could not reproduce.