@fe6/water-pro/components/_util/json2mq.js

An enterprise-class UI design language and Vue-based implementation

/**
 * source by `json2mq`
 * https://github.com/akiran/json2mq.git
 */

const camel2hyphen = function (str) {
  return str
    .replace(/[A-Z]/g, (match) => {
      return `-${match.toLowerCase()}`;
    })
    .toLowerCase();
};

const isDimension = function (feature) {
  const re = /[height|width]$/;
  return re.test(feature);
};

const obj2mq = function (obj) {
  let mq = '';
  const features = Object.keys(obj);
  features.forEach((feature, index) => {
    let value = obj[feature];
    feature = camel2hyphen(feature);
    // Add px to dimension features
    if (isDimension(feature) && typeof value === 'number') {
      value = `${value}px`;
    }
    if (value === true) {
      mq += feature;
    } else if (value === false) {
      mq += `not ${feature}`;
    } else {
      mq += `(${feature}: ${value})`;
    }
    if (index < features.length - 1) {
      mq += ' and ';
    }
  });
  return mq;
};

export default function (query) {
  let mq = '';
  if (typeof query === 'string') {
    return query;
  }
  // Handling array of media queries
  if (query instanceof Array) {
    query.forEach((q, index) => {
      mq += obj2mq(q);
      if (index < query.length - 1) {
        mq += ', ';
      }
    });
    return mq;
  }
  // Handling single media query
  return obj2mq(query);
}