Scope

@scope is a CSS feature that allows you to apply styles to a specific section of your HTML document, rather than globally. This is particularly useful in large projects where you want to avoid style conflicts.

Example: Change the color of headings

If you want to change the color of some headings under the .mdx-article class, you can use the following CSS:

@scope (.mdx-article) {
    h1, h2 {
        color: blue;
    }
}

<div>
    <h1>Heading 1 not affected</h1>
    <h2>Heading 2 not affected</h2>
</div>
<div className="mdx-article">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
</div>

@import under @scope

Unfortunately, @import does not work under @scope.

It would be amazing if it did. You don't need to even copy and paste the entire css file under @scope.