Styles with the same name will be overridden

Fix #18

README.md

@@ -20,29 +20,57 @@ app.config(['$stateProvider', function($stateProvider){
         controller: 'State1controller',
         template: '<div ui-view></div>',
         data: {
-          css: 'styles/custom-state1-override.css'
+          css: [
+            'styles/custom-state1.css',
+            {
+              name: 'layout',
+              href: 'styles/state1-layout.css'
+            }
+          ]
         }
       })
 
       .state('state1.state12', {
         url: '/:id',
         controller: 'State12Controller',
-        templateUrl: 'views/my-template.html'
+        templateUrl: 'views/my-template.html',
+        data: {
+          css: [
+            'styles/custom-state1.state12.css',
+            {
+              name: 'layout',
+              href: 'styles/state1.state12-layout.css'
+            }
+          ]
+        }
       })
 
       .state('state2', {
         url: '/state2',
         controller: 'State2Controller',
         templateUrl: 'views/another-template.html',
         data: {
-          css: ['styles/custom-state2-override.css', 'another.css']
+          css: ['styles/custom-state2.css', 'styles/another.css']
+        }
+      })
+
+      .state('state3', {
+        url: '/state3',
+        controller: 'State3Controller',
+        templateUrl: 'views/another-super-template.html',
+        data: {
+          css: 'styles/custom-state3.css'
         }
       })
         // more states can be declared here
 }]);
 ```
 
-Note that `state1.state12` will have the parent file `styles/custom-state1-override.css` injected; redefine the css array for override it.
+* For state1 state we will have CSS: ['styles/custom-state1.css', 'styles/state1-layout.css'].
+* For state1.state2 state we will have CSS: ['styles/custom-state1.css', 'styles/custom-state1.state12.css', 'styles/state1.state12-layout.css'].
+* For state2 state we will have CSS: ['styles/custom-state2.css', 'styles/another.css'].
+* For state3 state we will have CSS: ['styles/custom-state3.css'].
+
 
 How to install:
 ---------------
@@ -72,11 +100,11 @@ How to install:
 })
 ```
 
-A simple plunkr to understand the usage:: http://plnkr.co/edit/rJEdureVMHShO08kJE4N?p=preview
+A simple plunkr to understand the usage: http://plnkr.co/edit/HIcYEj2QRqBCwbZCU0Il?p=preview
 
 **Things to notice:**
 * Specifying a css property on the route is completely optional. If the state doesn't have a css property, the service will simply do nothing for that route.
-* You can even have multiple page-specific stylesheets per state, where the css property is an **array** of relative paths to the stylesheets needed for that route.
+* You can even have multiple page-specific stylesheets per state, where the css property is an **array** of relative paths or objects contains the name and href attributes.
 * If a parent state exists the data object is inherited.
 
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-ui-router-styles",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "ui-router-styles.js",
   "dependencies": {
     "angular": ">=1.4.9",

test/ui-router-styles.js

@@ -42,19 +42,68 @@ describe('Unit: should inject some css', function () {
     expect($scope.routeStyles).toContain('/red')
     expect($scope.routeStyles).not.toContain('/green')
   });
+
+  it("should have the base layout", function() {
+    var element;
+    element = $c('<ui-router-styles />')($scope);
+    initStateTo(red);
+    $scope.$digest();
+    expect($scope.routeStyles).toContain('/red');
+    expect($scope.routeStyles).toContain('/layout-base.css');
+    expect($scope.routeStyles).not.toContain('/layout-green.css');
+  });
+
+  it("should have the green layout", function() {
+    var element;
+    element = $c('<ui-router-styles />')($scope);
+    initStateTo(green);
+    $scope.$digest();
+    expect($scope.routeStyles).toContain('/green');
+    expect($scope.routeStyles).not.toContain('/layout-base.css');
+    expect($scope.routeStyles).toContain('/layout-green.css');
+  });
 });
 
 function defineStates($stateProvider) {
+  $stateProvider.state('base', {
+    url: '/base',
+    template: '<div></div>',
+    abstract: true,
+    data: {
+      css: [
+        {
+          name: 'layout',
+          href: '/layout-base.css'
+        }
+      ]
+    }
+  });
+
   $stateProvider.state('green', {
     url: '/green',
+    parent: 'base',
     template: '<div></div>',
     controller: function() {},
-    data: { css: ['/green']}
+    data: {
+      css: [
+        '/green',
+        {
+          name: 'layout',
+          href: '/layout-green.css'
+        }
+      ]
+    }
   });
+
   $stateProvider.state('red', {
     url: '/red',
+    parent: 'base',
     template: '<div></div>',
     controller: function() {},
-    data: { css: ['/red']}
+    data: {
+      css: [
+        '/red'
+      ]
+    }
   });
 }

ui-router-styles.js

@@ -44,17 +44,27 @@
 
       function stateChangeSuccessCallback(evt, toState) {
         // From current state to the root
+        var stylesObject = {};
         scope.routeStyles = [];
+
         for(var state = toState; state && state.name !== ''; state=$$parentState(state)) {
           if(state && state.data && state.data.css) {
             if(!Array.isArray(state.data.css)) {
               state.data.css = [state.data.css];
             }
+
             angular.forEach(state.data.css, function(css) {
-              if(scope.routeStyles.indexOf(css) === -1) {
-                scope.routeStyles.push(css);
+              // css = {name: 'layout', href: '/layout.css'}
+              if(typeof css === 'object' && css.name && css.href && !stylesObject[css.name]) {
+                stylesObject[css.name] = css.href;
+              }else if(typeof css === 'string') {
+                stylesObject[css] = css;
               }
             });
+
+            angular.forEach(stylesObject, function(style) {
+              if(scope.routeStyles.indexOf(style) === -1) scope.routeStyles.push(style);
+            });
           }
         }
         scope.routeStyles.reverse();