microsoft / vscode-custom-data

Documentation and sample for using VS Code custom data format

VS Code Custom Data

Documentation, sample and data for using VS Code's HTML/CSS custom data format.

Synopsis

VS Code ships with rich language feature support for HTML/CSS, such as auto-completion and hover information. The core of these language support are implemented in vscode-html-languageservice and vscode-css-languageservice. In the past, these libraries were coupled to outdated schemas that define HTML/CSS entities. Custom data decouples these libraries from the data they use and allows VS Code to offer up-to-date support for latest HTML/CSS proposals or frameworks built on top of HTML/CSS.

Usage

There are two primary use cases:

1. You can use settings, html.customData and css.customData in your settings to let VS Code load additional HTML/CSS entities, so they would show up in auto-completion, hover information etc. See helloworld sample for an example.
2. You can use Contribution Points, contributes.html.customData or contributes.css.customData to load Custom Data into VS Code. See vscode-mavo for an example.

Explanation

Take this HTML auto-completion example:

<|

• vscode-html-languageservice determines that it should provide a list of tag names, such as div, span, p.
• By default, VS Code provides data extracted from HTML spec to vscode-html-languageservice, so <| completes all HTML tags described in the HTML spec.
• The html.customData setting and contributes.html.customData allows you to extend this list to include your own definition of HTML tags.

On the one hand, we continuously curate the data VS Code provides to the HTML/CSS language services. For example, VS Code pulls data from mdn/data and mdn/browser-compat-data to provide latest information on CSS properties' usage, syntax and browser compatibility. By continously following the latest web spec, VS Code can provide latest information & up-to-date language support for new HTML/CSS entities.

On the other hand, for users and framework authors who build new technologies and frameworks on top of HTML/CSS, custom data offers an easy way for them to add support for their custom frameworks. For example:

• WebComponents-based frameworks can statically analyze their components and emit a JSON file following the custom data schema to get language support.
• Vue language server can analyze Vue components and load custom data into its vscode-html-languageservice based Language Server to provide Vue-specific auto-completions.

Documentation

• HTML Custom Data
• CSS Custom Data

Schemas and Versioning

• Latest HTML Schema, V1.1
• Latest CSS Schema, V1.1

Versioning

• Schemas are versioned in the format of <Major>.<Minor>.
• Minor changes are backwards compatible. Custom data that satisfies V1.X spec would be valid according to V1.0 spec.
• Major changes introduce breaking changes. Custom data that satisfies V2.X spec would likely be invalid according to V1.0 spec.

Samples

• samples/helloworld: Open this sample in VS Code and start playing with custom data.
• samples/svg: A real-world sample that loads SVG-related HTML/CSS entities in VS Code.
• samples/webcomponents: Use custom data to get web component editor support in HTML.
• octref/vscode-mavo: Use custom data to support the Mavo framework built on top of HTML/CSS.

Web Data

/web-data contains the data collection pipelines and the actual data being used in the VS Code HTML extension and CSS extension. It pulls data from sources such as HTML/CSS spec and MDN and massages them into the custom data format ready to use.

Updating Web Data

• Run yarn update-sources, which updates @mdn/browser-compat-data, mdn-data and attributeRelevance.js
• After all updates are done, run yarn generate-data
• Review the diff. Make sure the updates look reasonable. If there are new properties, make sure that they don't have blank descriptions. There is no API for pulling descriptions. Each time you regenerate the data, if there are properties with missing descriptions, find its MDN page, go to https://github.com/microsoft/vscode-custom-data/blob/master/web-data/css/mdn/mdn-documentation.js and update it manually
• Finally, commit and publish the data to @vscode/web-custom-data on NPM.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

vscode-custom-data's Issues

Missing "r" property from attribute list

The following code should be valid as per spec from SVG2.0:
https://www.w3.org/TR/SVG/geometry.html#RProperty

.vertex {
        filter: drop-shadow(rgba(207, 171, 255, 0.9) 0px 0px 20px);
        fill: #b082ee;
        r: 20;
        stroke: 5;
    }

Unknown property: 'r' lit-plugin(no-invalid-css)

I'm happy to do a PR, but unclear what's the process and pipeline to add it correctly.

CSS hover text claims 'white-space' is shorthand for 'white-space-collapsing' and 'text-wrap'

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

• VS Code Version: 1.64.2
• OS Version: Windows 10

Steps to Reproduce:

1. Create some CSS with the white-space property
2. Hover over it

Hover text then shows:

Shorthand property for the 'white-space-collapsing' and 'text-wrap' properties.

I can't find any information about these properties, except some old discussions that say they don't exist.

