From 7c98ad58842da1b6c5e1ba3bd81f8a895a4e6031 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 6 May 2024 08:41:30 -0400 Subject: [PATCH 1/4] chore: Enable return of dependency CSS as Sass files Makes it possible to extract the Sass files prior to compilation for the following CSS: * shiny * selectize * ionrangeslider * daterange picker --- R/input-date.R | 6 +++++- R/input-select.R | 7 ++++++- R/input-slider.R | 18 +++++++++++------- R/shinyui.R | 6 +++++- 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/R/input-date.R b/R/input-date.R index bfc7ae3970..bab29886f7 100644 --- a/R/input-date.R +++ b/R/input-date.R @@ -153,7 +153,7 @@ datePickerDependency <- function(theme) { ) } -datePickerCSS <- function(theme) { +datePickerCSS <- function(theme, as_sass = FALSE) { if (!is_bs_theme(theme)) { return(htmlDependency( name = "bootstrap-datepicker-css", @@ -166,6 +166,10 @@ datePickerCSS <- function(theme) { scss_file <- system_file(package = "shiny", "www/shared/datepicker/scss/build3.scss") + if (isTRUE(as_sass)) { + return(sass::sass_file(scss_file)) + } + bslib::bs_dependency( input = sass::sass_file(scss_file), theme = theme, diff --git a/R/input-select.R b/R/input-select.R index 3cbcb94d59..3fc63c868d 100644 --- a/R/input-select.R +++ b/R/input-select.R @@ -236,7 +236,7 @@ selectizeDependency <- function() { bslib::bs_dependency_defer(selectizeDependencyFunc) } -selectizeDependencyFunc <- function(theme) { +selectizeDependencyFunc <- function(theme, as_sass = FALSE) { if (!is_bs_theme(theme)) { return(selectizeStaticDependency(version_selectize)) } @@ -246,6 +246,11 @@ selectizeDependencyFunc <- function(theme) { stylesheet <- file.path( selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss") ) + + if (isTRUE(as_sass)) { + return(sass::sass_file(stylesheet)) + } + # It'd be cleaner to ship the JS in a separate, href-based, # HTML dependency (which we currently do for other themable widgets), # but DT, crosstalk, and maybe other pkgs include selectize JS/CSS diff --git a/R/input-slider.R b/R/input-slider.R index 9c3009a645..9305aed006 100644 --- a/R/input-slider.R +++ b/R/input-slider.R @@ -222,7 +222,7 @@ ionRangeSliderDependency <- function() { ) } -ionRangeSliderDependencyCSS <- function(theme) { +ionRangeSliderDependencyCSS <- function(theme, as_sass = FALSE) { if (!is_bs_theme(theme)) { return(htmlDependency( "ionrangeslider-css", @@ -233,13 +233,17 @@ ionRangeSliderDependencyCSS <- function(theme) { )) } + slider_sass <- list( + list(accent = "$component-active-bg"), + sass::sass_file( + system_file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss") + ) + ) + + if (isTRUE(as_sass)) return(slider_sass) + bslib::bs_dependency( - input = list( - list(accent = "$component-active-bg"), - sass::sass_file( - system_file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss") - ) - ), + input = slider_sass, theme = theme, name = "ionRangeSlider", version = version_ion_range_slider, diff --git a/R/shinyui.R b/R/shinyui.R index b96e5b6726..5b41914e17 100644 --- a/R/shinyui.R +++ b/R/shinyui.R @@ -134,7 +134,7 @@ shinyDependencies <- function() { ) } -shinyDependencyCSS <- function(theme) { +shinyDependencyCSS <- function(theme, as_sass = FALSE) { version <- get_package_version("shiny") if (!is_bs_theme(theme)) { @@ -155,6 +155,10 @@ shinyDependencyCSS <- function(theme) { scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss")) scss_files <- lapply(scss_files, sass::sass_file) + if (isTRUE(as_sass)) { + return(scss_files) + } + bslib::bs_dependency( input = scss_files, theme = theme, From 2d00e7b512476e94d3d2571fa31655265b34c6d8 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 6 May 2024 08:55:04 -0400 Subject: [PATCH 2/4] refactor: Take a more functional approach --- R/input-date.R | 16 ++++++++-------- R/input-select.R | 20 ++++++++++---------- R/input-slider.R | 22 +++++++++++----------- R/shinyui.R | 21 ++++++++++----------- 4 files changed, 39 insertions(+), 40 deletions(-) diff --git a/R/input-date.R b/R/input-date.R index bab29886f7..15f9a5459f 100644 --- a/R/input-date.R +++ b/R/input-date.R @@ -153,7 +153,13 @@ datePickerDependency <- function(theme) { ) } -datePickerCSS <- function(theme, as_sass = FALSE) { +datePickerSassLayer <- function() { + sass::sass_file( + system_file(package = "shiny", "www/shared/datepicker/scss/build3.scss") + ) +} + +datePickerCSS <- function(theme) { if (!is_bs_theme(theme)) { return(htmlDependency( name = "bootstrap-datepicker-css", @@ -164,14 +170,8 @@ datePickerCSS <- function(theme, as_sass = FALSE) { )) } - scss_file <- system_file(package = "shiny", "www/shared/datepicker/scss/build3.scss") - - if (isTRUE(as_sass)) { - return(sass::sass_file(scss_file)) - } - bslib::bs_dependency( - input = sass::sass_file(scss_file), + input = datePickerSassLayer(), theme = theme, name = "bootstrap-datepicker", version = version_bs_date_picker, diff --git a/R/input-select.R b/R/input-select.R index 3fc63c868d..4cb75e05e1 100644 --- a/R/input-select.R +++ b/R/input-select.R @@ -236,20 +236,12 @@ selectizeDependency <- function() { bslib::bs_dependency_defer(selectizeDependencyFunc) } -selectizeDependencyFunc <- function(theme, as_sass = FALSE) { +selectizeDependencyFunc <- function(theme) { if (!is_bs_theme(theme)) { return(selectizeStaticDependency(version_selectize)) } - selectizeDir <- system_file(package = "shiny", "www/shared/selectize/") bs_version <- bslib::theme_version(theme) - stylesheet <- file.path( - selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss") - ) - - if (isTRUE(as_sass)) { - return(sass::sass_file(stylesheet)) - } # It'd be cleaner to ship the JS in a separate, href-based, # HTML dependency (which we currently do for other themable widgets), @@ -261,7 +253,7 @@ selectizeDependencyFunc <- function(theme, as_sass = FALSE) { script <- file.path(selectizeDir, selectizeScripts()) bslib::bs_dependency( - input = sass::sass_file(stylesheet), + input = selectizeSassLayer(bs_version), theme = theme, name = "selectize", version = version_selectize, @@ -270,6 +262,14 @@ selectizeDependencyFunc <- function(theme, as_sass = FALSE) { ) } +selectizeSassLayer <- function(bs_version) { + selectizeDir <- system_file(package = "shiny", "www/shared/selectize/") + stylesheet <- file.path( + selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss") + ) + sass::sass_file(stylesheet) +} + selectizeStaticDependency <- function(version) { htmlDependency( "selectize", diff --git a/R/input-slider.R b/R/input-slider.R index 9305aed006..d1eff90e08 100644 --- a/R/input-slider.R +++ b/R/input-slider.R @@ -222,7 +222,16 @@ ionRangeSliderDependency <- function() { ) } -ionRangeSliderDependencyCSS <- function(theme, as_sass = FALSE) { +ionRangeSliderDependencySassLayer <- function() { + list( + list(accent = "$component-active-bg"), + sass::sass_file( + system_file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss") + ) + ) +} + +ionRangeSliderDependencyCSS <- function(theme) { if (!is_bs_theme(theme)) { return(htmlDependency( "ionrangeslider-css", @@ -233,17 +242,8 @@ ionRangeSliderDependencyCSS <- function(theme, as_sass = FALSE) { )) } - slider_sass <- list( - list(accent = "$component-active-bg"), - sass::sass_file( - system_file(package = "shiny", "www/shared/ionrangeslider/scss/shiny.scss") - ) - ) - - if (isTRUE(as_sass)) return(slider_sass) - bslib::bs_dependency( - input = slider_sass, + input = ionRangeSliderDependencySassLayer(), theme = theme, name = "ionRangeSlider", version = version_ion_range_slider, diff --git a/R/shinyui.R b/R/shinyui.R index 5b41914e17..c53c0aa16c 100644 --- a/R/shinyui.R +++ b/R/shinyui.R @@ -134,7 +134,15 @@ shinyDependencies <- function() { ) } -shinyDependencyCSS <- function(theme, as_sass = FALSE) { +shinyDependencySassLayer <- function(bs_version) { + bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss") + + scss_home <- system_file("www/shared/shiny_scss", package = "shiny") + scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss")) + lapply(scss_files, sass::sass_file) +} + +shinyDependencyCSS <- function(theme) { version <- get_package_version("shiny") if (!is_bs_theme(theme)) { @@ -149,18 +157,9 @@ shinyDependencyCSS <- function(theme, as_sass = FALSE) { } bs_version <- bslib::theme_version(theme) - bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss") - - scss_home <- system_file("www/shared/shiny_scss", package = "shiny") - scss_files <- file.path(scss_home, c(bootstrap_scss, "shiny.scss")) - scss_files <- lapply(scss_files, sass::sass_file) - - if (isTRUE(as_sass)) { - return(scss_files) - } bslib::bs_dependency( - input = scss_files, + input = shinyDependencySassLayer(bs_version), theme = theme, name = "shiny-sass", version = version, From 6dc0b8d66b03088a305b1ef94a6b6cc60087f41e Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 6 May 2024 11:11:55 -0400 Subject: [PATCH 3/4] fix: missing selectizeDir --- R/input-select.R | 1 + 1 file changed, 1 insertion(+) diff --git a/R/input-select.R b/R/input-select.R index 4cb75e05e1..b6d1b7cbf4 100644 --- a/R/input-select.R +++ b/R/input-select.R @@ -250,6 +250,7 @@ selectizeDependencyFunc <- function(theme) { # name, the JS/CSS would be loaded/included twice, which leads to # strange issues, especially since we now include a 3rd party # accessibility plugin https://github.com/rstudio/shiny/pull/3153 + selectizeDir <- system_file(package = "shiny", "www/shared/selectize/") script <- file.path(selectizeDir, selectizeScripts()) bslib::bs_dependency( From a5d0f3edad8e7b89a00022e1b444b36e5a233cc5 Mon Sep 17 00:00:00 2001 From: Garrick Aden-Buie Date: Mon, 6 May 2024 13:36:27 -0400 Subject: [PATCH 4/4] rename: __SassLayer --> __Sass --- R/input-date.R | 4 ++-- R/input-select.R | 4 ++-- R/input-slider.R | 4 ++-- R/shinyui.R | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/R/input-date.R b/R/input-date.R index 15f9a5459f..7278f3718e 100644 --- a/R/input-date.R +++ b/R/input-date.R @@ -153,7 +153,7 @@ datePickerDependency <- function(theme) { ) } -datePickerSassLayer <- function() { +datePickerSass <- function() { sass::sass_file( system_file(package = "shiny", "www/shared/datepicker/scss/build3.scss") ) @@ -171,7 +171,7 @@ datePickerCSS <- function(theme) { } bslib::bs_dependency( - input = datePickerSassLayer(), + input = datePickerSass(), theme = theme, name = "bootstrap-datepicker", version = version_bs_date_picker, diff --git a/R/input-select.R b/R/input-select.R index b6d1b7cbf4..1061461924 100644 --- a/R/input-select.R +++ b/R/input-select.R @@ -254,7 +254,7 @@ selectizeDependencyFunc <- function(theme) { script <- file.path(selectizeDir, selectizeScripts()) bslib::bs_dependency( - input = selectizeSassLayer(bs_version), + input = selectizeSass(bs_version), theme = theme, name = "selectize", version = version_selectize, @@ -263,7 +263,7 @@ selectizeDependencyFunc <- function(theme) { ) } -selectizeSassLayer <- function(bs_version) { +selectizeSass <- function(bs_version) { selectizeDir <- system_file(package = "shiny", "www/shared/selectize/") stylesheet <- file.path( selectizeDir, "scss", paste0("selectize.bootstrap", bs_version, ".scss") diff --git a/R/input-slider.R b/R/input-slider.R index d1eff90e08..30bfae1979 100644 --- a/R/input-slider.R +++ b/R/input-slider.R @@ -222,7 +222,7 @@ ionRangeSliderDependency <- function() { ) } -ionRangeSliderDependencySassLayer <- function() { +ionRangeSliderDependencySass <- function() { list( list(accent = "$component-active-bg"), sass::sass_file( @@ -243,7 +243,7 @@ ionRangeSliderDependencyCSS <- function(theme) { } bslib::bs_dependency( - input = ionRangeSliderDependencySassLayer(), + input = ionRangeSliderDependencySass(), theme = theme, name = "ionRangeSlider", version = version_ion_range_slider, diff --git a/R/shinyui.R b/R/shinyui.R index c53c0aa16c..155484e005 100644 --- a/R/shinyui.R +++ b/R/shinyui.R @@ -134,7 +134,7 @@ shinyDependencies <- function() { ) } -shinyDependencySassLayer <- function(bs_version) { +shinyDependencySass <- function(bs_version) { bootstrap_scss <- paste0("shiny.bootstrap", bs_version, ".scss") scss_home <- system_file("www/shared/shiny_scss", package = "shiny") @@ -159,7 +159,7 @@ shinyDependencyCSS <- function(theme) { bs_version <- bslib::theme_version(theme) bslib::bs_dependency( - input = shinyDependencySassLayer(bs_version), + input = shinyDependencySass(bs_version), theme = theme, name = "shiny-sass", version = version,