Expansions Not Working In Nested CSS

[shshaw]

Emmet expansions seem to work if you have nested CSS selectors like...

.parent {
  display: flex;
  
  div {   
    flex: 0;
  }
}

However, if you have nested psuedo-selectors, Emmet doesn't seem to offer expansion as expected.

.parent {
  display: flex;
  /* Expansions work */
  
  div {   
    flex: 0;
    /* Expansions work */
  }

  div:hover {
    /* No expansions */
  }
  div:last-child {
    /* No expansions */
  }
}

Screen.Recording.2026-03-10.at.10.36.19.AM.mov

[sergeche]

Hmm, can’t reproduce that, works fine in repo demo

[shshaw]

I can recreate it easily with a minimal CodeMirror demo: https://codepen.io/editor/shshaw/pen/019eb879-ff20-72fc-a847-049e21fc6f3c

import { basicSetup } from "codemirror"
import { EditorView, keymap } from '@codemirror/view';
import { EditorState } from '@codemirror/state'
import { css } from "@codemirror/lang-css"

import { expandAbbreviation } from '@emmetio/codemirror6-plugin';

new EditorView({
    state: EditorState.create({
      doc: `.parent {
  display: flex;
  /* Expansions work */
  
  div {   
    flex: 0;
    /* Expansions work */
  }

  div:hover {
    /* No expansions */
  }
  div:last-child {
    /* No expansions */
  }
}`,
        extensions: [
            basicSetup,
            css(),

            // Bind Expand Abbreviation command to keyboard shortcut
            keymap.of([{
                key: 'Cmd-e',
                run: expandAbbreviation
            }]),
        ]
    }),
    parent: document.body
});