yunusga / postcss-sort-media-queries Goto Github PK

Hello,

I have noticed that sorting no longer works correctly when "print" or perhaps another meda type is used in a media query:

After sorting, I get the following order:

@media screen and (min-width: 1024px), print {
}
@media screen and (min-width: 1350px), print {
}
@media screen and (min-width: 1600px), print {
}
@media screen and (min-width: 640px), print {
}
@media screen and (min-width: 800px), print {
}

Hi,
I am sorting the CSS at https://beta.webfast.co/webfives-com/main.css as mobile-first.
However, the fonts seem to be bit whacky after the sort.

Scroll to the section that says "Make your mobile website load under a second"

Before: https://beta.webfast.co/webfives-com/before.html (uses Proxima font)
After: https://beta.webfast.co/webfives-com/after.html (uses Graphik font)

Question 1: Is there a way to retain the order of CSS that is not included as part of @media query? If I copy the CSS that's not part of @media query to the bottom (CSS specificity maybe?), the page renders w/o any issues.

Question 2: Do I need a custom sort algorithm here?

Hi!

Thanks a lot for such a useful plugin. I faced with issue when variable sort: 'desktop-first' is undefined in my build and plugin works without any issues. It doesn't arrange in the correct order only combine media queries in groups. Of course it my fault that I forgot to pass the correct variable. But there should be some foolproof. For example checks variable for undefined and NULL and reset to the default value mobile-first in that case.

Thanks for your PostCSS plugin!

As you probably know, PostCSS 8 was released a few days ago. It would be great if you could make this plugin compatible with the latest version. The creators of the project have even released this migration guide.

Hello. Is possible combine from different files? I am using webpack and mini-css-extract-plugin.

Range notation: @media screen and (width <= 1250px) {

Currently, sorting works, but in incorrect order:

Example:

import postcss from 'postcss'
import sortMediaQueries from 'postcss-sort-media-queries'

const style = `
@media screen and (width <= 1250px) {
  .a {
    color: #00FF00;
  }
}

@media screen and (width <= 250px) {
  .b {
    color: #FF0000;
  }
}

@media screen and (width >= 1250px) {
  .a {
    color: #00FF00;
  }
}

@media screen and (width >= 250px) {
  .b {
    color: #FF0000;
  }
}
`

postcss([
  sortMediaQueries({
    sort: 'mobile-first',
  }),
])
  .process(style)
  .then((result) => {
    console.log(result.css)
  })

Output:

@media screen and (width <= 250px) {
  .b {
    color: #FF0000;
  }
}
@media screen and (width >= 250px) {
  .b {
    color: #FF0000;
  }
}
@media screen and (width <= 1250px) {
  .a {
    color: #00FF00;
  }
}
@media screen and (width >= 1250px) {
  .a {
    color: #00FF00;
  }
}

Expected output:

@media screen and (width >= 250px) {
  .b {
    color: #FF0000;
  }
}
@media screen and (width >= 1250px) {
  .a {
    color: #00FF00;
  }
}
@media screen and (width <= 1250px) {
  .a {
    color: #00FF00;
  }
}
@media screen and (width <= 250px) {
  .b {
    color: #FF0000;
  }
}

Would you consider to update your dependency "sort-css-media-queries"? New Version includes a fix on sorting media queries in mobile first option.

I use Next.js and the plugin does not work with it properly.

After the next dev command I get an error:

error - ./components/footer/styles.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./components/footer/styles.module.css)
TypeError: Cannot set property 'parent' of undefined

// postcss.config.js
module.exports = {
	plugins: {
		'autoprefixer': {},
		'postcss-flexbugs-fixes': {},
		'postcss-media-minmax': {},
		'postcss-nested': {},
		'postcss-sort-media-queries': {}
	}
}

// next.config.js
module.exports = {
	distDir: 'build',
	poweredByHeader: false,
	reactStrictMode: true
}

/* ./components/footer/styles.module.css */
.footer {
	grid-area: footer;
	background-color: green;

	@media (width >= 600px) {
		background-color: pink;
	}
}

package.json

	"dependencies": {
		"next": "10.1.3",
		"react": "17.0.2",
		"react-dom": "17.0.2"
	},
	"devDependencies": {
		"autoprefixer": "10.2.5",
		"postcss": "8.2.10",
		"postcss-flexbugs-fixes": "5.0.2",
		"postcss-media-minmax": "5.0.0",
		"postcss-nested": "5.0.5",
		"postcss-sort-media-queries": "3.8.9"
	}

{ sort: 'desktop-first' }

expected:

@media (max-aspect-ratio: 4/3) {...}
@media (max-aspect-ratio: 1/1) {...}
@media (max-aspect-ratio: 2/3) {...}
@media (max-aspect-ratio: 1/2) {...}

result:

@media (max-aspect-ratio: 1/1) {...}
@media (max-aspect-ratio: 1/2) {...}
@media (max-aspect-ratio: 2/3) {...}
@media (max-aspect-ratio: 4/3) {...}

same result using floats in place of fractions (1.333, 1, 0.667, 0.5)

The following input (with version 2.4.17):

@media (min-width: 50em) {
	.colophon-extended li {
		margin-bottom: 2.5rem;
		margin-bottom: var(--space-l3)
	}
}
@media (min-width: 50em) {
	.colophon-extended li img {
		margin-right: 2.5rem;
		margin-right: var(--space-l3)
	}
}
@media (min-width: 50em) {
	.container {
		max-width: 35em;
	}
}

Results in the following broken CSS:

@media (min-width: 50em) {
	margin-bottom: 2.5rem;
	margin-bottom: var(--space-l3);
	margin-right: 2.5rem;
	margin-right: var(--space-l3);

	.container {
		max-width: 35em;
	}
}

Hi!

It think that I found problem in this plugin. CSS allows nesting at-rules. The plugin ignores this.

Problem

Minimum code example:

import postcss from 'postcss';
import sortMediaQueries from 'postcss-sort-media-queries';

let style = `
@media (min-width: 700px) {
  .a {
    color: #00FF00;
  }
}

@media print {
  @media (min-width: 700px) {
    .b {
      color: #FF0000;
    }
  }
}
`;

postcss([
  sortMediaQueries({
    sort: 'mobile-first'
  })
])
.process(style)
.then(function(result) {
  console.log(result.css);
});

Result:

@media (min-width: 700px) {
  .a {
    color: #00FF00;
  }
    .b {
      color: #FF0000;
    }
}
@media print {
  @media (min-width: 700px) {
    .b {
      color: #FF0000;
    }
  }
}

But the code shouldn't have changed.
It's my case and I solved it with option in postcss-preset-env

features: {
  'nesting-rules': true
}

My solution won't help with other at-rules. For example:

@media (min-width: 700px) {
  .a {
    color: #00FF00;
  }
}

@supports (animation-name: test) {
  @media (min-width: 700px) {
    .b {
      color: #FF0000;
    }
  }
}

My environment:

• node v14.16.1
• npm 7.19.1
• postcss: "8.3.5"
• postcss-sort-media-queries: "3.11.12"