Does it work with @custom-media ?

[Sandrina Pereira]

I'm using postcss-math with this example.

:root {
    --breakpoint-xs: resolve(468 * 1 / 16)em /* -> 29.25em */
}

@custom-media --viewport-xs (width > 29.25em); /* it works */
@custom-media --viewport-xs (width > var(--breakpoint-xs) /* it doesn't work */

How can I make this work with @custom-media?

[Ivan Demidov]

@sandrina-p Hi, you need use options atRules

require('postcss-at-rules-variables')({ atRules: ['custom-media'] })

[Sandrina Pereira]

Hmm i tried that but it didn't work. It simple ignores that line.
My webpack postcss config is:

    // PostCss plugins config
    postcss() {
        return [
            require('postcss-at-rules-variables')({ atRules: ['mixin', 'custom-media'] }),
            require('postcss-import'),
            require('postcss-for'),
            require('postcss-cssnext')({
                features: {
                    customProperties: {
                        variables: theme,
                    },
                    calc: { preserve: true }
                },
            }),
            require('postcss-mixins'),
            require('postcss-simple-vars'),
            require('postcss-conditionals'),
            require('postcss-nested'),
            require('postcss-math'),
        ];
    },

What am I missing?

[Ivan Demidov]

postcss-math does not handle at rules. You need to place the plugins in the correct sequence.

return [
            require('postcss-import'),
            require('postcss-math'),
            require('postcss-mixins'),
            require('postcss-at-rules-variables')({ atRules: ['mixin', 'custom-media'] }),
            require('postcss-for'),
            require('postcss-cssnext')({
                features: {
                    customProperties: {
                        variables: theme,
                    },
                    calc: { preserve: true }
                },
            }),
            require('postcss-simple-vars'),
            require('postcss-conditionals'),
            require('postcss-nested'),
        ];

or use post-sequence or post-load-plugins

[Sandrina Pereira]

Nop, that doesn't work. It crashs when compiling... math need to be after nested. I tried to move at-rules-variables to the bottom of the list and it didn't work neither...

[Sandrina Pereira]

Sorry but that didn’t worked too neither

[Ivan Demidov]

I know, so delete.
Need to look for the correct sequence, I will answer as soon as you analyze

[Sandrina Pereira]

Thank you. If I find a solution I’ll share with you too.

[Ivan Demidov]

@sandrina-p Hi, close this issue ?

[Sandrina Pereira]

It can be, but without solution :/