Skip to content
This repository has been archived by the owner on Dec 15, 2022. It is now read-only.

Updated syntax highlighting causes issue for namespaced CSS selectors #104

Closed
1 task done
kevinastone opened this issue Feb 23, 2017 · 3 comments
Closed
1 task done

Comments

@kevinastone
Copy link

Prerequisites

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).

screenshot 2017-02-23 15 21 44

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
@Alhadis
Copy link
Contributor

Alhadis commented Feb 23, 2017

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?

@Alhadis
Copy link
Contributor

Alhadis commented Feb 24, 2017

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;
	}
}

@50Wliu
Copy link
Contributor

50Wliu commented Mar 17, 2017

It looks like this has been resolved?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants