From d724fbe610c6b4198c82fb9d183c38f9225f66c2 Mon Sep 17 00:00:00 2001
From: Wiktor Golicz <wiktorgolicz1@gmail.com>
Date: Sat, 21 Jun 2025 21:28:16 +0200
Subject: [PATCH 1/2] Add test case to example

---
 example/src/app.jsx                             | 11 ++++++-----
 example/src/components/Card/Card.component.scss |  5 +++++
 example/src/components/Card/Card.jsx            |  9 +++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/example/src/app.jsx b/example/src/app.jsx
index 29c47db..66df566 100644
--- a/example/src/app.jsx
+++ b/example/src/app.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import Header from "./components/Header/Header";
-import Card from "./components/Card/Card";
+import Card, { SpecialCard } from "./components/Card/Card";
 import Gallery from "./components/Gallery/Gallery";
 
 import appStyles from "./app.component.scss";
@@ -59,10 +59,11 @@ const App = () => {
 							dolor sit amet consectetur adipisicing elit. Illo commodi, deleniti temporibus explicabo facilis
 							laborum praesentium eos, a pariatur fugiat quo impedit quod ipsam animi.
 						</Card>
-						<Card header="Lorem ipsum">
-							dolor sit amet consectetur adipisicing elit. Illo commodi, deleniti temporibus explicabo facilis
-							laborum praesentium eos, a pariatur fugiat quo impedit quod ipsam animi.
-						</Card>
+						<SpecialCard header="Special card">
+							This card has an extra element that wraps the original card component. In order to use the same
+							stylesheet for both cards, the <i>data-style</i> attribute is also applied to the wrapper
+							element.
+						</SpecialCard>
 					</div>
 				</section>
 				<section>
diff --git a/example/src/components/Card/Card.component.scss b/example/src/components/Card/Card.component.scss
index 9199fb5..d223a8d 100644
--- a/example/src/components/Card/Card.component.scss
+++ b/example/src/components/Card/Card.component.scss
@@ -53,3 +53,8 @@
 		background-color: #fff;
 	}
 }
+
+.special-card {
+	--size: 5px;
+	mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
+}
diff --git a/example/src/components/Card/Card.jsx b/example/src/components/Card/Card.jsx
index f05e285..0069223 100644
--- a/example/src/components/Card/Card.jsx
+++ b/example/src/components/Card/Card.jsx
@@ -11,4 +11,13 @@ function Card({ header, children }) {
 	);
 }
 
+function SpecialCard({ header, children }) {
+	return (
+		<div className="special-card" data-style={styles}>
+			<Card header={header}>{children}</Card>
+		</div>
+	);
+}
+
 export default Card;
+export { SpecialCard };

From d774bbeb3000251363201682978fb5b6de412da2 Mon Sep 17 00:00:00 2001
From: Wiktor Golicz <wiktorgolicz1@gmail.com>
Date: Sat, 21 Jun 2025 21:28:54 +0200
Subject: [PATCH 2/2] Implement using the :not pseudoclass

---
 src/cssScopeLoader.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/cssScopeLoader.js b/src/cssScopeLoader.js
index bc89bbf..71aa6f4 100644
--- a/src/cssScopeLoader.js
+++ b/src/cssScopeLoader.js
@@ -185,7 +185,14 @@ module.exports = function (source) {
 				{
 					type: "Selector",
 					loc: null,
-					children: [attributeValueSelector, childCombinator, attributeSelector, childCombinator, typeSelector]
+					children: [
+						attributeValueSelector,
+						childCombinator,
+						attributeSelector,
+						not([attributeValueSelector]),
+						childCombinator,
+						typeSelector
+					]
 				}
 			])
 		);