Duplicated a media rules in css

EugenGedroyc commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

Yes. Duplicate media query with Laravel Mix.

elambro commented 4 years ago

Did anyone find a solution for this?

haipham commented 4 years ago

Did anyone find a solution for this?

Webpack version:

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

yunusga commented 4 years ago

@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 commented 3 years ago

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!

SassNinja / postcss-extract-media-query

Duplicated a media rules in css #29