From b79b49d45bc43b4e679ac984b2db1e0c02e015eb Mon Sep 17 00:00:00 2001 From: "Gregory R. Warnes" Date: Wed, 23 Aug 2023 14:06:50 -0400 Subject: [PATCH] inlineCSS: Add parameter to generate human-readable CSS (#262) --- R/inlineCSS.R | 58 +++++++++++++++++++++++++++++++++++++++++------- man/inlineCSS.Rd | 33 +++++++++++++++++++++++++-- 2 files changed, 81 insertions(+), 10 deletions(-) diff --git a/R/inlineCSS.R b/R/inlineCSS.R index 90490fd..d45ba7b 100644 --- a/R/inlineCSS.R +++ b/R/inlineCSS.R @@ -2,7 +2,8 @@ #' #' Add inline CSS to a Shiny app. This is simply a convenience function that #' gets called from a Shiny app's UI to make it less tedious to add inline CSS. -#' If there are many CSS rules, it is recommended to use an external stylesheet.\cr\cr +#' If there are many CSS rules, it is recommended to use an external stylesheet. +#' \cr\cr #' CSS is a simple way to describe how elements on a web page should be #' displayed (position, colour, size, etc.). You can learn the basics #' at \href{https://www.w3schools.com/css/}{W3Schools}. @@ -12,8 +13,14 @@ #' \code{list(selector = declarations)}, where \code{selector} is a valid #' CSS selector and \code{declarations} is a string or vector of declarations. #' See examples for clarification. +#' @param minify If `TRUE`, the CSS rules will be condensed as much as possible +#' to save on bandwidth. If `FALSE`, whitespace is added to make the CSS more +#' human-readable, which is easier for debugging. +#' #' @return Inline CSS code that is automatically inserted to the app's +#' #' \code{} tag. +#' #' @examples #' if (interactive()) { #' library(shiny) @@ -56,17 +63,52 @@ #' ), #' server = function(input, output) {} #' ) +#' +#' # Use `minify = FALSE` to result in more human-readable CSS +#' shinyApp( +#' ui = fluidPage( +#' inlineCSS(list( +#' "#big" = "font-size:30px", +#' ".red" = c("color: red", "border: 1px solid black") +#' ), minify = FALSE), +#' p(id = "big", "This will be big"), +#' p(class = "red", "This will be red and bordered") +#' ), +#' server = function(input, output) {} +#' ) #' } #' @export -inlineCSS <- function(rules) { +inlineCSS <- function (rules, minify = TRUE) +{ + if (minify) { + space <- "" + indent <- "" + cr <- "" + collapse <- ";" + } else { + space <- " " + indent <- " " + cr <- "\n" + collapse <- paste0(";", cr) + } if (is.list(rules)) { rules <- - paste( - lapply(names(rules), - function(x) { - paste0(x, "{", paste(rules[[x]], collapse = ";") , "}") - }), - collapse = "") + paste0( + lapply( + names(rules), + function(x) { + paste0( + cr, + x, space, "{", cr, + paste0(indent, rules[[x]], collapse = collapse), + cr, + "}" + ) + } + ), + cr, + collapse = "" + ) } insertHead(shiny::tags$style(shiny::HTML(rules))) } diff --git a/man/inlineCSS.Rd b/man/inlineCSS.Rd index 1956d0f..26e7063 100644 --- a/man/inlineCSS.Rd +++ b/man/inlineCSS.Rd @@ -4,7 +4,7 @@ \alias{inlineCSS} \title{Add inline CSS} \usage{ -inlineCSS(rules) +inlineCSS(rules, .human_readable = TRUE) } \arguments{ \item{rules}{The CSS rules to add. Can either be a string with valid @@ -12,15 +12,21 @@ CSS code, or a named list of the form \code{list(selector = declarations)}, where \code{selector} is a valid CSS selector and \code{declarations} is a string or vector of declarations. See examples for clarification.} + +\item{.human_readable}{Logical indicating whether the CSS rules should include +whitespace so they are human readable, which is useful for debugging. +Defaults to FALSE.} } \value{ Inline CSS code that is automatically inserted to the app's + \code{} tag. } \description{ Add inline CSS to a Shiny app. This is simply a convenience function that gets called from a Shiny app's UI to make it less tedious to add inline CSS. -If there are many CSS rules, it is recommended to use an external stylesheet.\cr\cr +If there are many CSS rules, it is recommended to use an external stylesheet. +\cr\cr CSS is a simple way to describe how elements on a web page should be displayed (position, colour, size, etc.). You can learn the basics at \href{https://www.w3schools.com/css/}{W3Schools}. @@ -67,5 +73,28 @@ if (interactive()) { ), server = function(input, output) {} ) + + # By default, generates minimized CSS rules + rulesTxt <- + inlineCSS( + list( + "#big" = "font-size:30px", + ".red" = c("color: red", "border: 1px solid black") + ), + .human_readable=FALSE + ) + print(rulesTxt) + + # Use `.human_readable` argument to include whitespace for readability + rulesTxtReadable <- + inlineCSS( + list( + "#big" = "font-size:30px", + ".red" = c("color: red", "border: 1px solid black") + ), + .human_readable=TRUE + ) + print(rulesTxtReadable) + } }