From 15ae28a37edbdd6ed848eb7561d0991a29da0a80 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 19 Oct 2020 11:46:24 -0400
Subject: [PATCH] Fix issue where using `theme` with default line-heights did
 not resolve correctly

---
 __tests__/processPlugins.test.js     | 62 ++++++++++++++++++++++++++++
 __tests__/themeFunction.test.js      | 21 ++++++++++
 src/lib/evaluateTailwindFunctions.js |  3 ++
 src/util/processPlugins.js           | 11 ++++-
 4 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js
index 742acf992375..c6eaccbc621e 100644
--- a/__tests__/processPlugins.test.js
+++ b/__tests__/processPlugins.test.js
@@ -2050,3 +2050,65 @@ test('keyframes are not escaped', () => {
     }
   `)
 })
+
+test('font sizes are retrieved without default line-heights or letter-spacing using theme function', () => {
+  const { components } = processPlugins(
+    [
+      function({ addComponents, theme }) {
+        addComponents({
+          '.foo': {
+            fontSize: theme('fontSize.sm'),
+          },
+        })
+      },
+    ],
+    makeConfig({
+      theme: {
+        fontSize: {
+          sm: ['14px', '20px'],
+        },
+      },
+    })
+  )
+
+  expect(css(components)).toMatchCss(`
+    @layer components {
+      @variants {
+        .foo {
+          font-size: 14px;
+        }
+      }
+    }
+  `)
+})
+
+test('outlines are retrieved without outline-offset using theme function', () => {
+  const { components } = processPlugins(
+    [
+      function({ addComponents, theme }) {
+        addComponents({
+          '.foo': {
+            outline: theme('outline.black'),
+          },
+        })
+      },
+    ],
+    makeConfig({
+      theme: {
+        outline: {
+          black: ['2px dotted black', '4px'],
+        },
+      },
+    })
+  )
+
+  expect(css(components)).toMatchCss(`
+    @layer components {
+      @variants {
+        .foo {
+          outline: 2px dotted black;
+        }
+      }
+    }
+  `)
+})
diff --git a/__tests__/themeFunction.test.js b/__tests__/themeFunction.test.js
index d795a44ddd84..f52059f0e438 100644
--- a/__tests__/themeFunction.test.js
+++ b/__tests__/themeFunction.test.js
@@ -154,3 +154,24 @@ test('font sizes are retrieved without default line-heights or letter-spacing',
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('outlines are retrieved without default outline-offset', () => {
+  const input = `
+    .element { outline: theme('outline.black'); }
+  `
+
+  const output = `
+    .element { outline: 2px dotted black; }
+  `
+
+  return run(input, {
+    theme: {
+      outline: {
+        black: ['2px dotted black', '4px'],
+      },
+    },
+  }).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
index 80333456e79d..7546b572d428 100644
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/src/lib/evaluateTailwindFunctions.js
@@ -5,6 +5,9 @@ const themeTransforms = {
   fontSize(value) {
     return Array.isArray(value) ? value[0] : value
   },
+  outline(value) {
+    return Array.isArray(value) ? value[0] : value
+  },
 }
 
 function defaultTransform(value) {
diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js
index 1b33d5f343e5..3254a13e955a 100644
--- a/src/util/processPlugins.js
+++ b/src/util/processPlugins.js
@@ -54,7 +54,16 @@ export default function(plugins, config) {
     handler({
       postcss,
       config: getConfigValue,
-      theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
+      theme: (path, defaultValue) => {
+        const value = getConfigValue(`theme.${path}`, defaultValue)
+        const [rootPath] = _.toPath(path)
+
+        if (['fontSize', 'outline'].includes(rootPath)) {
+          return Array.isArray(value) ? value[0] : value
+        }
+
+        return value
+      },
       corePlugins: path => {
         if (Array.isArray(config.corePlugins)) {
           return config.corePlugins.includes(path)