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

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?

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;
  }
}

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.

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;
	}
}

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

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 {
}

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

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.

{ 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)

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"
	}

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"