Autocompletion within style attribute on HTML element

1

Currently css autocompletion doesn’t work within style attribute on HTML element.

Does anyone know if there is an “easy” way for setting up autocompletion on top of existing html language extension?

I tried to configure existing html language extension, but it didn’t work out:

html({
  nestedAttributes: [
    {
      name: 'style',
      parser: cssLanguage.parser
    }
  ],
  // nestedLanguages: [
  //   {
  //     parser: cssLanguage.parser,
  //     attrs: (attrs) => {
  //       console.log('attrs.style:', attrs.style)
  //       return !!attrs.style
  //     },
  //     tag: 'div'
  //   }
  // ]
})

Or should I create some mixed html language with Lezer?

2

I get CSS completions in this case (this patch improves them a bit). Are you getting no completions at all?

3

I have completions, but for html only:
codemirror v6.0.1
@codemirror/lang-html v6.4.1

image

I have additional autocompletion on top of existing html autocompletion, and I also use emmet plugin. I thought maybe it conflicts somehow, but even if I disable those extensions I still get only html completions list within style attribute.

4

That was the CSS completion, but it was incorrectly trying to complete a tag selector. @codemirror/lang-css 6.1.1 should help with that.

5

okay, thanks. I’ll wait when it’s published and write back if this patch helps

6

Patch helped, thanks a lot. But I guess reference to lang-css need to be updated in lang-html

7

I’m definitely not going to republish all dependent packages every time I cut any package release. The version range in lang-html matches the new lang-css just fine.

8

you’re right, just when I removed modules and reinstalled lang-html I still had v6.0.1 for some reason, now it’s okay and I have relevant version (v.6.1.1).

thanks for your help