fix(merge-styles): Correctly processing selectors when value is a c…

…lass name and they are not wrapped in `selectors` wrapper (#31798)

change/@fluentui-merge-styles-80cf5b64-7950-4db5-9b45-b92cc006f2db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Correctly processing selectors when value is a class name and they are not wrapped in 'selectors' wrapper.",
+  "packageName": "@fluentui/merge-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/merge-styles/src/styleToClassName.ts

@@ -73,6 +73,10 @@ function expandCommaSeparatedGlobals(selectorWithGlobals: string): string {
     }, selectorWithGlobals);
 }
 
+function isSelector(potentialSelector: string): boolean {
+  return potentialSelector.indexOf(':global(') >= 0 || potentialSelector.indexOf(':') === 0;
+}
+
 function expandSelector(newSelector: string, currentSelector: string): string {
   if (newSelector.indexOf(':global(') >= 0) {
     return newSelector.replace(globalSelectorRegExp, '$1');
@@ -138,7 +142,6 @@ function extractRules(
       for (const prop in arg as any) {
         if ((arg as any).hasOwnProperty(prop)) {
           const propValue = (arg as any)[prop];
-
           if (prop === 'selectors') {
             // every child is a selector.
             const selectors: { [key: string]: IStyle } = (arg as any).selectors;
@@ -148,9 +151,9 @@ function extractRules(
                 extractSelector(currentSelector, rules, newSelector, selectors[newSelector], stylesheet);
               }
             }
-          } else if (typeof propValue === 'object') {
+          } else if (typeof propValue === 'object' || isSelector(prop)) {
             // prop is a selector.
-            if (propValue !== null) {
+            if (propValue !== null && propValue !== undefined) {
               extractSelector(currentSelector, rules, prop, propValue, stylesheet);
             }
           } else {