Prettier plugin adds a whitespace before asterisk on functional utilities

[CHC383]

The plugin currently formats the CSS to look like this

/* Code */
@utility direction-* {
  animation-direction: --value(--animation-direction-*);
}

/* Expected behavior */
@utility direction-* {
  animation-direction: --value(--animation-direction-*);
}

/* Current behavior */
@utility direction-* {
  animation-direction: --value(--animation-direction- *);
}

[adamwathan]

Hey! This is just Prettier actually, not our plugin:

https://prettier.io/playground/#N4Igxg9gdgLgprEAuEABArjAlgGyzATwAIATLAJzjG2gFoAqI4AHSiKIEMosBbDmqLTKVqWaEiK1aANw450cABRSuvfmMHCqAhgEoA3KwC+IADQgIABwEBnZKA7lyEAO4AFRwjso5LjgTtzACNyDjAAazgYAGUOHjgAGSwoOGQAMzkbOGDQiKjoyzDkgHNkGHIFcyyeLDKK7JA4AA9LOHJeBBg5ABU2qEcsOG8MnCyqkpw4AEV0CHh0zIaAKxsm6Inp2fmkEbGQAEctuDdnS28QDhtaFLgSW7MQco5cEoBhCB4+ZAucHAebDYAQRg5SwQUwxzaSRSC1GDQAFjAeDgAOrw-BDQpgODRLz4LDSfAEb5gGyBEDSBQASSgd1g0TA7WsgNp0UIk1he0sziyKNClm+3KGbWkqXMySy5BgJw4xS+O0W5kK5ElJLJD25yRgKKwJBg8OQAA4AAzmSiHCjHUJyjichpdII6vUGpAAJnM6Cy3Q4QWGisaPCCtzuJASXGK6FlcAAYhByHwQSVvhxMBAQEYjEA

Unfortunate but we made sure Tailwind will still work even with the annoying space there. Hoping to eventually try and PR something to Prettier that leaves this alone if we can.

[martinhipp]

You could add /* prettier-ignore */ before the utility until (if ever) Prettier fixes this behaviour.

For example:

/* prettier-ignore */
@utility direction-* {
  animation-direction: --value(--animation-direction-*);
}