Description
See:
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
Activity
keithamus commentedon Feb 9, 2025
One concern with an independant
@base
rule is that it could potentially appear anywhere within the rule, which means resources are unknown until the full@sheet
rule has - at the very least - been tokenized, but more likely fully parsed. It also raises questions around multiple@base
rules appearing. Additionally it becomes unclear what should happen with OM interaction, e.g. doessheet.insertRule('@base url("https://example.com/")')
require resources to be re-fetched?One potential way around these issues is to adjust the syntax to become something like:
Having the function within
@sheet
s prelude means we can:romainmenke commentedon Feb 9, 2025
Yup, seems like a better syntax to define this.
Thank you for suggesting that!
[-][css-cascade-6] `@base` statement for relative urls in `@sheet`.[/-][+][css-cascade-6] `@base` statement or `base()` function for relative urls in `@sheet`.[/+]ziadkh0 commentedon Feb 10, 2025
Can the base URL be relative to the file it is in?
keithamus commentedon Feb 10, 2025
It would be if base was omitted but sometimes that might not be desired.
romainmenke commentedon Feb 10, 2025
@zaygraveyard like this?
ziadkh0 commentedon Feb 10, 2025
@romainmenke correct 👍
romainmenke commentedon Feb 10, 2025
I would also like it to work like this.
Makes it easier to have one host for local dev and another for previews, production (CDN domain?), ...