Overwrite of css function contrast in scss output

[acederberg]

Thank you for quarto, it is great!

I am having trouble defining a css filter for some animations using scss:

/*-- scss:rules*/
.animation img,
.figure img {
  filter: invert(1) hue-rotate(135deg) saturate(2) contrast(0.75);
}

.anim-controls button i,
.anim-buttons button i .fa-flip-horizontal,
.anim-buttons button i .fa {
  filter: invert(1) !important;
}

I then run quarto render . and get the following error:

ERROR: Theme file compilation failed:

Error: Missing argument $front.
      ╷
993   │ @function contrast($back, $front) {
      │           ━━━━━━━━━━━━━━━━━━━━━━━ declaration
...   │
12804 │   filter: invert(1) hue-rotate(135deg) saturate(2) contrast(0.75);
      │                                                    ^^^^^^^^^^^^^^ invocation
      ╵
  /tmp/quarto-session5c303ab593d3f7d1/97a8ea7c5b44a2b3/f75acea562ddeb6a.scss 12804:52  contrast()

Stack trace:

Error: Missing argument $front.
      ╷
993   │ @function contrast($back, $front) {
      │           ━━━━━━━━━━━━━━━━━━━━━━━ declaration
...   │
12804 │   filter: invert(1) hue-rotate(135deg) saturate(2) contrast(0.75);
      │                                                    ^^^^^^^^^^^^^^ invocation
      ╵
  /tmp/quarto-session5c303ab593d3f7d1/97a8ea7c5b44a2b3/f75acea562ddeb6a.scss 12804:52  contrast()
    at dartCommand (file:///opt/quarto/bin/quarto.js:43445:15)
    at eventLoopTick (ext:core/01_core.js:153:7)
    at async dartCompile (file:///opt/quarto/bin/quarto.js:43407:5)
    at async compileWithCache (file:///opt/quarto/bin/quarto.js:43636:17)
    at async compileSass (file:///opt/quarto/bin/quarto.js:43497:12)
    at async resolveSassBundles (file:///opt/quarto/bin/quarto.js:65862:27)
    at async resolveExtras (file:///opt/quarto/bin/quarto.js:69904:18)
    at async runPandoc (file:///opt/quarto/bin/quarto.js:69425:24)
    at async renderPandoc (file:///opt/quarto/bin/quarto.js:70717:26)
    at async Object.onRender (file:///opt/quarto/bin/quarto.js:78268:36)

The above code implies that the declaration of contrast on 993 overwrites the built in css function of the same name, which is not great. Am I doing something wrong or is this a bug? Is the source of this error from bootstrap, is this even something under control within this repository?

[acederberg]

@cscheid Why was this converted to a discussion but unanswered? Converting it to a discussion would imply that you have insight into this. Please help - I am confused.

[mcanouil]

Issues are for bugs.

I don't think there is a bug here but a misunderstanding of how theme files work.
See https://quarto.org/docs/output-formats/html-themes-more.html.

As a side note, you posted in the middle of summer. It was converted to a discussion because it is a discussion not a bug report.
A simple message asking an update would have been enough reminder.
Note also, that providing a reproducible example increases your chances of getting a quick and appropriate answer. Unfortunately, your question has nothing reproducible thus requesting way more time than needed.

The goal of a small self-contained "working" (reproducible) example is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[acederberg]

Thank you! I know that it works when I use the scss:uses header because of the sequence of execution - I just think that that this should not be necessary to use the built in contrast. Here are the steps to reproduce and some analysis.

Reproducing the Error

Here is the code in a repository. I never committed the changes since I found a better way to use filter to achieve the desired result so I cannot give a ref, but I can give a deterministic way to reproduce the error.

To reproduce, check out f624e5cb955a0d4f1ae9d49ea3286b82bba2910d and use the compose project in the repository like docker compose --file docker/compose.yaml up --detach. Once the compose project is started, the output of docker compose --file docker/compose.yaml exec server quarto check is

Quarto 1.5.56
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.56
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.12
      Path: /usr/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

      There is an unactivated Python environment in .venv. Did you forget to activate it?

Warning message:
D-Bus service not found!

- If you are in a container environment, please consider adding the
  following to your configuration to silence this warning:

  options(bspm.sudo = TRUE)

- If you are in a desktop/server environment, please remove any 'bspm'
  installation from the user library and force a new system
  installation as follows:

  $ sudo Rscript --vanilla -e 'install.packages("bspm", repos="https://cran.r-project.org")' 
[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /usr/lib/R
      LibPaths:
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.48
      rmarkdown: 2.27

[✓] Checking Knitr engine render......OK

The project does build, and can be done like quarto render within the container. To reproduce the error, run the following commands:

sed -i 's/filter:/filter: contrast(1)/' ./themes/dark.scss
docker compose --file docker/compose.yaml exec server bash -c 'source ~/.bashrc && quarto render'

About Theme Files

It is possible to compile the code by changing the header of themes/dark.scss to scss:uses from scss:rules. That is, the following commands work:

sed -i 's/scss:rules/scss:uses/' ./themes/dark.scss
docker compose --file docker/compose.yaml exec server bash -c 'source ~/.bashrc && quarto render'

I get that content is merged in to different locations depending on the comment headers provided, I just suppose that the naming of the function contrast should not collide with the css built in which one might desire to use in styling with an arbitrary header. Overriding is shown in this section of the error in the original post

993   │ @function contrast($back, $front) {
      │           ━━━━━━━━━━━━━━━━━━━━━━━ declaration
...   │
12804 │   filter: contrast(1) invert(0.87) hue-rotate(180deg) saturate(2)
      │           ^^^^^^^^^^^ invocation
      ╵

What I am trying to say is that the original contrast should be able to be invoked with any header without this error.

[gadenbuie]

Thanks @acederberg, I can see the issue here now. I'm going to summarize:

1. Quarto defines a contrast() function that is used to calculate the contrast ratio between two colors.
2. CSS itself has a contrast() function that can be used in a filter: property value.

In Sass, Sass-defined functions take precedence over CSS functions. rgb() is a common instance of this.

@acederberg You can use a trick/hack that is often used in Sass to call CONTRAST() instead of contrast(). Sass is case-sensitive, but CSS is not, so Sass will pass CONTRAST() through to the compiled CSS without error.

@cscheid @mcanouil There's a good argument to be made here that Quarto should avoid creating functions named after built-in CSS functions. The contrast() function could be contrast-between() without loss of meaning or stepping on the CSS function name. The problem is that it's hard to tell if anyone is relying on this function. That said, [a GitHub code search](https://github.com/search?q=quarto+.scss+contrast(&type=code&p=1) shows very few uses and the one or two uses of contrast() are really just copying Quarto's use of contrast().

[acederberg]

Thanks! Is there any way I may contribute to this if the name of the overriding contrast is changed? I cannot imagine it is used often, but breaking changes can be hard to pin down.

[cscheid]

@cscheid @mcanouil There's a good argument to be made here that Quarto should avoid creating functions named after built-in CSS functions.

Agreed! Let's fix this in 1.6. I'll open an issue to track.

[cscheid]

Tracking here: #10608

[cscheid]

@cscheid Why was this converted to a discussion but unanswered?

Because there wasn't enough detail in the post for us to know for sure what was happening (we always need a reproducible example, in this sense), and maybe someone else could provide enough context for us to determine either way. Garrick did, and now we have a bug report.