Analyze Dependencies in Custom Properties

[jamiebuilds]

Given a custom property containing a url(), right now Parcel CSS does not return it when analyzing dependencies.

:root {
  --hero-background: #000 url(hero-image.jpeg); /* no dependency reported */
}

.hero {
  background: var(--hero-background);
}

[devongovett]

I've been waiting for this to come up. It is actually tricky to do right. Urls need to be resolved after variable substitution, which might change the resolution. For example:

src/index.css

@import "test/vars.css";

.hero {
  background: var(--bg);
}

src/test/vars.css:

:root {
  --bg: url(foo.png);
}

In this case, we'd report a dependency in src/test/vars.css, which would resolve to src/test/foo.png. However, this should really resolve to src/foo.png because the variable substitution occurs in src/index.css. This is worse if you have multiple files that use the variable, as the resolution can change in each case.

I suspect this edge case is broken in many other tools as well though. Not sure if we should go for compatibility with them but be broken according to the spec/native browser behavior, or not. I am not sure it is actually possible to implement correctly otherwise.

[jamiebuilds]

Can you just disallow relative URLs in custom properties?

Maybe there can be some other syntax (possibly a comment) that skips resolution giving devs an option if they do want relative URLs in custom properties.

[devongovett]

Implemented this, with an error for relative URLs. We could potentially add some other syntax to override that if it turns out to be super problematic for people.