bslib icon indicating copy to clipboard operation
bslib copied to clipboard

Save JSON representation of HTML dependencies & underlying Sass code

Open cpsievert opened this issue 7 months ago • 0 comments

This PR is motivated by Quarto (which already takes a build-time dependency on bslib to copy over it's modified version of Bootstrap) wanting to leverage even more work that we're doing in Sass (especially the bs_theme(preset="shiny")).

The main idea/addition here is a new inst/css-precompiled/5/dependencies.json file that Quarto can ingest to:

  1. Check/monitor jQuery/Bootstrap versions.
  2. Ensure its Bootstrap Sass layer faithfully matches ours.
  3. Decide how/whether to include the additional Sass layers that we include by default with our Bootstrap HTML dependency (i.e., the bslib, bs3compat, and builtin) are worth adding.
    • It's probably fine to include all these, but also keep in mind that at bs3compat also comes with JS assets (those assets would make it so shiny::tabsetPanel(), which produces BS3 markup, works correctly in Quarto)
    • See the section below for getting other details right, such as fonts for the builtin.
  4. Decide whether it's worth compiling bslib's component Sass code, rather than relying on bslib to provide the pre-compiled CSS
    • I don't think this is worth doing at the moment, and hopefully we don't have a real need for it in the future (we're hoping we can leverage Bootstrap's CSS variables in such a way that they'll still feel theme-able via Sass).

Other, more general, things Quarto should be aware of:

  • All of the relative file paths in dependencies.json are relative to bslib's inst/ directory.
  • Some layers use sass_layer() features that probably don't exist in Quarto, such as file_attachments, which are essentially just extra files/directories that get imported inside the Sass code/files.
  • Some of these HTML dependencies have all_files = TRUE, which mounts the entire {src: file: {}} directory at name-version. This what makes things like source map files available and the $web-font-path: "font.css" trick that builtin and bootswatch themes leverage to implement local file requests (in that case, there is a @import font.css which makes a request to font files under the font/ directory).

BTW, there are, what seems to be a lot of R/scss changes in this PR, but it's mostly just shuffling logic around so it's more centralized and simpler to get a sass_bundle() representation of bs_theme() that is just 4 layers: bootstrap, bslib, bs3compat, and builtin.

cpsievert avatar Nov 21 '23 19:11 cpsievert