Unable to whitelist css variables

[petebytes]

Trying to whitelist CSS variable does not seem to work. RGB works fine.

  <h3>hardcoded color: rgb(0, 0, 255): <span style="color: rgb(0, 0, 255);">Headline</span></h3>
  <h3>hardcoded color: var(--fgColor8): <span style="color: var(--fgColor8)">Headline</span></h3>
    <% @contents.each do |content| %>
      <tr>
        <td><hr>
          <div><h2><%= content.image_data %></h2></div>

          <div>
            <h1>
              <%= sanitize content.image_data,
                tags: %w[span],
                attributes: %w[style color]
              %>
            </h1>
          </div>

        </td>
        <td>
          <%= link_to 'Show', content %> <br>
          <%= link_to 'Edit', edit_content_path(content) %> <br>
          <%= link_to 'Destroy', content, method: :delete, data: { confirm: 'Are you sure?' } %>
        </td>
      </tr>
    <% end %>
  </tbody>

...
<style>
  body {
    font-size: 1.5em;
  }
  :root {
    --fgColor8: green;
  }
</style>

[petebytes]

added initializer - works now :)

# config/initializers/loofah.rb
Loofah::HTML5::SafeList::ACCEPTABLE_CSS_FUNCTIONS.merge Set.new(%w[
  var
])