Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
sudo: false
language: node_js
node_js:
- "7"
- "6"
23 changes: 23 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Change log

:back: [README.md](./README.md)

> _All notable changes to this project will be documented in this file._
> _This project adheres to [Semantic Versioning](http://semver.org/)._

---

### [1.1.9] - 2017-07-07

#### Added

- this CHANGELOG.md file ))
- test for code style
- test of sorting result, see [./tests/index.js](./tests/index.js)
- [Travis CI](https://travis-ci.org/dutchenkoOleg/gulp-not-supported-file) builds

#### Changed

- js code style with accordance to [`happiness`]((https://github.com/JedWatson/happiness))

---
13 changes: 11 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,12 @@

![npm](https://img.shields.io/badge/node-6.3.0-yellow.svg)
![es2015](https://img.shields.io/badge/ECMAScript-2015_(ES6)-blue.svg)
![license](https://img.shields.io/badge/License-MIT-orange.svg)
[![Build Status](https://travis-ci.org/dutchenkoOleg/sort-css-media-queries.svg?branch=master)](https://travis-ci.org/dutchenkoOleg/sort-css-media-queries)

The custom `sort` method for [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or [`pleeease`](https://www.npmjs.com/package/pleeease) (which uses css-mqpacker) or, perhaps, something else ))
> The custom `sort` method for [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or [`pleeease`](https://www.npmjs.com/package/pleeease) (which uses css-mqpacker) or, perhaps, something else ))

[![js happiness style](https://cdn.rawgit.com/JedWatson/happiness/master/badge.svg)](https://github.com/JedWatson/happiness)

## Installing

Expand Down Expand Up @@ -42,7 +46,12 @@ it's use es6 syntax

## Tests

Sorry but here no tests yet.
1. `npm test` for testing js code style and test sorting method
1. `npm run fix` for automatically fix most of problems with **js code style**

## Changelog

Please read [CHANGELOG.md](https://github.com/dutchenkoOleg/sort-css-media-queries/blob/master/CHANGELOG.md)


## Contributing
Expand Down
28 changes: 13 additions & 15 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,20 @@ function getQueryLength (length) {
let unit = length[2];

switch (unit) {
case "ch":
case 'ch':
num = parseFloat(num) * 8.8984375;
break;

case "em":
case "rem":
case 'em':
case 'rem':
num = parseFloat(num) * 16;
break;

case "ex":
case 'ex':
num = parseFloat(num) * 8.296875;
break;

case "px":
case 'px':
num = parseFloat(num);
break;
}
Expand All @@ -86,18 +86,16 @@ function testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
* @param {string} query
* @return {boolean}
*/
return function(query) {
if ( doubleTestTrue.test(query) ) {
return function (query) {
if (doubleTestTrue.test(query)) {
return true;
} else if ( doubleTestFalse.test(query) ) {
} else if (doubleTestFalse.test(query)) {
return false;
}
return singleTest.test(query);
}
};
}



// ----------------------------------------
// Exports
// ----------------------------------------
Expand All @@ -112,20 +110,20 @@ function testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
module.exports = function (a, b) {
let minA = isMinWidth(a) || isMinHeight(a);
let maxA = isMaxWidth(a) || isMaxHeight(a);

let minB = isMinWidth(b) || isMinHeight(b);
let maxB = isMaxWidth(b) || isMaxHeight(b);

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

let lengthA = getQueryLength(a);
let lengthB = getQueryLength(b);

if (lengthA > lengthB) {
if (maxA) {
return -1;
Expand Down
13 changes: 9 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "sort-css-media-queries",
"version": "1.1.1",
"version": "1.1.9",
"description": "The custom `sort` method for `css-mqpacker` or `pleeease` (which uses css-mqpacker) or, perhaps, something else ))",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "happiness --verbose | snazzy && node ./tests/index.js",
"fix": "happiness --verbose --fix | snazzy"
},
"repository": {
"type": "git",
Expand All @@ -18,13 +19,17 @@
"media",
"queries"
],
"author": "Oleg Dutchenko <dutchenko.o.wezom@gmail.com>",
"author": "Oleg Dutchenko <dutchenko.o.dev@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/dutchenkoOleg/sort-css-media-queries/issues"
},
"engines": {
"node": ">= 6.3.0"
},
"homepage": "https://github.com/dutchenkoOleg/sort-css-media-queries#readme"
"homepage": "https://github.com/dutchenkoOleg/sort-css-media-queries#readme",
"devDependencies": {
"happiness": "^7.1.2",
"snazzy": "^7.0.0"
}
}
82 changes: 82 additions & 0 deletions tests/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/**
* > Sorting test
* @module path/to
* @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
*/

'use strict';

// ----------------------------------------
// Imports
// ----------------------------------------

const sortCSSmq = require('../');

// ----------------------------------------
// Helpers / Private
// ----------------------------------------

// randomize
function shuffleArray (array) {
let newArray = array.concat();

for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = newArray[i];

newArray[i] = newArray[j];
newArray[j] = temp;
}
return newArray;
}

// ----------------------------------------
// Public
// ----------------------------------------

// correct sorted order
const queries = [
// min-width/-height -> from smallest to largest
'only screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'only screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'only screen and (min-width: 1280px)',

// device
'only screen and (min-device-width: 320px) and (max-device-width: 767px)',

// max-width/-height <- from largest to smallest
'only screen and (max-width: 1023px)',
'only screen and (max-height: 767px) and (min-height: 320px)',
'only screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)'
];

// shuffle it
const random = shuffleArray(queries);

// sort by module
random.sort(sortCSSmq);

// make strings for compare
const correct = queries.join(',');
const sorted = random.join(',');

// lets test
if (correct !== sorted) {
let msg = [
'',
'ERROR -----------------',
'sortCSSmq result should be same as correct!',
'Correct sort',
`- ${queries.join('\n- ')}`,
'sortCSSmq result:',
`- ${random.join('\n- ')}`,
''
].join('\n\n');

console.log(msg);
process.exit(1);
}