Add more detail to @apply errors

adamwathan · adamwathan · commit 7d6d0af65c85 · 2017-11-29T10:16:38.000-05:00
diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js
@@ -24,7 +24,7 @@ function findMixin(css, mixin, onError) {
 
   if (_.isEmpty(matches)) {
     // prettier-ignore
-    onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} either does not exist, or it's actual definition includes a pseudo-class like :hover, :active, etc.`)
+    onError(`\`@apply\` cannot be used with \`${mixin}\` because \`${mixin}\` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${mixin}\` 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.`)
   }
 
   if (matches.length > 1) {

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ function findMixin(css, mixin, onError) {`
`24`	`24`
`25`	`25`	`if (_.isEmpty(matches)) {`
`26`	`26`	`// prettier-ignore`
`27`		- onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} either does not exist, or it's actual definition includes a pseudo-class like :hover, :active, etc.`)
	`27`	+ onError(`\`@apply\` cannot be used with \`${mixin}\` because \`${mixin}\` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${mixin}\` 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.`)
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`if (matches.length > 1) {`