for anybody wondering, the solution was to make it even more convoluted:
(\W*?)((?:[\w\-]+(?:[\w\-]*| *)(?:\w\-)*)*)(\W*):(\W*?)([\w\-#"].*?)[^\w;.\-!]*([;\n}]|$)
What could this possibly do? This:
/** ==== HANDLE DECLARATION BLOCK ====
* starts with an absurdly complex regex pattern that grabs all
* CSS declarations, and captures 6 (yes, six) groups from each:
* 1. whitespace before property (including previous line's newline)
* 2. selector
* 3. whitespace [property <-> colon]
* 4. whitespace [colon <-> value]
* 5. value
* 6. line terminator (either empty string or semicolon)
*
* regex demo: https://regex101.com/r/NP6uI1/1
* */
It brings me absolutely zero pleasure to inform you that this is remarkably efficient and reliable, and outperforms highlight.js
Update
I have found a faster, lighter solution:
(\W*?)((?:[\w\-]+(?:[\w\- ]*?)))(\W*):(\W*?)([\w\-#"].*?)[^\w;.\-!]*([;\n}]|$)
