CSS Processing Falsely adds URL

[artistro08]

I have a CSS file that uses the Tailor Resources Component. It processes my CSS file as expected except under 1 condition. When I use fill: url('#gradient') it adds the theme path to it. This is unwanted behavior because I would like to reference a gradient on the page.

[daftspunk]

Hi @artistro08

We will need to reproduce this. Is this using LESS or Sassy (SCSS)? Also, how is #gradient defined?

[artistro08]

Just regular CSS.

The #gradient is defined as is in the CSS code.

It's referencing an SVG gradient on the page. When it's processed with the Resources Component, it prepends the theme path to it.

An example would be using this code and putting the gradient SVG on the page

The CSS

.gradient {
  fill: url('#gradient');
}

The SVG Code

<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="gradient" gradientTransform="rotate(90)">
                        <stop offset="0%" stop-color="#D37C00"></stop>
                        <stop offset="100%" stop-color="#FFD34F"></stop>
                    </linearGradient>
                </defs>
            </svg>

[daftspunk]

This is fixed in https://github.com/octobercms/library/commit/7d2cc9d51517e49201331013845757c55067848a

It will be available in v3.2.13 onward

Thanks!