/
read-css.Rmd
73 lines (57 loc) · 2.07 KB
/
read-css.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
---
title: "Reading/Parsing CSS"
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{Reading/Parsing CSS}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
---
```{r, include = FALSE}
knitr::opts_chunk$set(
collapse = FALSE,
comment = "#>"
)
```
```{r setup}
library(cssparser)
```
## Introduction
`cssparser::read_css()` is used to parse CSS stored in a string or in a file.
The returned object is a named list where:
* the names correspond to the [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
* the values are [declaration blocks](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_declaration_blocks) which are named lists where:
* the name is the [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) e.g. `background-color`, `font-size` etc
* the value represents the setting for that property e.g. `#ff88bb`, `12px`
## Example
```{r}
library(cssparser)
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# a Stylesheet to read
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
stylesheet <- '
#main {
background-color: red !important;
color: blue;
}
.footer {
border-color: rgb(50 100 255);
font-weight: lighter;
margin-left: 1cm;
}
.footer > p {
background-color: green;
}
'
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Read the above stylesheet into a CSS object in R
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
css <- cssparser::read_css(stylesheet)
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Access the declaration block for `#main` id selector
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
css[['#main']]
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Access the 'font-weight' for the '.footer' class selector
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
css[['.footer']][['font-weight']]
```