Add test case

And fix typos that were definitely not there

Author: thecrypticace

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)
+  })
+})