wip

src/lib/evaluateTailwindFunctions.js

@@ -7,6 +7,7 @@ import buildMediaQuery from '../util/buildMediaQuery'
 import { toPath } from '../util/toPath'
 import { withAlphaValue } from '../util/withAlphaVariable'
 import { parseColorFormat } from '../util/pluginUtils'
+import log from '../util/log'
 
 function isObject(input) {
   return typeof input === 'object' && input !== null
@@ -209,14 +210,21 @@ export default function (context) {
 
       if (!isValid) {
         let parentNode = node.parent
-        let wasGenerated = parentNode?.raws.tailwind !== null
+        let candidate = parentNode?.raws.tailwind?.candidate
 
-        if (parentNode && wasGenerated) {
+        if (parentNode && candidate !== undefined) {
           // Remove this utility from any caches
           context.markInvalidUtilityNode(parentNode)
 
           // Remove the CSS node from the markup
           parentNode.remove()
+
+          // Show a warning
+          log.warn('invalid-theme-fn-in-candidate', [
+            `The utility \`${candidate}\` contains an invalid theme value and was not generated.`,
+          ])
+
+          return
         }
 
         throw node.error(error)

tests/evaluateTailwindFunctions.test.js

@@ -1239,6 +1239,14 @@ describe('context dependent', () => {
   beforeEach(() => fs.promises.writeFile(configPath, `module.exports = ${JSON.stringify(config)};`))
   afterEach(() => fs.promises.unlink(configPath))
 
+  let warn
+
+  beforeEach(() => {
+    warn = jest.spyOn(require('../src/util/log').default, 'warn')
+  })
+
+  afterEach(() => warn.mockClear())
+
   it('should not generate when theme fn doesnt resolve', async () => {
     await fs.promises.writeFile(
       filePath,
@@ -1250,18 +1258,30 @@ describe('context dependent', () => {
 
     // TODO: We need a way to reuse the context in our test suite without requiring writing to files
     // It should be an explicit thing tho — like we create a context and pass it in or something
-    let result = runFull('@tailwind utilities', configPath)
+    let result = await runFull('@tailwind utilities', configPath)
 
-    // 1. On first run it should report an error so the user knows something is wrong
-    await expect(result.catch((err) => err.toString())).resolves.toMatch(/does not exist/)
+    // 1. On first run it should work because it's been removed from the class cache
+    expect(result.css).toMatchCss(css`
+      .underline {
+        text-decoration-line: underline;
+      }
+    `)
 
-    // 2. The second run should work fine because it's been removed from the class cache
+    // 2. But we get a warning in the console
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(warn.mock.calls.map((x) => x[0])).toEqual(['invalid-theme-fn-in-candidate'])
+
+    // 3. The second run should work fine because it's been removed from the class cache
     result = await runFull('@tailwind utilities', configPath)
 
     expect(result.css).toMatchCss(css`
       .underline {
         text-decoration-line: underline;
       }
     `)
+
+    // 4. But we've not received any further logs about it
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(warn.mock.calls.map((x) => x[0])).toEqual(['invalid-theme-fn-in-candidate'])
   })
 })