From 672eb83f561108e692bcbece836f1823b22d4021 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 25 May 2022 13:47:49 -0400
Subject: [PATCH] Add test case

And fix typos that were definitely not there
---
 tests/opacity.test.js | 44 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/tests/opacity.test.js b/tests/opacity.test.js
index 9fd36347ffa5..18b43ec01a00 100644
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -456,7 +456,7 @@ test('Theme function in JS can apply alpha values to colors (1)', () => {
   })
 })
 
-test('TTheme function in JS can apply alpha values to colors (2)', () => {
+test('Theme function in JS can apply alpha values to colors (2)', () => {
   let input = css`
     @tailwind utilities;
   `
@@ -484,7 +484,7 @@ test('TTheme function in JS can apply alpha values to colors (2)', () => {
   })
 })
 
-test('TTheme function in JS can apply alpha values to colors (3)', () => {
+test('Theme function in JS can apply alpha values to colors (3)', () => {
   let input = css`
     @tailwind utilities;
   `
@@ -512,7 +512,7 @@ test('TTheme function in JS can apply alpha values to colors (3)', () => {
   })
 })
 
-test('TTheme function in JS can apply alpha values to colors (4)', () => {
+test('Theme function in JS can apply alpha values to colors (4)', () => {
   let input = css`
     @tailwind utilities;
   `
@@ -540,7 +540,7 @@ test('TTheme function in JS can apply alpha values to colors (4)', () => {
   })
 })
 
-test('TTheme function in JS can apply alpha values to colors (5)', () => {
+test('Theme function in JS can apply alpha values to colors (5)', () => {
   let input = css`
     @tailwind utilities;
   `
@@ -568,7 +568,7 @@ test('TTheme function in JS can apply alpha values to colors (5)', () => {
   })
 })
 
-test('TTheme function in JS can apply alpha values to colors (6)', () => {
+test('Theme function in JS can apply alpha values to colors (6)', () => {
   let input = css`
     @tailwind utilities;
   `
@@ -596,7 +596,7 @@ test('TTheme function in JS can apply alpha values to colors (6)', () => {
   })
 })
 
-test('TTheme function in JS can apply alpha values to colors (7)', () => {
+test('Theme function in JS can apply alpha values to colors (7)', () => {
   let input = css`
     @tailwind utilities;
   `
@@ -627,3 +627,35 @@ test('TTheme function in JS can apply alpha values to colors (7)', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('Theme function prefers existing values in config', () => {
+  let input = css`
+    @tailwind utilities;
+  `
+
+  let output = css`
+    .text-foo {
+      color: purple;
+    }
+  `
+
+  return run(input, {
+    content: [{ raw: html`text-foo` }],
+    corePlugins: { textOpacity: false },
+    theme: {
+      colors: {
+        blue: {
+          '500 / 50%': 'purple',
+        },
+      },
+      extend: {
+        textColor: ({ theme }) => ({
+          foo: theme('colors.blue.500 / 50%'),
+        }),
+      },
+    },
+  }).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})