Also, the source of this hover text is pretty opaque; I can't find it on GitHub. If someone points me to a more appropriate repository, I'll open the issue there.

the `html.customData` configuration does not work in vue files.

workspace setting.json

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

data-token.json

{
  "version": 1.1,
  "globalAttributes": [
    {
      "name": "data-token",
      "description": "def token for submit"
    }
  ]
}

It works well in html files.

But it does not work in vue files.

Do I need other configurations to make html.customData configuration work in vue files?

Only seems to pick up custom data paths defined in 'settings.json' rather than 'code-workspace' files

Not sure if this is the correct location to place this, saw another user was directed here after submitting their issue directly to VSCode repo.

Essentially right now the 'customData' fields defined in VSCode are ignored when used inside a <workspace-name>.code-workspace file under the settings property however it does work when creating a .vscode/settings.json file.

This is somewhat confusing as the documentation states specifically it only currently works in workspace settings and I would expect the code-workspace files to be supported.

VSCode Version: 1.45.1

support templating languages: `gohtml`

With the new emergence of htmx, no extension currently handles perfectly the htmx data extension on VSCode because the customData field is not extendable on those templating languages, even though we are writing a lot of HTML inside.

In a package.json, I would expect this to work:

	"contributes": {
		"html": {
			"customData": [
				"./html.htmx-data.json"
			]
		},
		"gohtml": {
			"customData": [
				"./html.htmx-data.json"
			]
		}
	}

Empirical tests on my fork of a fully working extension for html files: otovo/htmx-tags@main...grouville:htmx-tags:main show that it does not

Support tags in css

With html.customData I can add custom tags, but I didn't find any similar for css.customData. Is it possible?

CSS: Using the "icon" value for the "content" property is deprecated.

This CSS feature is deprecated ¹. There's no indication of that in the intellisense.

vscode-custom-data/web-data/css/css-schema.xml

Lines 1827 to 1829 in 044bb7a

	<value name="icon" version="2.0" browsers="all">
	<desc>The (pseudo-)element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element.</desc>
	</value>

Footnotes

1. https://www.w3.org/TR/2016/WD-css-content-3-20160602/#changes ↩

Question: Isn't it possible to limit suggested attributes/values to the defined in tag?

Question or idea: Can tags suggest/ auto-complete only the attributes / valueset that have been specified in the tag definition of the HTML Custom Data json file? Because I would like certain tags to be very limited in suggestion/auto-complete, without being populated by other global attributes? They shouldn't suggest any other attribute/values than the defined in the custom data directive. It could be set as a tag directive... Something like:
{ "tags": [ { "name": "foo", "description": "The foo element", "suggestOnlyPrivatAttr": true, "attributes": [ { "name": "bar" }, { "name": "baz", "values": [ { "name": "baz-val-1" } ] } ] } ] }
Don't know if this is even possible. Would be nice to have.

Suggestion: Ability to define custom elements that support RAWTEXT/PLAINTEXT content like script/style

I've been working on a VS Code extension for Ecmarkup, which is an HTML-based dialect. However, there is a case where I've run into issues with the html language service and have spent far too much time trying to build a custom embedded language service just to work around. In Ecmarkup, there is a tag that is essentially treated like RAWTEXT in the same way that a <style> or <script> tag might be parsed: <emu-grammar>. The contents of this tag are essentially a different language mode with custom syntax based on Grammarkdown.

Unfortunately, there's no way to indicate such a tag should be parsed in this way, and as a result I've had to essentially fork the html language service and implement a custom parser to work around this case.

I'd imagine something like this:

{
  "tags": [
    { "name": "style", "content": "rawtext", ... }
  ]
}

[Feature request] Multi-valued tab stops with tab stops/variables/values within

So I'm trying to create auto completion snippets with custom data by putting snippets tab stops in the "name" and this is working fine until I reach a attribute that can have multiple values. First I should mention that this isn't a normal use case as for the CMS I'm adding customData for makes use of different functionalities for single quotes vs double quotes vs no quotes. So for attributes in order to work around how custom data works, put a valueSet as 'v' and then have the name of the attribute contain the snippet with all possible values. This way if I have attributes that dont have a "name" or attributes with a "name" but must have single quotes or no quotes at all in the value I can do this. What I'm requesting here is how with defining a snippet with multi values eg:

${1|one,two,three|}

You are unable to put another tab stop in those values.
What I would like to do would be

${1|value,${2:'$3'}|}

Here's a real world use case:

