diff --git a/apps/tests/xml-declaration/custom-css-file.css b/apps/tests/xml-declaration/custom-css-file.css
index 6b7785523..88f23ee03 100644
--- a/apps/tests/xml-declaration/custom-css-file.css
+++ b/apps/tests/xml-declaration/custom-css-file.css
@@ -1,3 +1,7 @@
 .MyClass {
     background-color: green;
 }
+
+stack-layout {
+    background-color: green;
+}
\ No newline at end of file
diff --git a/apps/tests/xml-declaration/xml-declaration-tests.ts b/apps/tests/xml-declaration/xml-declaration-tests.ts
index c91825e0b..148df2c6c 100644
--- a/apps/tests/xml-declaration/xml-declaration-tests.ts
+++ b/apps/tests/xml-declaration/xml-declaration-tests.ts
@@ -200,6 +200,23 @@ export function test_parse_ShouldResolveExportsFromCodeFileForTemplates() {
     }
 }
 
+export function test_parse_css_is_applied_by_type_to_lower_case_dashed_components() {
+    var newPage: Page;
+    var pageFactory = function (): Page {
+        newPage = <Page>builder.parse("<page cssFile='~/xml-declaration/custom-css-file.css'><stack-layout /></page>");
+        return newPage;
+    };
+
+    helper.navigate(pageFactory);
+    TKUnit.assert(newPage.isLoaded, "The page should be loaded here.");
+    try {
+        helper.assertViewBackgroundColor(newPage.content, "#008000");
+    }
+    finally {
+        helper.goBack();
+    }
+};
+
 export function test_parse_ShouldApplyCssFromCssFile() {
     var newPage: Page;
     var pageFactory = function (): Page {
diff --git a/ui/styling/css-selector.ts b/ui/styling/css-selector.ts
index 3926bd9a2..237d04130 100644
--- a/ui/styling/css-selector.ts
+++ b/ui/styling/css-selector.ts
@@ -73,10 +73,15 @@ class CssTypeSelector extends CssSelector {
         return TYPE_SPECIFICITY;
     }
     public matches(view: view.View): boolean {
-        return this.expression.toLowerCase() === view.typeName.toLowerCase();
+        return matchesType(this.expression, view);
     }
 }
 
+function matchesType(expression: string, view: view.View): boolean {
+    return expression.toLowerCase() === view.typeName.toLowerCase() ||
+        expression.toLowerCase() === view.typeName.split(/(?=[A-Z])/).join("-").toLowerCase();
+}
+
 class CssIdSelector extends CssSelector {
     get specificity(): number {
         return ID_SPECIFICITY;
@@ -150,7 +155,7 @@ export class CssVisualStateSelector extends CssSelector {
         }
 
         if (this._isByType) {
-            matches = this._match === view.cssType.toLowerCase();
+            matches = matchesType(this._match, view);
         }
 
         return matches;