Media Queries mixins issue

[Deleted user]

Hello.

I have a problem with my mixins and media-queries.

Here are my mixins:

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

@define-mixin atMedium {
	@media (min-width: 800px) {
		@mixin-content;
	}
}

@define-mixin atLarge {
	@media (min-width: 1200px) {
		@mixin-content;
	}
}

and CSS code:

.large-hero__title {
   @mixin atSmall {
      font-size: 2rem;
    }
    @mixin atMedium {
      font-size: 3.2rem;
    }
    @mixin atLarge {
      font-size: 4.8rem;
    }
}

And it's converted to CSS like that, so nothing works:

.large-hero__title {

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

    @media (min-width: 800px) {
        font-size: 3.2rem;
	}

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

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"
  }

What need I do to make them work properly?

[ai]

You need to put postcss-nested after postcss-mixins. But I recommend you to use postcss-custom-media for this task.

[ako-v]

Hi.
I have the same problem:
defining mixin:

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

using mixin:

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

requiring postcss plugins in webpack.config.js:

const postCSSPlugins = [require("postcss-import"), require("postcss-mixins"), require("postcss-nested"), require("postcss-simple-vars"), require("autoprefixer")];

but what I get is:

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

so it wont show in browser as i want.
package.json 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.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }

what should i do?
Thank you.

[ai]

@ako-v very strange. PostCSS can’t generate broken CSS like in your example.

[ako-v]

if I define it like this:

@define-mixin fontLarge {
  font-size: 5rem;
}

and use it as below:

@define-mixin fontLarge {
  font-size: 5rem;
}

it generates css well:
font-size: 5rem;

[ako-v]

would you consider this as an issue or should i change from postcss to another package?
Thanks again.

[ai]

Can you open another issue with input, output, and expected output CSS with only postcss-mixins in PostCSS?

I still do not understand what is your issue about.

[ako-v]

I opened another issue as you said. thanks.