Duplicated a media rules in css

[EugenGedroyc]

my postcss configuration in laravel mix:

postCss: [
    require('postcss-extract-media-query')({
		output: {
		  path: path.join(__dirname, '/public/css'), 
		  name: '[query].css'
		},
		queries: {
		  'only screen and (min-width: 1023px)': 'desktop',
		  'only screen and (min-width: 1460px)': 'desktop',
		  'only screen and (min-width: 1800px)': 'desktop',
		  'only screen and (min-width: 1870px)': 'desktop',
		  'only screen and (min-width: 2100px)': 'desktop',
		  'only screen and (min-width: 2400px)': 'desktop'
		},
		extractAll: false
    }),
  ],

Created desktop.css with all queries but thes repeating. The queries save in desktop.css first time and then second time the same way after first time. 'postcss-combine-duplicated-selectors' and '"cssnano": {}' don't helped me And is strange that console output three times:

[extracted media query] desktop.css
[extracted media query] desktop.css
[extracted media query] desktop.css

P.S. I want to do pull request in documentation, but wait for an answer(if code have mistakes). I spent more than an hour until I realized how it works

[nucliweb]

You need different values in the queries object.

Like this:

postCss: [
    require('postcss-extract-media-query')({
		output: {
		  path: path.join(__dirname, '/public/css'), 
		  name: '[query].css'
		},
		queries: {
		  'only screen and (min-width: 1023px)': 'desktop-1023px',
		  'only screen and (min-width: 1460px)': 'desktop-1023px',
		  'only screen and (min-width: 1800px)': 'desktop-1800px',
		  'only screen and (min-width: 1870px)': 'desktop-1870px',
		  'only screen and (min-width: 2100px)': 'desktop-2100px',
		  'only screen and (min-width: 2400px)': 'desktop-2400px'
		},
		extractAll: false
    }),
  ],

Btw, depending on the contents. I think that you can use fewer queries, like:

postCss: [
    require('postcss-extract-media-query')({
		output: {
		  path: path.join(__dirname, '/public/css'), 
		  name: '[query].css'
		},
		queries: {
		  'only screen and (min-width: 1023px)': 'desktop-1023px',
		  'only screen and (min-width: 1800px)': 'desktop-1800px',
		  'only screen and (min-width: 2100px)': 'desktop-2100px'
		},
		extractAll: false
    }),
  ],

[EugenGedroyc]

@nucliweb ,thank you for answer, but the problem persists. It is desktop-1870px.css :

@media only screen and (min-width: 1870px) {
  .game-stats-header::before {
    width: 24rem;
  }
  .game-stats-header__title span {
    display: block;
  }
  .game-stats-header__title svg {
    top: -0.35rem;
  }
}

@media only screen and (min-width: 1870px) {
  .game-stats-header::before {
    width: 24rem;
  }
  .game-stats-header__title span {
    display: block;
  }
  .game-stats-header__title svg {
    top: -0.35rem;
  }
}

console:

[extracted media query] desktop-1023px.css
[extracted media query] desktop-1800px.css
[extracted media query] desktop-2100px.css
[extracted media query] desktop-1460px.css
[extracted media query] desktop-2400px.css
[extracted media query] desktop-1870px.css
[extracted media query] desktop-1023px.css
[extracted media query] desktop-1800px.css
[extracted media query] desktop-2100px.css
[extracted media query] desktop-1460px.css
[extracted media query] desktop-2400px.css
[extracted media query] desktop-1870px.css

I disabled all configuration in webpack.mix.js besides this:

mix.less('resources/less/app.less', 'public/css')
//.less('resources/less/plugins.less', 'public/css')  this [extracted media query] third time
.options({
  postCss: [
	    require('postcss-extract-media-query')({
		output: {
		  path: path.join(__dirname, '/public/css'), 
		  name: '[query].css'
		},
		queries: {
		   'only screen and (min-width: 1023px)': 'desktop-1023px',
		  'only screen and (min-width: 1460px)': 'desktop-1460px',
		  'only screen and (min-width: 1800px)': 'desktop-1800px',
		  'only screen and (min-width: 1870px)': 'desktop-1870px',
		  'only screen and (min-width: 2100px)': 'desktop-2100px',
		  'only screen and (min-width: 2400px)': 'desktop-2400px'
		},
		extractAll: false
    }),
  ],
 })

Is it incompatible with laravel mix?

[haipham]

Yes. Duplicate media query with Laravel Mix.

[elambro]

Did anyone find a solution for this?

[haipham]

Did anyone find a solution for this?

Webpack version:

https://github.com/SassNinja/media-query-plugin

[yunusga]

@EugenGedroyc @elambro If I understand correctly, then you need to first perform the merging of media queries with postcss-sort-media-queries, plugin sort and combine same media queries into one and then use postcss-extract-media-query.

[elambro]

I wrote a new package for this - Extract CSS Media Queries and a Laravel Mix extension - Laravel Mix Extract Media Queries

I hope they can help some of you. @EugenGedroyc - My first webpack plugin and my first published npm package!