{
            "name": "cms:folders",
            "description": "```html \n <cms:folders masterpage='news.php'><cms:show k_folder_title /> <br></cms:folders> \n ```\n=======\n\n\nThe **folders** tag can be used to enumerate the virtual folders that have been defined for a template.\n\n\nPlease see [**Core Concepts - Folders**](../concepts/using-folders.html) for an in-depth discussion of this tag.\n\n\nParameters\n----------\n\n\n\n\n* masterpage\n\n* root\n\n* childof\n\n* hierarchical\n\n* depth\n\n* orderby\n\n* order\n\n* exclude\n\n* extended_info\n\n\n\n### masterpage\n\n\nThis parameter can be used to specify the template the folders of which are to be enumerated. If skipped, the template this tag is being used from is used.\n\n\n### root\n\n\nOnly a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. The folder specified as the root is returned along with all its children.\n\n\n### childof\n\n\nOnly a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. Only the children of the specified folder are returned.\n\n\n### hierarchical\n\n\nBy setting this parameter the **folders** tag can be made to enumerate the folders in their hierarchical order. If skipped, the folders are enumerated in the alphabetical order of their names.\n\n\n### depth\n\n\nThis parameter can be set to specify the maximum level in hierarchy (i.e. depth) that will be reached during enumeration. This can be used, for example, to list only the top folders in the tree by setting the depth to 1. A depth of 0 means unlimited depth.\n\n\n### orderby\n\n\nThis parameter can be set to order the enumerated folders according to the following- *name*, *title*, *id*, *count* or *weight*. If skipped, *name* is used as default.\n\n\n### order\n\n\nCan be set to specify whether the enumerated folders are ordered in the ascending order or in descending order. Valid values are *asc* and *desc*. Default is *asc*.\n\n\n### exclude\n\n\nFolders can be excluded from being enumerated by specifying them with this parameter. If an excluded folder has children, they are excluded too.  \n\nIf multiple folders are to be excluded, separate them with comma.\n\n\n### extended_info\n\n\nIf this parameter is set, additional variables get set to report the changes in hierarchy encountered by the **folders** tag, as it traverses through the folder tree. Please see the **Variables** section below.\n\n\nVariables\n---------\n\n\nThe following variables are set to provide information about each folder that gets enumerated\n\n\n\n\n* k_folder_id\n\n* k_folder_name\n\n* k_folder_title\n\n* k_folder_desc\n\n* k_folder_link\n\n* k_folder_pagecount\n\n* k_folder_totalpagecount\n\n* k_level\n\n\n\nIf the *hierarchical* parameter is set to '1', the following variables also get set to indicate the current position in the hierarchy as this tag enumerates the folders -\n\n\n\n\n* k_level_start\n\n* k_element_start\n\n* k_element_end\n\n* k_level_end\n\n\n\nYou can use these variables to easily create HTML ordered or unordered lists. Please see **Folders** in **Core Concepts**.\n\n\nRelated Tags\n------------\n\n\n\n\n* [folder](folder.html)\n\n* [listfolders](listfolders.html)\n\n* [dropdownfolders](dropdownfolders.html)\n\n* [parentfolders](parentfolders.html)\n\n* [is_ancestor](is_ancestor.html)\n\n* [breadcrumbs](breadcrumbs.html)\n\n* [pages](pages.html)\n\n* [archives](archives.html)\n\n* [templates](templates.html)\n\n* [comments](comments.html)\n\n\n\n'",
            "attributes": [
                {
                    "name": "${masterpage:masterpage}=${1|k_template_name,${2:'$3'}|} ", //this line
                    "description": "Pick either k_template_name or fill in the second tab place, not both. This parameter can be used to specify the template the folders of which are to be enumerated. If skipped, the template this tag is being used from is used.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${root:root}=${1|k_template_name, ${2:'$3'}|} ", //this line
                    "description": "Pick either k_template_name or fill in the second tab place, not both. Only a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. The folder specified as the root is returned along with all its children.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${childof:childof}=${1|k_template_name,${2:'$3'}|} ", //this line
                    "description": "Pick either k_template_name or fill in the second tab place, not both. Only a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. Only the children of the specified folder are returned.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${hierarchical:hierarchical}='${1|0,1|}' ",
                    "description": "By setting this parameter the **folders** tag can be made to enumerate the folders in their hierarchical order. If skipped, the folders are enumerated in the alphabetical order of their names.\n\n",
                    "valueSet":"v"
                },
                {
                    "name": "${depth:depth}='$1",
                    "description": "This parameter can be set to specify the maximum level in hierarchy (i.e. depth) that will be reached during enumeration. This can be used, for example, to list only the top folders in the tree by setting the depth to 1. A depth of 0 means unlimited depth.\n\n",
                    "valueSet": "V"
                },
                {
                    "name": "${orderby:orderby}='${1|name,title,id,weight,count|}' ",
                    "description": "This parameter can be set to order the enumerated folders according to the following- *name*, *title*, *id*, *count* or *weight*. If skipped, *name* is used as default.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${order:order}='${1|asc,desc|}' ",
                    "description": "Can be set to specify whether the enumerated folders are ordered in the ascending order or in descending order. Valid values are *asc* and *desc*. Default is *asc*.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${exclude:exclude}='${1:folder_name}${2:, another_folder}'",
                    "description": "Folders can be excluded from being enumerated by specifying them with this parameter. If an excluded folder has children, they are excluded too.  \n If multiple folders are to be excluded, separate them with comma.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${extended_info:extended_info}='${1|0,1|}'",
                    "description": "If this parameter is set, additional variables get set to report the changes in hierarchy encountered by the **folders** tag, as it traverses through the folder tree. Please see the **Variables** section below.\n\nVariables\n---------\n\nThe following variables are set to provide information about each folder that gets enumerated\n\n\n * k_folder_id\n * k_folder_name\n * k_folder_title\n * k_folder_desc\n * k_folder_link\n * k_folder_pagecount\n * k_folder_totalpagecount\n * k_level\n \nIf the *hierarchical* parameter is set to '1', the following variables also get set to indicate the current position in the hierarchy as this tag enumerates the folders -\n\n\n * k_level_start\n * k_element_start\n * k_element_end\n * k_level_end\n \nYou can use these variables to easily create HTML ordered or unordered lists. Please see **Folders** in **Core Concepts**.\n\nRelated Tags\n------------\n\n\n * [folder](folder.html)\n * [listfolders](listfolders.html)\n * [dropdownfolders](dropdownfolders.html)\n * [parentfolders](parentfolders.html)\n * [is_ancestor](is_ancestor.html)\n * [breadcrumbs](breadcrumbs.html)\n * [pages](pages.html)\n * [archives](archives.html)\n * [templates](templates.html)\n * [comments](comments.html)\n \n",
                    "valueSet": "v"
                }
            ]
        },

