diff --git a/examples/compiled/bar_conditional_opacity.png b/examples/compiled/bar_conditional_opacity.png
new file mode 100644
index 0000000000..457b6045ec
Binary files /dev/null and b/examples/compiled/bar_conditional_opacity.png differ
diff --git a/examples/compiled/bar_conditional_opacity.svg b/examples/compiled/bar_conditional_opacity.svg
new file mode 100644
index 0000000000..83121d3d5b
--- /dev/null
+++ b/examples/compiled/bar_conditional_opacity.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="445" height="450" viewBox="0 0 445 450"><rect width="445" height="450" fill="white"/><g fill="none" stroke-miterlimit="10" transform="translate(40,10)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0.5,0.5h400v400h-400Z" stroke="#ddd"/><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,400)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,356)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,311)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,267)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,222)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,178)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,133)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,89)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,44)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="400" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'C2' for a discrete scale with 4 values: a2, c1, c2, c3"><g transform="translate(0.5,400.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(50,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(150,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(250,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(350,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(49.5,7) rotate(270) translate(0,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">a2</text><text text-anchor="end" transform="translate(149.5,7) rotate(270) translate(0,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">c1</text><text text-anchor="end" transform="translate(249.5,7) rotate(270) translate(0,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">c2</text><text text-anchor="end" transform="translate(349.5,7) rotate(270) translate(0,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">c3</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="400" y2="0" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(200,32.490234375)" font-family="sans-serif" font-size="11px" font-weight="bold" fill="#000" opacity="1">C2</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Q1_Null' for a linear scale with values from 0 to 90"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,400)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,356)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,311)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,267)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,222)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,178)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,133)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,89)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,44)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,403)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">0</text><text text-anchor="end" transform="translate(-7,358.55555555555554)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">10</text><text text-anchor="end" transform="translate(-7,314.11111111111114)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">20</text><text text-anchor="end" transform="translate(-7,269.6666666666667)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">30</text><text text-anchor="end" transform="translate(-7,225.22222222222223)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">40</text><text text-anchor="end" transform="translate(-7,180.77777777777777)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">50</text><text text-anchor="end" transform="translate(-7,136.33333333333334)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">60</text><text text-anchor="end" transform="translate(-7,91.88888888888889)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">70</text><text text-anchor="end" transform="translate(-7,47.444444444444464)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">80</text><text text-anchor="end" transform="translate(-7,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">90</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,400)" x2="0" y2="-400" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-23.724609375,200) rotate(-90) translate(0,-2)" font-family="sans-serif" font-size="11px" font-weight="bold" fill="#000" opacity="1">Q1_Null</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-rect role-mark layer_0_marks" role="graphics-object" aria-roledescription="rect mark container"><path aria-label="C2: c1; Q1_Null: 82.3" role="graphics-symbol" aria-roledescription="bar" d="M105,34.22222222222224h90v365.77777777777777h-90Z" fill="#4c78a8" opacity="0.2"/><path aria-label="C2: a2; Q1_Null: 41.1" role="graphics-symbol" aria-roledescription="bar" d="M5,217.33333333333334h90v182.66666666666666h-90Z" fill="#4c78a8" opacity="0.2"/><path aria-label="C2: a2; Q1_Null: 31.1" role="graphics-symbol" aria-roledescription="bar" d="M5,79.11111111111109h90v138.22222222222226h-90Z" fill="#4c78a8" opacity="0.2"/><path aria-label="C2: c2; Q1_Null: 15.1" role="graphics-symbol" aria-roledescription="bar" d="M205,332.88888888888886h90v67.11111111111114h-90Z" fill="#4c78a8" opacity="0.2"/><path aria-label="C2: c3; Q1_Null: 48.1" role="graphics-symbol" aria-roledescription="bar" d="M305,186.2222222222222h90v213.7777777777778h-90Z" fill="#4c78a8" opacity="0.2"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>
\ No newline at end of file
diff --git a/examples/compiled/bar_conditional_opacity.vg.json b/examples/compiled/bar_conditional_opacity.vg.json
new file mode 100644
index 0000000000..34267691ff
--- /dev/null
+++ b/examples/compiled/bar_conditional_opacity.vg.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "background": "white",
+  "padding": 5,
+  "width": 400,
+  "height": 400,
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "values": [
+        {"Q1_Null": null, "C2": "a1"},
+        {"Q1_Null": null, "C2": "b1"},
+        {"Q1_Null": 82.3, "C2": "c1"},
+        {"Q1_Null": 41.1, "C2": "a2"},
+        {"Q1_Null": 31.1, "C2": "a2"},
+        {"Q1_Null": 15.1, "C2": "c2"},
+        {"Q1_Null": 48.1, "C2": "c3"},
+        {"Q1_Null": null, "C2": "c4"}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
+      "transform": [
+        {
+          "type": "stack",
+          "groupby": ["C2"],
+          "field": "Q1_Null",
+          "sort": {"field": [], "order": []},
+          "as": ["Q1_Null_start", "Q1_Null_end"],
+          "offset": "zero"
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"Q1_Null\"]) && isFinite(+datum[\"Q1_Null\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "layer_0_marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "data_0"},
+      "encode": {
+        "update": {
+          "fill": {"value": "#4c78a8"},
+          "opacity": {"test": "true", "value": 0.2},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"C2: \" + (isValid(datum[\"C2\"]) ? datum[\"C2\"] : \"\"+datum[\"C2\"]) + \"; Q1_Null: \" + (format(datum[\"Q1_Null\"], \"\"))"
+          },
+          "x": {"scale": "x", "field": "C2"},
+          "width": {"signal": "max(0.25, bandwidth('x'))"},
+          "y": {"scale": "y", "field": "Q1_Null_end"},
+          "y2": {"scale": "y", "field": "Q1_Null_start"}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "band",
+      "domain": {"data": "data_0", "field": "C2", "sort": true},
+      "range": [0, {"signal": "width"}],
+      "paddingInner": 0.1,
+      "paddingOuter": 0.05
+    },
+    {
+      "name": "y",
+      "type": "linear",
+      "domain": {"data": "data_0", "fields": ["Q1_Null_start", "Q1_Null_end"]},
+      "range": [{"signal": "height"}, 0],
+      "nice": true,
+      "zero": true
+    }
+  ],
+  "axes": [
+    {
+      "scale": "y",
+      "orient": "left",
+      "gridScale": "x",
+      "grid": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "domain": false,
+      "labels": false,
+      "aria": false,
+      "maxExtent": 0,
+      "minExtent": 0,
+      "ticks": false,
+      "zindex": 0
+    },
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "C2",
+      "labelAlign": "right",
+      "labelAngle": 270,
+      "labelBaseline": "middle",
+      "zindex": 0
+    },
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": false,
+      "title": "Q1_Null",
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "zindex": 0
+    }
+  ]
+}