fontFamily or another camel case attribute are creating kebab case variables

[Alan Grosz]

Describe the bug

It's impossible to override any camel case attribute from tailwindcss.
The problem is when you translate the extend attributes to a variable.
For example

{
fontFamily: {
    sans: ['monospace']
  }
}

It is translated to --font-family-sans-0: Maison;
But tailwind is using --font-familySans-0: Maison;

Your minimal, reproducible example

Steps to reproduce

Create any camel case attribute in a theme configuration and then inspect the element to see the value

Expected behavior

I expect to get the variable in camel case

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS Mac
• Browser Chrome

tailwindcss-themer version

2.0.1

Additional context

No response

[Alan Grosz]

A workaround is to add in my global.css file those properties below the theme name. For example:

.myThemeName {
    font-family: var(--font-family-sans-0);
    --borderRadius-lg: 1rem;
}
.myOtherThemeName {
    font-family: var(--font-family-sans-0);
    --borderRadius-lg: 1.5rem;
}

But, it is necessary to add it to the tailwind.config.js anyway in its themes:

{
          name: 'myThemeName',
          extend: {
            borderRadius: {
              lg: '1rem',
            },
            fontFamily: {
              sans: ['Maison', 'arial', 'Inter var', ...defaultTheme.fontFamily.sans],
            },
          },
        },
        {
          name: 'myOtherThemeName',
          extend: {
            borderRadius: {
              lg: '1.5rem',
            },
            fontFamily: {
              sans: ['arial', 'Inter var', ...defaultTheme.fontFamily.sans],
            },
          },
        },

[github-actions]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[Ryan Clements]

Thanks for opening this issue!

Could you provide a reproduction example? I tried to replicate this locally, but couldn't. Below is my config

//@ts-check

// this file is now type checked!!

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [
    require('tailwindcss-themer')({
      defaultTheme: {
        extend: {
          colors: {
            primary: {
              // here I'm specifying a custom default
              500: 'blue'
            },
            secondary: {
              500: 'red'
            }
            // uncomment this and see that this causes a type error
            // thisCausesATypeError: () => '💥 boom! 💥'
          },
          fontFamily: {
            sans: ['monospace'] // tailwind uses --fontFamily-sans-0 for this
          }
        }
      },
      themes: [
        {
          name: 'dark',
          extend: {
            colors: {
              // here I'm overriding a custom default
              secondary: {
                500: 'darkred'
              },
              // here I'm overriding a custom default too
              primary: {
                500: 'darkblue'
              }
            }
          }
        },
        {
          name: 'neon',
          extend: {
            colors: {
              secondary: {
                // here I'm overwriting a custom default again
                500: '#90A040' // as red as it gets
              }
              // im not overwriting the custom primary color I made ... I wonder what will happen ??? 🤔🤔🤔
            }
          }
        }
      ]
    })
  ]
}

[github-actions]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.