diff --git a/src/darkLightMode.js b/src/darkLightMode.js new file mode 100644 index 00000000..7e1b4dad --- /dev/null +++ b/src/darkLightMode.js @@ -0,0 +1,14 @@ +import { throwIf } from './utils' +import { logBadGood } from './logging' + +const checkDarkLightClasses = className => + throwIf( + ['dark', 'light'].includes(className), + () => + `\n\n"${className}" must be added as className:\n\n${logBadGood( + `tw\`${className}\``, + `
` + )}\n\nRead more at https://twinredirect.page.link/darkLightMode\n` + ) + +export { checkDarkLightClasses } diff --git a/src/logging.js b/src/logging.js index 628fc45b..59d54335 100644 --- a/src/logging.js +++ b/src/logging.js @@ -1,5 +1,6 @@ import chalk from 'chalk' import getSuggestions from './suggestions' +import { checkDarkLightClasses } from './darkLightMode' const color = { error: chalk.hex('#ff8383'), @@ -123,8 +124,9 @@ const errorSuggestions = properties => { pieces: { className }, } = properties - const textNotFound = logNoClass(properties) + checkDarkLightClasses(className) + const textNotFound = logNoClass(properties) if (!hasSuggestions) return spaced(textNotFound) const suggestions = getSuggestions(properties) diff --git a/src/macro/tw.js b/src/macro/tw.js index c8874faf..82f6fcc4 100644 --- a/src/macro/tw.js +++ b/src/macro/tw.js @@ -23,7 +23,7 @@ const handleTwProperty = ({ path, t, state }) => { // Feedback for unsupported usage throwIf(nodeValue.expression && !expressionValue, () => logGeneralError( - `Only plain strings can be used with the "tw" prop.\nEg:
or
` + `Only plain strings can be used with the "tw" prop.\nEg:
or
\nRead more at https://twinredirect.page.link/template-literals` ) ) diff --git a/src/prechecks.js b/src/prechecks.js index 78977849..6001b307 100644 --- a/src/prechecks.js +++ b/src/prechecks.js @@ -5,7 +5,7 @@ const precheckGroup = ({ classNameRaw }) => throwIf( classNameRaw === 'group', () => - `"group" must be added as className:\n\n${logBadGood( + `\n\n"group" must be added as className:\n\n${logBadGood( 'tw`group`', '
' )}\n`