Generate CSS line background in styled-components.

line-background.js

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

/**
 * Creates a background with a single line, e.g. for simulating underline.
 *
 * Sample usage in styled-components:
 * ${props => lineBackground('to bottom', '2px', props.color)}
 *
 * @param {String} direction Background direction, e.g. "to bottom" or "45deg"
 * @param {String|Number} width Line width, e.g. '2px' or 2
 * @param {String} color Line color, e.g. 'red'
 */
export function lineBackground(direction, offset, width, color) {
  const widthPx = toPx(width);
  const offsetPx = toPx(offset);
  const lineStart = offsetPx;
  const lineEnd = `calc(${lineStart} + ${widthPx})`;

  return `background: linear-gradient(
    ${direction},
    transparent ${lineStart},
    ${color} ${lineStart},
    ${color} ${lineEnd},
    transparent ${lineEnd}
  );`;
}