Fix issue where using theme with default line-heights did not resol…

…ve correctly
tailwindlabs · Oct 19, 2020 · 15ae28a · 15ae28a
1 parent a2c6dcc
commit 15ae28a
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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)