[csswg-drafts] [css-cascade-6] `@base` statement for relative urls in `@sheet`. (#11680)

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade-6] `@base` statement 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`
```css
@import url("./something/styles/green.css");
```

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

This must be inlined as:

```css
@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`
```css
@import url("./styles/green.css");

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

`styles/green.css`
```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.

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

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

@import sheet1;

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

Image location is : `styles/green.png`

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11680 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 9 February 2025 11:18:28 UTC