TYPO3 Core

The suggested regex is way too greedy.

The current regex /url(\\(\\s*["']?(?!\\/)([^"']+)["']?\\s*\\))/iU is tailored to detect non-absolute paths.

It has never been constructed for data-values and even less for "recursive" usage of "url()".

Sure it´s to greedy?

i think it is applied to the data url only.

At the moment i use this little override to fix the problem.

class ResourceCompressor extends \TYPO3\CMS\Core\Resource\ResourceCompressor {

    /**
     * PIX: Fixes the relative paths inside of url() references in CSS files
     * respecting inner data of url()
     * 
     * @author René Rossi<rossi@pixelproduction.de>
     * @param string $contents Data to process
     * @param string $oldDir Directory of the original file, relative to TYPO3_mainDir
     * @return string Processed data
     */
    protected function cssFixRelativeUrlPaths($contents, $oldDir)
    {
        $mainDir = TYPO3_MODE === 'BE' ? TYPO3_mainDir : '';
        $newDir = '../../' . $mainDir . $oldDir;
        // Replace "url()" paths
        if (stripos($contents, 'url') !== false) {
            $regex = "/[\s:]?url\(\s*([\"']?(.*)[\"']?)\s*\)/i";
            $contents = $this->findAndReplaceUrlPathsByRegex($contents, $regex, $newDir, '(\'|\')');
        }
        // Replace "@import" paths
        if (stripos($contents, '@import') !== false) {
            $regex = '/@import\\s*(["\']?(?!\\/)([^"\']+)["\']?)/i';
            $contents = $this->findAndReplaceUrlPathsByRegex($contents, $regex, $newDir, '"|"');
        }

        return $contents;
    }
}

René Rossi wrote:

Sure it´s to greedy?

i think it is applied to the data url only.

At the moment i use this little override to fix the problem.

[...]

The regex is applied on the complete CSS content. So you dot-star in the middle is the greedy point, where the regex extends way beyond its scope.
One example: Try this single line with your regex background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),url("https://mdn.mozillademos.org/files/7693/catfront.png");
The regex swallows the second url() of course.

Markus Klein wrote:

René Rossi wrote:

Sure it´s to greedy?

i think it is applied to the data url only.

At the moment i use this little override to fix the problem.

[...]

The regex is applied on the complete CSS content. So you dot-star in the middle is the greedy point, where the regex extends way beyond its scope.
One example: Try this single line with your regex background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),url("https://mdn.mozillademos.org/files/7693/catfront.png");
The regex swallows the second url() of course.

Wow, this bug report is over 2 years old and original applied to T3 V7.6.

Im sure the provided solution is not the optimal solution at all, but...

Your example above does'nt work with the current expression also, as only the first url seems to be noticed.
array(3
0 => url("https://mdn.mozillademos.org/files/11991/startransparent.gif")
1 => ("https://mdn.mozillademos.org/files/11991/startransparent.gif")
2 => https://mdn.mozillademos.org/files/11991/startransparent.gif
)

But i'm sure you be able to replace the .* by a [^\)]+ to get the same as before but that does'nt fit to the whole needs.

If I had the time to solve this problem with all its variants, then I would have done it.

So it's a bug report to (may be the author of the functionality) to see what we get.

And one more, the last question is'nt initiated by me.

hi,

there is an check in RelativeCssPathFixer.php:71 that seems like it should prevent this issue.

// we must not rewrite paths containing ":" or "url(", e.g. data URIs (see RFC 2397)
if (!str_contains($match, ':') && !preg_match('/url\\s*\\(/i', $match)) {

I did some debugging, in case of background: url("data:image/... fill='url('%23a')'... the $match is just %23a, so it proceeds with 'fixing' to a relative path.

Hi,

I encountered the same problem, when I implemented an inline-svg-filter on our website.

filter: url(#rounded-box-filter);

<svg style="visibility: hidden; position: absolute;" width="0" height="0">
    <defs>
        <filter id="rounded-box-filter">
            ...
        </filter>
    </defs>
</svg>

While everything worked on our test- and staging-server, on the liveserver the URL was converted from url(#rounded-box-filter) to url(../../../typo3conf/ext/{package}/Resources/Public/CSS/#rounded-box-filter).

It turned out that the problem only occurs when concatenateCss = 1 or compressCss = 1 is set.

My workaround was to use a Typo3-AssetCollector directly in the html-file instead. For me it is not clear why this bug is still existent in Typo3-v11.

<f:asset.css identifier="rounded-box-style" priority="true">
    ...
    filter: url(#rounded-box-filter);
    ...
</f:asset.css>