CSS variables are broken after compilation

[tsrivishnu]

Expected behavior

I have a CSS file the following contents that contain a custom property --262c2734

@-webkit-keyframes expand-enter-4fe57568 {
  100% {
    height: var(--262c2734);
  }
}

When I run rake assets:precompile, I expect this resulting compressed CSS file to not have broken custom property.

Actual behavior

The dashes -- in the custom property are removed the resulting contents are as following:

@-webkit-keyframes expand-enter-4fe57568{100%{height:var(262c2734)}}

System configuration

• Sprockets version 4.0.2
• Ruby version 2.7.4

Example App (Reproduction)

Rails app setup to reproduce the issue: https://github.com/tsrivishnu/tmp-rails-sprockets-css-custom-props-issues

[hahmed]

Could you confirm which css preprocessor you are using? Assuming it's sassc, as that's the default one...

I could not get the css to compile, see example below;

# frozen_string_literal: true

require "bundler/inline"

gemfile(true) do
  source "https://rubygems.org"

  git_source(:github) { |repo| "https://github.com/#{repo}.git" }

  gem "sassc"
  gem "sass"
end

css = <<~CSS
  ::root {
    --company-color: #f00;
    --262c2734: #c0c0c0;
  }

  .header {
    color: var(--262c2734);
  }
CSS

puts SassC::Engine.new(css).render
# puts Sass::Engine.new(css, {}).render

Looking at your example, seems as though the code has compiled, you may have to add a fallback value in that case e.g. color: var(--262c2734, f0f0f0) because it does not look like the var name --262c2734 is supported by sassc, even though it looks like that's a valid var name according to https://www.w3.org/TR/css-variables-1/#defining-variables.

This is not really a sprockets issue however, hope that helps.