json2scss-map/lib/json2scssMap.js

This is an utility tool for the developers to customizing colors, fonts & other whitelabel stuff and compiling into SCSS variable. So, anyone can change the look & feel of your app in just few steps.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _lodash = require("lodash");

var _ColorConversion = require("./ColorConversion");

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var DEFAULTOPTION = {
  colorConversion: true,
  convertTo: 'hsl',
  cl4Syntax: false
};

var json2scssMap = function json2scssMap(value) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULTOPTION;

  function _json2scssMap(value) {
    var initialIndentLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    var colorConversion = arguments.length > 2 ? arguments[2] : undefined;
    var convertTo = arguments.length > 3 ? arguments[3] : undefined;
    var cl4Syntax = arguments.length > 4 ? arguments[4] : undefined;
    var indentLevel = initialIndentLevel;

    switch (_typeof(value)) {
      case 'boolean':
      case 'number':
        return value.toString();

      case 'string':
        return quoteString(value, colorConversion, convertTo, cl4Syntax);

      case 'object':
        if ((0, _lodash.isPlainObject)(value)) {
          indentLevel += 1;
          var indent = indentsToSpaces(indentLevel);
          var jsObj = value;
          var sassKeyValPairs = [];
          sassKeyValPairs = Object.keys(jsObj).reduce(function (result, key) {
            var jsVal = jsObj[key];

            var sassVal = _json2scssMap(jsVal, indentLevel, colorConversion, convertTo, cl4Syntax);

            if (!(0, _lodash.isUndefined)(sassVal)) {
              result.push("\"".concat(key, "\": ").concat(sassVal));
            }

            return result;
          }, []);
          var result = "(\n".concat(indent + sassKeyValPairs.join(',\n' + indent), "\n").concat(indentsToSpaces(indentLevel - 1), ")");
          indentLevel -= 1;
          return result;
        } else if ((0, _lodash.isArray)(value)) {
          var sassVals = value.map(function (v) {
            if (!(0, _lodash.isUndefined)(v)) return _json2scssMap(v, indentLevel, colorConversion, convertTo);
          });
          if (sassVals.length > 1) sassVals = sassVals.join(', ');else sassVals = sassVals[0] + ',';
          return '(' + sassVals + ')';
        } else if ((0, _lodash.isNull)(value)) return 'null';else return value.toString();

      default:
        return;
    }
  }

  return _json2scssMap(value, 0, options.colorConversion, options.convertTo, options.cl4Syntax);
};

var indentsToSpaces = function indentsToSpaces(indentCount) {
  return Array(indentCount + 1).join('  ');
};

