@property [color syntax] - hex values irregularities  #187

Prerequisites

• Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: https://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

For hex colors beginning with a letter, the subsequent semicolon gets the scope invalid.illegal.bad-identifier.css:

@property --light-blue { syntax: '<color>'; inherits: false; initial-value: #ace; }

For hex colors beginning with a number, the subsequent semicolon gets the scope meta.selector.css, as it seems like it should:

@property --dark-gray { syntax: '<color>'; inherits: false; initial-value: #123; }

Steps to Reproduce

1. Use the following two examples to compare the scope value of the final semicolon:

@property --light-blue { syntax: '<color>'; inherits: false; initial-value: #ace; }

@property --dark-gray { syntax: '<color>'; inherits: false; initial-value: #123; }

Expected behavior:

Semicolon is meta.selector.css.

Actual behavior:

Semicolon is invalid.illegal.bad-identifier.css.

Reproduces how often:

100%

Additional Information

Originally from @tomasmoberg in microsoft/vscode#130826