Add support for arbitrary inset

Author: adamwathan

src/corePlugins/inset.js

@@ -1,9 +1,9 @@
-const { asLength, nameClass } = require('../pluginUtils')
+const { asValue, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ matchUtilities }) {
   matchUtilities({
     inset: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []
@@ -16,7 +16,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
   })
   matchUtilities({
     'inset-x': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []
@@ -25,7 +25,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('inset-x', modifier)]: { left: value, right: value } }
     },
     'inset-y': (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []
@@ -36,7 +36,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
   })
   matchUtilities({
     top: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []
@@ -45,7 +45,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('top', modifier)]: { top: value } }
     },
     right: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []
@@ -54,7 +54,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('right', modifier)]: { right: value } }
     },
     bottom: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []
@@ -63,7 +63,7 @@ module.exports = function ({ matchUtilities, jit: { theme } }) {
       return { [nameClass('bottom', modifier)]: { bottom: value } }
     },
     left: (modifier, { theme }) => {
-      let value = asLength(modifier, theme['inset'])
+      let value = asValue(modifier, theme['inset'])
 
       if (value === undefined) {
         return []

tests/08-arbitrary-values.test.css

@@ -7,6 +7,12 @@
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
 }
+.inset-\[11px\] {
+  top: 11px;
+  right: 11px;
+  bottom: 11px;
+  left: 11px;
+}
 .mt-\[clamp\(30px\2c 100px\)\] {
   margin-top: clamp(30px, 100px);
 }

tests/08-arbitrary-values.test.html

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