Skip to content

bslib stylesheet overrides do not work with shiny_prerendered and rmarkdown 2.8 #343

@joemirizio

Description

@joemirizio

Problem

Referencing stylesheets in the front matter will not override the Bootstrap theme with flexdashboard and runtime: shiny_prerendered. This only appears to be an issue in rmarkdown 2.8.

---
output:
  flexdashboard::flex_dashboard:
    css:
      - mystyle.css

Background

bslib allows for style overrides by specifying stylesheets in the css property in the front matter. This works when rendering html_documents (both shiny and shiny_prerendered). It also works in flexdashboard when using runtime: shiny, but not with runtime: shiny_prerendered.

📸 Expand for visual examples of each

html_document + runtime: shiny

Screen Shot 2021-06-08 at 1 58 34 PM

html_document + runtime: shiny_prerendered

Screen Shot 2021-06-08 at 1 58 59 PM

flexdashboard::flex_dashboard + runtime: shiny

Screen Shot 2021-06-08 at 1 59 19 PM

flexdashboard::flex_dashboard + runtime: shiny_prerendered

Screen Shot 2021-06-08 at 1 59 45 PM

It appears that the theme CSS (cosmo in this example) is applied after the prerendered HTML is loaded, thus overriding the added rules (nes).
Screen Shot 2021-06-08 at 3 01 23 PM
Screen Shot 2021-06-08 at 3 00 28 PM

Steps to reproduce

  1. Install rmarkdown 2.8 (latest version)
  2. Create an RMarkdown document with the following code
---
title: "bslib css overrides"
runtime: shiny_prerendered
output:
  flexdashboard::flex_dashboard:
    css:
      - https://unpkg.com/nes.css@latest/css/nes.min.css
---
```{r, context="server"}
print("Hello World")
``` #end
  1. Note the NES stylesheet changes the cursor, but the default cosmo theme overrides the font, for example.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions