Match css custom properties with Regxr

Question

I want to match CSS custom properties with the Regxr pattern.
So I tried with /^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/gim which works fine with normal characters, but when it comes to emoji or other language characters, it doesn't work as expected.

--monster-x: purple;
--monster--x: red;
--monster-仮-x: blue;

Example:

How can I match all possible/supported CSS custom properties? Is there any doc for allowed/disallowed characters in CSS custom properties?

Thanks.

Answer 1

You'll need to expand your character list ([]) using the following:

Emoji's

JavaScript regular expression for Unicode emoji

[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]

Chinese characters

Javascript unicode string, chinese character but no punctuation

[\u4E00-\u9FCC]

---

Combining those char lists with your existing one will give us the following regex:

^(\*?[-#\/\*\\\w\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}\u4E00-\u9FCC]+(\[[0-9a-z_-]+\])?)\s*

> Regex 101 Demo