function replaceSelector(selector, utilitySelectors, candidate) {
      let needle = `.${escapeClassName(candidate)}`
      let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g)

      return selector
        .split(/\s*,\s*/g)
        .map((s) => {
          let replaced = []

          for (let utilitySelector of utilitySelectorsList) {
            let replacedSelector = utilitySelector.replace(needle, s)
            if (replacedSelector === utilitySelector) {
              continue
            }
            replaced.push(replacedSelector)
          }
          return replaced.join(', ')
        })
        .join(', ')
    }
When we have an apply like this:

.abc {
   @apply hover:font-bold;
}

What we essentially will do is resolve to this:

.abc {
   @apply .hover\:font-bold:hover {
     font-weight: 500;
   }
}

Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
What happens in this function is that we prepend a `.` and escape the candidate.
This will result in `.hover\:font-bold`
Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`