Compatibility with other plugins + order of execution.

[mikemcguire]

I'm not quite sure what the problem I am having is, but let me explain my setup and you might be able to provide some insight into why Im experiencing this strange behavior.

I'm using the mixins plugin and the variables plugin. I have colorFunction() at the bottom of my postcss processors.

One of my color variables:

$purple:#852e73;

My mixin

@define-mixin button $color {
    &:hover {
        box-shadow: 0 0 0 3px $color,
        inset 0 0 0 3px $white;
        color: #fff;
    }

    &:active {
       background:color($color blackness(50%));
    }
}

Calling the mixin

@mixin button $purple;

When I run my gulp task I get this error

Error: /assets/src/css/utility/mixins.css:122:9: Unable to parse color from string "$purple"

Why this is weird - I'm runnning my color function at the end of my postcss processors so it shouldn't even see the string "$purple"

gulp.task('css', function () {
    var postcss         = require('gulp-postcss')
    var sourcemaps      = require('gulp-sourcemaps')
    var nano            = require('gulp-cssnano')
    var colorFunction   = require("postcss-color-function")

    return gulp.src(['./assets/src/css/**/*.css', './assets/src/scss/**/*.scss'])
        .pipe( sourcemaps.init() )
        .pipe( postcss([
            require("postcss-import"),
            require('postcss-mixins'),
            require('postcss-nested'),
            require('postcss-simple-vars')({ silent: true }),
            require('postcss-font-magician')({ hosted: 'assets/build/fonts/' }),
            require('lost'),
            require('autoprefixer'),
            colorFunction(),
        ]))
        .pipe( nano() )
        .pipe( sourcemaps.write('./assets/build/css/') )
        .pipe( gulp.dest('./assets/build/css/') );
});

Even though my gulp task errors out the mixin runs as expected. I can see the correct active state on my button with the correct color manipulation.

If I keep everything as is but remove colorFunction() from my gulp task I can see this as my active state background property:

background:color(#852e73 blackness(50%));

It appears that the colorfunction is somehow finding a way to execute before my other postcss plugins after initially executing in the correct order. Any ideas? Let me know if I can provide more info

Error: assets/src/css/utility/mixins.css:122:9: Unable to parse color from string "$purple"
    at assets/src/css/utility/mixins.css:122:9
    at Object.Color (node_modules/postcss-color-function/node_modules/css-color-function/node_modules/color/index.js:33:10)
    at toRGB (node_modules/postcss-color-function/node_modules/css-color-function/lib/convert.js:39:15)
    at Object.convert (node_modules/postcss-color-function/node_modules/css-color-function/lib/convert.js:28:10)
    at node_modules/postcss-color-function/index.js:38:26
    at walk (node_modules/postcss-color-function/node_modules/postcss-value-parser/lib/walk.js:7:22)
    at ValueParser.walk (node_modules/postcss-color-function/node_modules/postcss-value-parser/lib/index.js:18:5)
    at transformColor (node_modules/postcss-color-function/index.js:33:25)
    at transformColorValue (node_modules/postcss-color-function/index.js:20:16)
    at Object.tryCatch [as try] (node_modules/postcss-color-function/node_modules/postcss-message-helpers/index.js:53:12)
    at transformDecl (node_modules/postcss-color-function/index.js:19:31)
    at node_modules/gulp-postcss/node_modules/postcss/lib/container.js:86:28
    at node_modules/postcss-import/node_modules/postcss/lib/container.js:73:26
    at Rule.each (node_modules/postcss-import/node_modules/postcss/lib/container.js:60:22)
    at Rule.walk (node_modules/postcss-import/node_modules/postcss/lib/container.js:72:21)
    at node_modules/gulp-postcss/node_modules/postcss/lib/container.js:75:32
    at Root.each (node_modules/gulp-postcss/node_modules/postcss/lib/container.js:60:22)

[MoOx]

It appears that the colorfunction is somehow finding a way to execute before my other postcss plugins after initially executing in the correct order. Any ideas?

This is not possible. Is the code of the mixin itself removed? Maybe color-function tries to transform the mixin definition.

[mikemcguire]

I don't believe that would be the case as it's hanging up on the "$purple" keyword which doesn't appear in the mixin definition itself. Let me get a repo together isolating the issue and I'll send that over that way we can replicate and test against.

[MoOx]

Isolated bug appreciated. Feel free to push a PR with a failing test!

[luisrudge]

I see this as well. This example doesn't work:

@value colors: "colors.css";
@value primary from colors;

.root {
  color: color(primary, l(30%));
}

I get this error: Unable to parse color from string "primary,"

[MoOx]

@luisrudge this is different. You are using css modules syntax, which is converted AFTER postcss-loader stuff. So when postcss-loader does its job, css modules have not made their transformation. css-loader should offer a way to share the postcss instance, that would offer us a way to handle those issue, but they don't want to make postcss public so they can do "whatever they want under the hood".

[luisrudge]

so, what's the alternative here?

[MoOx]

use "standard" stuff like potcss-custom-properties, or non standard like postcss-simple-vars

[mikemcguire]

Sorry for the delay on this test case. I'm in crunch mode with some projects at work. I'll hopefully have something in the next week or so.

[cmnstmntmn]

hei there,

i'm also having an issue while using postcss-style-guide.

Unable to parse color from string "var(--color-bg)"

this is the postcss config

postcss([  
      require('postcss-import'),
      require('postcss-custom-properties')({preserve: true}),
      require('autoprefixer')({ browsers: ['last 3 versions', '> 5%', 'ie >= 10'] }),      
      require('postcss-color-function'),
      styleGuide({
        project: 'My Project',
        dest: 'styleguide/app.html',
        showCode: true
      }),                          
      require('postcss-atroot'),
      require('postcss-mixins'),
      require('postcss-simple-vars'),                                
      require('postcss-custom-media'),  
      require('postcss-nested'),
      require('postcss-typescale'),
      require('postcss-button'),      
      require('cssnano')({
        discardComments: {
          removeAll: false
        }
      })     
  ])
  .process(fs.readFileSync('resources/games/css/app.css', 'utf8'), { from: "resources/games/css/app.css" })
  .then(result => purify(content, result.css, options))
process.on('exit', () => console.timeEnd('build'))

[MoOx]

The problem is here: "preserve: true" of custom-properties.

[cmnstmntmn]

can't figure the problem; if i remove that, there's no output

[mikemcguire]

Sorry for the lack of isolated bug. Got way busy with work after my original comments. Hopefully coming soon?

[MoOx]

Problem should have been fixed with latest change in master.

[MoOx]

Reopen if not.