onCSSFunction.js

import { parse } from 'postcss-values-parser'

/** @type {(decl: CSSFunction) => void} Transform a space and slash separated color function. */
const onCSSFunction = node => {
	/** @type {{ name: string, nodes: CSSNode[] }} */
	const { name, nodes } = node

	if (isColorFunctionName(name)) {
		const isHsl = isHslColorFunctionName(name) && isHslFunctionContents(nodes)
		const isRgbWithNumbers = isRgbColorFunctionName(name) && isRgbNumberFunctionContents(nodes)
		const isRgbWithPercents = isRgbColorFunctionName(name) && isRgbPercentFunctionContents(nodes)

		if (isHsl || isRgbWithNumbers || isRgbWithPercents) {
			// rename the Color function to `hsl` or `rgb`
			Object.assign(node, { name: isHsl ? 'hsl' : 'rgb' })

			/** @type {CSSPunctuation} Slash punctuation before the Alpha channel. */
			const slashNode = nodes[3]

			/** @type {CSSNumber} Alpha channel. */
			const alphaNode = nodes[4]

			if (alphaNode) {
				if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
					// transform the Alpha channel from a Percentage to (0-1) Number
					Object.assign(alphaNode, { value: String(alphaNode.value / 100), unit: '' })
				}

				// if the color is fully opaque (i.e. the Alpha channel is `1`)
				if (alphaNode.value === '1') {
					// remove the Slash and Alpha channel
					slashNode.remove()
					alphaNode.remove()
				} else {
					// otherwise, rename the Color function to `hsla` or `rgba`
					Object.assign(node, { name: isHsl ? 'hsla' : 'rgba' })
				}
			}

			// replace a remaining Slash with a Comma
			if (slashNode && isSlash(slashNode)) {
				slashNode.replaceWith(commaNode.clone())
			}

			/** Extracted Color channels. */
			let [channelNode1, channelNode2, channelNode3] = nodes

			if (isRgbWithPercents) {
				Object.assign(channelNode1, { value: to255ColorValue(channelNode1.value), unit: '' })
				Object.assign(channelNode2, { value: to255ColorValue(channelNode2.value), unit: '' })
				Object.assign(channelNode3, { value: to255ColorValue(channelNode3.value), unit: '' })
			}

			channelNode2.after(
				commaNode.clone()
			)

			channelNode1.after(
				commaNode.clone()
			)
		}
	}
}

export default onCSSFunction

const commaNode = parse(',').first

/** Return a value transformed from a scale of 0-100 to a scale of 0-255 */
function to255ColorValue(value) {
	return String(Math.floor(value * 255 / 100))
}

/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
const createRegExpTest = Function.bind.bind(RegExp.prototype.test)

/** Return whether the function name is `hsl()`, `hsla()`, `rgb()`, or `rgba()`. */
const isColorFunctionName = createRegExpTest(/^(hsl|rgb)a?$/i)

/** Return whether the function name is `hsl()` or `hsla()`. */
const isHslColorFunctionName = createRegExpTest(/^hsla?$/i)

/** Return whether the function name is `rgb()` or `rgba()`. */
const isRgbColorFunctionName = createRegExpTest(/^rgba?$/i)

/** Return whether the function name is `calc`. */
const isCalcFunctionName = createRegExpTest(/^calc$/i)

/** Return whether the unit is alpha-like. */
const isAlphaLikeUnit = createRegExpTest(/^%?$/i)

/** Return whether the unit is hue-like. */
const isHueLikeUnit = createRegExpTest(/^(deg|grad|rad|turn)?$/i)

/** @type {(node: CSSNumber) => boolean} Return whether the node is an Alpha-like unit. */
const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit)

/** @type {(node: CSSFunction) => boolean} Return whether the node is a calc() function. */
const isCalc = node => node.type === 'func' && isCalcFunctionName(node.name)

/** @type {(node: CSSNumber) => boolean} Return whether the node is a Hue-like unit. */
const isHue = node => isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit)

/** @type {(node: CSSNumber) => boolean} Return whether the node is a Number unit. */
const isNumber = node => isCalc(node) || node.type === 'numeric' && node.unit === ''

/** @type {(node: CSSNumber) => boolean} Return whether the node is a Percentage unit. */
const isPercentage = node => isCalc(node) || node.type === 'numeric' && (node.unit === '%' || node.unit === '' && node.value === '0')

/** @type {(node: CSSOperator) => boolean} Return whether the node is a Slash delimiter. */
const isSlash = node => node.type === 'operator' && node.value === '/'

/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an hsl() function. */
const isHslFunctionContents = nodes => nodes.every(
	(node, index) => typeof hslFunctionContents[index] === 'function' && hslFunctionContents[index](node)
)

/** Set of nodes in a lab() function. */
const hslFunctionContents = [isHue, isPercentage, isPercentage, isSlash, isAlphaValue]

/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an rgb() function with numbers. */
const isRgbNumberFunctionContents = nodes => nodes.every(
	(node, index) => typeof rgbNumberFunctionContents[index] === 'function' && rgbNumberFunctionContents[index](node)
)

/** Set of nodes in a rgb() function with numbers. */
const rgbNumberFunctionContents = [isNumber, isNumber, isNumber, isSlash, isAlphaValue]

/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an rgb() function with percentages. */
const isRgbPercentFunctionContents = nodes => nodes.every(
	(node, index) => typeof rgbPercentFunctionContents[index] === 'function' && rgbPercentFunctionContents[index](node)
)

/** Set of nodes in a rgb() function with percentages. */
const rgbPercentFunctionContents = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue]

/** @typedef {import('postcss-values-parser').Func} CSSFunction */
/** @typedef {import('postcss-values-parser').Node} CSSNode */
/** @typedef {import('postcss-values-parser').Numeric} CSSNumber */
/** @typedef {import('postcss-values-parser').Operator} CSSOperator */
/** @typedef {import('postcss-values-parser').Punctuation} CSSPunctuation */