Divji

ссылку,

раньше на хекселете курс по программированию на js использовал функциональный подход, можешь попробовать обратиться к их материалам.

частично на книге SICP был основан это курс, можешь попробовать обратиться к ней, в исходниках к этой книге используется функциональный язык Scheme (Structure and Interpretation of Computer Programs - Abelson, Sussman).

не уверен, что конвейер и композиция имеют прямое отношение к фп.

я использовал global в вашей ситуации вот пример
функция fontFace подключает шрифты, require их загружает из указанной папки, в итоге подключение выглядит так

${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

import { createGlobalStyle } from 'styled-components';

export function fontFace(name, src, fontWeight = 'normal', fontStyle = 'normal'){
    /* eslint-disable */
    return `
      @font-face{
          font-family: "${name}";
          src: url(${require('../../../../fonts/' + src + '.eot')});
          src: url(${require('../../../../fonts/' + src + '.eot')}?#iefix) format("embedded-opentype"),
               url(${require('../../../../fonts/' + src + '.woff')}) format("woff"),
               url(${require('../../../../fonts/' + src + '.ttf')}) format("truetype"),
               url(${require('../../../../fonts/' + src + '.svg')}#${name}) format("svg");

          font-style: ${fontStyle};
          font-weight: ${fontWeight};
      }
  `;
}

export const GlobalStyle = createGlobalStyle`
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Thin', 100, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Light', 300, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Roman', 'normal', 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Medium', 500, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

  *{
    box-sizing: border-box;
  }

  a{
    color: #17b0e7;
    text-decoration: none;
  }

  body{
    font-family: 'HelveticaNeue';
  }
`;