diff --git a/change/@fluentui-merge-styles-80cf5b64-7950-4db5-9b45-b92cc006f2db.json b/change/@fluentui-merge-styles-80cf5b64-7950-4db5-9b45-b92cc006f2db.json new file mode 100644 index 00000000000000..8f04ebd6e81047 --- /dev/null +++ b/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": "Humberto.Morimoto@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/merge-styles/src/styleToClassName.ts b/packages/merge-styles/src/styleToClassName.ts index 55b0a0d1fe85bc..c7841e0ababbf0 100644 --- a/packages/merge-styles/src/styleToClassName.ts +++ b/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 {