Why are media queries rearranged on compilation?

Question

css

I use Webpack 4 to build the project, the problem is that it rearranges media requests in its own way
. In the code, they are listed from largest to smallest:

.portfolio-panel-background {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 50%;
    transition: 1s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;


    &--active {
        width: 2000px;
        height: 2000px;
        transform: translate(-35%, -52%);

        @media screen and (max-width: 1850px) {
            width: 1600px;
            height: 1600px;
        }

        @media screen and (max-width: 1570px) {
            width: 1200px;
            height: 1200px;
        }

    }
}

And after compilation they are rearranged

@media screen and (max-width:1570px) {
    .portfolio-panel-background--active {
        width: 1200px;
        height: 1200px
    }
}

@media screen and (max-width:1850px) {
    .portfolio-panel-background--active {
        width: 1600px;
        height: 1600px
    }
}

In webpack config css and less handle such loaders

{
    test: /\.less$/,
    use: [ {
        loader: 'style-loader',
    }
    ,
    {
        loader: MiniCssExtractPlugin.loader,
    }
    ,
    {
        loader: "css-loader",
        options: {
            sourceMap: true,
        }
    }
    ,
    {
        loader: "postcss-loader",
        options: {
            sourceMap: true,
            config: {
                path: 'postcss.config.js',
            }
        }
    }
    ,
    {
        loader: "less-loader",
        options: {
            relativeUrls: false, sourceMap: true,
        }
    }
    ]
}

,
{
    test: /\.css$/,
    use: [ {
        loader: 'style-loader',
    }
    ,
    {
        loader: MiniCssExtractPlugin.loader,
    }
    ,
    {
        loader: "css-loader",
        options: {
            sourceMap: true,
        }
    }
    ,
    {
        loader: "postcss-loader",
        options: {
            sourceMap: true,
            config: {
                path: 'postcss.config.js',
            }
        }
    }
    ]
}

]
}
,

What could be the problem?

Answer 1

Turn off the loaders one by one and see the result. The feeling that you have something sorting the rules, but this is not accurate. See what's in your postcss.config.js.

Answer 2

&--active {
  width: 1200px;
  height: 1200px;
  transform: translate(-35%, -52%);

  @media screen and (min-width: 1571px) {
    width: 1600px;
    height: 1600px;
  }

  @media screen and (min-width: 1851px) {
     width: 2000px;
     height: 2000px;
  }
}