Switch to inline theme values in theme fn in config

tailwindlabs · May 25, 2022 · 7eb6c75 · 7eb6c75
1 parent 17fb20d
commit 7eb6c75
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 32 deletions.
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
@@ -165,44 +165,75 @@ function mergeExtensions({ extend, ...theme }) {
   })
 }
 
+/**
+ *
+ * @param {string} key
+ * @return {Iterable<string[] & {alpha: string | undefined}>}
+ */
+function* toPaths(key) {
+  let path = toPath(key)
+
+  if (path.length === 0) {
+    return
+  }
+
+  yield path
+
+  if (Array.isArray(key)) {
+    return
+  }
+
+  let pattern = /^(.*?)\s*\/\s*([^/]+)$/
+  let matches = key.match(pattern)
+
+  if (matches !== null) {
+    let [, prefix, alpha] = matches
+
+    let newPath = toPath(prefix)
+    newPath.alpha = alpha
+
+    yield newPath
+  }
+}
+
 function resolveFunctionKeys(object) {
+  // theme('colors.red.500 / 0.5') -> ['colors', 'red', '500 / 0', '5]
+
   const resolvePath = (key, defaultValue) => {
-    const path = toPath(key)
+    for (const path of toPaths(key)) {
+      let index = 0
+      let val = object
 
-    let index = 0
-    let val = object
+      while (val !== undefined && val !== null && index < path.length) {
+        val = val[path[index++]]
 
-    while (val !== undefined && val !== null && index < path.length) {
-      val = val[path[index++]]
-      val = isFunction(val) ? val(resolvePath, configUtils) : val
-    }
+        let shouldResolveAsFn =
+          isFunction(val) && (path.alpha === undefined || index < path.length - 1)
 
-    if (val === undefined) {
-      return defaultValue
-    }
+        val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
+      }
+
+      if (val !== undefined) {
+        if (path.alpha !== undefined) {
+          return withAlphaValue(val, path.alpha)
+        }
+
+        if (isPlainObject(val)) {
+          return cloneDeep(val)
+        }
 
-    if (isPlainObject(val)) {
-      return cloneDeep(val)
+        return val
+      }
     }
 
-    return val
+    return defaultValue
   }
 
+  // colors.red.500/50
+
   Object.assign(resolvePath, {
     theme: resolvePath,
     ...configUtils,
-    withAlpha(key, opacityValue) {
-      // TODO: This is kinda iffy but it works
-      const path = toPath(key)
-      const lastSegment = path.pop()
-      let value = resolvePath(path)[lastSegment]
-
-      if (value === undefined) {
-        return value
-      }
-
-      return withAlphaValue(value, opacityValue)
-    },
   })
 
   return Object.keys(object).reduce((resolved, key) => {

diff --git a/tests/opacity.test.js b/tests/opacity.test.js
@@ -446,7 +446,7 @@ test('Theme function in JS can apply alpha values to colors (1)', () => {
       colors: { blue: { 500: '#3b82f6' } },
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', '50%'),
+          foo: theme('colors.blue.500 / 50%'),
         }),
       },
     },
@@ -474,7 +474,7 @@ test('TTheme function in JS can apply alpha values to colors (2)', () => {
       colors: { blue: { 500: '#3b82f6' } },
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', '0.5'),
+          foo: theme('colors.blue.500 / 0.5'),
         }),
       },
     },
@@ -502,7 +502,7 @@ test('TTheme function in JS can apply alpha values to colors (3)', () => {
       colors: { blue: { 500: '#3b82f6' } },
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', 'var(--my-alpha)'),
+          foo: theme('colors.blue.500 / var(--my-alpha)'),
         }),
       },
     },
@@ -530,7 +530,7 @@ test('TTheme function in JS can apply alpha values to colors (4)', () => {
       colors: { blue: { 500: 'hsl(217, 91%, 60%)' } },
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', '50%'),
+          foo: theme('colors.blue.500 / 50%'),
         }),
       },
     },
@@ -558,7 +558,7 @@ test('TTheme function in JS can apply alpha values to colors (5)', () => {
       colors: { blue: { 500: 'hsl(217, 91%, 60%)' } },
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', '0.5'),
+          foo: theme('colors.blue.500 / 0.5'),
         }),
       },
     },
@@ -586,7 +586,7 @@ test('TTheme function in JS can apply alpha values to colors (6)', () => {
       colors: { blue: { 500: 'hsl(217, 91%, 60%)' } },
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', 'var(--my-alpha)'),
+          foo: theme('colors.blue.500 / var(--my-alpha)'),
         }),
       },
     },
@@ -618,7 +618,7 @@ test('TTheme function in JS can apply alpha values to colors (7)', () => {
       }),
       extend: {
         textColor: ({ theme }) => ({
-          foo: theme.withAlpha('colors.blue.500', 'var(--my-alpha)'),
+          foo: theme('colors.blue.500 / var(--my-alpha)'),
         }),
       },
     },