Implement one-time logging to prevent duplicate warnings (tailwindlabs#5661)

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

Author: reinink

src/cli.js

@@ -420,7 +420,10 @@ async function build() {
     let resolvedConfig = resolveConfigInternal(config)
 
     if (args['--purge']) {
-      log.warn(['The `--purge` flag has been deprecated.', 'Please use `--content` instead.'])
+      log.warn('purge-flag-deprecated', [
+        'The `--purge` flag has been deprecated.',
+        'Please use `--content` instead.',
+      ])
       if (!args['--content']) {
         args['--content'] = args['--purge']
       }

src/corePlugins.js

@@ -296,7 +296,7 @@ export default {
     let mode = config('darkMode', 'media')
     if (mode === false) {
       mode = 'media'
-      log.warn([
+      log.warn('darkmode-false', [
         '`darkMode` is set to `false` in your config.',
         'This will behave just like the `media` value.',
       ])

src/featureFlags.js

@@ -38,7 +38,7 @@ export function issueFlagNotices(config) {
       .map((s) => chalk.yellow(s))
       .join(', ')
 
-    log.warn([
+    log.warn('experimental-flags-enabled', [
       `You have enabled experimental features: ${changes}`,
       'Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.',
     ])

src/lib/normalizeTailwindDirectives.js

@@ -41,7 +41,7 @@ export default function normalizeTailwindDirectives(root) {
 
     if (['layer', 'responsive', 'variants'].includes(atRule.name)) {
       if (['responsive', 'variants'].includes(atRule.name)) {
-        log.warn([
+        log.warn(`${atRule.name}-at-rule-deprecated`, [
           `'@${atRule.name}' is deprecated, use '@layer utilities' or '@layer components' instead.`,
         ])
       }

src/lib/setupContextUtils.js

@@ -559,8 +559,6 @@ function registerPlugins(plugins, context) {
     )
   }
 
-  //
-  let warnedAbout = new Set([])
   context.safelist = function () {
     let safelist = (context.tailwindConfig.safelist ?? []).filter(Boolean)
     if (safelist.length <= 0) return []
@@ -575,14 +573,11 @@ function registerPlugins(plugins, context) {
       }
 
       if (value instanceof RegExp) {
-        if (!warnedAbout.has('root-regex')) {
-          log.warn([
-            // TODO: Improve this warning message
-            'RegExp in the safelist option is not supported.',
-            'Please use the object syntax instead: https://tailwindcss.com/docs/...',
-          ])
-          warnedAbout.add('root-regex')
-        }
+        log.warn('root-regex', [
+          // TODO: Improve this warning message
+          'RegExp in the safelist option is not supported.',
+          'Please use the object syntax instead: https://tailwindcss.com/docs/...',
+        ])
         continue
       }
 

src/public/colors.js

@@ -1,15 +1,10 @@
 import log from '../util/log'
 
-let warned = []
-
 function warn({ version, from, to }) {
-  if (!warned.includes(from)) {
-    log.warn([
-      `As of Tailwind CSS ${version}, \`${from}\` has been renamed to \`${to}\`.`,
-      'Please update your color palette to eliminate this warning.',
-    ])
-    warned.push(from)
-  }
+  log.warn(`${from}-color-rename`, [
+    `As of Tailwind CSS ${version}, \`${from}\` has been renamed to \`${to}\`.`,
+    'Please update your color palette to eliminate this warning.',
+  ])
 }
 
 export default {

src/util/log.js

@@ -1,28 +1,25 @@
 import chalk from 'chalk'
 
-export default {
-  info(messages) {
-    if (process.env.JEST_WORKER_ID !== undefined) return
+let alreadyShown = new Set()
 
-    console.warn('')
-    messages.forEach((message) => {
-      console.warn(chalk.bold.cyan('info'), '-', message)
-    })
-  },
-  warn(messages) {
-    if (process.env.JEST_WORKER_ID !== undefined) return
+function log(chalk, messages, key) {
+  if (process.env.JEST_WORKER_ID !== undefined) return
 
-    console.warn('')
-    messages.forEach((message) => {
-      console.warn(chalk.bold.yellow('warn'), '-', message)
-    })
-  },
-  risk(messages) {
-    if (process.env.JEST_WORKER_ID !== undefined) return
+  if (key && alreadyShown.has(key)) return
+  if (key) alreadyShown.add(key)
+
+  console.warn('')
+  messages.forEach((message) => console.warn(chalk, '-', message))
+}
 
-    console.warn('')
-    messages.forEach((message) => {
-      console.warn(chalk.bold.magenta('risk'), '-', message)
-    })
+export default {
+  info(key, messages) {
+    log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))
+  },
+  warn(key, messages) {
+    log(chalk.bold.yellow('warn'), ...(Array.isArray(key) ? [key] : [messages, key]))
+  },
+  risk(key, messages) {
+    log(chalk.bold.magenta('risk'), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
 }

src/util/resolveConfig.js

@@ -222,15 +222,11 @@ export default function resolveConfig(configs) {
   )
 }
 
-let warnedAbout = new Set()
 function normalizeConfig(config) {
-  if (!warnedAbout.has('purge-deprecation') && config.hasOwnProperty('purge')) {
-    log.warn([
-      'The `purge` option in your tailwind.config.js file has been deprecated.',
-      'Please rename this to `content` instead.',
-    ])
-    warnedAbout.add('purge-deprecation')
-  }
+  log.warn('purge-deprecation', [
+    'The `purge` option in your tailwind.config.js file has been deprecated.',
+    'Please rename this to `content` instead.',
+  ])
 
   config.content = {
     content: (() => {