validateFormalSyntax.js

import { length, percentage } from './dataTypes'
import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'

/**
 *
 * https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#formal_syntax
 *
 * background-size =
 *  <bg-size>#
 *
 * <bg-size> =
 *   [ <length-percentage [0,∞]> | auto ]{1,2}  |
 *   cover                                      |
 *   contain
 *
 * <length-percentage> =
 *   <length>      |
 *   <percentage>
 *
 * @param {string} value
 */
export function backgroundSize(value) {
  const keywordValues = ['cover', 'contain']
  // the <length-percentage> type will probably be a css function
  // so we have to use `splitAtTopLevelOnly`
  return splitAtTopLevelOnly(value, ',').every((part) => {
    const sizes = splitAtTopLevelOnly(part, '_').filter(Boolean)
    if (sizes.length === 1 && keywordValues.includes(sizes[0])) return true

    if (sizes.length !== 1 && sizes.length !== 2) return false

    return sizes.every((size) => length(size) || percentage(size) || size === 'auto')
  })
}