FontResolver plugin resets all fonts styling

[mnecchi]

Description

When adding a FontResolver plugin all the fonts stylings seem to be reset

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create a new Expo app with npm create gluestack
2. Change the App.tsx code with the following:

import { config as gluestackUIConfig } from '@gluestack-ui/config';
import { Box, Button, ButtonText, FontResolver, GluestackUIProvider, VStack, createConfig } from '@gluestack-ui/themed';

const config = createConfig(gluestackUIConfig)

export default function App() {
  return (
    <GluestackUIProvider config={config}>
      <Home />
    </GluestackUIProvider>
  );
}

const Home = () => {
  return (
  <Box flex={1} justifyContent="center" alignItems="center">
    <VStack space="lg">
      <Button>
        <ButtonText fontWeight="$black">Button 1</ButtonText>
      </Button>
      <Button>
        <ButtonText fontWeight="$hairline">Button 2</ButtonText>
      </Button>
    </VStack>
  </Box>)
};

3. Run the app. The two buttons have the correct styles.
4. Change line 3 in App.tsx with the following:

const config = createConfig({ ...gluestackUIConfig, plugins: [new FontResolver()] })

5. Re-run the app. The two buttons' styles are not applied correctly anymore.

gluestack-ui Version

@gluestack-ui/config 1.1.8 @gluestack-ui/themed 1.1.17 @gluestack-style/react: 1.0.52

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [X] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[surajahmed]

@mnecchi Thanks for reporting this. We'll look into this.

[pepes-hub]

Hey @surajahmed any news here? I also stuck here.

[surajahmed]

@mnecchi @pepes-hub We're working on it. Hope to release this fix in the coming release. Thanks for your patience.

[twankruiswijk]

@surajahmed we're also experiencing this bug on version "@gluestack-style/react": "1.0.56"..

It works fine when you use:

const StyledText = styled(
  Text,
  {
    props: {
      bold: true,
    },
);

But not when you set the fontWeight as:

const StyledText = styled(
  Text,
  {
      fontWeight: '$bold',
);

[ankit-tailor]

Hey @twankruiswijk, Can you try out the latest version?

[neverson-silva]

I'm having this error too, even latest version, there are some updates on this?

[diatche]

Please update on the status of this, as it's still an issue.

[frArdouin]

Still an issue. It's impossible to use our token defined in gluestack-ui.config.ts when using the FontResolver plugin. I'll certainly not hardcode all of my Text and Heading colors because the Font resolver won't work as expected. Is there another way to have a working multi font configuration based on fontWeight with gluestack-ui?

The reference to fontConfig in fonts.body and font.heading was working out of the box in native-base and now it's becoming a real pain.