Support arbitrary values for padding

Author: adamwathan

src/corePlugins/padding.js

@@ -1,9 +1,9 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
 module.exports = function ({ matchUtilities, jit: { theme } }) {
   matchUtilities({
     p: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []
@@ -14,7 +14,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
   })
   matchUtilities({
     px: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []
@@ -23,7 +23,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('px', modifier)]: { 'padding-left': value, 'padding-right': value } }
     },
     py: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []
@@ -34,7 +34,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
   })
   matchUtilities({
     pt: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []
@@ -43,7 +43,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('pt', modifier)]: { 'padding-top': value } }
     },
     pr: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []
@@ -52,7 +52,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('pr', modifier)]: { 'padding-right': value } }
     },
     pb: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []
@@ -61,7 +61,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('pb', modifier)]: { 'padding-bottom': value } }
     },
     pl: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['padding'])
+      let value = asValue(modifier, theme['padding'])
 
       if (value === undefined) {
         return []

tests/08-arbitrary-values.test.css

@@ -76,6 +76,9 @@
 .bg-opacity-\[0\.11\] {
   --tw-bg-opacity: 0.11;
 }
+.p-\[var\(--app-padding\)\] {
+  padding: var(--app-padding);
+}
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }

tests/08-arbitrary-values.test.html

@@ -25,5 +25,6 @@
     <div class="duration-[2s]"></div>
     <div class="mt-[clamp(30px,100px)]"></div>
     <div class="duration-[var(--app-duration)]"></div>
+    <div class="p-[var(--app-padding)]"></div>
   </body>
 </html>