Latest repo

node_modules/media-engine/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none"
+}

node_modules/media-engine/.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+
+node_js:
+ - '8'
+ - '7'
+
+os:
+  - linux
+
+cache:
+  yarn: true
+  directories:
+  - node_modules
+
+install: yarn --frozen-lockfile
+
+script: yarn test

node_modules/media-engine/README.md

@@ -0,0 +1,174 @@
+# media-engine
+> Media queries engine written in pure JS!
+
+[![npm](https://img.shields.io/npm/v/media-engine.svg)](https://npm.im/media-engine)
+[![Travis](https://img.shields.io/travis/diegomura/media-engine.svg)](https://travis-ci.org/diegomura/media-engine)
+[![license](https://img.shields.io/npm/l/media-engine.svg)](./LICENSE)
+
+## Install
+```sh
+npm install media-engine --save
+# or
+yarn add media-engine
+```
+
+## API
+`min-height`
+```js
+matchMedia(
+  {
+    '@media min-height: 700': {
+      color: 'green',
+    },
+  },
+  { height: 800 }
+);
+// { color: 'green' }
+
+matchMedia(
+  {
+    '@media min-height: 700': {
+      color: 'green',
+    },
+  },
+  { height: 100 }
+);
+// { }
+```
+
+`max-height`
+```js
+matchMedia(
+  {
+    '@media max-height: 700': {
+      color: 'green',
+    },
+  },
+  { height: 100 }
+);
+// { color: 'green' }
+
+matchMedia(
+  {
+    '@media max-height: 700': {
+      color: 'green',
+    },
+  },
+  { height: 800 }
+);
+// { }
+```
+
+`min-width`
+```js
+matchMedia(
+  {
+    '@media min-width: 700': {
+      color: 'green',
+    },
+  },
+  { width: 800 }
+);
+// { color: 'green' }
+
+matchMedia(
+  {
+    '@media min-width: 700': {
+      color: 'green',
+    },
+  },
+  { width: 100 }
+);
+// { }
+```
+
+`max-width`
+```js
+matchMedia(
+  {
+    '@media max-width: 700': {
+      color: 'green',
+    },
+  },
+  { width: 100 }
+);
+// { color: 'green' }
+
+matchMedia(
+  {
+    '@media max-width: 700': {
+      color: 'green',
+    },
+  },
+  { width: 800 }
+);
+// { }
+```
+
+`orientation`
+```js
+matchMedia(
+  {
+    '@media orientation: landscape': {
+      color: 'green',
+    },
+  },
+  { orientation: 'landscape' }
+);
+// { color: 'green' }
+
+matchMedia(
+  {
+    '@media orientation: landscape': {
+      color: 'green',
+    },
+  },
+  { orientation: 'portrait' }
+);
+// { }
+```
+
+`and operator`
+```js
+matchMedia(
+  {
+    '@media (min-width: 700) and (orientation: landscape)': {
+      color: 'green',
+    },
+  },
+  { width: 800, orientation: 'landscape' }
+);
+// { color: 'green' }
+```
+
+`or operator`
+```js
+matchMedia(
+  {
+    '@media (min-width: 700), (orientation: landscape)': {
+      color: 'green',
+    },
+  },
+  { orientation: 'landscape' }
+);
+// { color: 'green' }
+```
+
+`multiple queries`
+```js
+matchMedia(
+  {
+    '@media orientation: landscape': {
+      color: 'green',
+    },
+    '@media min-width: 700': {
+      background: 'red',
+    }
+  },
+  { orientation: 'landscape', width: 800 }
+);
+// { color: 'green', background: 'red' }
+```
+
+## License
+MIT © [Diego Muracciole](http://github.com/diegomura)

node_modules/media-engine/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  modulePathIgnorePatterns: ['/node_modules/'],
+  moduleDirectories: ['node_modules'],
+};

node_modules/media-engine/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "media-engine",
+  "version": "1.0.3",
+  "description": "Media query calculator",
+  "main": "src/index.js",
+  "author": "Diego Muracciole <diegomuracciole@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "test": "jest",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "husky": "^0.14.3",
+    "jest": "^22.4.2",
+    "lint-staged": "^7.0.0",
+    "prettier": "^1.11.0"
+  }
+}

node_modules/media-engine/src/index.js

@@ -0,0 +1,13 @@
+var Parser = require('./parser');
+
+module.exports = function(queries, options) {
+  var result = {};
+
+  Object.keys(queries).forEach(function(query) {
+    if (Parser.parse(query).match(options)) {
+      Object.assign(result, queries[query]);
+    }
+  });
+
+  return result;
+};

node_modules/media-engine/src/operators.js

@@ -0,0 +1,28 @@
+function And(left, right) {
+  this.left = left;
+  this.right = right;
+
+  this.match = function(options) {
+    return left.match(options) && right.match(options);
+  };
+}
+
+function Or(left, right) {
+  this.left = left;
+  this.right = right;
+
+  this.match = function(options) {
+    return left.match(options) || right.match(options);
+  };
+}
+
+module.exports = function Operator(type, left, right) {
+  switch (type) {
+    case 'and':
+      return new And(left, right);
+    case ',':
+      return new Or(left, right);
+    default:
+      throw new Error(value);
+  }
+};

node_modules/media-engine/src/parser.js

@@ -0,0 +1,136 @@
+var Query = require('./queries');
+var Operator = require('./operators');
+
+var NUMBERS = /[0-9]/;
+var LETTERS = /[a-z|\-]/i;
+var WHITESPACE = /\s/;
+var COLON = /:/;
+var COMMA = /,/;
+var AND = /and$/;
+var AT = /@/;
+
+function tokenizer(input) {
+  var current = 0;
+  var tokens = [];
+
+  while (current < input.length) {
+    var char = input[current];
+
+    if (AT.test(char)) {
+      char = input[++current];
+      while (LETTERS.test(char) && char !== undefined) {
+        char = input[++current];
+      }
+    }
+
+    if (WHITESPACE.test(char) || char === ')' || char === '(') {
+      current++;
+      continue;
+    }
+
+    if (COLON.test(char) || COMMA.test(char)) {
+      current++;
+      tokens.push({ type: 'operator', value: char });
+      continue;
+    }
+
+    if (NUMBERS.test(char)) {
+      var value = '';
+      while (NUMBERS.test(char)) {
+        value += char;
+        char = input[++current];
+      }
+
+      tokens.push({ type: 'number', value: value });
+      continue;
+    }
+
+    if (LETTERS.test(char)) {
+      var value = '';
+      while (LETTERS.test(char) && char !== undefined) {
+        value += char;
+        char = input[++current];
+      }
+      if (AND.test(value)) {
+        tokens.push({ type: 'operator', value: value });
+      } else {
+        tokens.push({ type: 'literal', value: value });
+      }
+
+      continue;
+    }
+
+    throw new TypeError(
+      'Tokenizer: I dont know what this character is: ' + char
+    );
+  }
+
+  return tokens;
+}
+
+function parser(tokens) {
+  var output = [];
+  var stack = [];
+
+  while (tokens.length > 0) {
+    var token = tokens.shift();
+
+    if (token.type === 'number' || token.type === 'literal') {
+      output.push(token);
+      continue;
+    }
+
+    if (token.type === 'operator') {
+      if (COLON.test(token.value)) {
+        token = { type: 'query', key: output.pop(), value: tokens.shift() };
+        output.push(token);
+        continue;
+      }
+
+      while (stack.length > 0) {
+        output.unshift(stack.pop());
+      }
+      stack.push(token);
+    }
+  }
+
+  while (stack.length > 0) {
+    output.unshift(stack.pop());
+  }
+
+  function walk() {
+    var head = output.shift();
+
+    if (head.type === 'number') {
+      return parseInt(head.value);
+    }
+
+    if (head.type === 'literal') {
+      return head.value;
+    }
+
+    if (head.type === 'operator') {
+      var l = walk();
+      var r = walk();
+
+      return Operator(head.value, l, r);
+    }
+
+    if (head.type === 'query') {
+      var l = head.key.value;
+      var r = head.value.value;
+
+      return Query(l, r);
+    }
+  }
+
+  return walk();
+}
+
+module.exports = {
+  parse: function(query) {
+    var tokens = tokenizer(query);
+    var ast = parser(tokens);
+    return ast;
+  }
+};

node_modules/media-engine/src/queries.js

@@ -0,0 +1,56 @@
+function MaxHeight(value) {
+  this.value = value;
+
+  this.match = function(options) {
+    return this.value >= options.height;
+  };
+}
+
+function MinHeight(value) {
+  this.value = value;
+
+  this.match = function(options) {
+    return this.value < options.height;
+  };
+}
+
+function MaxWidth(value) {
+  this.value = value;
+
+  this.match = function(options) {
+    return this.value >= options.width;
+  };
+}
+
+function MinWidth(value) {
+  this.value = value;
+
+  this.match = function(options) {
+    return this.value < options.width;
+  };
+}
+
+function Orientation(value) {
+  this.value = value;
+
+  this.match = function(options) {
+    return this.value === options.orientation;
+  };
+}
+
+module.exports = function Query(type, value) {
+  switch (type) {
+    case 'max-height':
+      return new MaxHeight(value);
+    case 'min-height':
+      return new MinHeight(value);
+    case 'max-width':
+      return new MaxWidth(value);
+    case 'min-width':
+      return new MinWidth(value);
+    case 'orientation':
+      return new Orientation(value);
+    default:
+      throw new Error(value);
+  }
+};

node_modules/media-engine/test/queries.test.js

@@ -0,0 +1,152 @@
+const matchMedia = require('../src');
+
+test('Should match max-height if valid', () => {
+  const result = matchMedia(
+    { '@media max-height: 700': { color: 'green' } },
+    { height: 100 },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match max-height if invalid', () => {
+  const result = matchMedia(
+    { '@media max-height: 700': { color: 'green' } },
+    { height: 800 },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match min-height if valid', () => {
+  const result = matchMedia(
+    { '@media min-height: 700': { color: 'green' } },
+    { height: 800 },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match min-height if invalid', () => {
+  const result = matchMedia(
+    { '@media min-height: 700': { color: 'green' } },
+    { height: 100 },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match max-width if valid', () => {
+  const result = matchMedia(
+    { '@media max-width: 700': { color: 'green' } },
+    { width: 100 },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match max-width if invalid', () => {
+  const result = matchMedia(
+    { '@media max-width: 700': { color: 'green' } },
+    { width: 800 },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match min-width if valid', () => {
+  const result = matchMedia(
+    { '@media min-width: 700': { color: 'green' } },
+    { width: 800 },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match min-width if invalid', () => {
+  const result = matchMedia(
+    { '@media min-width: 700': { color: 'green' } },
+    { width: 100 },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match orientation if valid', () => {
+  const result = matchMedia(
+    { '@media orientation: landscape': { color: 'green' } },
+    { orientation: 'landscape' },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match orientation if invalid', () => {
+  const result = matchMedia(
+    { '@media orientation: landscape': { color: 'green' } },
+    { orientation: 'portrait' },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match and operator if valid', () => {
+  const result = matchMedia(
+    {
+      '@media (max-height: 700) and (orientation: landscape)': {
+        color: 'green',
+      },
+    },
+    { height: 100, orientation: 'landscape' },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match and operator if invalid', () => {
+  const result = matchMedia(
+    {
+      '@media (max-height: 700) and (orientation: landscape)': {
+        color: 'green',
+      },
+    },
+    { height: 800, orientation: 'landscape' },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match or operator if valid', () => {
+  const result = matchMedia(
+    {
+      '@media (max-height: 700), (orientation: landscape)': { color: 'green' },
+    },
+    { orientation: 'landscape' },
+  );
+
+  expect(result).toEqual({ color: 'green' });
+});
+
+test('Should not match or operator if invalid', () => {
+  const result = matchMedia(
+    {
+      '@media (max-height: 700), (orientation: landscape)': { color: 'green' },
+    },
+    { orientation: 'portrait', height: 800 },
+  );
+
+  expect(result).toEqual({});
+});
+
+test('Should match several queries', () => {
+  const result = matchMedia(
+    {
+      '@media min-height: 700': { cursor: 'pointer' },
+      '@media max-height: 700': { color: 'green' },
+      '@media orientation: landscape': { background: 'red' },
+    },
+    { height: 100, orientation: 'landscape' },
+  );
+
+  expect(result).toEqual({ color: 'green', background: 'red' });
+});