Uploaded image for project: 'Tapestry 5'
  1. Tapestry 5
  2. TAP5-1883

Add a way to order/priorize stylesheets

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Won't Fix
    • Affects Version/s: 5.3.2
    • Fix Version/s: None
    • Component/s: tapestry-core

      Description

      Issue:
      The order of CSS in a HTML page is important for overriding styles.
      Its a common practice to define an overall style and have some different layouts which override some specific parts of it.
      When using multiple nested Layout components or Components which extend each other, the @Import annotation does not help here, because it does not let you order the styles. The default order seems to go from most-specific to the outermost (most generic) component. So the most generic component's CSS is "stronger" than the most specific one.

      Currently I see 4 workarounds:

      • Place the @Import on different render methods. But that's limited by the amount of render methods (and some of those might be called very often, some might never be called).
      • manually place the stylesheets in the template (not recommended because of possible iterations).
      • Create a MarkupWriterFilter which manipulates the DOM
      • Create a mixin or an uppermost Layout component which handles the CSS.

      Suggestion:

      • Add some way to priorize/order the stylesheets. Maybe similar to the OrderedConfiguration?
      • Add a hook to let us reorder the stylesheets before they are rendered (ex. in JavaScriptSupport)

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              enlo Beat Durrer
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: