extends ../../../ts/latest/guide/component-styles.jade

block includes
  include ../_util-fns

//- TODO: consider adding material equivalent to TS Appendices 1 & 2 if relevant.

block style-url
  :marked
    Note that the URLs in `styleUrls` are relative to the component.

block module-bundlers
  //- TODO: determine if an equivalent of the TS material is relevant for Dart.
  //- Leaving empty for now.

block css-import-url
  :marked
    In *this* case the URL is relative to the CSS file into which we are importing.
  .alert.is-important
    :marked
      URLs are currently not interpreted in this way, see 
      [issue 8518](href="https://github.com/angular/angular/issues/8518").
      Until this issue is fixed, absolute package-reference style URLs must 
      be given as is illustrated below.
    
block module-id
  p.
    Thankfully, this is the default interpretation of relative URLs in 
    Angular2 for Dart:
  +makeExample('component-styles/ts/app/quest-summary.component.ts', 'urls')(format='.')
  :marked
    Note that special measures must be taken in Angular2 for TypeScript, if
    relative URLs are to have the same interpretation. See 
    [here](../../../ts/latest/guide/component-styles.html#!#relative-urls)
    for details.