ricecooker icon indicating copy to clipboard operation
ricecooker copied to clipboard

Fix rewriting of CSS @import statements that use strings instead of url()

Open jaltekruse opened this issue 1 month ago • 1 comments

Summary

While trying to import a textbook written in PreteXt I found a missing case in the code that finds referenced resources inside of CSS files. While most cases require using the url("http://abc.com") syntax, there are a few instances where bare "string" types are acceptable in the CSS spec, the one I hit was in an @import statement.

References

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@import url - Is a <string> or a <url> type representing the location of the resource to import. The URL may be absolute or relative.

Reviewer guidance

I'll add an automated test, just wanted to create this PR as a place to document my work in the open and write some additional notes

jaltekruse avatar Nov 11 '25 19:11 jaltekruse

While I'm working on a test, I'm also going to try to look up any other lingering cases where bare strings are accepted inside of CSS for URLs, that don't need a url() to wrap them. So far a quick search only gave me relevant info in the Gemini AI summary from google, I didn't find an independent page/discussion about this topic:

URLs in CSS can appear as plain strings in the following contexts: @import rule: When importing another CSS stylesheet, the URL can be specified as a plain string. Code

@import "path/to/another.css";

This is equivalent to using the url() function: Code

@import url("path/to/another.css");

content property (for generated content): When using the content property with pseudo-elements (::before, ::after), a URL can be included as part of the string content. Code

.element::before {
  content: "Visit our website: https://example.com";
}

cursor property (for custom cursors): A URL to an image file can be provided as a string value for a custom cursor. Code

body {
  cursor: url("path/to/custom-cursor.png"), auto;
}

In other contexts where URLs are used in CSS, such as for background-image, list-style-image, border-image-source, or @font-face src, the url() functional notation is typically required to explicitly denote a URL value.

jaltekruse avatar Nov 11 '25 19:11 jaltekruse

Hi @jaltekruse, we will have a look, thanks!

MisRob avatar Dec 02 '25 11:12 MisRob