Re: [csswg-drafts] Proposal: CSS @sheet (#11509)

Good proposal 👍 
Thank you for raising this!

------

`@sheet` represents an inlined `.css` file, right?
So shouldn't this match `@import` in as many ways as possible?
They should be equivalent and there shouldn't be syntactic benefits or drawbacks to either.

With that in mind I think that nesting should be allowed and that using `@import` in `@sheet` should also be allowed.

These should all be equivalent:

1:


`index.css`
```css
@sheet foo {
  @sheet bar {}
}
```

2:

`index.css`
```css
@sheet foo {
  @import "bar.css";
}
```

3:

`index.css`
```css
@import "foo.css";
```

`foo.css`
```css
@import "bar.css";
```

Is there a reason we can't do this?

------

I agree that for the order `@sheet` should be valid anywhere `@import` is.

------

`<link rel="stylesheet" href="style.css#sheet1"` is this web compatible?
Might need a use counter to check if fragments in stylesheet urls aren't already in use.

I know that current frameworks (vite? or vue?) already use this.

----

Anonymous sheets should also be supported.

```css
@sheet {}
```

Only having named sheets makes it impossible to use this when bundling, despite that being one of the stated goals in the explainer.

All CSS authors should be able to benefit from this feature, not only those using shadow dom.
Most CSS authors will write in multiple files but bundle to avoid a waterfall.
They however won't be importing a single sheet. They will want to load and apply everything.

Having `@sheet` would allow bundlers to avoid other gnarly hacks.
Especially when relative imports are mixed with resources loaded from a 3rd party:

```css
@import "foo.css";
@import "https://some-framework.com/index.css";
@import "bar.css";
```

The only way to bundle that today is to rewrite as:

```css
@import url('data:text/css;base64,...');
@import "https://some-framework.com/index.css";
@import url('data:text/css;base64,...');
```

While with `@sheet` it could be:

```css
@sheet { /* contents of foo.css */ }
@import "https://some-framework.com/index.css";
@sheet { /* contents of bar.css */ }
```

-----

Relative urls have some sharp edges, especially when using in custom props.
Typed and untyped custom props also have different behavior.

Maybe it makes sense to also have a `@base` rule?
To match `<base href="https://www.example.com/" />`

Before bundling:

`https://www.example.com/public/styles/foo.css`
`https://www.example.com/public/images/bar.jpg`
```css
:root {
  background: url(../images/bar.jpg);
}
```

When bundled the relative urls will break unless there is some provision:

`https://www.example.com/public/index.css`
`https://www.example.com/public/images/bar.jpg`
```css
@sheet {
  @base url("https://www.example.com/public/styles/");

  :root {
    background: url(../images/bar.jpg);
  }
}
```

----

I think it would be ideal if `@sheet` could be used to fully and accurately represent any graph of `@import` statements in a single file.

Currently the [landscape for CSS bundlers is pretty bleak](https://github.com/romainmenke/css-import-tests?tab=readme-ov-file#current-state). There aren't many tools that actually qualify as CSS bundlers and the most modern offerings don't even work right.

Having `@sheet` could reduce the number of hacks needed to implement a CSS bundler correctly.
Which in turn would make it easier for CSS authors to pick a tool that actually works.

-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11509#issuecomment-2620084347 using your GitHub account


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

Received on Tuesday, 28 January 2025 21:23:41 UTC