feat(css()): move towards css-in-js

[Tahul]

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [X] 👌 Enhancement (improving an existing functionality like performance)
• [X] ✨ New feature (a non-breaking change that adds functionality)
• [X] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is initial work towards something else than having a global "design-tokens" layer for Nuxt.

This PR allows lots of new possibilities such as:

• Variants system
• Global typings refactor
  • Configuration now has suggested (through types) keys
  • These keys provides autocompletes for mapped values
    • If I have colors.lila and colors.grape in tokens.config.ts, writing css({ color: '' }) will give {colors.lila} | colors.grape as suggestion
• <style lang="ts">
  • css() API cabled to theme tokens
  • css() styles feeds from MDN datas (through CSSTypes) and local theme tokens defined in tokens.config.ts
  • css() has 0 runtime impact (gets compiled to raw CSS)

  • <style scoped lang="ts">
      css({
        button: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: '16px',
          width: '320px',
          height: '320px',
          border: '4px solid {colors.black}',
          position: 'relative',
          '&:hover': {
            border: '4px solid {colors.velvet}'
          },
          '& > p': {
            fontSize: '24px',
          },
          variants: {
            primary: {
              backgroundColor: '{colors.primary.900}',
            },
            black: {
              backgroundColor: '{colors.black}',
            },
            lavender: {
              backgroundColor: '{colors.lavender}'
            },
            lila: {
              backgroundColor: '{colors.lila}'
            },
            velvet: {
              backgroundColor: '{colors.velvet}'
            },
            grape: {
              backgroundColor: '{colors.grape}'
            },
            rounded: {
              borderRadius: '50%'
            },
            padded: {
              padding: '4rem'
            },
          }
        }
      })
    </style>

• Initial Volar integration
  • $dt() now autocompletes in CSS
  • Full autocomplete in <style lang="ts">

I will probably merge this PR fast, but I wanted to keep track of this direction change for the module.

I believe this is going to be a very strong solution for Nuxt theming projects, but now applies to a lot more of usecases.

📝 Checklist

TODO:

• [ ] I have updated the documentation accordingly.

💚 Credits

Thank you so much @johnsoncodehk for the initial help on the Volar plugin setup!

The experience is amazing! 😍