SX: Improve suggested stylesheet name

[michalsanger]

When an invalid classname is used like here:

<button
  className={tailwind('bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounde')}
  type="button"
>
  Button
</button>

The error is thrown:
Invariant Violation: SX was called with 'rounde' stylesheet name but it doesn't exist. Did you mean 'py-2' instead?

Which is not really helpful, we could do better:
Invariant Violation: SX was called with 'rounde' stylesheet name but it doesn't exist. Did you mean 'rounded' instead?

SX takes suggestions only from the current sx.create call, but for SX Tailwind where we have a limited set of classnames, this set could be used for suggestions.

Could @adeira/sx provide something like registerSuggestions(classNames: Set<string>): void?

[mrtnzlml]

@michalsanger Shouldn't the tailwind Babel plugin or sx-tailwind take care of this and validate it? I don't think we should change SX in this case. Would it be possible to check if the class names inside tailwind() call are correct before giving it to SX? 🤔

[michalsanger]

When you are using the Babel plugin you actually never execute the tailwind function. So it has to be the Babel plugin who will take care of announcing the error to developer. But it can only throw error or log into console. If the error is thrown, Next fails with Internal error. If it logs into console, I'm afraid it will be hidden. The best DX provides the Next.js error, but for that I need the error to be thrown from the application.