[css-cascade-6] `@base` statement or `base()` function for relative urls in `@sheet`.

See:

• https://github.com/w3c/csswg-drafts/issues/5629
• https://github.com/w3c/csswg-drafts/issues/11509

CSS authors often structure their source files in various sub directories.
Other assets (fonts, images, ...) are often described as relative urls.

It helps CSS authors if these relative urls actually make sense in their source code so that they can use IDE features to jump to those files, check that they actually exist, ...

It should be up to tools rewrite those urls so that they still make sense when bundling.

Simply inline stylesheets would alter the outcome of relative urls and even the behavior when custom props are used. (typed vs. untyped custom props for <url> have distinct behavior)

index.css

@import url("./something/styles/green.css");

something/styles/green.css

.box {
	background-image: url("../images/green.png");
}

This must be inlined as:

@sheet green {
  .box {
    background-image: url("something/images/green.png");
  }
}

@import green;

While that example is possible to support in tools, there is one that is impossible. When there are assignments to untyped custom props it can't be known statically what the urls should be rewritten to.

index.css

@import url("./styles/green.css");

.box {
	--background-image: url(./green.png);
}

styles/green.css

.box {
	background-image: var(--background-image);
}

Image location is : styles/green.png

---

Maybe we should have a way of describing the base url that should be used to resolve relative urls in Stylesheets.

@sheet sheet1 {
  @base url("https://example.com/styles/");

  .box {
    background-image: var(--background-image);
  }
}

@import sheet1;

.box {
	--background-image: url(./green.png);
}

Or through a function as suggested by @keithamus

@sheet sheet1 base("https://example.com/styles/") {
  .box {
    background-image: var(--background-image);
  }
}

@import sheet1;

.box {
	--background-image: url(./green.png);
}

Image location is : styles/green.png

Start by reading the linked CSSWG issues 5629 and 11509, then compare the proposed @base statement and base() function against the @sheet examples and the untyped custom-property case. Done means reaching a settled proposal for how @sheet resolves relative URLs, including the syntax and semantics; the issue does not name implementation files or tests.