quarto-dev / quarto-dev/quarto-cli

Changing a CSS stylesheet after changing QMD causes website preview to revert to original QMD

Open
#11,242 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug preview
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
  1. Start with https://github.com/jimjam-slam/test-quarto-preview-css

  2. Note that index.qmd specifies style.css, and style.css makes h3s red

  3. Start quarto preview

  4. While previewing, add some content to index.qmd and save:

    ### Another header!
    
    Goodbye now
    
  5. Note that the preview updates with the new content

  6. Now add some content to style.css and save:

    p { color: blue; }
    
  7. The preview updates with the new CSS rule, but it also reverts the QMD to the state it was in when quarto preview was originally run

  8. Add some more content to index.qmd and save:

    ### A third header
    
    Whoops still here
    
  9. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.