quarto-dev / quarto-dev/quarto-cli
Changing a CSS stylesheet after changing QMD causes website preview to revert to original QMD
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
When previewing websites (not individual documents, where this error doesn't appear to occur), saving a change to a QMD file hot-reloads that page preview. If you then make a change to a CSS file linked with the css key under format.html, the state of the QMD content in the preview reverts to where it was when quarto preview was originally executed, until the QMD is edited and saved again.
The preview will revert to the QMD's original state every time the CSS file is saved until the QMD is edited again. This can be confusing for users when they are alternating between changes to content and changes to a stylesheet.
Steps to reproduce
-
Start with https://github.com/jimjam-slam/test-quarto-preview-css
-
Note that
index.qmdspecifiesstyle.css, andstyle.cssmakesh3s red -
Start
quarto preview -
While previewing, add some content to
index.qmdand save:### Another header! Goodbye now -
Note that the preview updates with the new content
-
Now add some content to
style.cssand save:p { color: blue; } -
The preview updates with the new CSS rule, but it also reverts the QMD to the state it was in when
quarto previewwas originally run -
Add some more content to
index.qmdand save:### A third header Whoops still here -
Note that the content just added in step 8 and the content added in step 4 both appear.
Expected behavior
I expected that the paragraphs would turn blue, but the content added to the QMD would also remain.
Actual behavior
The paragraph turns blue, but the content added to the QMD disappears, until the QMD is edited again.
Your environment
- IDE: Visual Studio Code 1.94.2
- OS: macOS 15.0.1
Quarto check output
Quarto 99.9.9
[✓] 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: 99.9.9
commit: 3cfdf0178848bce308be22c0fad0ca420add762c
Path: /Users/jgol0005/code/tools/quarto-cli/package/dist/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.13.0
Path: /opt/homebrew/opt/python@3.13/bin/python3.13
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with python3 -m pip install jupyter
[✓] Checking R installation...........OK
Version: 4.3.3
Path: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources
LibPaths:
- /Users/jgol0005/Library/R/arm64/4.3/library
- /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
knitr: 1.48
rmarkdown: 2.28
[✓] Checking Knitr engine render......OK
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the linked test-quarto-preview-css project, using index.qmd, style.css, and quarto preview. Trace the preview reload behavior after saving each file. Done means CSS changes update the preview without discarding QMD changes made since preview started, and the reproduction steps no longer show the revert.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- cli, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100