h50 should expand to height: 50px; but expands to <h50></h50>.
I run into this about every 10 seconds. :\
corysimmons
All 4 comments
I am not familiar with Emmet unfortunately :/ Also I am not sure if we can do anything about that? Shouldn't it be fixed in Emmet itself? Maybe it doesn't work well with template literals.
giuseppeg
on 29 Apr 2017
Emmet expands abbreviations for html and css. So span{hello} turns into <span>hello</span>. And m10 (in CSS' scope) expands to margin: 10px;.
This works with HTML in JSX via https://gist.github.com/mxstbr/361ddb22057f0a01762240be209321f0
But not with CSS.
I'm not sure how he's doing it exactly, but it's possible to have various scopes within the same file. For instance, here we're in an HTML file, expanding HTML abbreviations, but it's able to expand CSS abbreviations inside of style="[here]"...
I'd think it would be an issue with Emmet, but we can't expect him to add a custom scope for every new thing like <style jsx> and he's already maintaining dozens of Emmet-related OSS. I'm sure this effort falls on me for being the one with the use-case, but I'm sure others would enjoy it as well so if it's something easily done, it'd be a nice feature of styled-jsx.
Just collecting notes here in case anyone wants to work on this. I'll check with Emmet's maintainer if he has any advice for how to get multiple scopes within the same file and report back if he answers.
corysimmons
on 29 Apr 2017
closing for inactivity
giuseppeg
on 9 Mar 2018
Hi! I also want the same feature.
giovannipds
on 11 Sep 2018
Related issues
soulchainer
路
5Comments
pungggi
路
4Comments
igor-ribeiro
路
3Comments
callumlocke
路
5Comments
in-in
路
4Comments
Most helpful comment
Emmet expands abbreviations for html and css. So
span{hello}turns into<span>hello</span>. Andm10(in CSS' scope) expands tomargin: 10px;.This works with HTML in JSX via https://gist.github.com/mxstbr/361ddb22057f0a01762240be209321f0
But not with CSS.
I'm not sure how he's doing it exactly, but it's possible to have various scopes within the same file. For instance, here we're in an HTML file, expanding HTML abbreviations, but it's able to expand CSS abbreviations inside of
style="[here]"...I'd think it would be an issue with Emmet, but we can't expect him to add a custom scope for every new thing like
<style jsx>and he's already maintaining dozens of Emmet-related OSS. I'm sure this effort falls on me for being the one with the use-case, but I'm sure others would enjoy it as well so if it's something easily done, it'd be a nice feature of styled-jsx.Just collecting notes here in case anyone wants to work on this. I'll check with Emmet's maintainer if he has any advice for how to get multiple scopes within the same file and report back if he answers.