nuxt / fonts

Plug-and-play web font optimization and configuration for Nuxt apps.
https://fonts.nuxt.com
MIT License
447 stars 7 forks source link

Nested CSS font-family not working as expected #371

Open onmax opened 2 hours ago

onmax commented 2 hours ago

Description

Using nuxt fonts to set different fonts for specific CSS classes works perfectly for single-level classes, but when trying to apply a font to nested CSS classes, it does not load as expected.

For example, Lato works fine for .lato, but Nunito fails to apply in nested elements like .nunito p:

<template>
  <div class="lato">
    'Lato works!'

    <div class="nunito">
      <p>'Nunito does not work :('</p>
    </div>
  </div>
</template>

<style scoped>
.lato {
  font-family: 'Lato';
}

.nunito {
  p {
    font-family: 'Nunito';
  }
}
</style>

Reproduction steps

  1. Apply a font family using nuxt fonts to a nested CSS class selector.

Note that the font only applies to single-level selectors, not nested ones like .nunito p.

Expected behaviour

Both fonts should be applied according to the CSS structure, with Lato on the outer div and Nunito on the inner <p> element.

Reproduction link

Stackblitz repro

onmax commented 2 hours ago

I assume that the AST does not walk through nested CSS correctly here.

If it is ok, I could make a PR if one of the maintainers agrees with this change :)

Thanks for this great module!

onmax commented 2 hours ago

I could also add a new test for Nested CSS here