From 6a45586ea2d05bb1cc62405344308cf08e0c3a6c Mon Sep 17 00:00:00 2001
From: Daron Spence <daronspence@gmail.com>
Date: Wed, 17 Mar 2021 21:19:17 -0500
Subject: [PATCH] arbitrary margin value proof of concept

---
 src/corePlugins/margin.js           | 4 ++--
 tests/08-arbitrary-values.test.css  | 3 +++
 tests/08-arbitrary-values.test.html | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/corePlugins/margin.js b/src/corePlugins/margin.js
index 6c8a64a..c9429a1 100644
--- a/src/corePlugins/margin.js
+++ b/src/corePlugins/margin.js
@@ -1,4 +1,4 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asLength, nameClass, asValue } = require('../pluginUtils')
 
 module.exports = function ({ matchUtilities, jit: { theme } }) {
   matchUtilities({
@@ -34,7 +34,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
   })
   matchUtilities({
     mt: (modifier, { theme, candidate }) => {
-      let value = asLength(modifier, theme['margin'])
+      let value = asValue(modifier, theme['margin'])
 
       if (value === undefined) {
         return []
diff --git a/tests/08-arbitrary-values.test.css b/tests/08-arbitrary-values.test.css
index 29f73b4..1c5ee58 100644
--- a/tests/08-arbitrary-values.test.css
+++ b/tests/08-arbitrary-values.test.css
@@ -7,6 +7,9 @@
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
 }
+.mt-\[clamp\(30px\2c 100px\)\] {
+	margin-top: clamp(30px, 100px);
+}
 .w-\[3\.23rem\] {
   width: 3.23rem;
 }
diff --git a/tests/08-arbitrary-values.test.html b/tests/08-arbitrary-values.test.html
index f414c70..3188f43 100644
--- a/tests/08-arbitrary-values.test.html
+++ b/tests/08-arbitrary-values.test.html
@@ -22,5 +22,6 @@
     <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
     <div class="text-[2.23rem]"></div>
     <div class="duration-[2s]"></div>
+    <div class="mt-[clamp(30px,100px)]"></div>
   </body>
 </html>