The lines to be looking where I'd be using this feature are commented with //this line

Now I'm not sure if this is a customData feature or if its another part of the HTML language server, but since I'm using customData for this I posted this here.

Global setting?

Any way to define css.customData & html.customData globally?

Proposal: Add support for extended Schema

Even if VSCode's lack of support for interplay between the HTML DOM and JavaScript means that there might be no pressing need to support events and properties (except for supporting JSX / tagged template literal libraries?), supporting an enhanced schema, as is being discussed here and being tested out here, as the default schema, would make editing such JSON files by hand easier.

Admittedly, there might not yet be a consensus on a single schema yet, so maybe this is a bit early.

Add `()` to CSS experimental pseudo-class functions

For example, :has and :is are functions, please consider to add () to the name.

vscode-custom-data/web-data/data/browsers.css-data.json

Line 24329 in 70c746a

"name": ":has",

vscode-custom-data/web-data/data/browsers.css-data.json

Line 24347 in 70c746a

"name": ":is",

Here is a list I found need ():

:dir()
:has()
:is()
:nth-col()
:where()

::part()
::slotted()

Suggestion: Control when element suggestions can appear based on context.

Some HTML tags are only relevant inside of other HTML elements (i.e., <tr> should be inside of a <table>, <thead>, <tfoot>, or <tbody>). Currently there is no way to control when a tag should appear in the auto-suggest list.

I would suggest adding a mechanism to either limit or prioritize specific auto-complete elements using attributes such as:

• "show": ["tag"] - Indicates the tags to show or prioritize as children of the current tag definition. Allows custom tags
  to indicate existing tags that can be shown beneath the current tag.
• "showIn": ["tag"] - Indicates this element should be shown or prioritized as a child of a specified tag definition. Allows
  custom tags to indicate they should be included beneath the specified tag.

As an example:

{
  "tags": [
    { "name": "table", "show": ["colgroup", "col", "thead", "tbody", "tfoot", "tr"], ... },
    { "name": "tr", "showIn": ["table", "thead", "tbody", "tfoot"], ... }
  ]
}

This would be helpful for the VSCode extension for Ecmarkup extension I've been working on periodically over the last few years, as certain elements only have meaning as children of other elements (i.e., an <emu-nt> should be the child of an <emu-rhs> and doesn't make sense elsewhere.

How do I use css.customData for postcss syntax

