Updated syntax highlighting causes issue for namespaced CSS selectors
kevinastone opened this issue · comments
Prerequisites
- Put an X between the brackets on this line if you have done all of the following:
- Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
- Followed all applicable steps in the debugging guide: http://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
The commit: b6081eb restricts identifiers that is causing syntax highlighting failures for css selectors that include a forward slash for namespacing.
At Facebook, we use namespacing in our CSS rule definitions to help modularize our stylesheets. Our asset management pipeline then mangles the selectors to valid CSS selectors when delivering to the browser. Nuclide uses language-css for styling css files resulting in the undesired highlighting.
cc @jgebhardt
Steps to Reproduce
Use a slash in your css selector (e.g. (.something/another).
Versions
This change occured from Atom 1.14 -> Atom 1.15.
kstone@kstone-mbp ~> atom-beta --version
Atom : 1.15.0-beta0
Electron: 1.3.13
Chrome : 52.0.2743.82
Node : 6.5.0
kstone@kstone-mbp ~> apm-beta --version
apm 1.15.3
npm 3.10.5
node 4.4.5 x64
python 2.7.10
git 2.8.0-rc2
Uhm, this grammar adheres quite strictly to the formal grammar defined by the CSS specification. It wouldn't be fair to add such an ad-hoc exception.
What's stopping you from bundling a fork with Nuclide?
Also, you may be unaware the CSS spec already features a formal namespace construct, which this grammar is already highlighting. It would be strange (and potentially confusing) to tokenise Facebook's internal/non-standard "namespaces" in conjunction with "true" CSS namespaces.
A CSS selector which contains an unescaped slash is invalid: the entire selector block will be dropped from the parsed stylesheet. This is the sort of error that should be visible to a user.
You can always use your stylesheet to override the error highlighting:
.syntax--css{
&.syntax--bad-identifier{
background-color: transparent !important;
color: inherit !important;
}
}
It looks like this has been resolved?