Reload Page - Parent Css not applied to child - UI Router

[Coyzz]

Hello,

When we reload the page on a child state (like /home/profile), the parent css (home.css) is not applied to the child.

Is there a way to persist the css on reload ?

Thanks !

[slavafomin]

Yes, I have the same problem. It looks like module doesn't support property inheritance from the parent states. Actually this is very sad, because without this feature this module has no value to our project. We can't repeat the same definition of styles for every route, this just makes no sense.

Are you planning to implement inheritance?

[slavafomin]

1. We could build the chain of states from the current state to the topmost.
2. Iterate through the reversed chain, i.e. from topmost state to the current.
3. When each state is visited add all encountered CSS files to the end of the list, which is empty initially.

In the end we will have the complete list of all CSS files from top state to bottom.

Of course we will also need a mechanism to override some CSS files, this could be very useful when working with different layouts. We can introduce the concept of named styles.

Example

stateHelperProvider
  .state({
    name: 'root',
    abstract: true,
    css: [
      'bootstrap.css',
      {
        name: 'layout', // <==========  NAMED STYLE
        href: 'primary-layout.css'
      }
    ]
  })
  .state({
    name: 'foo',
    parent: 'root',
    css: 'foo.css'
  })
  .state({
    name: 'bar',
    parent: 'root',
    css: [
      {
        name: 'layout',
        href: 'alternative-layout.css' // <==========  OVERRIDING THE NAMED STYLE!
      },
      'bar.css'
    ]
  })
;

• For root.foo state we will have CSS: ['bootstrap.css', 'primary-layout.css', 'foo.css'].
• For root.bar state we will have CSS: ['bootstrap.css', 'alternative-layout.css', 'bar.css'].

What do you think @alexandercastillo?

[ujwaldhakal]

its not working for me either