Emmet Abbreviations in Css with - doesn't trigger Emmet suggestions

[ramya-rao-a]

From @LukeMcGurdy in #33764 (comment)

• In a css file, run the command Emmet: Expand Abbreviation after p10-20
• It expands to padding: 10px 20px;
• Same doesn't show up in the suggestion list

[user3323]

@ramya-rao-a, hello!

How about this...

you write bdra - VS Code tells you, that it should be border-radius.. ok, it makes sense

but then you write bdra50p and emmet gonna expand it into ... border-right ?

there is even no letter "a" in the "border-right"

[LukeMcGurdy]

@ramya-rao-a - interesting workaround. Thanks. In reality, I'd probably just not use shorthand until there is a solution for this.

Some more examples.

trf:sc or transform: scale(x, y) is second on the suggestion list and for trf:scz there are no suggestions. (Admittedly I've never used this last one before but I'm just randomly picking from the Emmet Cheatsheet).

ta should return text-align: left but it's 3rd n the list of suggestions. (the same can be said for its right and centre variants)

dt should expand to display:table

And so on...

[user3323]

@ramya-rao-a

vscode: 1.17.0-ins

lh16 = line-height: 16 (with no px at the end)

[ramya-rao-a]

@user3323 Emmet always try to fuzzy match very eagerly. bdra matches the closest with bdr . See https://github.com/emmetio/snippets/blob/master/css.json#L43

Try it. Type bdra and run Emmet: Expand Abbreviation and you will get border-right: 1px solid #000;

VS Code then applies its own filtering to the suggestions from Emmet which filters out this suggestion because like you said there is no a in border-right: 1px solid #000;
We (not Emmet) added this type of filtering due to the issues in #28933 where Emmet was suggesting things that are counter intuitive when presented in the suggestion list. Imaging typing font-family and being suggested font: fantasy

bdra50p on the other hand is providing specific numeric values to the snippet. In this case, we (not Emmet) skipped the filtering. Usage of numerics in abbreviations narrows down Emmet suggestions.

So basically, we try to add a check point to Emmet suggestions and show them

• the suggestion was coming from a custom emmet snippet
• or if the abbreviation has numeric values
• or when the expanded value is fuzzy matchable with the abbreviation

As for line-height, that is by design. line-height is one of those css properties that take just a number without units and that is what Emmet does here. You can add a unit alias for px and and then use lh16px

"emmet.preferences": {
    "css.unitAliases": "px:px"
}

[ramya-rao-a]

@LukeMcGurdy The Css examples in the cheatsheet that use : are not supported in Emmet 2.0
All the different trf snippets have been combined into one snippet with choices. See https://github.com/emmetio/snippets/blob/v0.2.5/css.json#L178. But VS Code is not surfacing that properly, I have logged #33994 to track that

Emmet suggestions in Css are sorted among other css suggestions. That's the reason for the examples you mentioned where they weren't at the top. One way to solve this is to set have the below settings. This way Emmet suggestions are always assured to be on the top

{
    "emmet.showSuggestionsAsSnippets": true,
    "editor.snippetSuggestions": "top"
}

dt does expand to display: table though. It doesn't for you?

[LukeMcGurdy]

Thanks, @ramya-rao-a. I just noticed these in the latest release. dt does expand to display table so either it wasn't working in 1.15 (or at least my particular version of it) or I made a mistake. Either way, it works fine v 1.16 and in general, there seems to have been big improvements in how Emmet is implemented.

Smashing job VS Code people.

[ramya-rao-a]

Thanks @LukeMcGurdy !

[ramya-rao-a]

The fix will be out in tonight's Insiders
You can get the Insiders from https://code.visualstudio.com/insiders

[ramya-rao-a]

Note to verifier

p10-20 should result in padding: 10px 20px in the suggestion list
Same for m10-20 -> margin: 10px 20px

[metacurb]

Hey @mjbvz @ramya-rao-a, I've been doing some testing on this issue. It seems as if it's not resolve entirely. For example, trying m0-a should produce margin: 0 auto;, however it does nothing currently. It seems that non-digit characters cause an issue in this way.

Have I been using Emmet the wrong way? Or is this an issue?

[ramya-rao-a]

@BeauAgst nice catch. I've added a fix.
The fix should be out in the next Insiders build.
Until, then you can use the workaround of either using the command Emmet: Expand Abbreviation or set emmet.triggerExpansionOnTab to true and use tab