I havepostcss selected as syntax for *.css files and I found I'm unable to use autocomplete values defined in css.css-data.json until I choose css syntax for those files which obviously disables other language features.

How do I configure customData so whatever I define in css.css-data.json will work with postcss syntax?

I tried postcss.customData without any luck

Thanks in advance

Togochat

dynamic html custom data example

Some definitions of HTML tags can be defined inline in same html file source. Either as from inline script tag with custom element class or from HTML markup as Declarative Custom Element.

In both cases the custom tag is

• defined inline in source, hence can not be hardcoded into global custom data file. The tag does not make a sence outside.
• need to be updated on fly, during the edit. As it is done in TS version of Custom Element and immediately available in html literal( Lit ) or JSX ( React ).

Inline DCE sample, there are about a dozen of other implementations, each need the plugin example to follow.

If custom HTML tag contains uppercase then auto completion values wont show

So I'm current;y writing an extension to bring CouchCMS custom html tag support into VSCode with hover and auto completion with snippet style attributes. All is going well until I got to this tag

<cms:excerptHTML />

I wrote the customData as I did for every other tag before, literally almost exactly the same as the tag that came before it,

 <cms:excerpt />

went to test it to make sure I didn't have any typos and the auto completion "attributes" didn't show at the top of the auto completion list when triggered via "Ctrl + Space". Played around with the tag and found if I remove the uppercase from the tag and make it lower case it works as expected. Here is what I have in the customData file for that tag:

  {
            "name": "cms:excerptHTML",
            "description": "```html \n <cms:excerptHTML count='130' ignore='img'> \n ```\n===========\n\n\nThe **excerptHTML** tag can be used to create an excerpt of any HTML content that is enclosed within its opening and closing tags.  \n\nUnlike the **excerpt** tag, excerptHTML preserves the HTML formatting of the truncated contents (except for the HTML tags specified in its *ignore* parameter).\n\n\nExamples -\n\n\n\n ```html \n<cms:excerptHTML><cms:show content /></cms:excerptHTML>\n\n ``` \n\n ```html \n<cms:excerptHTML count='130' ignore='img'>\n <cms:show content />\n</cms:excerptHTML>\n\n ``` \nThe snippets are outputting an excerpt of the value contained within the *content* variable.\n\n\nParameters\n----------\n\n\n\n\n* count\n\n* ignore\n\n* trail\n\n\n\n### count\n\n\nThe maximum number of words that the excerpt can contain. The default value is 50 words.\n\n\n### ignore\n\n\nThe HTML elements to weed out of the excerpt. For example, you might not want to have any images in the excerpt.  \n\nIf you wish to ignore multiple tags, separate the tagnames by using comma e.g.\n\n\n\n ```html \nignore='img, table'\n\n ``` \n### trail\n\n\nBy default the produced excerpt is appended with '...' (three ellipses). You can change this by using this parameter.\n\n\n\n ```html \n<cms:excerptHTML trail=\"&nbsp;(<a href=\"<cms:show k_page_link />\">read more..</a>)\"><cms:show blog_content /></cms:excerptHTML>\n\n ``` \nThe snippet above will append a '*read more..*' link leading to the page-view of the item being shown in excerpted form.\n\n\nVariables\n---------\n\n\nThis tag does not set any variables of its own.\n\n\nRelated Tags\n------------\n\n\n\n\n* [excerpt](excerpt.html)\n\n\n\n'",
            "attributes": [
                {
                    "name": "${count:count}='${1:50}'",
                    "description": "The maximum number of words/characters that the excerpt can contain. The default value is 50.  \n By default, this parameter is applied to the number of words in the excerpt.  \n By setting the 'truncate_chars' parameter (see below) to '1', it can be made to apply to the number of characters in the excerpt instead.\n\n",
                    "valueSet": "v"
                },
                {
                    "name": "${ignore:ignore}='${1:table, span, img}'",
                    "description": "The HTML elements to weed out of the excerpt. For example, you might not want to have any images in the excerpt.  \n If you wish to ignore multiple tags, separate the tagnames by using comma e.g.\n\n\n ```html \nignore='img, table' \n ``` \n",
                    "valueSet": "v"
                },
                {
                    "name": "${trail:trail}='${1:...}'",
                    "description": "By default the produced excerpt is appended with '...' (three ellipses). You can change this by using this parameter.\n\n\n ```html \n<cms:excerptHTML trail=\"&nbsp;(<a href=\"<cms:show k_page_link />\">read more..</a>)\"><cms:show blog_content /></cms:excerptHTML> \n ``` \nThe snippet above will append a '*read more..*' link leading to the page-view of the item being shown in excerpted form.\n\nVariables\n---------\n\nThis tag does not set any variables of its own.",
                    "valueSet": "v"
                }
            ]
        },

