Vars in custom-media not resolved

[VinSpee]

INPUT:

$palm : (min-width: var(--ms6));
@custom-media --palm (min-width: $palm);

@media (--palm) {
    html {
         background: red !important;
    }
  }

OUTPUT:

@media (min-width: $palm) {
    html {
         background: red !important;
    }
  }

I would expect that this variable is resolved. my plugin order:

    .pipe(postcss([
      inline({
        path: ['./app/styles/']
      }),
      nested,
      simpleVars(),
      customProperties(),
      customMedia(),
      calc(),
      gray(),
      colorHexAlpha(),
      colorFunction(),
      fontVariant(),
      autoprefixer({ browsers: 'last 2 versions' })
    ]))

[ai]

Fixed 21a4d960f0615720ab0427310d19d6db540aace8

[VinSpee]

thanks @ai. What's your NPM patch release cycle like?

[ai]

Of course, I am waiting for Travis CI finish :).

[ai]

Released in 0.2.4.

[VinSpee]

still having this issue after updating to v0.2.4.

 $ npm list --depth=0 | ag postcss-simple-vars
├── postcss-simple-vars@0.2.4

CONFIG:

    .pipe(postcss([
      inline({
        path: ['./app/styles/']
      }),
      simpleVars(),
      nested,
      customProperties(),
      customMedia(),
      calc(),
      gray(),
      colorHexAlpha(),
      colorFunction(),
      fontVariant(),
      autoprefixer({ browsers: 'last 2 versions' })
    ]))

INPUT:

$palm : (min-width: var(--ms6));
$lap  : (min-width: var(--ms7));
$desk : (min-width: var(--ms8));
$wall : (min-width: var(--ms9));

@custom-media --palm $palm;
@custom-media --lap  $lap;
@custom-media --desk $desk;
@custom-media --wall $wall;

.🐜--mqs {
  background: lime !important;
  @media (--palm) {
    background: red !important;
  }
  @media (--lap) {
    background: blue !important;
  }
  @media (--desk) {
    background: pink !important;
  }
  @media (--wall) {
    background: yellow !important;
  }
}

OUTPUT:

.🐜--mqs {
  background: lime !important;
  @media (--palm) {
    background: red !important;
  }
  @media (--lap) {
    background: blue !important;
  }
  @media (--desk) {
    background: pink !important;
  }
  @media (--wall) {
    background: yellow !important;
  }
}

Any Ideas?

[ai]

You have some problem with CSS processing. Simple vars plugin removes any variables from output. Custom media plugin removes @custom-media at-rules. If they are still in output, this plugin was no be runned.

[VinSpee]

I'm sorry, my mistake. The @custom-media declarations aren't in the output. I updated my comment to fix that - the "output" is now what is actually compiled. As you can see, it is still not correct. I'm fairly certain this is not a problem with my processing. I have simpleVars listed before customMedia.

[VinSpee]

It is a problem with my processing order. thank you!

[VinSpee]

for anyone having issues that may stumble upon this, I needed this order:

customProperties(),
calc(),
simpleVars(),
customMedia()