Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
joemirizio opened this issue Jun 8, 2021 · 3 comments · Fixed by #344
Closed

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

joemirizio opened this issue Jun 8, 2021 · 3 comments · Fixed by #344

Comments

@joemirizio
Copy link

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.
@cpsievert
Copy link
Collaborator

cpsievert commented Jun 17, 2021 •
edited
Loading

This happens because, in the non-{bslib} usage of html_document (i.e., no specified theme), css files appear before bootstrap (as shown in your screenshot). However, in the {bslib} case, css will be included after Bootstrap, so you can workaround the issue like this:

---
title: "bslib css overrides"
runtime: shiny_prerendered
output:
  flexdashboard::flex_dashboard:
    theme:
      version: 4
      # Include the font files as well!
      base_font:
        google: Press Start 2P
    css:
      - https://unpkg.com/nes.css@latest/css/nes.min.css
---

```{r, context="server"}
print("Hello World")
```

I feel like, in the non-{bslib} case, css should appear after Bootstrap, but it might be too late to change that (cc @cderv).

@cderv cderv mentioned this issue Jun 22, 2021
Merged
@cderv
Copy link
Collaborator

cderv commented Jun 22, 2021

I just pushed a fix for this I believe. @joemirizio can you try the PR ?

remotes::install_github("rstudio/flexdashboard#344")

@cpsievert even without bslib, the CSS should be inserted after the HTML dependencies, including bootstrap.
This is an issue here specific to flexdashboard because while fixing something with shiny_prerendered in rmarkdown, we did not made the change to flexdashboard own custom template. A specific placeholder needs to be inserted into the template so that the HTML dependencies are inserted in the correct place. This is because header-includes Pandoc's variable is not used with shiny and the HTML dependencies where added at the end of the <head> leading to the behavior above. The PR introduce the missing piece which should fix the issue.

@joemirizio
Copy link
Author

Thanks for looking into this! I tested with the PR version and it worked great

@maxheld83 maxheld83 mentioned this issue Aug 26, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add HEAD placeholder in html template for shiny_prerendered rstudio/flexdashboard
3 participants
@joemirizio @cpsievert @cderv