• 
      

    Update CSS bundles to use a central file per bundle.

    Review Request #12966 — Created April 20, 2023 and submitted

    Information

    Review Board
    release-6.x

    Reviewers

    Our main Pipeline CSS bundles (admin, common, and reviews) now
    include a single file for the Review Board codebase, which is
    responsible for importing all other files in the bundle.

    This has a number of advantages:

    • Rules can be more easily combined and deduplicated, such as when
      extending rules.

    • Relative paths (for image files) can be simplified, since all files
      now come from a central place.

    • We'll be able to use Less plugins that can optimize rules across the
      resulting CSS file.

    • There are fewer files to load per page during development.

    This has required some cleanup in places. @import statements now use
    the absolute (e.g., rb/css/...) paths in all cases, which appears to
    avoid some issues with how LessCSS determines whether it's processed a
    file.

    A lot of old path-relative code (for url()s) has also been replaced,
    and paths made standardized with some new variables in
    rb/assets/paths.less.

    All bundle entrypoints live in css/bundles/, rather than having a
    directory per bundle. There are two reasons for this:

    1. We'll probably end up merging bundles together soon. Maybe most of
      them. It'd be ideal not to have to keep moving files around.

    2. Extensions can import these files as references, to make use of
      functions or variables, making these hard to move.

    This ends up shrinking the bundles quite a bit:

    • admin drops from 45KB to 44KB
    • common drops from 359KB to 246KB
    • reviews drops from 146KB to 129KB

    Tested the dashboard, review request page, diff viewer, and various
    pages in the admin UI.

    Tested building the package.

    Summary ID
    Update CSS bundles to use a central file per bundle.
    Our main Pipeline CSS bundles (`admin`, `common`, and `reviews`) now include a single file for the Review Board codebase, which is responsible for importing all other files in the bundle. This has a number of advantages: * Rules can be more easily combined and deduplicated, such as when extending rules. * Relative paths (for image files) can be simplified, since all files now come from a central place. * We'll be able to use Less plugins that can optimize rules across the resulting CSS file. * There are fewer files to load per page during development. This has required some cleanup in places. `@import` statements now use the absolute (e.g., `rb/css/...`) paths in all cases, which appears to avoid some issues with how LessCSS determines whether it's processed a file. A lot of old path-relative code (for `url()`s) has also been replaced, and paths made standardized with some new variables in `rb/assets/paths.less`. All bundle entrypoints live in `css/bundles/`, rather than having a directory per bundle. There are two reasons for this: 1. We'll probably end up merging bundles together soon. Maybe most of them. It'd be ideal not to have to keep moving files around. 2. Extensions can import these files as references, to make use of functions or variables, making these hard to move. This ends up shrinking the bundles quite a bit: * `admin` drops from 45KB to 44KB * `common` drops from 359KB to 246KB * `reviews` drops from 146KB to 129KB
    8c6dcbcf02d8d594a1c5b0de9491faedf28ed382
    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-6.x (b00f15e)