Emmet Reflect CSS Value in html files

ramya-rao-a · ramya-rao-a · commit 76392ae91fc1 · 2017-07-24T14:42:24.000-07:00
diff --git a/extensions/emmet/src/reflectCssValue.ts b/extensions/emmet/src/reflectCssValue.ts
@@ -4,8 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Range, window, TextEditor } from 'vscode';
-import { isStyleSheet } from 'vscode-emmet-helper';
-import { parse, getNode, getCssProperty } from './util';
+import { getCssProperty, getCssPropertyNode } from './util';
 import { Property, Rule } from 'EmmetNode';
 
 const vendorPrefixes = ['-webkit-', '-moz-', '-ms-', '-o-', ''];
@@ -17,18 +16,12 @@ export function reflectCssValue() {
 		return;
 	}
 
-	if (!isStyleSheet(editor.document.languageId)) {
+	let node = getCssPropertyNode(editor, editor.selection.active);
+	if (!node) {
 		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);
-
+	return updateCSSNode(editor, node);
 }
 
 function updateCSSNode(editor: TextEditor, property: Property) {
diff --git a/extensions/emmet/src/test/reflectCssValue.test.ts b/extensions/emmet/src/test/reflectCssValue.test.ts
@@ -10,7 +10,7 @@ import { withRandomFileEditor, closeAllEditors } from './testUtils';
 suite('Tests for Emmet: Reflect CSS Value command', () => {
 	teardown(closeAllEditors);
 
-	const contents = `
+	const cssContents = `
 	.header {
 		margin: 10px;
 		padding: 10px;
@@ -22,16 +22,40 @@ suite('Tests for Emmet: Reflect CSS Value command', () => {
 	}
 	`;
 
-	test('reflectCssValue', function (): any {
+	const htmlContents = `
+	<html>
+		<style>
+			.header {
+				margin: 10px;
+				padding: 10px;
+				transform: rotate(50deg);
+				-moz-transform: rotate(20deg);
+				-o-transform: rotate(50deg);
+				-webkit-transform: rotate(50deg);
+				-ms-transform: rotate(50deg);
+			}
+		</style>
+	</html>
+	`;
 
-		return withRandomFileEditor(contents, '.css', (editor, doc) => {
+	test('Reflect Css Value in css file', function (): any {
+		return withRandomFileEditor(cssContents, '.css', (editor, doc) => {
 			editor.selections = [new Selection(5, 10, 5, 10)];
 			return commands.executeCommand('emmet.reflectCssValue').then(() => {
-				assert.equal(doc.getText(), contents.replace(/\(50deg\)/g, '(20deg)'));
+				assert.equal(doc.getText(), cssContents.replace(/\(50deg\)/g, '(20deg)'));
 				return Promise.resolve();
 			});
 		});
 	});
 
+	test('Reflect Css Value in html file', function (): any {
+		return withRandomFileEditor(htmlContents, '.html', (editor, doc) => {
+			editor.selections = [new Selection(7, 20, 7, 20)];
+			return commands.executeCommand('emmet.reflectCssValue').then(() => {
+				assert.equal(doc.getText(), htmlContents.replace(/\(50deg\)/g, '(20deg)'));
+				return Promise.resolve();
+			});
+		});
+	});
 
 });
diff --git a/extensions/emmet/src/util.ts b/extensions/emmet/src/util.ts
@@ -286,3 +286,29 @@ export function iterateCSSToken(token: CssToken, fn) {
 export function getCssProperty(rule, name): Property {
 	return rule.children.find(node => node.type === 'property' && node.name === name);
 }
+
+/**
+ * Returns css property under caret in given editor or `null` if such node cannot
+ * be found
+ * @param  {TextEditor}  editor
+ * @return {Property}
+ */
+export function getCssPropertyNode(editor: vscode.TextEditor, position: vscode.Position): Property {
+	const rootNode = this.parse(editor.document);
+	const node = getNode(rootNode, position);
+
+	if (isStyleSheet(editor.document.languageId)) {
+		return node && node.type === 'property' ? <Property>node : null;
+	}
+
+	let htmlNode = <HtmlNode>node;
+	if (htmlNode
+		&& htmlNode.name === 'style'
+		&& htmlNode.open.end.isBefore(position)
+		&& htmlNode.close.start.isAfter(position)) {
+		let buffer = new DocumentStreamReader(editor.document, htmlNode.start, new vscode.Range(htmlNode.start, htmlNode.end));
+		let rootNode = parseStylesheet(buffer);
+		const node = getNode(rootNode, position);
+		return (node && node.type === 'property') ? <Property>node : null;
+	}
+}
