How to combine Less media queries?

Question

css

Hello!
There is a mixin function Less:

.media-s(@rules) {
  @media screen and (max-width: 1023px) {
    @rules();
  }
};

div{
  .media-s({width: 100%});
  .media-s({color: #000});
}

Which compiles to CSS code:

@media screen and (max-width: 1023px) {
  div {
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  div {
    color: #000;
  }
}

Which doesn't suit me very well.
What is the right way to rewrite or use a mixin to get rid of copying identical media queries and get something like this:

@media screen and (max-width: 1023px) {
  div {
    width: 100%;
    color: #000;
  }
}

Answer 1

Use a gulp plugin (or your builder) that merges media queries
like https://www.npmjs.com/package/gulp-merge-media-queries