1

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:

enter image description here

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

Thanks.

Moni
  • 47
  • 9

1 Answers1

2

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

enter image description here

0stone0
  • 34,288
  • 4
  • 39
  • 64
  • Thanks so much for the solution, I think here the catch is, the pattern is going to get really long if I need to support other languages too. – Moni Mar 29 '22 at 12:07