import { ComponentSlotStylesResolved , ComponentVariablesObject , isDebugEnabled , } from '@fluentui/styles' ; import * as _ from 'lodash' ; import { ComponentSlotClasses , ResolveStylesOptions , StylesContextValue } from '../styles/types' ; import resolveVariables from './resolveVariables' ; import resolveStyles from './resolveStyles' ; export type GetStylesResult = { classes : ComponentSlotClasses ; variables : ComponentVariablesObject ; styles : ComponentSlotStylesResolved ; theme : StylesContextValue [ 'theme' ] ; } ; const getStyles = ( options ) : GetStylesResult => { const resolvedVariables = resolveVariables ( options . displayName , options . theme , options . props . variables , options . performance . enableVariablesCaching ) ; const { classes , resolvedStyles , resolvedStylesDebug } = resolveStyles ( options , resolvedVariables ) ; if ( process . env . NODE_ENV !== 'production' && isDebugEnabled ) { options . saveDebug ( { componentName : options . displayName , componentVariables : _ . filter ( resolvedVariables . _debug , variables => ! _ . isEmpty ( variables . resolved ) ) , componentStyles : resolvedStylesDebug , siteVariables : _ . filter ( options . theme . siteVariables . _debug , siteVars => { if ( _ . isEmpty ( siteVars ) || _ . isEmpty ( siteVars . resolved ) ) { return false ; } const keys = Object . keys ( siteVars . resolved ) ; if ( keys . length === 1 && keys . pop ( ) === 'fontSizes' && _ . isEmpty ( siteVars . resolved [ 'fontSizes' ] ) ) { return false ; } return true ; } ) , } ) ; } return { classes , variables : resolvedVariables , styles : resolvedStyles , theme : options . theme , } ; } ; export default getStyles ;