perf(renderComponent): avoid multiple style function calls

CHANGELOG.md

@@ -39,11 +39,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add behaviors for `Tree` as list and linked them using childBehaviors @silviuavram ([#1928](https://github.com/stardust-ui/react/pull/1928))
 - Add `notes` icon and update `link` icon in Teams theme @codepretty ([#1953](https://github.com/stardust-ui/react/pull/1953))
 
+### Performance
+- Resolve styles once in `renderComponent()` @layershifter ([#1957](https://github.com/stardust-ui/react/pull/1957))
+
 ### Documentation
 - Remove Usage tab @lucivpav ([#1948](https://github.com/stardust-ui/react/pull/1948))
 - Put props on a single page, fix props links @lucivpav ([#1892](https://github.com/stardust-ui/react/pull/1892))
-
-### Documentation
 - Remove cancel button in a `Dialog` example with a close action @lucivpav ([#1949](https://github.com/stardust-ui/react/pull/1949))
 
 <!--------------------------------[ v0.38.1 ]------------------------------- -->

packages/react/src/components/Design/Design.tsx

@@ -22,7 +22,7 @@ function Design<DesignProps>({ config, children }) {
   const theme = React.useContext<ProviderContextPrepared>(ThemeContext)
   const getConfig = React.useCallback(() => config, [config])
 
-  // Heads Up! Keep in sync with getClasses.ts
+  // Heads Up! Keep in sync with renderComponent.tsx
   const styleParam = {
     theme: { direction: theme.rtl ? 'rtl' : 'ltr' },
   }

packages/react/src/lib/index.ts

@@ -13,7 +13,6 @@ export { default as getOrGenerateIdFromShorthand } from './getOrGenerateIdFromSh
 export * from './factories'
 export { default as callable } from './callable'
 export { default as constants } from './constants'
-export { default as getClasses } from './getClasses'
 export { default as getElementType } from './getElementType'
 export { default as getUnhandledProps } from './getUnhandledProps'
 export { default as mergeThemes } from './mergeThemes'

packages/react/src/lib/renderComponent.tsx

@@ -3,7 +3,6 @@ import * as React from 'react'
 import * as _ from 'lodash'
 
 import callable from './callable'
-import getClasses from './getClasses'
 import getElementType from './getElementType'
 import getUnhandledProps from './getUnhandledProps'
 import logProviderMissingWarning from './providerMissingHandler'
@@ -201,11 +200,25 @@ const renderComponent = <P extends {}>(
     disableAnimations,
   }
 
-  const resolvedStyles: ComponentSlotStylesPrepared = resolveStyles(mergedStyles, styleParam)
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam = {
+    theme: { direction },
+  }
+
+  const resolvedStyles: ComponentSlotStylesPrepared = {}
+  const classes: ComponentSlotClasses = {}
+
+  Object.keys(mergedStyles).forEach(slotName => {
+    resolvedStyles[slotName] = callable(mergedStyles[slotName])(styleParam)
+
+    if (renderer) {
+      classes[slotName] = renderer.renderRule(callable(resolvedStyles[slotName]), felaParam)
+    }
+  })
 
-  const classes: ComponentSlotClasses = renderer
-    ? getClasses(renderer, mergedStyles, styleParam)
-    : {}
   classes.root = cx(className, classes.root, props.className)
 
   const resolvedConfig: RenderResultConfig<P> = {