Split pin utilities into inset plugin

defaultConfig.stub.js

@@ -49,6 +49,7 @@ module.exports = {
     padding: ['responsive'],
     pointerEvents: ['responsive'],
     position: ['responsive'],
+    inset: ['responsive'],
     resize: ['responsive'],
     boxShadow: ['responsive', 'hover', 'focus'],
     fill: [],

src/corePlugins.js

@@ -42,6 +42,7 @@ import overflow from './plugins/overflow'
 import padding from './plugins/padding'
 import pointerEvents from './plugins/pointerEvents'
 import position from './plugins/position'
+import inset from './plugins/inset'
 import resize from './plugins/resize'
 import boxShadow from './plugins/boxShadow'
 import fill from './plugins/fill'
@@ -110,6 +111,7 @@ export default function({ corePlugins: corePluginConfig }) {
     padding,
     pointerEvents,
     position,
+    inset,
     resize,
     boxShadow,
     fill,

src/plugins/inset.js

@@ -0,0 +1,27 @@
+export default function() {
+  return function({ addUtilities, config }) {
+    addUtilities(
+      {
+        '.pin-none': {
+          top: 'auto',
+          right: 'auto',
+          bottom: 'auto',
+          left: 'auto',
+        },
+        '.pin': {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        },
+        '.pin-y': { top: 0, bottom: 0 },
+        '.pin-x': { right: 0, left: 0 },
+        '.pin-t': { top: 0 },
+        '.pin-r': { right: 0 },
+        '.pin-b': { bottom: 0 },
+        '.pin-l': { left: 0 },
+      },
+      config('variants.inset')
+    )
+  }
+}

src/plugins/position.js

@@ -7,24 +7,6 @@ export default function() {
         '.absolute': { position: 'absolute' },
         '.relative': { position: 'relative' },
         '.sticky': { position: 'sticky' },
-        '.pin-none': {
-          top: 'auto',
-          right: 'auto',
-          bottom: 'auto',
-          left: 'auto',
-        },
-        '.pin': {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-        },
-        '.pin-y': { top: 0, bottom: 0 },
-        '.pin-x': { right: 0, left: 0 },
-        '.pin-t': { top: 0 },
-        '.pin-r': { right: 0 },
-        '.pin-b': { bottom: 0 },
-        '.pin-l': { left: 0 },
       },
       config('variants.position')
     )