Is there any way to make the uppercase work? The tag is case sensitive so I cant just make it lowercase.

Thanks.

Describe all valuesets in HTML custom data

In light of microsoft/vscode#85610 and microsoft/vscode-html-languageservice#75, we should give these value sets more descriptive names, so others could reuse them.

@aeschli fyi

MDN Tooltip Link goes to non-existent local file instead of documentation

Issue Type: Bug

1. Open a new folder and create a HTML file.
2. Add the code.
   <img src='#' draggable="false" />
3. Hover over draggable and click on the "Drag and Drop API" text in the tooltip.
4. Error!

VS Code version: Code 1.51.1 (e5a624b788d92b8d34d1392e4c4d9789406efe8f, 2020-11-10T23:34:32.027Z)
OS version: Windows_NT x64 10.0.18363

Switch to use webRef as input

Webref contains machine readable contents extracted from web browser specifications, including descriptions

https://github.com/w3c/webref
https://www.npmjs.com/package/@webref/css

Missing suggestions for "backdrop-filter" in CSS

Type: Bug

Enter the backdrop-filter property in a CSS file, but no suggestions are triggered.

However, filter property works fine.

values listed in the mdn.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Values

none | <filter-function-list>

Formal syntax

backdrop-filter = 
  none                 |
  <filter-value-list>  

<filter-value-list> = 
  [ <filter-function> | <url> ]+  

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<url> = 
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )  

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )  

One more thing

My last issue #55 is fixed.
However, if you proceed to this step as shown in the image below,

then press TAB key, the suggestion list will NOT show automatically unless you press the shortcut (default is Ctrl + Space) manually.

But if you spell the white-space completely and type a colon, it will work again.

---

