Revert "Remove the pseudoPrefix approach, use replace."

This reverts commit 5fa8f4c.
robinweser · Jan 26, 2025 · badc6ff · badc6ff
1 parent d2b8075
commit badc6ff
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/fela-utils/src/generateCSSSelector.js b/packages/fela-utils/src/generateCSSSelector.js
@@ -2,12 +2,12 @@ export default function generateCSSSelector(
   className,
   pseudo = '',
   specificityPrefix = '',
-  propertyPriority = 1
+  propertyPriority = 1,
+  psuedoPrefix = false
 ) {
   const classNameSelector = `.${className}`.repeat(propertyPriority)
-  if (pseudo.includes('&')) {
-    pseudo = pseudo.replace('&', classNameSelector)
-    return `${specificityPrefix}${pseudo}`
+  if (psuedoPrefix) {
+    return `${specificityPrefix}${pseudo}${classNameSelector}`
   }
   return `${specificityPrefix}${classNameSelector}${pseudo}`
 }
diff --git a/packages/fela/src/createRenderer.js b/packages/fela/src/createRenderer.js
@@ -10,6 +10,7 @@ import {
   isNestedSelector,
   isUndefinedValue,
   isSupport,
+  normalizeNestedProperty,
   processStyleWithPlugins,
   STATIC_TYPE,
   RULE_TYPE,
@@ -199,7 +200,13 @@ export default function createRenderer(config = {}) {
       )
     },
 
-    _renderStyleToClassNames(style, pseudo = '', media = '', support = '') {
+    _renderStyleToClassNames(
+      style,
+      pseudo = '',
+      media = '',
+      support = '',
+      psuedoPrefix = false
+    ) {
       let classNames = ''
 
       const applyPlugin = (processed, plugin) => plugin(processed, renderer)
@@ -211,9 +218,10 @@ export default function createRenderer(config = {}) {
           if (isNestedSelector(property)) {
             classNames += renderer._renderStyleToClassNames(
               value,
-              pseudo + property,
+              pseudo + normalizeNestedProperty(property),
               media,
-              support
+              support,
+              property.endsWith('&')
             )
           } else if (isMediaQuery(property)) {
             const combinedMediaQuery = generateCombinedMediaQuery(
@@ -299,7 +307,8 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
               value,
               pseudo,
               media,
-              support
+              support,
+              psuedoPrefix
             )
           }
 
@@ -315,7 +324,15 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
       return classNames
     },
 
-    _renderStyleToCache(reference, property, value, pseudo, media, support) {
+    _renderStyleToCache(
+      reference,
+      property,
+      value,
+      pseudo,
+      media,
+      support,
+      psuedoPrefix
+    ) {
       // we remove undefined values to enable
       // usage of optional props without side-effects
       if (isUndefinedValue(value)) {
@@ -335,7 +352,8 @@ Check http://fela.js.org/docs/basics/Rules.html#styleobject for more information
         className,
         pseudo,
         config.specificityPrefix,
-        renderer.propertyPriority[property]
+        renderer.propertyPriority[property],
+        psuedoPrefix
       )
 
       const change = {