Generate CSS text outline in styled-components.

text-outline.js

function toPx(val) {
  return typeof val === 'number' ? `${val}px` : val;
}

/**
 * Creates a text outline of a given width and color.
 *
 * Sample usage in styled-components:
 * ${props => textOutline('2px', props.color)}
 *
 * @param {String|Number} width Outline width, e.g. '2px' or 2
 * @param {String} color Outline color, e.g. 'red'
 */
export function textOutline(width, color) {
  const widthPx = toPx(width);
  const positionBase = [`-${widthPx}`, 0, widthPx];
  const positions = positionBase.reduce((arr, x) => arr.concat(positionBase.map(y => `${x} ${y}`)), []);
  const shadows = positions.map(position => `${position} ${color}`);

  return `text-shadow: ${shadows.join(',')};`;
}