Merge pull request #9619 from quarto-dev/feature/typst-css

Typst CSS

.github/workflows/test-ff-matrix.yml

@@ -0,0 +1,169 @@
+# Tests all documents in the feature-format matrix
+name: Feature-Format Tests
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [main]
+    paths-ignore:
+      - "src/resources/language/**"
+
+jobs:
+  run-smokes:
+    name: Run feature-format matrix on (${{ matrix.os }})
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Fix temp dir to use runner one (windows)
+        if: runner.os == 'Windows'
+        run: |
+          echo "TMPDIR=${{ runner.temp }}" >> $GITHUB_ENV
+          echo "TMP=${{ runner.temp }}" >> $GITHUB_ENV
+          echo "TEMP=${{ runner.temp }}" >> $GITHUB_ENV
+        shell: bash
+
+      - name: Set up R
+        uses: r-lib/actions/setup-r@v2
+        with:
+          r-version: "4.3.2"
+          use-public-rspm: true
+          # required to avoid rtools bin in path
+          windows-path-include-rtools: false
+
+      - name: Install node (for Playwright, MECA)
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install node dependencies
+        if: ${{ runner.os != 'Windows' || github.event_name == 'schedule' }}
+        run: yarn
+        working-directory: ./tests/integration/playwright
+        shell: bash
+
+      - name: Install Playwright Browsers
+        if: ${{ runner.os != 'Windows' || github.event_name == 'schedule' }}
+        run: npx playwright install --with-deps
+        working-directory: ./tests/integration/playwright
+
+      - name: Install MECA validator
+        if: ${{ runner.os != 'Windows' }}
+        run: npm install -g meca
+
+      - name: Set RENV_PATHS_ROOT
+        shell: bash
+        run: |
+          echo "RENV_PATHS_ROOT=${{ runner.temp }}/renv" >> $GITHUB_ENV
+
+      - name: Get R and OS version
+        id: get-version
+        run: |
+          cat("os-version=", sessionInfo()$running, "\n", file = Sys.getenv("GITHUB_OUTPUT"), sep = "", append = TRUE)
+          cat("r-version=", R.Version()$version.string, "\n", file = Sys.getenv("GITHUB_OUTPUT"), sep = "", append = TRUE)
+        shell: Rscript {0}
+
+      - name: Cache R packages
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.RENV_PATHS_ROOT }}
+          key: ${{ steps.get-version.outputs.os-version }}-${{ steps.get-version.outputs.r-version }}-renv-2-${{ hashFiles('tests/renv.lock') }}
+          restore-keys: |
+            ${{ steps.get-version.outputs.os-version }}-${{ steps.get-version.outputs.r-version }}-renv-2-
+
+      - name: Install missing system deps
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update -y
+          sudo apt-get install -y libcurl4-openssl-dev
+          sudo apt-get install -y libxml2-utils
+          sudo apt-get install -y libharfbuzz-dev libfribidi-dev
+
+      - name: Restore R packages
+        working-directory: tests
+        run: |
+          if (!requireNamespace('renv', quietly = TRUE)) install.packages('renv')
+          renv::restore()
+          # Install dev versions for our testing
+          # Use r-universe to avoid github api calls
+          try(install.packages('knitr', repos = 'https://yihui.r-universe.dev'))
+          try(install.packages('rmarkdown', repos = 'https://rstudio.r-universe.dev'))
+        shell: Rscript {0}
+        env:
+          GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.12"
+          cache: "pipenv"
+          cache-dependency-path: "./tests/Pipfile.lock"
+
+      - name: Restore Python Dependencies
+        working-directory: tests
+        run: |
+          python -m pip install pipenv
+          pipenv install
+
+      - uses: ./.github/workflows/actions/quarto-dev
+
+      - name: Install Tinytex
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          quarto install tinytex
+
+      - name: Cache Typst packages
+        uses: ./.github/actions/cache-typst
+
+      - name: Install Chrome
+        uses: browser-actions/setup-chrome@latest
+
+      - name: Setup Julia
+        uses: julia-actions/setup-julia@v1
+        with:
+          version: "1.10"
+
+      - name: Cache Julia Packages
+        uses: julia-actions/cache@v1
+
+      - name: Restore Julia Packages
+        working-directory: tests
+        shell: bash
+        run: |
+          # Setup IJulia with the jupyter from the Python environment
+          # https://julialang.github.io/IJulia.jl/stable/manual/installation/
+          export JUPYTER=$(find $(dirname $(pipenv run which jupyter))/ -type f -name "jupyter.exe" -o -name "jupyter")
+          pipenv run julia --color=yes --project=. -e "import Pkg; Pkg.instantiate(); Pkg.build(\"IJulia\"); Pkg.precompile()"
+          echo "Julia Jupyter:"
+          julia --project=. -e "import IJulia;println(IJulia.JUPYTER);println(IJulia.find_jupyter_subcommand(\"notebook\"))"
+
+      - name: Setup timing file for timed test
+        if: ${{ matrix.time-test == true }}
+        run: |
+          echo "QUARTO_TEST_TIMING=timing-for-ci.txt" >> "$GITHUB_ENV"
+
+      # - name: Setup tmate session
+      #   uses: mxschmitt/action-tmate@v3
+
+      - name: Run all Smoke Tests Windows
+        if: ${{ runner.os == 'Windows' && format('{0}', inputs.buckets) == '' && matrix.time-test == false }}
+        env:
+          # Useful as TinyTeX latest release is checked in run-test.sh
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: ./run-tests.ps1 ../dev-docs/feature-format-matrix/qmd-files/**/*.qmd
+        working-directory: tests
+        shell: pwsh
+
+      - name: Run all Smoke Tests Linux
+        if: ${{ runner.os != 'Windows' && format('{0}', inputs.buckets) == '' }}
+        env:
+          # Useful as TinyTeX latest release is checked in run-test.sh
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: shopt -s globstar && ./run-tests.sh ../dev-docs/feature-format-matrix/**/*.qmd
+        working-directory: tests
+        shell: bash

