More accurately replicate bslib's Sass code

[cpsievert]

Closes #6081 (And possibly other issues connected to {bslib}).

This PR is aimed at getting quarto's Bootstrap Sass to more accurately reflect {bslib}'s Sass code. Somewhat recently, we started to adding additional components like (cards, value boxes, and sidebars, etc). At least at the moment, the Sass/CSS for these components are added to the page-level Bootstrap dependency (to help reduce the amount of Sass calls would be needed for themable components).

This page-level Bootstrap dependency is represented by bslib::bs_theme(), which has some R-specific logic to pull in more than just Bootstrap alone. To help make it more transparent what else it brings in, rstudio/bslib#655 added a inst/css-precompiled/5/bootstrap.scss file which captures the Sass code that bslib::bs_theme() generates. This PR make this file the main entry point for Bootstrap Sass (and also brings in the other files/assets that it imports).

Happy to hop on a Zoom/Slack call to go through this if that helps

Disclaimer

I haven't verified this code actually works, but I hope it's enough to get the conversation going. FWIW, when I run ./configure.sh locally, this code path doesn't appear to run, so I'm not quite sure what code I need to run to get these changes into my local install of quarto

[msummersgill]

From what I can tell running an additional script is necessary to update the HTML dependencies.

./configure.sh
bash package/src/quarto-bld update-html-dependencies 
bash package/src/quarto-bld prepare-dist # Not sure whether this one is necessary.

However, when I run bash package/src/quarto-bld update-html-dependencies on this branch I get an error:

bash package/src/quarto-bld update-html-dependencies 
...
...
...
Copying /tmp/63fc9176/bsdist/bslib/inst/lib/bs5/dist/js/bootstrap.bundle.min.js.map to /home/matthew14786/quarto-cli/src/resources/formats/html/bootstrap/dist/bootstrap.min.js.map
Merging themes:
zephyr
sketchy
morph
united
cosmo
superhero
spacelab
solar
simplex
ERROR: Unable to patch template simplex because the target .navbar {
  border-width: 1px;
  border-style: solid; cannot be found

Stack trace:
  border-width: 1px;
  border-style: solid; cannot be found
    at file:///home/matthew14786/quarto-cli/package/src/common/update-html-dependencies.ts:947:15
    at Array.forEach (<anonymous>)
    at patchTheme (file:///home/matthew14786/quarto-cli/package/src/common/update-html-dependencies.ts:943:13)
    at file:///home/matthew14786/quarto-cli/package/src/common/update-html-dependencies.ts:697:31
    at eventLoopTick (ext:core/01_core.js:181:11)
    at async withRepo (file:///home/matthew14786/quarto-cli/package/src/util/git.ts:28:3)
    at async updateBootstrapFromBslib (file:///home/matthew14786/quarto-cli/package/src/common/update-html-dependencies.ts:582:3)
    at async updateHtmlDependencies (file:///home/matthew14786/quarto-cli/package/src/common/update-html-dependencies.ts:485:3)
    at async Command.fn (file:///home/matthew14786/quarto-cli/package/src/cmd/pkg-cmd.ts:55:7)
    at async Command.execute (file:///home/matthew14786/quarto-cli/src/vendor/deno.land/x/[email protected]/command/command.ts:1790:7)

When I run the same command against latest quarto-cli/main the HTML dependency update completes successfully, indicating the changes in this branch introduce a bug.

[msummersgill]

Looks like it was specific to a had-coded patch in package/src/common/update-html-dependencies.ts expecting a specific string in the simplex theme was the culprit - commenting this out yields a successful HTML Dependency update. (Branch demonstrating this behavior is here - msummersgill/quarto-cli/tree/bslib-delete-simplex-patch - though to preserve whatever desired behavior was accomplished by this patch, a more nuanced approach might be necessary)

const themePatches: Record<string, ThemePatch[]> = {
  "litera": [
    {
      from: ".navbar {\n  font-size: $font-size-sm;",
      to:
        ".navbar {\n  font-size: $font-size-sm;\n  border: 1px solid rgba(0, 0, 0, .1);",
    },
  ],
  "lumen": [{
    from: ".navbar {\n  @include shadow();",
    to:
      ".navbar {\n  @include shadow();\n  border-color: shade-color($navbar-bg, 10%);",
  }],
  //"simplex": [{
  //  from: ".navbar {\n  border-width: 1px;\n  border-style: solid;",
  //  to:
  //   ".navbar {\n  border-width: 1px;\n  border-style: solid;\n  border-color: shade-color($navbar-bg, 13%);",
  //}],
  "solar": [{
    from: "$body-color:                $gray-600 !default;",
    to: "$body-color:                $gray-500 !default;",
  }],
};

After updating HTML dependencies, I am still seeing unchanged behavior on quarto-cli/6081, though it's possible I missed a necessary step in the update progress?

[msummersgill]

Did a little poking around, and it turns out that in the pre-patch simplex theme, the .navbar elements were re-ordered, causing an error. Opened a PR against your branch here that successfully completes bash package/src/quarto-bld update-html-dependencies while preserving the intended behavior.

[dragonstyle]

You guys are doing a great job of sorting through this - sorry I haven't pitched in with information!

• We keep HTML Dependencies in our repo, so normally we use quarto-bld update-html-dependencies to create any updates, then commit the changed files to the repo after inspecting them to ensure things look good.
• We have a set of functions that provide the various components of bootstrap scss that we use in format-html-shared.ts:

export const bootstrapFunctions = () => {
  return Deno.readTextFileSync(
    join(bootstrapResourceDir(), "_functions.scss"),
  );
};

export const bootstrapMixins = () => {
  return Deno.readTextFileSync(
    join(bootstrapResourceDir(), "_mixins.scss"),
  );
};

export const bootstrapVariables = () => {
  return Deno.readTextFileSync(
    join(bootstrapResourceDir(), "_variables.scss"),
  );
};

export const bootstrapRules = () => {
  return Deno.readTextFileSync(
    join(bootstrapResourceDir(), "bootstrap.scss"),
  );
};

export const bootstrapResourceDir = () => {
  return formatResourcePath(
    "html",
    join("bootstrap", "dist", "scss"),
  );
};

• These functions will get used to place the various bits of scss in the correct order when merging bootstrap, theme, and user scss.
• Updating HTML Dependencies, then modifying these functions to point at the proper files should result in us using the updated scss when compiling styles...

[cpsievert]

Thanks for the help @msummersgill and extra context @dragonstyle.

I'm actually going close this and send you another (simpler) PR soon. We're going to change the way we bundle component-specific Sass/CSS so that Quarto doesn't need to be responsible for it (see rstudio/bslib#664). One that PR is merged, folks will be able to just upgrade {bslib} to get components working more sensibly in Quarto.

Also, the new PR will just be (mostly) for upgrading Quarto's bundled version of Bootstrap (which we could tie to a different issue).