Reusing same scope for related components

[Wiktor102]

Problem

Sometimes you might want to create a variation of your component that requires wrapping it in another element while using a single stylesheet. In the current version of webpack-scoped-css, this is buggy if that "wrapper" also wants to change the styles of the original component.
Take the following example:

import styles from "./Card.component.scss";

function Card({ header, children }) {
  return (
    <div className="card" data-style={styles}>
      <h2 className="header">
        <span>{header}</span> <pre>className="header"</pre>
      </h2>
      <div className="body">{children}</div>
    </div>
  );
}

function SpecialCard({ header, children }) {
  return (
    <div className="special-card" data-style={styles}>
      <Card header={header}>{children}</Card>
    </div>
  );
}

.card {
  padding: 2rem;
  background-color: #fff;

  .header {
    color: black;
  }

  .body {
    color: #474747;
  }
}

.special-card {
  border: 2px solid pink;
}

The styles for the header and body don't apply to the SpecialCard, because a new scope is beginning before them. In the current version, it is not differentiated whether the nested scope is the same or different. All new scopes terminate parent ones (as long as using the scopeEnd: "scope" setting, which is a default).

Workarround

For now, you can use a separate stylesheet for such wrapper components or use the @scope tree; directive at the top to change behavior.

Possible fixes

1. Update the selector to include a :not() pseudoclass when checking for nested scopes.
2. Consider if the updated selector should be the default or if a new scopeEnd setting should be introduced.