var quoteString = function quoteString(value, colorConversion, convertTo, cl4Syntax) {
  var regx = /^[\d.]*\d(px|rem|em|%|vw|vh|ch)$/g;
  var regexColor = /(#([\da-f]{3}){1,2}|(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0?\.\d+)\)|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\))/ig;

  if (regx.test(value)) {
    return value;
  } else if (regexColor.test(value)) {
    // Regex for Different Color Checking
    var isHexColor = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/i;
    var isHexAColor = /^#([a-f0-9]{8}|[a-f0-9]{4})\b$/gi;
    var isRGBColor = /(^rgb\((\d+),\s*(\d+),\s*(\d+)\)$)/gi;
    var isRGBAColor = /rgba\(\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*([01\.]\.?\d?)?\s*\)/gi;
    var isHSLColor = /^hsl\(\s*(\d+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/gi;
    var isHSLAColor = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/gi; // if convertion is true && to HSL

    if (colorConversion && (convertTo === 'hsl' || convertTo === 'HSL' || convertTo === 'hsla' || convertTo === 'HSLA')) {
      if (isHexColor.test(value)) return (0, _ColorConversion.hexToHSL)(value, cl4Syntax);
      if (isHexAColor.test(value)) return (0, _ColorConversion.hexAToHSLA)(value, cl4Syntax);

      if (isRGBAColor.test(value)) {
        var colorObject = {};
        colorObject = (0, _ColorConversion.stringToRGBA)(value);
        return (0, _ColorConversion.rgbaToHSLA)(colorObject.red, colorObject.green, colorObject.blue, colorObject.alpha, cl4Syntax);
      }

      if (isRGBColor.test(value)) {
        var _colorObject = {};
        _colorObject = (0, _ColorConversion.stringToRGB)(value);
        return (0, _ColorConversion.RGBToHSL)(_colorObject.red, _colorObject.green, _colorObject.blue, cl4Syntax);
      }

      if (isHSLColor.test(value)) {
        var _colorObject2$hue, _colorObject2$saturat, _colorObject2$lightne;

        var _colorObject2 = {};
        _colorObject2 = (0, _ColorConversion.stringToHSL)(value);
        return (0, _ColorConversion.HSLToCL4HSL)((_colorObject2$hue = _colorObject2.hue) === null || _colorObject2$hue === void 0 ? void 0 : _colorObject2$hue.trim(), (_colorObject2$saturat = _colorObject2.saturation) === null || _colorObject2$saturat === void 0 ? void 0 : _colorObject2$saturat.trim(), (_colorObject2$lightne = _colorObject2.lightness) === null || _colorObject2$lightne === void 0 ? void 0 : _colorObject2$lightne.trim(), cl4Syntax);
      }

      if (isHSLAColor.test(value)) {
        var _colorObject3$hue, _colorObject3$saturat, _colorObject3$lightne, _colorObject3$alpha;

        var _colorObject3 = {};
        _colorObject3 = (0, _ColorConversion.stringToHSLA)(value);
        return (0, _ColorConversion.HSLAToCL4HSL)((_colorObject3$hue = _colorObject3.hue) === null || _colorObject3$hue === void 0 ? void 0 : _colorObject3$hue.trim(), (_colorObject3$saturat = _colorObject3.saturation) === null || _colorObject3$saturat === void 0 ? void 0 : _colorObject3$saturat.trim(), (_colorObject3$lightne = _colorObject3.lightness) === null || _colorObject3$lightne === void 0 ? void 0 : _colorObject3$lightne.trim(), (_colorObject3$alpha = _colorObject3.alpha) === null || _colorObject3$alpha === void 0 ? void 0 : _colorObject3$alpha.trim(), cl4Syntax);
      }

      return value;
    }

    if (colorConversion && (convertTo === 'rgb' || convertTo === 'RGB' || convertTo === 'rgba' || convertTo === 'RGBA')) {
      if (isHexColor.test(value)) return (0, _ColorConversion.hexToRGB)(value, cl4Syntax);
      if (isHexAColor.test(value)) return (0, _ColorConversion.hexAToRGBA)(value, cl4Syntax);

      if (isHSLColor.test(value)) {
        var _colorObject4$hue, _colorObject4$saturat, _colorObject4$lightne;

        var _colorObject4 = {};
        _colorObject4 = (0, _ColorConversion.stringToHSL)(value);
        return (0, _ColorConversion.HSLToRGB)((_colorObject4$hue = _colorObject4.hue) === null || _colorObject4$hue === void 0 ? void 0 : _colorObject4$hue.trim(), (_colorObject4$saturat = _colorObject4.saturation) === null || _colorObject4$saturat === void 0 ? void 0 : _colorObject4$saturat.trim(), (_colorObject4$lightne = _colorObject4.lightness) === null || _colorObject4$lightne === void 0 ? void 0 : _colorObject4$lightne.trim(), false, cl4Syntax);
      }

      if (isHSLAColor.test(value)) {
        var _colorObject5$hue, _colorObject5$saturat, _colorObject5$lightne, _colorObject5$alpha;

        var _colorObject5 = {};
        _colorObject5 = (0, _ColorConversion.stringToHSLA)(value);
        return (0, _ColorConversion.HSLAToRGBA)((_colorObject5$hue = _colorObject5.hue) === null || _colorObject5$hue === void 0 ? void 0 : _colorObject5$hue.trim(), (_colorObject5$saturat = _colorObject5.saturation) === null || _colorObject5$saturat === void 0 ? void 0 : _colorObject5$saturat.trim(), (_colorObject5$lightne = _colorObject5.lightness) === null || _colorObject5$lightne === void 0 ? void 0 : _colorObject5$lightne.trim(), (_colorObject5$alpha = _colorObject5.alpha) === null || _colorObject5$alpha === void 0 ? void 0 : _colorObject5$alpha.trim(), cl4Syntax);
      }

      if (isRGBColor.test(value)) {
        var _colorObject6$red, _colorObject6$green, _colorObject6$blue;

        var _colorObject6 = {};
        _colorObject6 = (0, _ColorConversion.stringToRGB)(value);
        return (0, _ColorConversion.RGBtoCL4RGB)((_colorObject6$red = _colorObject6.red) === null || _colorObject6$red === void 0 ? void 0 : _colorObject6$red.trim(), (_colorObject6$green = _colorObject6.green) === null || _colorObject6$green === void 0 ? void 0 : _colorObject6$green.trim(), (_colorObject6$blue = _colorObject6.blue) === null || _colorObject6$blue === void 0 ? void 0 : _colorObject6$blue.trim(), cl4Syntax);
      }

      if (isRGBAColor.test(value)) {
        var _colorObject7$red, _colorObject7$green, _colorObject7$blue, _colorObject7$alpha;

        var _colorObject7 = {};
        _colorObject7 = (0, _ColorConversion.stringToRGBA)(value);
        return (0, _ColorConversion.RGBAtoCL4RGB)((_colorObject7$red = _colorObject7.red) === null || _colorObject7$red === void 0 ? void 0 : _colorObject7$red.trim(), (_colorObject7$green = _colorObject7.green) === null || _colorObject7$green === void 0 ? void 0 : _colorObject7$green.trim(), (_colorObject7$blue = _colorObject7.blue) === null || _colorObject7$blue === void 0 ? void 0 : _colorObject7$blue.trim(), (_colorObject7$alpha = _colorObject7.alpha) === null || _colorObject7$alpha === void 0 ? void 0 : _colorObject7$alpha.trim(), cl4Syntax);
      }

      return value;
    }

    if (colorConversion && (convertTo === 'hex' || convertTo === 'HEX' || convertTo === 'hexa' || convertTo === 'HEXA')) {
      if (isRGBColor.test(value)) return (0, _ColorConversion.rgbToHEX)(value);
      if (isRGBAColor.test(value)) return (0, _ColorConversion.rgbaToHEXA)(value);
      if (isHSLColor.test(value)) return (0, _ColorConversion.HSLToHEX)(value);
      if (isHSLAColor.test(value)) return (0, _ColorConversion.HSLAToHEXA)(value);
      return value;
    }

    return value;
  }

  return "\"" + value + "\"";
};

var _default = json2scssMap;
exports["default"] = _default;