Repository: tailwindlabs/tailwindcss
File: packages/@tailwindcss-upgrade/src/template/candidates.ts (TypeScript)

Code before:
    base += variant.root
    base += '-'
    base += printVariant(variant.variant)
  }

  // Handle modifiers
  if (variant.kind === 'functional' || variant.kind === 'compound') {
    if (variant.modifier) {
      if (variant.modifier.kind === 'arbitrary') {
        base += `/[${escapeArbitrary(trimWhitespace(variant.modifier.value))}]`
      } else if (variant.modifier.kind === 'named') {
        base += `/${variant.modifier.value}`
      }
    }
  }

  return base
}

function escapeArbitrary(input: string) {
  return input
    .replaceAll('_', String.raw`\_`) // Escape underscores to keep them as-is
    .replaceAll(' ', '_') // Replace spaces with underscores
}

function trimWhitespace(input: string) {
  let ast = ValueParser.parse(input)
  let drop = new Set<ValueParser.ValueAstNode>()

  ValueParser.walk(ast, (node, { parent }) => {
    let parentArray = parent === null ? ast : (parent.nodes ?? [])

    // Handle operators (e.g.: inside of `calc(…)`)
    if (
      node.kind === 'word' &&
      // Operators
      (node.value === '+' || node.value === '-' || node.value === '*' || node.value === '/')
    ) {
      let idx = parentArray.indexOf(node) ?? -1

      // This should not be possible
      if (idx === -1) return

      let previous = parentArray[idx - 1]
      if (previous?.kind !== 'separator' || previous.value !== ' ') return

      let next = parentArray[idx + 1]
      if (next?.kind !== 'separator' || next.value !== ' ') return

      drop.add(previous)
      drop.add(next)

Review comment (security):
Looks like this and `escapeArbitrary` are never used separately, maybe should just make this one function like `toCandidateArbitraryValue` or something? Not totally sure on the name but really we're taking a CSS value and converting it to the arbitrary value of an actual class string.

Either way I don't think `trimWhitespace` is the right name since to me at least "trim" implies whitespace at the start and end, not whitespace inside the string.

Code after:
    base += variant.root
    base += '-'
    base += printVariant(variant.variant)
  }

  // Handle modifiers
  if (variant.kind === 'functional' || variant.kind === 'compound') {
    if (variant.modifier) {
      if (variant.modifier.kind === 'arbitrary') {
        base += `/[${printArbitraryValue(variant.modifier.value)}]`
      } else if (variant.modifier.kind === 'named') {
        base += `/${variant.modifier.value}`
      }
    }
  }

  return base
}

function printArbitraryValue(input: string) {
  let ast = ValueParser.parse(input)

  let drop = new Set<ValueParser.ValueAstNode>()

  ValueParser.walk(ast, (node, { parent }) => {
    let parentArray = parent === null ? ast : (parent.nodes ?? [])

    // Handle operators (e.g.: inside of `calc(…)`)
    if (
      node.kind === 'word' &&
      // Operators
      (node.value === '+' || node.value === '-' || node.value === '*' || node.value === '/')
    ) {
      let idx = parentArray.indexOf(node) ?? -1

      // This should not be possible
      if (idx === -1) return

      let previous = parentArray[idx - 1]
      if (previous?.kind !== 'separator' || previous.value !== ' ') return

      let next = parentArray[idx + 1]
      if (next?.kind !== 'separator' || next.value !== ' ') return

      drop.add(previous)
      drop.add(next)
    }

    // The value parser handles `/` as a separator in some scenarios. E.g.:
    // `theme(colors.red/50%)`. Because of this, we have to handle this case
    // separately.