Unitless non print media queries always first

[vis97c]

I was encapsulating my default styles in this media querie to prevent the styles from affecting print styles:

@media only screen {
 body {
    background: white;
  }
}

But because of the sorting method it was always on the middle, overriding other media queries.

This is the current behavior:

@media only screen and (min-width: 359px) {
 body {
    background: blue;
  }
}
@media only screen {
 body {
    background: white;
  }
}
@media only screen and (max-width: 358px) {
 body {
    background: red;
  }
}

And this is the expected one:

@media only screen {
 body {
    background: white;
  }
}
@media only screen and (min-width: 359px) {
 body {
    background: blue;
  }
}
@media only screen and (max-width: 358px) {
 body {
    background: red;
  }
}

[OlehDutchenko]

Hi @vis97c . Thanks for PR.
But it has failed tests. Please fix them and i shall approve it.

[vis97c]

Just fixed the validation and updated the mixed tests accordingly.

E: I think this is the best behavior but some people dependant on this project could think different, so do you think this new approach should be behind a flag or parameter?

[OlehDutchenko]

I believe that this behaviour should be controlled by developer themselves.

But we cannot just add parameter or flag to the sort because our methods used as references and we need to create some redundant closure for currying to do that work. Second, the package is being used as part of other modules, and they will have to change their workflow to handle our changes. This process can take a long time and not every module will be ready to go for it.

Give me a day or two to think about how best to implement such an opportunity in order to solve your current problem and make it possible to develop the configuration in the future.

[vis97c]

Ok, sounds good for me. Let me know if there anything more i can do to make things easier.

[OlehDutchenko]

Hi @vis97c!
I found solution, that seems to me as the most comfortable and non-breaking way - create config file.
description here - https://github.com/dutchenkoOleg/sort-css-media-queries#sort-configuration

In this case - we can control process as we want.
But to do this work - it was needed to change project structure.

So now - your PR is failed with conflicts (( Can you update your PR with this new structure?

If you will take it - I left some checkpoints for your in codebase

https://github.com/dutchenkoOleg/sort-css-media-queries/blob/b501811a0ea070ff1a2f73ba7d311ba4ef3b01d9/lib/create-sort.js#L131-L135

and for tests

https://github.com/dutchenkoOleg/sort-css-media-queries/blob/b501811a0ea070ff1a2f73ba7d311ba4ef3b01d9/tests/create-sort.unitless-mq-always-first.spec.js#L41-L49

[OlehDutchenko]

We will update the npm package after the implementation of the working param unitlessMqAlwaysFirst.
And it will be new non-breaking major version.

[vis97c]

Just updated the mr to comply with the new structure as well as the tests and some new details to the readme. ¿Can you please take care of the russian translation? i know nothing of that language appart from "priviet". The change in the readme is because i added the possibility to pass the parameter when importing the package as another alternative, this because it fits my needs the most.

// now available
const sortCSSmq = require("sort-css-media-queries")({
	unitlessMqAlwaysFirst: true,
});

module.exports = {
	// postcss config
	map: false,
	plugins: [
		require("node-css-mqpacker")({
			sort: sortCSSmq.desktopFirst,
		}),
	],
	env: "production",
	preset: { stage: false },
};

Let me know is there is any issue, i will take care of anything else on the weekend

[OlehDutchenko]

Hi! Thanks for making changes.

About translations - no problem! I will take it for myself.

But changes in index.js - not suitable, because the main use case for the package is to use the sorting method directly by reference, without "creating" it. Please revert it

To fit your needs - you can just import createSort directly from inner folder

- const sortCSSmq = require("sort-css-media-queries")({
+ const sortCSSmq = require("sort-css-media-queries/lib/create-sort")({
	unitlessMqAlwaysFirst: true,
});

[vis97c]

But isn't it the same? If you really want it that way is ok then.

This would still work in the same way. Without adding further parameters or breaking previous functionality.

const sortCSSmq = require("sort-css-media-queries")