styled jsx has no css autocomplete and emmet does not work about ecmascript-sublime

[nhooyr]

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

Not sure what's going on.

[nhooyr]

Emmet thinks the CSS is JSX.

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

[nhooyr]

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

[bathos]

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]

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