inlineCSS: Add parameter to generate human-readable CSS (#262)

daattali · Aug 23, 2023 · b79b49d · b79b49d
1 parent ae7c98c
commit b79b49d
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 10 deletions.
diff --git 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{<head>} 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