search

bathos / Ecmascript-Sublime

ECMAScript/JavaScript syntax (ES2015-ES2018, JSX, template highlighting, etc) with absurdly specific scopes
88 stars 8 forks source link

styled jsx has no css autocomplete and emmet does not work #67

Closed nhooyr closed 4 years ago

nhooyr commented 5 years ago

Title.

The autocomplete doesn't' autocomplete css, it's just the generic autocomplete and emmet also does not work.

nhooyr commented 5 years ago

Oddly enough, if you put a period first, autocomplete works:

Screen Shot 2019-05-10 at 7 07 22 PM

Not sure what's going on.

nhooyr commented 5 years ago

Emmet thinks the CSS is JSX.

Also, the scope for the CSS selectors is property-value for some reason.

Screen Shot 2019-05-10 at 7 11 07 PM
nhooyr commented 5 years ago

The /* syntax: css */ makes everything work properly again aside from emmet.

bathos commented 5 years ago

This is related to the fact that the autodetected styled jsx and css tags without a syntax directive do not delegate to the default sublime css definition, which borks easily when there are interpolated values in the CSS. (We might be able to fix it by tweaking the root scopes that uses, not sure.)

The use of property-value is deliberate — the (formal) base CSS grammar does not distinguish between identifiers which are part of selectors vs property names, leaving it to the higher level module grammars. Those context-requiring higher level grammars are what the special simplified css syntax scoping exists to avoid; they’re what cause interpolated values to break in the built-in CSS def (which is really a stylesheet syntax def, not a general css syntax def — css has several different goal symbols). In other words, it’s limiting scoping to lexical constructs, so we had to pick one or the other scope for identifiers generically.

nhooyr commented 4 years ago

Going to close as it has been a while and I'm not sure if this is relevant anymore.