vcc-ui/_src/style-renderer.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import { createRenderer } from "fela";
import webPreset from "fela-preset-web";
import rtl from "fela-plugin-rtl";
import hexToRgba from "hex-to-rgba";
import sortClassnames from "fela-sort-classnames";

import { deprecate } from "./deprecate";

export function styleRenderer({ isRtl, ...rest } = {}) {
	deprecate(
		'Using the "isRtl" prop is deprecated and will cause no effect in the next major update. Use the "theme.direction" key instead. See https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-rtl#theme-based-mode',
		isRtl !== undefined
	);

	const options = rest || {};

	return createRenderer({
		...options,
		enhancers: [sortClassnames()],
		plugins: [
			...webPreset,
			themeFontsPlugin,
			hexToRgbaPlugin,
			rtl(isRtl ? "rtl" : "ltr"),
			...(options.plugins || [])
		].filter(Boolean)
	});
}

function themeFontsPlugin(style, type, renderer, props) {
	const fonts = (props.theme && props.theme.fonts) || [];
	const fontsPath = (props.theme && props.theme.fontsPath) || "";

	for (const property in style) {
		const value = style[property];

		// TODO: maybe we wanna cache already rendered fonts
		// but no high prio as Fela does that as well
		if (typeof value === "string" && property === "fontFamily") {
			// check each alternative font value
			const fontValues = value.split(",");

			const usedFonts = fonts.filter(
				font => fontValues.indexOf(font.fontFamily) !== -1
			);

			if (usedFonts.length > 0) {
				usedFonts.forEach(({ fontFamily, src, ...fontProps }) =>
					renderer.renderFont(
						fontFamily,
						src.map(
							// allow absolute files with http prefix
							file => (file.indexOf("http") === -1 ? fontsPath : "") + file
						),
						fontProps
					)
				);
			}
		} else if (typeof value === "object" && !Array.isArray(value)) {
			themeFontsPlugin(value, type, renderer, props);
		}
	}

	return style;
}

// TODO: move to fela repo as an official plugin
function hexToRgbaPlugin(style) {
	for (const property in style) {
		const value = style[property];

		if (
			typeof value === "string" &&
			value.indexOf("#") === 0 &&
			value.length === 9
		) {
			style[property] = hexToRgba(value);
		} else if (typeof value === "object" && !Array.isArray(value)) {
			hexToRgbaPlugin(value);
		}
	}

	return style;
}