Nested CSS font-family not working as expected

[onmax]

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]

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]

I could also add a new test for Nested CSS here

[danielroe]

that would be great - thank you 🙏