lightningcss_fluid_index.js

/**
 * @module fluid
 * @description Generates a fluid typography scale based on the provided min and max viewport and font sizes.
 * @memberof LightningCSS
 * @version 1.0.0
 * @param {Object} [params={}] - The parameters object.
 * @param {number} [params.vmin=0] - The minimum viewport width.
 * @param {number} [params.vmax=1600] - The maximum viewport width.
 * @param {number} [params.root=16] - The root font size in pixels.
 * @returns {Object} - An object containing the `fluid` function.
 */
export const fluid = ({ vmin = 0, vmax = 1600, root = 16 } = {}) => ({
	Function: {
		fluid({ arguments: [{ value: miny }, , { value: maxy }] }) {
			const toPx = (value, unit) => (unit === 'rem' ? value * root : value)

			const minyInPx = toPx(miny.value, miny.unit)
			const maxyInPx = toPx(maxy.value, maxy.unit)

			const min = `${miny.value}${miny.unit}`
			const max = `${maxy.value}${maxy.unit}`

			const rem = minyInPx / root

			const vminFactor = vmin / 100
			const scaleFactor = (100 * (maxyInPx - minyInPx)) / (vmax - vmin)

			const scalar = `${rem.toFixed(4)}rem + ((1vw - ${vminFactor.toFixed(1)}px) * ${scaleFactor.toFixed(4)})`

			return { raw: `clamp(${min}, ${scalar}, ${max})` }
		}
	}
})