fix: resolve self-references

kripod · Aug 1, 2020 · f0ba93f · f0ba93f
1 parent b532f7a
commit f0ba93f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/example-gatsby/src/pages/index.tsx b/packages/example-gatsby/src/pages/index.tsx
@@ -95,6 +95,11 @@ export default function IndexPage(): JSX.Element {
 			>
 				Conditional rule precedence management test #2, should be green
 			</p>
+
+			<div className={css({ selectors: { "& + &": { color: "green" } } })} />
+			<p className={css({ selectors: { "& + &": { color: "green" } } })}>
+				Self-referencing selector test, should be green
+			</p>
 		</React.StrictMode>
 	);
 }
diff --git a/packages/otion/src/createInstance.ts b/packages/otion/src/createInstance.ts
@@ -210,7 +210,11 @@ export function createInstance(): OtionInstance {
 									cssTextHead.slice(0, classSelectorStartIndex) +
 									scopeSelector +
 									(classSelectorStartIndex != null
-										? `${cssTextHead.slice(classSelectorStartIndex)}{`
+										? `${
+												cssTextHead
+													.slice(classSelectorStartIndex)
+													.replace(/&/g, scopeSelector) // Resolve references
+										  }{`
 										: "{")
 								}${declarations}}${cssTextTail}`,
 								nextRuleIndexesByPrecedenceGroup[precedence],