css-input.css

single size prop { --size: 10px; }
double size prop { --size: 20px 30px; }

css-output.css

single size prop { width: 10px; height: 10px; }
double size prop { width: 30px; height: 20px; }

deno-css-property-expansion.js

import * as parseCSS from '../parse-css/index.js'

function patternMatcher(
  list = [],
  patterns = [item => false],
  filter = () => true
) {
  const trimmed = list.filter(filter)
  const firstIndex = trimmed.findIndex(item => 
    patterns.every((pattern, index) =>
      pattern(
        trimmed[trimmed.indexOf(item) + index]
      )
    )
  )
  const start = list.indexOf(trimmed[firstIndex])
  const end = list.indexOf(trimmed[firstIndex + patterns.length - 1])

  return {
    start,
    end,
    match: trimmed.slice(firstIndex, firstIndex + patterns.length),
    original: list.slice(start, end + 1)
  }
}

let data = ''

// Deno CLI support
if (
  typeof Deno !== 'undefined'
  && 1 < Deno.args.length
) {
  data = new TextDecoder('utf-8').decode(
    Deno.readFileSync(Deno.args[1])
  )
}

console.log(
  parseCSS.parseAStylesheet(data).value
    .map(rule => {

      // --size: <a> <b>;
      //   width: <b>;
      //   height: <a>;
      let sizeDouble = patternMatcher(  
        rule.value.value,
        [
          ({tokenType, value}) => tokenType === 'IDENT' && value === '--size',
          ({tokenType}) => tokenType === 'DIMENSION',
          ({tokenType}) => tokenType === 'DIMENSION',
        ],
        ({tokenType}) => ['WHITESPACE', ':'].every(type => type !== tokenType)
      )
      if (sizeDouble.match.length) {
        rule.value.value.splice(
          sizeDouble.start,
          sizeDouble.original.length,
          ...parseCSS.parseAListOfComponentValues(
            `width: ${sizeDouble.match[2]}; height: ${sizeDouble.match[1]}`
          )
        )
      }

      // --size: <a>;
      //   width: <a>;
      //   height: <a>;
      let sizeSingle = patternMatcher(  
        rule.value.value,
        [
          ({tokenType, value}) => tokenType === 'IDENT' && value === '--size',
          ({tokenType}) => tokenType === 'DIMENSION',
        ],
        ({tokenType}) => ['WHITESPACE', ':'].every(type => type !== tokenType)
      )

      if (sizeSingle.match.length && sizeDouble.match.length === 0) {
        rule.value.value.splice(
          sizeSingle.start,
          sizeSingle.original.length,
          ...parseCSS.parseAListOfComponentValues(
            `width: ${sizeSingle.match[1]}; height: ${sizeSingle.match[1]}`
          )
        )
      }

      return rule.toSource()
    }).join('\n')
)