Enable built-in Sass modules

[xx02al]

Hi

Is it possible to allow usage of built-in Sass modules? quarto cli discussion #12254 might be helpful.

Here is some starter code for the subsequent examples.

library(bslib)
library(shiny)

custom_theme <- bs_theme(version = 5)

# UI ---------------------------------------------------------------------------
ui <- page_navbar(
  theme = custom_theme,
  nav_panel(
    "One",
    card(
      card_header("card header goes here", class = "bg-aaa"),
      "card content goes here"
    )
  ),
  nav_panel("Two"),
  nav_panel("Three")
)

# Server -----------------------------------------------------------------------
server <- function(input, output) {

}

# Run the application ----------------------------------------------------------
shinyApp(ui = ui, server = server)

In the bslib getting started theming Variables docs we find the example

bs_theme("progress-bar-bg" = "mix(white, orange, 20%)")

We can use the deprecated lighten() function (deprecated as mix() above, but it's less illustrative for mix()) to turn the navbar slightly orange.

custom_theme <- bs_theme(
  version = 5,
  bg = "white",
  "navbar-bg" = "lighten(#e06d33, 30%)",
  fg = "black"
)

How can we @use the Sass color module's scale()?

custom_theme <- bs_theme(
  version = 5,
  bg = "white",
  "navbar-bg" = "color.scale(#e06d33, $lightness: 50%)",
  fg = "black"
)

Similarly, this works

custom_theme <- bs_theme(version = 5) |> 
  bs_add_variables("aaa" = "#e06d33") |> 
  bs_add_rules(
    "
    .bg-aaa {
      background-color: lighten($aaa, 20%);
    }
    "
  )

But we wished to do

custom_theme <-bs_theme(version = 5) |> 
  bs_add_variables("aaa" = "#e06d33") |> 
  bs_add_rules(
    "
    .bg-aaa {
      background-color: color.scale($aaa, 50%);
    }
    "
  )

or

custom_theme <- bs_theme(version = 5) |> 
  bs_add_variables("aaa" = "#e06d33") |> 
  bs_add_rules(
    "
    @use 'sass:color';
    
    .bg-aaa {
      background-color: color.scale($aaa, 50%);
    }
    "
  )

[gadenbuie]

No, unfortunately we are limited to using older features because, unlike Quarto which uses the Dart Sass implementation, the sass R package uses libsass. At some point, we'll need to find a way to use newer Sass versions but for now it's much easier in the R ecosystem to continue wrapping the C++ library in the sass R package.

[xx02al]

Thank you @gadenbuie for the quick reply. Indeed, unfortunately - that's sad. Do you have an idea how long “some point” might be in the future? I'd be very happy indeed if that's not too long... Btw: LibSass itself is also deprecated (but yes for now still working). IMO built-in Sass modules are powerful and it's also nice if you can use a Sass stylesheet that you use in a Quarto project similarly in a shiny app without much “downgrades” (you know best https://posit-dev.github.io/brand-yml/ if you are about to do less advanced things).

[gadenbuie]

We'll most likely have to deal with it when Bootstrap v6 is released, but it's unclear when that will be. It'd be nice to be able to use Sass modules and newer features, but it's almost certain that using Dart Sass will be a lot less convenient for users than the current libsass approach.

[xx02al]

Thanks for the information