[css-values] Proposal: new `presentational` global value to revert a property to use presentational hints if any, otherwise behave like `revert`

[benface]

Problem

Imagine you're building a "drop-in UI" / "widget" kind of library. You don't control the environment (website/app/whatever) that's going to render your widget. How do you ensure that the CSS you write for it won't break due to author styles from the embedding page (e.g. weird/unexpected CSS resets)? Ideally, you would use a custom element and the style encapsulation of shadow DOM. But let's imagine you need it to be in the light DOM for some reason. Correct me if I'm wrong, but I believe that the next best thing, at least once the resolution of the "Allow authors to explicitly place unlayered styles in the cascade layer order" issue is implemented, is to combine a strong cascade layer with revert (specifically not revert-layer, since we need to neutralize author styles across layers), so that elements inside the widget start from a predictable, consistent baseline:

@layer ^my-library {
  @layer reset {
    .my-library-container {
      &,
      &::before,
      &::after,
      *,
      *::before,
      *::after {
        all: revert;
      }
    }
  }

  .my-library-some-element {
    /* now we should be able to confidently style this! */
  }
}

Unfortunately, there is one issue with that approach: revert also discards presentational hints, which breaks otherwise self-contained markup such as <img width height> and SVG presentation attributes. Any <svg> with <path>s in .my-library-container will be broken now that d is a presentational hint.

Solution

A new presentational global value that behaves exactly the same as revert, except that it does NOT discard presentational hints. Note: I tried to think of a name that starts with revert- for consistency, but revert-hints or revert-presentational sound like they will revert the hints instead of reverting TO them; revert-to-hints or revert-to-presentational sound unCSSy to me; and anything else I could think of (e.g. revert-stylesheets or revert-css) sounded unclear or ambiguous. Granted, presentational is not perfect either because only a small subset of properties can be influenced by presentational hints, but since the functional difference with revert is limited to properties that do, it seems... fine?

[Loirooriol]

The usecase doesn't make sense to me. You are distrusting the CSS provided by the author who uses your library, but you are trusting the presentational hints from the markup that was written... by the same author?

[benface]

@Loirooriol, no. The markup is rendered by the library.

[AtkinsSJ]

This problem sounds very hypothetical to me.

• Is this a real situation that you've encountered?
• Why can't you use shadow dom?
• How vital is it that author styling can't affect your widgets?

(I do think revert nullifying html attributes is unfortunate, fwiw.)

[benface]

Oh, sorry for the way I wrote it, but it is not hypothetical at all. It's a very real problem I've encountered when using Privy's React library: their login dialog is fully styled, but my project has some opinionated CSS resets that mess with their styles (notably position: relative, min-width: 0 and min-height: 0). So the way I fix it now is with this:

  #privy-dialog {
    &,
    &::after,
    &::before,
    &::backdrop,
    &::file-selector-button,
    *,
    *::after,
    *::before,
    *::backdrop,
    *::file-selector-button {
      position: revert;
      min-width: revert;
      min-height: revert;
    }
  }

But I can do that because I know which properties to reset in my project. If Privy wanted to "fix" their library to prevent stuff like this from happening, they would want to use all: revert, which does break all the SVG icons in the dialog.