refactor(emotion): add new way of using parent tokens

Author: HerrTopi

packages/__docs__/webpack.config.mjs

@@ -59,6 +59,7 @@ const config = merge(baseConfig, {
       directory: outputPath,
     },
     host: '0.0.0.0',
+    historyApiFallback: true,
     client: {
       overlay: false,
     },

packages/emotion/src/useStyle.ts

@@ -48,6 +48,7 @@ type UseStyleParamsWithTheme<
   generateComponentTheme: GenerateComponentTheme
   componentId: string
   displayName?: string
+  useTokensFrom?: string
 }
 
 // TODO this is only used by the old themes, remove when everything uses the new
@@ -60,6 +61,7 @@ type UseStyleParamsWithoutTheme<
   generateComponentTheme?: undefined
   componentId?: undefined
   displayName?: undefined
+  useTokensFrom?: undefined
 }
 
 // new useStyle syntax, use this with new themes
@@ -74,6 +76,8 @@ type UseStyleParamsNew<
   params?: SecondParameter<P>
   componentId: keyof NewComponentTypes
   displayName?: string
+  //in case of a child component needed to use it's parent's tokens, provide parent's name
+  useTokensFrom?: keyof NewComponentTypes
 }
 
 const isNewThemeObject = (obj: BaseThemeOrOverride): obj is Theme => {
@@ -88,7 +92,7 @@ const useStyle = <
     | UseStyleParamsWithoutTheme<P>
     | UseStyleParamsNew<P>
 ): ReturnType<P> => {
-  const { generateStyle, params, componentId, displayName } = useStyleParams
+  const { generateStyle, params, componentId, useTokensFrom } = useStyleParams
   const generateComponentTheme: GenerateComponentTheme = (
     useStyleParams as UseStyleParamsWithTheme<P>
   )?.generateComponentTheme
@@ -98,18 +102,21 @@ const useStyle = <
     typeof generateComponentTheme === 'function'
       ? generateComponentTheme(theme as Theme)
       : {}
+  const componentWithTokensId = useTokensFrom ?? componentId
 
   if (
     isNewThemeObject(theme) &&
-    theme.newTheme.components[componentId as keyof NewComponentTypes]
+    theme.newTheme.components[componentWithTokensId as keyof NewComponentTypes]
   ) {
     baseComponentTheme =
-      theme.newTheme.components[componentId as keyof NewComponentTypes]
+      theme.newTheme.components[
+        componentWithTokensId as keyof NewComponentTypes
+      ]
   }
   const themeOverride = getComponentThemeOverride(
     theme,
-    displayName ? displayName : componentId || '',
-    componentId,
+    componentWithTokensId as keyof NewComponentTypes,
+    componentWithTokensId,
     params,
     baseComponentTheme
   )