Emmet bem filter problem when child uses multiple classes

[roamn]

• VSCode Version: 1.21.1
• OS Version: Windows 10/64

Steps to Reproduce:

Abbreviation to expand included modificator name
.l-layout>.-container.container>.-row.row>.-col_some_modif_name.col-xs-12

Result in VSC

Expected result

Result in Sublime Text

Does this issue occur when all extensions are disabled?: Yes

[ramya-rao-a]

Thanks for reporting @roamn
I have logged an upstream issue for the same. emmetio/html-transform#12

[ramya-rao-a]

There are 2 issues here.

• The child of <div class="l-layout"> should have the class l-layout__container container and not container__container container. Upstream Issue: bem: parent class not appended when child has multiple classes emmetio/html-transform#12
• The inner most element should have the class l-layout__col l-layout__col_some_modif_name col-xs-12 and not col-xs-12__col col-xs-12__col_some col-xs-12__col_modif col-xs-12__col_name col-xs-12. Upstream Issue: bem: classes with multiple _ get split emmetio/html-transform#14

I have submitted PRs upstream to fix both these issues, but it is unlikely that they will make it in time for the March release though. Pushing this bug to the next milestone

[roamn]

Thanks.

[ramya-rao-a]

The fix for this will be available in tomorrow's Insiders

[mjbvz]

@ramya-rao-a Here's the result I see in the current insiders:

     <div class="l-layout">
         <div class="-container container">
             <div class="-row row">
                 <div class="-col_some_modif_name col-xs-12"></div>
             </div>
         </div>
     </div>

Which doesn't match the sublime example

[ramya-rao-a]

@mjbvz You need to either add |bem in the end or add the below setting

"emmet.syntaxProfiles": {
        "html": {
            "filters": "bem"
        }
    }