Hyphen in custom variants not working
marcel-wtfoxtrot opened this issue · 0 comments
marcel-wtfoxtrot commented
Hi there,
i stumbled across a strange behaviour when providing custom variants for fontSizes.
export default defineConfig({
theme: {
fontSize: {
// Working as expected
'xs': ['17px', { lineHeight: '26px' }],
'sm': ['18px', { lineHeight: '28px' }],
'base': ['20px', { lineHeight: '30px' }],
'lg': ['22px', { lineHeight: '32px' }],
'xl': ['24px', { lineHeight: '32px' }],
// Not working
'btn-s': ['12px', { lineHeight: '20px' }],
'btn-m': ['15px', { lineHeight: '24px' }],
'btn-l': ['18px', { lineHeight: '28px' }],
'btn-xl': ['48px', { lineHeight: '32px' }],
},
},
})
With the config above i receive valid css for
<p class="text-xs">XS Text</p>
But this class can not be resolved:
<a class="text-btn-s">Small Button caption</a>
Strangely this is getting wrong css:
<a class="text-btn-xl">Small Button caption</a>
text-btn-xl
is receiving the same css as text-xl
I couldn't find a section in the docs regarding supported keys or similar. So i assume keys containing a hyphen should work.
Am i doing something wrong? Are hyphens just not supported?
Here a small reproduction repo:
https://stackblitz.com/edit/nuxt-starter-xpg9eu?file=app.vue