Media Queries + Mixins broken css generation issue

[ako-v]

Hi. I want to use postcss with mixins and media queries. but I get some problematic css. Here is my CSS:

@define-mixin small {
  /* Small devices (landscape phones, 576px and up)*/
  @media (min-width: 576px) {
    @mixin-content;
  }
}

.title {
  @mixin small {
    font-size: 4.8rem;
  }
}

What I expect to be the output:

title {
    font-size: 4.8rem;
}

what I get as Output:

title {
    @media (min-width: 576px) {;
    font-size: 4.8rem;
    }: ;
}

I use just postcss mixins plugin. List of dependencies:

  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "css-loader": "^5.0.0",
    "postcss-import": "^13.0.0",
    "postcss-loader": "^4.0.4",
    "postcss-mixins": "^7.0.1",
    "postcss-nested": "^5.0.1",
    "postcss-simple-vars": "^6.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "normalize.css": "^8.0.1"
  }

[ai]

Why do you expect title { font-size: 4.8rem; } if you have @media (min-width: 576px) in small mixin?

[ako-v]

sorry, I forgot to include media query. I expect:

title {
    @media (min-width: 576px) {
    font-size: 4.8rem;
    }
}

[ai]

Can you run PostCSS only with postcss-mixin?

[ako-v]

Can you run PostCSS only with postcss-mixin?

I only use postcss-mixin plugin in my webpack config. but I found something, when I build CSS bundled file, there is no problem with it , but in when I try to use it for hot reloading and import it into js file, it has this problem.

[ako-v]

ok, I solved the problem by adding sass-loader to rules->use.

module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "sass-loader"
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: { plugins: postCSSPlugins }
            }
          }
        ]
      }
    ]
  }

Thank you for your attention.

[anorouzi]

I have the same issue on v7.0.1 and v7.0.0 I have resolved it with downgrading to v6.2.3

It doesn't need any sass-loader. It gives more error.