Using PostCSS, is it possible to have a mixin inside another mixin ?

Mixin-inside-mixin.md

I have a mixin inside another mixin and it doesn't work.
You can see the code below (5 last lines of input).

Here are the PostCSS processors I use and in the order they are set:

• postcss-import
• postcss-mixins
• postcss-advanced-variables
• postcss-custom-properties
• postcss-custom-media
• postcss-nesting
• postcss-nested
• postcss-calc,
• pixrem,
• postcss-color-rgba-fallback,
• autoprefixer

Input

/*------------------------------------*\
    #SETTINGS
\*------------------------------------*/

/**
 * Hold our breakpoint aliases and conditions in a list.
 */

@custom-media --palm screen and (max-width: 44.9375em);
@custom-media --lap screen and (min-width: 45em) and (max-width: 63.9375em);
@custom-media --lap-and-up screen and (min-width: 45em);
@custom-media --portable screen and (max-width: 63.9375em);
@custom-media --desk screen and (min-width: 64em);
@custom-media --retina (min-resolution: 192dpi), (min-resolution: 2dppx);

/**
 * List all breackpoints
 *
 * This is used in mixins.
 */
$breackpoints: (palm, lap, lap-and-up, portable, desk, retina);





/*------------------------------------*\
    #MIXINS
\*------------------------------------*/

/**
 * Hide content depending of the viewport
 *
 * 1. Screen readers sometimes ignore display:none1. This means the content
 *    will be read despite being “hidden”. To hide content completely from
 *    screen readers use the following
 *    http://a11yproject.com/posts/how-to-hide-content/
 */
@define-mixin hidden {
    display: none !important;
    visibility: hidden !important; /* 1 */
}





/**
 * Create classes for each breakpoints
 *
 *     @mixin breakpoints-classes {
 *         .foo--$breakpoint {
 *             ...
 *         }
 *     }
 *
 *     .foo--palm {...}
 *     .foo--lap {...}
 *     .foo--lap-and-up {...}
 *     ...
 */
@define-mixin breakpoints-classes {
    @each $breakpoint in $breackpoints {
        @media (--$breakpoint) {
            @mixin-content;
        }
    }
}





/*------------------------------------*\
    #RESPONSIVE-UTILITIES
\*------------------------------------*/

/**
 * Hide content depending of the viewport
 *
 * 1. Screen readers sometimes ignore display:none1. This means the content
 *    will be read despite being “hidden”. To hide content completely from
 *    screen readers use the following
 *    http://a11yproject.com/posts/how-to-hide-content/
 */
@mixin breakpoints-classes {
    .hidden--$breakpoint {
        @mixin hidden;
    }
}

Output

@media screen and (max-width: 44.9375em) {
    .hidden--palm {
        @mixin hidden; <----- bad!
    }
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
    .hidden--lap {
        @mixin hidden;
    }
}
@media screen and (min-width: 45em) {
    .hidden--lap-and-up {
        @mixin hidden;
    }
}
@media screen and (max-width: 63.9375em) {
    .hidden--portable {
        @mixin hidden;
    }
}
@media screen and (min-width: 64em) {
    .hidden--desk {
        @mixin hidden;
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .hidden--retina {
        @mixin hidden;
    }
}

This mixin is not a PostCSS way:

@define-mixin hidden {
    display: none !important;
    visibility: hidden !important; /* 1 */
}

You should write a postcss-readers plugin and automatically process all display: none to this preset.

It will be much better API (like a Autoprefixer vs Compass).

I think breakpoints case is not for mixin too. Mixin should be used in same file, not as application level framework. So you should think about some custom plugin for this case.