Variables in @media not working

[pestbarn]

I'm using PostCSS with Parcel (v1.12.4)

Input:

h3 {
    font-size: 1.625rem;

    @media screen and (max-width: var(--mobile-screen)) {
        font-size: 1.125rem;
    }
}

Output:

h3 {
    font-size: 1.625rem;
}

@media screen and (max-width: var(--mobile-screen)) {
    h3 {
        font-size: 1.125rem
    }
}

postcss.config.js:

module.exports = {
    modules: false,
    plugins: [
        require('postcss-nested'),
        require('autoprefixer'),
        require('postcss-custom-properties'),
        require('postcss-hexrgba'),
        require('postcss-at-rules-variables'),
        require('postcss-css-variables')({
            variables: {
                '--mobile-screen': '768px'
            }
        })
    ]
};

I've also tried declaring the variable in a regular :root block, but with the same result. Requiring postcss-at-rules-variables after postcss-css-variables makes no difference either.

[Ivan Demidov]

@pestbarn Hi, you made a mistake by installing options to the wrong plugin.

should work for you

module.exports = {
    modules: false,
    plugins: [
        require('postcss-nested'),
        require('autoprefixer'),
        require('postcss-custom-properties'),
        require('postcss-hexrgba'),
        require('postcss-at-rules-variables')({
            variables: {
                '--mobile-screen': '768px'
            }
        }),
        require('postcss-css-variables')()
    ]
};

have a good day and mood 😄

[pestbarn]

@Scrum Ah yes, that would of course make sense, my bad. However, simply moving it doesn't seem to work either - it still renders out as @media screen and (max-width: var(--mobile-screen)).

Edit: Solved it. If I add atRules: ['media'] to the options object, it magically started working. Very strange, but at least it's up and running now. Thanks!

(for reference if anyone needs it):

module.exports = {
  modules: false,
  plugins: [
    require('postcss-nested'),
    require('autoprefixer'),
    require('postcss-custom-properties'),
    require('postcss-hexrgba'),
    require('postcss-at-rules-variables')({
      atRules: ['media'],
      variables: {
        '--mobile-screen': '768px'
      }
    }),
    require('postcss-css-variables')({
      preserve: true,
      variables: {
        '--other-variable': 'Noto Sans',
        '--another-variable': 'Noto Serif',
      }
    })
  ]
};