PostCSS autoprefixer has a problem with two mixins used at the same level containing grid-template-areas

Question

In my react project where I'm using PostCSS & autoprefixer I have a strange problem. My style file looks like this:

@define-mixin ComponentHorizontalLayoutGrid {
    display: grid;
    gap: 24px 32px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        'heading infoIcon'
        'illustration illustration'
        'details details'
        'bottomContent bottomContent';

    @media (--tablet) {
        grid-template: auto 1fr auto / 50% 1fr auto;
        grid-template-areas:
            'heading illustration infoIcon'
            'details illustration infoIcon'
            'bottomContent bottomContent bottomContent';
    }
}

@define-mixin ComponentVerticalLayoutGrid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        'heading infoIcon'
        'details details'
        'illustration illustration'
        'bottomContent bottomContent';
}

.Component {
    & .Component__heading {
        grid-area: heading;
    }

    & .Component__infoIcon {
        grid-area: infoIcon;
    }

    & .Component__details {
        grid-area: details;
    }

    & .Component__illustration {
        grid-area: illustration;
    }

    & .Component__bottomContent {
        grid-area: bottomContent;
    }

    &.Component--horizontalLayout {
        @mixin ComponentHorizontalLayoutGrid;
    }

    &.Component--verticalLayout {
        @mixin ComponentVerticalLayoutGrid;
    }
}

Code works fine but autoprefixer returns the warnings for every grid-area line like:

 autoprefixer: Autoprefixer cannot find a grid-template containing the duplicate grid-area "heading" with full selector matching: .Component

 autoprefixer: Autoprefixer cannot find a grid-template containing the duplicate grid-area "infoIcon" with full selector matching: .Component

autoprefixer: Autoprefixer cannot find a grid-template containing the duplicate grid-area "details" with full selector matching: .Component

 autoprefixer: Autoprefixer cannot find a grid-template containing the duplicate grid-area "illustration" with full selector matching: .Component

autoprefixer: Autoprefixer cannot find a grid-template containing the duplicate grid-area "bottomContent" with full selector matching: .Component

My versions of autoprefixer and postCSS::

"autoprefixer": "^9.5.0",
"postcss-custom-media": "^7.0.8",
"postcss-each": "^0.10.0",
"postcss-inline-svg": "4.1.0",
"postcss-loader": "^7.0.0",
"postcss-mixins": "^6.2.1",
"postcss-nesting": "^7.0.0",
"postcss-normalize": "^7.0.1",
"postcss-simple-vars": "^5.0.1",

What's interesting is that when I leave both mixins in the code but use only one, the warnings are gone:

&.Component--horizontalLayout {
        @mixin ComponentHorizontalLayoutGrid;
    }

&.Component--verticalLayout {
        /* @mixin ComponentVerticalLayoutGrid; */
}