[css-cascade-6] Enable revert-layer layer limiting and fallback values

Currently revert-layer is always allowed to roll back between origins. It would if this could be limited via an argument. This way it would be possible to empty values instead of the initial values if no value is set in the previous author layers.

Quote from the Specs:

Note: If there are no lower-priority declarations in the same cascade origin as the revert-layer value, the cascaded value will roll back to the previous origin.

That would only be useful in combination with the ability to define fallback values if no other value is found. Currently this can only be achieved with custom properties as they always roll back to an empty value.

The following example will always revert to red, because there is no initial value for --color.

@layer example {
  p {
    --color: revert-layer;
    color: var(--color, red); 
  }
}

This on the other hand will always roll back to the inital UA styles

@layer example {
  p {
    color: revert-layer;
  }
}

If one would only be able to provide a fallback value. This would still roll back to the UA styles as they are non empty.

@layer example {
  p {
    color: revert-layer(red);
  }
}

So this would only make sense in the combination with a rollback limiter. It would make sense to be able to pass any layer name as well as the different origins. As origin names could clash with layer names this could be solved with introducing a new env()-Var.
The syntax could look like the following:

@layer example {
  p {
    color: revert-layer(to env(UA), red);
  }
}

@layer example {
  p {
    color: revert-layer(to layer2, red);
  }
}

This can be useful if you want to be able expose the opportunity to override certain properties on an element directly from a previous layer without a detour over custom-properties. This would feel way more natural.

@layer example {
  p {
    color: revert-layer(to layer2, red);
  }
}

Within the author origin, is this different from creating a new layer below layer-2, and setting color: red in that layer?

This in some cases would indeed make a difference.

E.g. 2 years ago, when experimenting with Cascade Layers I came up with the idea of the Style Lock / Styling API for Components, what is basically does is it prohibts setting any other property to an element besides the ones allowed.

With that I always need a fallback layer as very first layer to make sure that it doesn't fallback to the UA styles.

// If no value on any layer is found this includes the fallback values
@layer
fallbacks,
organisms,
molecules,
atoms;

@layer fallbacks {
  .button {
    // These are the fallback value in case there needs to be a default for an API
    border: 4px solid blue;
  }
}

@layer atoms {
  .button {
    // Reset all styles to it's initial value
    all: initial;

    // Set own styles
    font: inherit;
    border-radius: 4px;
    background: lavender;
    padding-block: .5rem;
    padding-inline: 1.5rem;
    display: block;

    // API - Tell what can be set from outside
    border: revert-layer; 
    margin: revert-layer;
    outline: revert-layer;
  }
}

@layer molecules {
  .molecule {
    // As no unset is provided all unset inner APIs are exposed
    
    // These can't be overwritten as they are reset / not part of the api
    border-radius: 10px;
    background: red;
    width: 500px;
    height: 100px;

    // This can be overwritten as they are part of the api
    margin: 20px;
    border: 10px solid black;
  }
}

@layer organisms {
  .organism {
    .button {
      // This can be overwritten as they are part of the api
      border: 10px solid red;
    }
  
    .molecule {
      // This can't be overwritten as it is set on molecule and by that not exposed anymore
      border: 10px solid green;
      
      // This can be overwritten as they are part of the api and not set
      outline: 5px solid yellow;
    }
  }
}

(https://codepen.io/Quentin_Albert/pen/raNJgxR). I mean this is just an experiment that isn't really pracitical, but I'm pretty sure there are more cases where it would make sense tho.

Navigation Menu

Repository navigation

[css-cascade-6] Enable `revert-layer` layer limiting and fallback values #10416

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-cascade-6] Enable revert-layer layer limiting and fallback values #10416

Description

Activity

mirisuzanne commented on Feb 19, 2025

Que-tin commented on Jun 5, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[css-cascade-6] Enable `revert-layer` layer limiting and fallback values #10416