VS Code version: Code 1.74.2 (e8a3071ea4344d9d48ef8a4df2c097372b0c5161, 2022-12-20T10:29:14.590Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz (8 x 2112)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	11.80GB (3.85GB free)
Process Argv	--crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a
Screen Reader	no
VM	0%

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
vscccc:30610679
pyindex848:30577860
nodejswelcome1:30587005
2e4cg342:30602488
gswce1:30612156
3d0df643:30613357
f6dab269:30613381
fim-prod:30623723
vscsbc:30628655

web-data licensing question

I see that there is a mix of content and licenses in various parts of this repository (depending on their originating source, which makes total sense to me).

I wanted to inquire specifically about the web-data package/directory, and the data folder within. These don't seem to have a specific license applied, I'm not sure if the license from the root of the project applies, and so I wonder how they are licensed according to you?

Appreciate your help figuring this out.

Restrict property definitions to specific tags

I've looked through the information here and several other sites and JSON documents, and the one thing I cannot find an answer to, is how to define a property for only certain tags. For example, NativeScript supports a placeholder-color property on the TextField tag, but VSCode does not recognize it. I've added it as a property to a CSS custom data file as described, but that makes the property available to ALL tags -- not just the TextField tag. If this is indeed new functionality, then I suggest that the property object contain a tags property which would be an array of strings.

{
  "version": 1.1,
  "properties": [
    {
      "name": "placeholder-color",
      "description": "Color of the placeholder text.",
      "tags": ["TextField", "Button"]
    }
  ]
}

On the other hand, if this is already supported in some way, could you please make it more clear in your documents?

Thanks!
Eric

Ability to define custom values for existing properties / syntax for the custom properties

Currently, when adding new properties via a properties field, they're added without any values.

At least, we should have a way to add an array of potential values, both for existing properties, and for our custom properties.

Ideally, it would be awesome if we could define a syntax for the property to use — I see that the mdn-data-importer already has some utilities that could be used to parse it — why not allow this as a part of the css-data?

Right now developers have to use custom extensions when they want to provide custom values to their projects, having an ability to do this via css-data seems like the most straightforward way if it was possible, with an ability to generate such css-data.json files from existing design-tokens definitions and so on.

If this is something the team would be interested in and could provide guidance in how to best implement this — I would be happy to help.

Honor

npm i @vscode/web-custom-data

Tasks

Beta Give feedback

1. Fix policheck issues #87
   +0
   
2. Togochat #90
   +0
3. support templating languages: gohtml #85
   +0
4. carbondamien13/vscode #84
   +0
5. Support tags in css #82
   +0
6. Switch to use webRef as input #76
   +0
7. dynamic html custom data example #89
   +0
8. prepare 0.4.10 #88
   +0
   
9. the html.customData configuration does not work in vue files. #77
   +0
10. Bump xml2js from 0.4.23 to 0.5.0 in /web-data #75
    dependencies +1
11. 0.4.8 #83
    +0
    
12. yarn update-sources

[Feature] Add `contentType` property to attributes

Currently, an attribute can take the following schema (this is an example that illustrates all the possible items that can be included in an attribute):

{
    "name": "onclick",
    "description": {
        "kind": "markdown",
        "value": "# Hello World"
    },
    "valueSet": "x",
    "values": [{
        "name": "test",
        "description": "test test test",
        "references": [{
            "name": "example",
            "url": "https://example.com"
        }]
    }],
    "references": [{
        "name": "example",
        "url": "https://example.com"
    }]
}

There currently is no way to suggest that an attribute may contain something other than a string. For instance, the above attribute, onclick, takes a JavaScript expression. Thus, the attribute should format its contents as JavaScript, not as plaintext.

Since onclick is a supported attribute, JavaScript syntax highlighting within it is already supported:

It would be great if we could extend this to custom attributes using a new property such as 'contentType' that would allow one to opt in to different content types. For instance, Alpine.js has a custom attribute called @click that would be styled as plain text when using custom data, but should be styled as JavaScript.

Proposal: Support interplay between JavaScript and HTML

The impact of this support would be much larger should HTMLModules ship, and the necessary adjustments for that context be made.

Unlike more design-oriented editors like WebStorm, DreamWeaver (and Visual Studio's deprecated editor), VSCode doesn't seem to exhibit any awareness between the DOM and Script.

For example, suppose you are editing an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <button id=myButton></button>
    <my-custom-element id=myCustomElement></my-custom-element>
    <script>
        myButton.title = 'hello';
        myCustomElement.addEventListener()
        myCustomElement.myProp=
    </script>
</body>
</html>

VSCode doesn't recognize that myButton is an HTMLButtonElement, and myCustomElement is a my-custom-element. Adding support for this kind of synergy between the two expression types (HTML, JavaScript) would (obviously) make editor support for properties and events meaningful.

Support for an extended schema might also help with JSX and tagged template libraries as well, I assume?

And of course it would quite helpful for the (admittedly minority of) developers who edit HTML files.

Attributes description

Hi, is it possible to overwrite the default attribute description? In html.html-data.json, I define my custom tag with the attribute "id" and a description for that attribute. Now I want vs-code to display my id attribute description when I enter it in the html file, but instead vs-code displays the description provided by MDN. Is it possible for my custom description to override the one provided by MDN?

Custom data not reloading

I am currently working on an Angular project where I created a custom-elements.json and then defined the corresponding html.Data in .vscode/settings.json.

The thing is, every time I modify my JSON file and then go to my HTML, the clues on hover are not showing updated.
I saw issue #67750 and it says it has been fixed. Do I need to do some special configuration to it?

Not able to change title of custom editor's webview panel(webViewPanel.title = 'NewName.extension')

I have contributed new custom editor and I am opening multiple custom editors of same type for a single document(single file)(based on cursor position).

I want to differentiate these custom editor as all editor/WebView panels will have same name as file name(example.cscratch).

I tried to update WebView panel's title variable at resolveCustomTextEditor method of CustomTextEditorProvider, but WebView panel name was not renamed in vscode UI.

I can see that tittle variable of WebView panel object updated but WebView panel's UI still contains file name as title.

If we create Webview panel using vscode.window.createWebviewPanel() API, then we can rename WebView panel just by updating title variable but same thing is not working for custom editor's WebView Panel.

Working for normal WebView panel:
this._panel.title = 'NewName.extension';
https://github.com/microsoft/vscode-extension-samples/blob/133fa26af64ba8760559c5a06299953673d60763/webview-sample/src/extension.ts#L165

Not working for custom editor's Webview panel:
Steps to reproduce:

1. Build https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample extension.
2. Also add below code in the resolveCustomTextEditor method of CatScratchEditorProvider.
   code: webviewPanel.title ='exampleNew.cscratch'
   https://github.com/microsoft/vscode-extension-samples/blob/133fa26af64ba8760559c5a06299953673d60763/custom-editor-sample/src/catScratchEditor.ts#L43
   3.Run the extension
   4.Open exampleFiles folder(https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample/exampleFiles)
3. Select example.cscratch file

Expected output: Custom editor of example.cscratch should contain title as 'exampleNew.cscratch' as we have update title of WebView panel in the resolveCustomTextEditor method.

Actual output: Custom editor of example.cscratch contain title as 'exampleNew.cscratch' even though we update title.

Any other way to update custom editor's WebView panel title?

HelloWorld sample doesn't work for me :(

I am on Windows 10 and using Visual Studio Code 1.43.1
I downloaded the zip file and exactly following the instructions. I don't see anything happening when I type <my- or hover.

Do I need to edit this syntax?
"html.customData": ["./html.html-data.json"],

I ultimately want to edit the settings.json at %AppData%\Code\User with a custom filename.html-data.json for distribution.

Missing suggestions for "white-space" in CSS

Type: Bug

Enter the white-space property in a CSS file, but no suggestions are triggered.

With the Trigger Suggest keyboard shortcut, there are only some common values.

Values such as nowrap and pre disappear.

Expect like this:

---

VS Code version: Code 1.72.2 (d045a5eda657f4d7b676dedbfa7aab8207f8a075, 2022-10-12T22:15:18.074Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: No

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz (8 x 2112)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	11.80GB (5.14GB free)
Process Argv	--crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a --crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a
Screen Reader	no
VM	0%

Extensions (1)

Extension	Author (truncated)	Version
vscode-language-pack-zh-hans	MS-	1.72.10121008

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
vscccc:30566498
pyindex848:30577860
nodejswelcome1:30587005
fc301958:30595537
2e4cg342:30596373

Logical properties 'block-size' and 'inline-size' have wrong schema-help-text

The logical properties 'block-size' and 'inline-size' have their help-text switched around. According to the spec for a default ltr ttb layout the block-size attribute corresponds to the height attribute. For 'inline-size' it corresponds to the width attribute.

• 'block-size':
  • current description: "Logical 'width'. Mapping depends on the element’s 'writing-mode'."
  • correct description: "Logical 'height'. Mapping depends on the element’s 'writing-mode'."
• 'inline-size':
  • current description: "Logical 'height'. Mapping depends on the element’s 'writing-mode'."
  • correct description: "Logical 'width'. Mapping depends on the element’s 'writing-mode'."

vscode-custom-data/web-data/css/css-schema.xml

Lines 1100 to 1101 in 454cf77

	<entry name="block-size" restriction="length, percentage" version="3.0" browsers="FF41" ref="https://drafts.csswg.org/css-logical-props/#propdef-block-size" syntax="header { $(name): 200px; }">
	<desc>Logical 'width'. Mapping depends on the element’s 'writing-mode'.</desc>

vscode-custom-data/web-data/css/css-schema.xml

Lines 3691 to 3692 in 454cf77

	<entry name="inline-size" restriction="length, percentage" version="3.0" browsers="FF41" ref="https://drafts.csswg.org/css-logical-props/#propdef-inline-size" syntax="header { $(name): 200px; }">
	<desc>Logical 'height'. Mapping depends on the element’s 'writing-mode'.</desc>

align-items and align-content miss various values

Code assistance is not complete. For some properties it shows all available values, for some just half, for some nothing.

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

I have disabled all extensions manualy and removed all configurations from settings.json. Also tried Start Extension Bisect, it shows CODE issue.

• VS Code Version: 1.73.1
• OS Version: Windows 10

Steps to Reproduce:

1. Create new ot open existing .scss file with some styles.
2. Toggle suggestions for white-space property, there will be no one useful.
3. Toggle suggestions for align-items property, there will be just some incomplete list of values, no start, end, etc related to grids.
4. Toggle suggestions for overflow property, there will be all properties available.

Screenshots

1. There is OK
   

2. There is half. Expect to see start, end, etc in list.
   

3. There is nothing useful
   

Proposal: package.json support

Extending this proposal:

Look for an entry in package.json called "customElements".

If the value is a string, first search for a file relative to the root of the package.

For example:

"customElements": "./custom-elements.json"

Also support searching for a folder:

"customElements": "./custom-elements/"

If it points to a folder, look for a file within that folder with name most closely aligned with the language preference. For example, for Algerian Arabic:

"custom-elements/custom-elements.ar-DZ.json"

If no match found, try:

"custom-elements/custom-elements.ar.json"

If that's not found, try:

"custom-elements/custom-elements.json"

If instead of a string, the value of custom elements is an array:

"customElements": ["./src/my-button/my-button.json", "./src/my-input/my-input.json"]

Apply the same rules as above, for each item

All these files would apply to HTML editing, incorporated into /web-data

are experimental.custom.tags and attributes coming back?

I saw the post here of:
https://github.com/microsoft/vscode-custom-data/tree/master/samples/webcomponents
about a month back, and it seems to have re-introduced experimental.custom.tags and attributes again? I thought it was all now html.customData rather than back to last Nov's custom.tags?