styled-components/lib/constructors/toggle.js

**This is a work in progress** based off of [this demo](https://github.com/geelen/css-components-demo).

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

exports.default = function (name, options) {
  return function () {
    var _ref;

    var valueString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

    var throwUnknown = function throwUnknown(unknownValue) {
      var validValues = Object.keys(options).filter(function (v) {
        return v !== 'default';
      });
      throw new Error(name + ': Unknown value \'' + unknownValue + '\'. Valid values are:\n' + validValues.join('\n'));
    };

    var values = valueString.split(/ +/).filter(function (s) {
      return s.length > 0;
    });
    return (_ref = options.default ? [options.default] : []).concat.apply(_ref, _toConsumableArray(values.map(function (v) {
      return v in options ? options[v] : throwUnknown(v);
    }))).map(function (v) {
      return v + ';';
    });
  };
};

/*
* Toggle: Simple Namespaced styling
*
* example: flex = toggle('flex', {
*   default: rules.display('flex'), // always included
*   inline: rules.display('inline-flex'),
*   vertical: rules.flexDirection('column'),
* })
*
* flex() => `display: flex;`
* flex('inline vertical') => `display: flex; display: inline-flex; flex-direction: column;`
* */

module.exports = exports['default'];