Support arbitrary values + calc + theme with quotes

ben-rogerson · Apr 25, 2022 · 4a0877c · 4a0877c
1 parent 95b6a90
commit 4a0877c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/__fixtures__/utiltiesSizing/height.js b/__fixtures__/utiltiesSizing/height.js
@@ -64,3 +64,6 @@ tw`h-[32rem]`
 tw`h-[3.23rem]`
 tw`h-[calc(100%+1rem)]`
 tw`h-[var(--height)]`
+
+tw`h-[calc(100%-theme('spacing.16'))]`
+tw`h-[calc(100%-theme("spacing.16"))]`
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -31271,6 +31271,9 @@ tw\`h-[3.23rem]\`
 tw\`h-[calc(100%+1rem)]\`
 tw\`h-[var(--height)]\`
 
+tw\`h-[calc(100%-theme('spacing.16'))]\`
+tw\`h-[calc(100%-theme("spacing.16"))]\`
+
       ↓ ↓ ↓ ↓ ↓ ↓
 
 // https://tailwindcss.com/docs/height
@@ -31512,6 +31515,12 @@ tw\`h-[var(--height)]\`
 ;({
   height: 'var(--height)',
 })
+;({
+  height: 'calc(100%-4rem)',
+})
+;({
+  height: 'calc(100%-4rem)',
+})
 
 
 `;

diff --git a/src/handlers/arbitraryCss.js b/src/handlers/arbitraryCss.js
@@ -128,17 +128,18 @@ const getArbitraryStyle = (
   return coercedConfigResult
 }
 
-// Arbitrary values with a theme value, eg: tw`text - [theme(colors.red.500)]`
+// Arbitrary values with a theme value, eg: tw`h-[calc(100%-theme('spacing.16'))]`
 const replaceThemeValue = (value, { theme }) => {
-  const themeMatch = value.match(/theme\('?([^']+)'?\)/)
-  if (!themeMatch) return value
+  const match = value.match(/theme\(["']?([^"']+)["']?\)/)
+  if (!match) return value
 
-  const themeValue = theme(themeMatch[1])
+  const themeFunction = match[0]
+  const themeValue = theme(match[1])
   throwIf(!themeValue, () =>
-    logGeneralError(`No theme value found for “${themeMatch[1]}”`)
+    logGeneralError(`No theme value found for “${match[1]}”`)
   )
 
-  return themeValue
+  return value.replace(themeFunction, themeValue)
 }
 
 export default props => {