configuration

@@ -11,7 +11,7 @@
 export DENO=v1.41.0
 # TODO figure out where 0.1.41 apple silicon libs are available
 export DENO_DOM=v0.1.35-alpha-artifacts
-export PANDOC=3.1.13
+export PANDOC=3.2
 export DARTSASS=1.70.0
 export ESBUILD=0.19.12
 export TYPST=0.11.0

dev-docs/feature-format-matrix/qmd-files/crossref/float/figure/document.qmd

@@ -11,7 +11,7 @@ format:
 
 Images with a caption and a label can be referenced using the `@ref` syntax, as @fig-1 shows.
 
-![This is the caption for the figure.](https://placeholder.co/400/400.png){#fig-1}
+![This is the caption for the figure.]({{< placeholder 400 >}}){#fig-1}
 
 Figures can contain arbitrary content instead of an image. In that case, use the div syntax:
 

dev-docs/feature-format-matrix/qmd-files/css-properties/background-color/background-color-mediumseagreen.qmd

@@ -0,0 +1,32 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+
+        -
+          - 'table.cell\(fill: rgb\(60, 179, 113\)\)\[B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="background-color: mediumseagreen;">B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/background-color/document.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "table cell only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'table.cell\(fill: orange\)\[B\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td>A</td><td style="background-color: orange;">B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/background-color/span-background-color-mediumseagreen.qmd

@@ -0,0 +1,26 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td, span only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+
+        -
+          - '#highlight\(fill: rgb\(60, 179, 113\)\)\[text with a green background\]'
+        - []
+---
+This is some [text with a green background]{style="background-color:mediumseagreen"}.

dev-docs/feature-format-matrix/qmd-files/css-properties/border/border-badstyle.qmd

@@ -0,0 +1,32 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - '\[A\], \[B\]'
+        -
+          - 'table\.cell'
+---
+
+```{=html}
+<table>
+    <tr><td style="border-left-style:solid; ; ;;;;border-left-color: #4b0082cd;border-left-style:none">A</td><td>B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/border/border-bottom-style-dotted.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "table cell only; border-{left,top,right,bottom}-{color,style,width} only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'table\.cell\(stroke: \(bottom: \(dash: "dotted", thickness: 0.75pt\)\)\)\[A\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td style="border-bottom-width: 1px; border-bottom-style: dotted">A</td><td>B</td></tr>
+</table>
+```
+

dev-docs/feature-format-matrix/qmd-files/css-properties/border/border-color.qmd

@@ -0,0 +1,31 @@
+---
+format:
+  html:
+    quality: 1
+  pdf:
+    quality: na
+  typst:
+    quality: 2
+    comment: "td only"
+  dashboard:
+    quality: 1
+  docx:
+    quality: na
+  pptx:
+    quality: na
+keep-typ: true
+_quarto:
+  tests:
+    typst:
+      ensureTypstFileRegexMatches:
+        -
+          - 'table\.cell\(stroke: \(paint: rgb\("#4b0082cd"\)\)\)\[A\]'
+        - []
+---
+
+```{=html}
+<table>
+    <tr><td style="border-color: #4b0082cd">A</td><td>B</td></tr>
+</table>
+```
+