`scroll-marker-group` CSS property flagged as 'Unknown property'

[mikeygough]

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

• VS Code Version: 1.101.0 (Universal)
• OS Version: macOS Sequoia Version 15.5

Steps to Reproduce:

1. Disable all VSCode extensions. This bug is not related to extensions.
2. Create a .css file.
3. Try to apply the scroll-marker-group property to an element. For example:
   ul {scroll-marker-group: after;}
4. Note the blue squiggly highlighting and VSCode error
   Unknown property: 'scroll-marker-group' css(unknownProperties)
5. scroll-marker-group is indeed a valid property. The scroll-marker-group property is used to control whether a scroll container has a ::scroll-marker-group pseudo-element generated. This bug was identified while following the MDN tutorial for creating a CSS carousel.

[vs-code-engineering]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.101.1. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[mikeygough]

FYI, updated my version to the latest but am experiencing the same error.

[Mori-Yang]

Is there any way to skip the check or add a new CSS property to the library now?

[mikeygough]

@Mori-Yang I don't see an option to ignore and clicking Quick Fix tries to change the property to another name which isn't helpful. I'd imagine there is a library of terms that needs to be updated but I'm not sure.

[aeschli]

vscode-custom-data/web-data/css/generateData.mjs

Line 335 in d17efbb

async function process() {

is the script we use to create the file that contains all known data.
Maybe you can investigate why the property doesn't show up

A fix would have to be made there.

[Mori-Yang]

@aeschli Thanks for reply!
@mikeygough I solved it this way:
.vscode/settings.json

{
    "css.customData": [
        "./.vscode/css.css-data.json"
    ]
}

.vscode/css.css-data.json

{
  "version": 1.1,
  "properties": [
    {
      "name": "linear-direction",
      "description": "linear layout"
    }
  ]
}

https://code.visualstudio.com/Docs/languages/CSS#_css-custom-data

Of course, you need to use the new standard attributes. Maybe this method can only be solved in this way for the time being.

[mikeygough]

@aeschli , I cloned vscode-custom-data and was able to get the correct behavior. The steps I took were:

• Manually add an entry for scroll-marker-group inside the css-schema.json file.
• Run yarn update-sources and yarn generate-data.
• Pop open settings and point css.customData to the generated file. For example, something like:

"css.customData": [
    "./vscode-custom-data/web-data/data/browsers.css-data.json"
  ],

Is opening a PR on vscode-custom-data that manually adds an entry for scroll-marker-group to css-schema.json an appropriate fix? Or am I misunderstanding how this service works?

Important to note that MDN defines two scroll-marker-groups. One is the pseudo element ::scroll-marker-group. The other is a property scroll-marker-group. They are different and MDN has pages for each scroll-marker-group & ::scroll-marker-group. Currently, highlighting works for the pseudo element but not the property.

Thanks for all your help.

[aeschli]

We don't want to change css-schema.json. New properties are normally picked up from the mdn node module:

https://github.com/mdn/data/blob/main/css/properties.json is the file we use.

Maybe it has to do that the npm repo is now replaced byhttps://github.com/w3c/webref

[aeschli]

scroll-marker-group is still experimental and supported by few browsers. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-marker-group