Support arbitrary color with opacity modifier (#4723)

Author: adamwathan

src/lib/expandTailwindAtRules.js

@@ -13,7 +13,7 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
-  /([^<>"'`\s]*\[[^"'`\s]+\])/.source, // `fill-[#bada55]`
+  /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
   /([^<>"'`\s]*[^"'`\s:])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`].join('|')
 ].join('|')
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')

src/util/pluginUtils.js

@@ -207,16 +207,23 @@ export function asColor(modifier, lookup = {}, tailwindConfig = {}) {
 
   let [color, alpha] = splitAlpha(modifier)
 
-  if (lookup[color] !== undefined) {
+  if (alpha !== undefined) {
+    let normalizedColor =
+      lookup[color] ?? (isArbitraryValue(color) ? color.slice(1, -1) : undefined)
+
+    if (normalizedColor === undefined) {
+      return undefined
+    }
+
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(lookup[color], alpha.slice(1, -1))
+      return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }
 
     if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
       return undefined
     }
 
-    return withAlphaValue(lookup[color], tailwindConfig.theme.opacity[alpha])
+    return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
   }
 
   return asValue(modifier, lookup, { validate: validateColor })

tests/color-opacity-modifiers.test.js

@@ -60,6 +60,71 @@ test('missing alpha generates nothing', async () => {
   })
 })
 
+test('arbitrary color with opacity from scale', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: 'bg-[wheat]/50',
+      },
+    ],
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .bg-\\[wheat\\]\\/50 {
+        background-color: rgb(245 222 179 / 0.5);
+      }
+    `)
+  })
+})
+
+test('arbitrary color with arbitrary opacity', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: 'bg-[#bada55]/[0.2]',
+      },
+    ],
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .bg-\\[\\#bada55\\]\\/\\[0\\.2\\] {
+        background-color: rgb(186 218 85 / 0.2);
+      }
+    `)
+  })
+})
+
+test('undefined theme color with opacity from scale', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: 'bg-garbage/50',
+      },
+    ],
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `@tailwind utilities`
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(``)
+  })
+})
+
 test('values not in the opacity config are ignored', async () => {
   let config = {
     content: [{ raw: html`<div class="bg-red-500/29"></div>` }],