Remove comma-separated classes to work around @apply issue

[27pchrisl]

Fixes #2 References https://github.com/tailwindlabs/tailwindcss/issues/3360

There is an issue in tailwind with the way it applies @apply rules where the class it's trying to rewrite has been provided as one of a comma separated list of classes such as:

.aspect-w-14,
.aspect-w-15,
.aspect-w-16 {
  position: relative;
  padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)
}

While this is pending a fix in TW, this avoids the issue by exploding out the classes in this plugin.

Given the input:

@tailwind components;

.sixteen-by-nine {
  @apply aspect-w-16 aspect-h-9;
}

The previous output was:

.sixteen-by-nine {
  --tw-aspect-w: 16;
  --tw-aspect-h: 9
}

With this change it is:

.sixteen-by-nine > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.sixteen-by-nine {
  position: relative;
  padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
  --tw-aspect-w: 16;
  --tw-aspect-h: 9
}

[RobinMalfait]

Hey! Thank you for your PR! Much appreciated! 🙏

I don't think this is necessary anymore because we fixed this in Tailwind CSS itself. Here is a Play that showcases the fix: https://play.tailwindcss.com/eiH7wzOxS0?file=css

It currently generates this:

.sixteen-by-nine {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 16
}
.sixteen-by-nine > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}
.sixteen-by-nine {
    --tw-aspect-h: 9
}