From 9699ceff3d6bed58447ffc527230b8187a3d4593 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Thu, 10 Dec 2015 00:22:10 -0800
Subject: [PATCH] doc(kebab-case): update the migration guide

---
 modules/angular2/docs/migration/kebab-case.md | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/modules/angular2/docs/migration/kebab-case.md b/modules/angular2/docs/migration/kebab-case.md
index 80a3497fc2a6..e790a362e2c9 100644
--- a/modules/angular2/docs/migration/kebab-case.md
+++ b/modules/angular2/docs/migration/kebab-case.md
@@ -86,7 +86,7 @@ The previous decorator becomes:
     @Directive({inputs: ['myProp', 'myOtherProp: myAttrName']})
 
 Notes:
-  - only the long syntax (with ":") needs not be updated,
+  - only the long syntax (with ":") needs to be updated,
   - `properties` is the legacy name for `inputs` and should be updated in the same way - it is a good idea to replace
     `properties` with `inputs` at the same time as support for the former will be removed soon. 
 
@@ -127,6 +127,7 @@ should be changed to
         '[some-prop]': 'exp',
         '[style.background-color]': 'exp',
         '[class.some-class]': 'exp',
+        '[attr.some-attr]': 'exp',
         '(some-event)': 'action()',
         'some-attr': 'value'
       }
@@ -139,13 +140,14 @@ should be changed to:
         '[someProp]': 'exp',
         '[style.background-color]': 'exp',
         '[class.some-class]': 'exp',
+        '[attr.some-attr]': 'exp',
         '(someEvent)': 'action()',
         'some-attr': 'value'
       }
     })
 
 The property bindings (`[...]`) and event bindings (`(...)`) must be updated in the same way as they are updated in a 
-template (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).
+template - ie converted to camel case (reminder: `[attr.]`, `[class.]` and `[style.]` should not be converted to camel case).
 
 5. Update export name
 
@@ -159,4 +161,45 @@ should be changed to
       exportAs: 'someName'
     })
 
+# CSS
 
+As the attribute names from your templates have been updated from dash to camel case, you should also reflect the changes
+in your stylesheets.
+
+The attributes that need to be updated are the ones used in the selector and the inputs of your directives.
+
+Before:
+
+    // Directive
+    @Directive({
+      selector: '[my-dir]',
+      inputs: ['someProp: some-input'],
+    })
+    
+    <!-- template -->
+    <div my-dir some-input="some value" not-an-input></div>
+    
+    /* css */
+    [my-dir] { ... }
+    [some-input] { ... }
+    [not-an-input] { ... }
+
+After:    
+
+    // Directive
+    @Directive({
+      selector: '[myDir]',
+      inputs: ['someProp: someInput'],
+    })
+    
+    <!-- template -->
+    <div myDir someInput="some value" not-an-input></div>
+    
+    /* css */
+    [myDir] { ... }
+    [someInput] { ... }
+    [not-an-input] { ... }
+
+Notes:
+  - `not-an-input` is not used in a selector nor it is an input of a directive, it need not be camel cased,
+  - CSS selectors are case insensitive you can use `[myDir]`, `[mydir]` or any other casing.
\ No newline at end of file