Skip to content

Unitless non print media queries always first #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Unitless non print media queries always first #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8c48c1
optionally sort unitless mq always first
vis97c May 26, 2021
223df4f
restore export
vis97c Jun 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,8 +146,14 @@ The plugin will sort your media-queries according to the desktop-first methodolo

## Sort configuration

You can create `sort-css-mq.config.json` file in the root of your project
or add property `sortCssMQ: {}` in your `package.json`.
You can add parameters to the require.

```js
const sortCSSmq = require("sort-css-media-queries")({...options});
```

Or alternatively create a `sort-css-mq.config.json` file in the root of your project.
Or add property `sortCssMQ: {}` in your `package.json`.

By this configuration you can control sorting behaviour.

Expand Down
116 changes: 64 additions & 52 deletions lib/create-sort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,6 @@ function _testIsPrint(a, b) {
*/
module.exports = function createSort(configuration) {
const config = configuration || {};

// eslint-disable-next-line no-unused-vars
const UNITLESS_MQ_ALWAYS_FIRST = config.unitlessMqAlwaysFirst;

/**
Expand All @@ -152,39 +150,46 @@ module.exports = function createSort(configuration) {
const minB = isMinWidth(b) || isMinHeight(b);
const maxB = isMaxWidth(b) || isMaxHeight(b);

if (minA && maxB) {
return -1;
}
if (maxA && minB) {
return 1;
}
if (UNITLESS_MQ_ALWAYS_FIRST && ((!minA && !maxA) || (!minB && !maxB))) {
if (!minA && !maxA && !minB && !maxB) {
return a.localeCompare(b);
}
return !minB && !maxB ? 1 : -1;
} else {
if (minA && maxB) {
return -1;
}
if (maxA && minB) {
return 1;
}

const lengthA = _getQueryLength(a);
const lengthB = _getQueryLength(b);
const lengthA = _getQueryLength(a);
const lengthB = _getQueryLength(b);

if (lengthA === maxValue && lengthB === maxValue) {
return a.localeCompare(b);
} else if (lengthA === maxValue) {
return 1;
} else if (lengthB === maxValue) {
return -1;
}

if (lengthA > lengthB) {
if (maxA) {
if (lengthA === maxValue && lengthB === maxValue) {
return a.localeCompare(b);
} else if (lengthA === maxValue) {
return 1;
} else if (lengthB === maxValue) {
return -1;
}
return 1;
}

if (lengthA < lengthB) {
if (maxA) {
if (lengthA > lengthB) {
if (maxA) {
return -1;
}
return 1;
}
return -1;
}

return a.localeCompare(b);
if (lengthA < lengthB) {
if (maxA) {
return 1;
}
return -1;
}

return a.localeCompare(b);
}
}

/**
Expand All @@ -206,39 +211,46 @@ module.exports = function createSort(configuration) {
const minB = isMinWidth(b) || isMinHeight(b);
const maxB = isMaxWidth(b) || isMaxHeight(b);

if (minA && maxB) {
return 1;
}
if (maxA && minB) {
return -1;
}

const lengthA = _getQueryLength(a);
const lengthB = _getQueryLength(b);
if (UNITLESS_MQ_ALWAYS_FIRST && ((!minA && !maxA) || (!minB && !maxB))) {
if (!minA && !maxA && !minB && !maxB) {
return a.localeCompare(b);
}
return !minB && !maxB ? 1 : -1;
} else {
if (minA && maxB) {
return 1;
}
if (maxA && minB) {
return -1;
}

if (lengthA === maxValue && lengthB === maxValue) {
return a.localeCompare(b);
} else if (lengthA === maxValue) {
return 1;
} else if (lengthB === maxValue) {
return -1;
}
const lengthA = _getQueryLength(a);
const lengthB = _getQueryLength(b);

if (lengthA > lengthB) {
if (maxA) {
if (lengthA === maxValue && lengthB === maxValue) {
return a.localeCompare(b);
} else if (lengthA === maxValue) {
return 1;
} else if (lengthB === maxValue) {
return -1;
}
return 1;
}

if (lengthA < lengthB) {
if (maxA) {
if (lengthA > lengthB) {
if (maxA) {
return -1;
}
return 1;
}
return -1;
}

return -a.localeCompare(b);
if (lengthA < lengthB) {
if (maxA) {
return 1;
}
return -1;
}

return -a.localeCompare(b);
}
};

return sortCSSmq;
Expand Down
122 changes: 117 additions & 5 deletions tests/create-sort.unitless-mq-always-first.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const createSort = require('../lib/create-sort');

test(`unitlessMqAlwaysFirst: FALSE`, () => {
test(`mixed #1. mobile first. unitlessMqAlwaysFirst: FALSE`, () => {
const sort = createSort({
unitlessMqAlwaysFirst: false
});
Expand Down Expand Up @@ -38,12 +38,124 @@ test(`unitlessMqAlwaysFirst: FALSE`, () => {
expect(received).toBe(expected);
});

test(`unitlessMqAlwaysFirst: TRUE`, () => {
// eslint-disable-next-line no-unused-vars
test(`mixed #1. mobile first. unitlessMqAlwaysFirst: TRUE`, () => {
const sort = createSort({
unitlessMqAlwaysFirst: true
});

// TODO add test cases
expect(true).toBe(true);
const receivedOrder = [
'screen and (max-width: 640px)',
'screen and (min-width: 980px)',
'screen and (max-width: 980px)',
'tv',
'screen and (max-width: 768px)',
'screen and (min-width: 640px)',
'print',
'screen and (hover: none)',
'screen and (min-width: 1280px)',
'screen',
'screen and (min-width: 768px)',
'screen and (max-width: 1280px)',
'only screen'
];

const expectedOrder = [
'only screen',
'screen',
'screen and (hover: none)',
'tv',
'screen and (min-width: 640px)',
'screen and (min-width: 768px)',
'screen and (min-width: 980px)',
'screen and (min-width: 1280px)',
'screen and (max-width: 1280px)',
'screen and (max-width: 980px)',
'screen and (max-width: 768px)',
'screen and (max-width: 640px)',
'print' // always last
];

const expected = expectedOrder.join('\n');
const received = receivedOrder.sort(sort).join('\n');
expect(received).toBe(expected);
});

test(`mixed #2. desktop first. unitlessMqAlwaysFirst: FALSE`, () => {
const sort = createSort({
unitlessMqAlwaysFirst: false
}).desktopFirst;

const receivedOrder = [
'screen and (max-width: 640px)',
'screen and (min-width: 980px)',
'screen and (max-width: 980px)',
'tv',
'screen and (max-width: 768px)',
'screen and (min-width: 640px)',
'print',
'screen and (min-width: 1280px)',
'screen',
'screen and (min-width: 768px)',
'screen and (max-width: 1280px)'
];

const expectedOrder = [
'screen and (max-width: 1280px)',
'screen and (max-width: 980px)',
'screen and (max-width: 768px)',
'screen and (max-width: 640px)',
'screen and (min-width: 640px)',
'screen and (min-width: 768px)',
'screen and (min-width: 980px)',
'screen and (min-width: 1280px)',
'screen',
'tv',
'print' // always last
];

const expected = expectedOrder.join('\n');
const received = receivedOrder.sort(sort).join('\n');
expect(received).toBe(expected);
});

test(`mixed #2. desktop first. unitlessMqAlwaysFirst: TRUE`, () => {
const sort = createSort({
unitlessMqAlwaysFirst: true
}).desktopFirst;

const receivedOrder = [
'screen and (max-width: 640px)',
'screen and (min-width: 980px)',
'screen and (max-width: 980px)',
'tv',
'screen and (max-width: 768px)',
'screen and (min-width: 640px)',
'print',
'screen and (hover: none)',
'screen and (min-width: 1280px)',
'screen',
'screen and (min-width: 768px)',
'screen and (max-width: 1280px)',
'only screen'
];

const expectedOrder = [
'only screen',
'screen',
'screen and (hover: none)',
'tv',
'screen and (max-width: 1280px)',
'screen and (max-width: 980px)',
'screen and (max-width: 768px)',
'screen and (max-width: 640px)',
'screen and (min-width: 640px)',
'screen and (min-width: 768px)',
'screen and (min-width: 980px)',
'screen and (min-width: 1280px)',
'print' // always last
];

const expected = expectedOrder.join('\n');
const received = receivedOrder.sort(sort).join('\n');
expect(received).toBe(expected);
});
Loading