Implement selective CSS Reset within elements for preflight scope

[kris-ellery]

Description

The problem is the preflight configuration's inability to selectively apply resets to siblings within the same scope, limiting styling flexibility in complex web layouts.

Problem Statement/Justification

Background

The preflight configuration option is designed to set the scope for CSS reset, useful for styling whole sections of a website. However, challenges arise in scenarios where sibling elements require different scopes - one needs a global scope while another requires preflight scope.

Current Implementation and Its Limitation

In the existing setup, all child elements within a scoped division inherit the CSS reset. For example:

<div class="my-scope">
  <button />
  <input />
  <img />
</div>

In the above structure, button, input, and img all inherit the reset styles applied to .my-scope.

Issue Encountered

The current implementation does not support selective reset application on sibling elements within the same parent. For instance:

<div>
  <button class="my-scope" />
  <input />
  <img class="my-scope" />
</div>

Here, the desired outcome is to apply the reset only to button and img tagged with .my-scope, but not to input. This selective application is not feasible with the current preflight scope configuration.

Proposed Solution or API

The proposed solution involves enhancing the preflight configuration with additional options for more granular control over the scope of the CSS reset. The configuration would be as follows:

{
  preflight: {
    scope: '.my-scope', // string
    level: 'parent', // Options: 'parent' or 'element'
  }
}

Behavior Based on the level Setting

1. Parent Level Scope

   • When level is set to 'parent', the CSS reset is applied to all child elements within the parent container having the specified scope class.
   • CSS Implementation Example:

     .my-scope button {}
     .my-scope img {}

2. Element Level Scope

   • Setting level to 'element' applies the reset directly to the individual elements that have the scope class assigned.
   • CSS Implementation Example:

     button.my-scope {}
     img.my-scope {}

This approach allows for more flexibility, enabling selective application of CSS resets either to an entire parent container or to specific elements within a container.

Alternatives

No response

Additional Information

No response

[jhegele]

I'm building a web extension that injects content into a page using shadow DOM and this functionality would be extremely handy. I can scope tokens to :host but it looks like I'll ultimately have to build my own resets that are properly scoped since the reset layer ends up polluting the global scope and causing issues with the page outside of the shadow DOM.

[astahmer]

the feature has been shipped in this PR, documented here

[jhegele]

Many thanks @astahmer! Saves me a huge amount of time.

[lnn0q]

hi! I'm currently trying to fix the styles that are being overwritten by the preflight in editorjs and stumbled upon this discussion. now I am wondering whether we could either add some 'tag' class to all chakra-ui elements to include only this class in preflight, or maybe we could exclude some selector, like in this example I'd like to exclude the parts related to editorjs? e.g. div:not(#editorjs)?

maybe I'm missing something.. I couldn't find if there's something like that in docs, but it looks like it would be a solution for #4427 / #8275