feat: Show "Did you mean?" message when users @apply errant class

[mattrothenberg]

Howdy!

Currently, when you mis-@apply a class name, the error message doesn't help you figure out what you might have been trying to type instead. For instance, I get bit by this one all of the time 👇

/* 😱 */
body {
  @apply anti-aliased;
}

@apply cannot be used with .anti-aliased because .anti-aliased either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .anti-aliased exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

I think we can make this error message even more helpful with one extra line...

Did you mean .antialiased?

To this end, I've added some very naïve logic to the applyComplexClasses.js module, such that it compares the given class (that's being @apply'ed) against the list of all available classes with the assistance of the library DidYouMean.js.

In fact, I was inspired by @yuki24's amazing work on https://github.com/ruby/did_you_mean, and would welcome his suggestions for actually implementing this in a sophisticated way, should this feature sound interesting to the Tailwind team.

Open Questions

• What happens if multiple suggestions are recommended?
• Is this library fast enough, or will this significantly slow down compilation?

Thanks for all your hard work ❤️

[adamwathan]

Hey! Not opposed to adding this but could you do it here instead?

https://github.com/tailwindlabs/tailwindcss/blob/master/src/flagged/applyComplexClasses.js

That is the new version of apply that will be replacing the current one in Tailwind 2.0 in like 3-4 weeks.

[mattrothenberg]

@adamwathan Updated. Turns out that DidYouMean library is really widely used in the JS ecosystem, so there's that.

[yuki24]

@adamwathan @mattrothenberg Nothing is more fulfilling than seeing a pull request like this! Thank you for your fantastic work ❤️

[adamwathan]

Sorry, I promoted "applyComplexClasses" to be the default apply behavior and now the files you changed don't exist and GitHub is confused 😬 If you don't mind updating I can merge.

[mattrothenberg]

@adamwathan Updated. I think the merge went OK and that I updated the right bits.

[adamwathan]

Looks good, thanks!