This is an sample extension that illustrates the use of virtual documents or TextDocumentContentProviders together with the vscode.previewHtml command.

It is not intended as a product quality extension.

The purpose of the extension is to show a preview of the properties in the declaration block of a CSS rule. To play with the extension:

Open a CSS file
Use Show CSS Properties Preview
Position the cursor inside the declaration block of the rule
The properties are rendered in the preview
Edit the propertis and the preview is updated

How it works

The extension implements and registers a TextDocumentContentProvider for a particular URI scheme.
The content provider creates a HTML document that contains the declaration block of the selected CSS rule in the active editor.
The generated HTML document contains a link that invokes a contributed command to highlight the CSS rule in the source editor
The generated HTML document is then opened in an editor in the 2nd Column using the command vscode.previewHtml.