Emmet: Reflect CSS Value in extension #31298

extensions/emmet/src/extension.ts

@@ -20,6 +20,8 @@ import { incrementDecrement } from './incrementDecrement';
 import { LANGUAGE_MODES, getMappingForIncludedLanguages } from './util';
 import { updateExtensionsPath } from 'vscode-emmet-helper';
 import { updateImageSize } from './updateImageSize';
+import { reflectCssValue } from './reflectCssValue';
+
 import * as path from 'path';
 
 export function activate(context: vscode.ExtensionContext) {
@@ -118,6 +120,10 @@ export function activate(context: vscode.ExtensionContext) {
 		return updateImageSize();
 	}));
 
+	context.subscriptions.push(vscode.commands.registerCommand('emmet.reflectCssValue', () => {
+		return reflectCssValue();
+	}));
+
 	let currentExtensionsPath = undefined;
 	let resolveUpdateExtensionsPath = () => {
 		let extensionsPath = vscode.workspace.getConfiguration('emmet')['extensionsPath'];

extensions/emmet/src/reflectCssValue.ts

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Range, window, TextEditor } from 'vscode';
+import { isStyleSheet } from 'vscode-emmet-helper';
+import { parse, getNode, getCssProperty } from './util';
+import { Property, Rule } from 'EmmetNode';
+
+const vendorPrefixes = ['-webkit-', '-moz-', '-ms-', '-o-', ''];
+
+export function reflectCssValue() {
+	let editor = window.activeTextEditor;
+	if (!editor) {
+		window.showInformationMessage('No editor is active.');
+		return;
+	}
+
+	if (!isStyleSheet(editor.document.languageId)) {
+		return;
+	}
+
+	const rootNode = parse(editor.document);
+	const node = getNode(rootNode, editor.selection.active, true);
+	if (!node || node.type !== 'property') {
+		return;
+	}
+
+	return updateCSSNode(editor, <Property>node);
+
+}
+
+function updateCSSNode(editor: TextEditor, property: Property) {
+	const rule: Rule = property.parent;
+	let currentPrefix = '';
+
+	// Find vendor prefix of given property node
+	for (let i = 0; i < vendorPrefixes.length; i++) {
+		if (property.name.startsWith(vendorPrefixes[i])) {
+			currentPrefix = vendorPrefixes[i];
+			break;
+		}
+	}
+
+	const propertyName = property.name.substr(currentPrefix.length);
+	const propertyValue = property.value;
+
+	return editor.edit(builder => {
+		// Find properties with vendor prefixes, update each
+		vendorPrefixes.forEach(prefix => {
+			if (prefix === currentPrefix) {
+				return;
+			}
+			let vendorProperty = getCssProperty(rule, prefix + propertyName);
+			if (vendorProperty) {
+				builder.replace(new Range(vendorProperty.valueToken.start, vendorProperty.valueToken.end), propertyValue);
+			}
+		});
+	});
+}
\ No newline at end of file

extensions/emmet/src/typings/EmmetNode.d.ts

@@ -52,6 +52,7 @@ declare module 'EmmetNode' {
     }
 
     export interface CssNode extends Node {
+        name: string
         parent: CssNode
         firstChild: CssNode
         nextSibling: CssNode
@@ -70,6 +71,7 @@ declare module 'EmmetNode' {
         separator: Token
         parent: Rule
         terminatorToken: Token
+        value: string
     }
 
     export interface Stylesheet extends Node {

extensions/emmet/src/updateImageSize.ts

@@ -11,7 +11,7 @@ import { TextEditor, Range, Position, window } from 'vscode';
 import * as path from 'path';
 import { getImageSize } from './imageSizeHelper';
 import { isStyleSheet } from 'vscode-emmet-helper';
-import { parse, getNode, iterateCSSToken } from './util';
+import { parse, getNode, iterateCSSToken, getCssProperty } from './util';
 import { HtmlNode, CssToken, HtmlToken, Attribute, Property } from 'EmmetNode';
 import { locateFile } from './locateFile';
 import parseStylesheet from '@emmetio/css-parser';
@@ -213,12 +213,12 @@ function updateHTMLTag(editor: TextEditor, node: HtmlNode, width: number, height
  */
 function updateCSSNode(editor: TextEditor, srcProp: Property, width: number, height: number) {
 	const rule = srcProp.parent;
-	const widthProp = getProperty(rule, 'width');
-	const heightProp = getProperty(rule, 'height');
+	const widthProp = getCssProperty(rule, 'width');
+	const heightProp = getCssProperty(rule, 'height');
 
 	// Detect formatting
 	const separator = srcProp.separator || ': ';
-	const before = getBefore(editor, srcProp);
+	const before = getPropertyDelimitor(editor, srcProp);
 
 	let edits: [Range, string][] = [];
 	if (!srcProp.terminatorToken) {
@@ -291,23 +291,13 @@ function findUrlToken(node, pos: Position) {
 	}
 }
 
-/**
- * Returns `name` CSS property from given `rule`
- * @param  {Node} rule
- * @param  {String} name
- * @return {Node}
- */
-function getProperty(rule, name) {
-	return rule.children.find(node => node.type === 'property' && node.name === name);
-}
-
 /**
  * Returns a string that is used to delimit properties in current node’s rule
  * @param  {TextEditor} editor
- * @param  {Node}       node
+ * @param  {Property}       node
  * @return {String}
  */
-function getBefore(editor: TextEditor, node: Property) {
+function getPropertyDelimitor(editor: TextEditor, node: Property) {
 	let anchor;
 	if (anchor = (node.previousSibling || node.parent.contentStartToken)) {
 		return editor.document.getText(new Range(anchor.end, node.start));
@@ -317,3 +307,4 @@ function getBefore(editor: TextEditor, node: Property) {
 
 	return '';
 }
+

extensions/emmet/src/util.ts

@@ -6,7 +6,7 @@
 import * as vscode from 'vscode';
 import parse from '@emmetio/html-matcher';
 import parseStylesheet from '@emmetio/css-parser';
-import { Node, HtmlNode, CssToken } from 'EmmetNode';
+import { Node, HtmlNode, CssToken, Property } from 'EmmetNode';
 import { DocumentStreamReader } from './bufferStream';
 import { isStyleSheet } from 'vscode-emmet-helper';
 
@@ -276,3 +276,13 @@ export function iterateCSSToken(token: CssToken, fn) {
 		}
 	}
 }
+
+/**
+ * Returns `name` CSS property from given `rule`
+ * @param  {Node} rule
+ * @param  {String} name
+ * @return {Property}
+ */
+export function getCssProperty(rule, name): Property {
+	return rule.children.find(node => node.type === 'property' && node.name === name);
+}