Gulp postCSS-mixins issue with media-queries

Question

I'm listening to Udemy video course about gulp and postCSS and doing the same thing as a tutor doing, but nothing works.

My media-queries mixin:

@define-mixin atSmall {
    @media (min-width: 530px) {
        @mixin-content;
    }
}

My postCSS code:

.large-hero__title {
  font-size: 1.1rem;

  @mixin atSmall {
      font-size: 2rem;
    }
}

And it is compiled to this code, so media query can't work properly:

.large-hero__title {

    font-size: 1.1rem;

    @media (min-width: 530px) {
      font-size: 2rem;
    }
}

My Gulp list of dependencies:

  "dependencies": {
    "jquery": "^3.2.1",
    "normalize.css": "^7.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "browser-sync": "^2.18.13",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0",
    "gulp-watch": "^4.3.11",
    "postcss-import": "^11.0.0",
    "postcss-mixins": "^6.2.0",
    "postcss-nested": "^2.1.2",
    "postcss-simple-vars": "^4.1.0"
  }

Gulp Watch has no issues, it's working properly, in tutor's course everything works with this syntax and in my code - doesn't. What am I doing wrong?

Answer 1

To solve problem I've put 'postcss-nested' after 'postcss-mixin' in a gulp task file and everything work!