refs FOO-1116
right now in order to build the javascript, we must run brandable_css
first for the specific purpose of injecting into handlebars templates
their corresponding stylesheet file with the checksum as reported by
brandable_css
this patch moves things around such that Rails provides this mapping of
"handlebars template" to "CSS variant file checksums" in a global
variable (Rails is privy to this information already), webpack then at
build time injects only a reference to that mapping into the template,
then our runtime brandable-css JS helper will resolve that reference
from the mapping and request the correct file based on the current
user's variant
[1] rails assigns window.BRANDABLE_CSS_HANDLEBARS_INDEX with content
like this:
[
[ "new_styles_normal_contrast", "new_styles_high_contrast", ... ],
{
"0c": ["0f4f01ab86", 0, 0, "e3e7211701", 3, ... ],
...
}
]
the structure of the mapping is explained in brandable_css[1], it is
a bit overtuned to reduce the size as much as possible since this is
included for ALL pages even though the templates in question may never
be rendered (right now it's ~1.5kB and should never grow)
[2] webpack asks @canvas/brandable-css to loadStylesheetForJST using the
contrived id for that file (frontend_build/i18nLinerHandlebars.js:92)
[3] brandable-css/index.js will decode that structure to arrive at the
exact URL for the stylesheet for that template for the current user
variant
with this , we should be able to optimize "rake canvas:compile_assets"
to run both brandable_css and webpack in parallel, which will greatly
mitigate the performance decrease from moving from node-sass to
dart-sass
== test plan
go to some assignment's syllabus page, edit the file
app/stylesheets/jst/courses/Syllabus.scss with something fun like:
#syllabus .day_date { background: $fire; }
rerun `npx brandable_css`, reload the page and verify it's on fire,
optionally change your setting to enable High Contrast mode, reload
the syllabus page and verify the color changes (it picks up the other
variant stylesheet)
[1]: 80af6e70af
Change-Id: Ie48cc71d4837ee02313b2d45a9ad2944725acad2
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/268615
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: August Thornton <august@instructure.com>
QA-Review: August Thornton <august@instructure.com>
Product-Review: August Thornton <august@instructure.com>
52fe84dbb2