Rename box-sizing utilities

Author: adamwathan

__tests__/fixtures/tailwind-output-important.css

@@ -3339,6 +3339,14 @@ video {
   border-left-width: 1px !important;
 }
 
+.box-border {
+  box-sizing: border !important;
+}
+
+.box-content {
+  box-sizing: content !important;
+}
+
 .cursor-auto {
   cursor: auto !important;
 }
@@ -6817,14 +6825,6 @@ video {
   box-shadow: none !important;
 }
 
-.box-sizing-border {
-  box-sizing: border !important;
-}
-
-.box-sizing-content {
-  box-sizing: content !important;
-}
-
 .fill-current {
   fill: currentColor !important;
 }
@@ -12661,6 +12661,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .sm\:box-border {
+    box-sizing: border !important;
+  }
+
+  .sm\:box-content {
+    box-sizing: content !important;
+  }
+
   .sm\:cursor-auto {
     cursor: auto !important;
   }
@@ -16139,14 +16147,6 @@ video {
     box-shadow: none !important;
   }
 
-  .sm\:box-sizing-border {
-    box-sizing: border !important;
-  }
-
-  .sm\:box-sizing-content {
-    box-sizing: content !important;
-  }
-
   .sm\:fill-current {
     fill: currentColor !important;
   }
@@ -21984,6 +21984,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .md\:box-border {
+    box-sizing: border !important;
+  }
+
+  .md\:box-content {
+    box-sizing: content !important;
+  }
+
   .md\:cursor-auto {
     cursor: auto !important;
   }
@@ -25462,14 +25470,6 @@ video {
     box-shadow: none !important;
   }
 
-  .md\:box-sizing-border {
-    box-sizing: border !important;
-  }
-
-  .md\:box-sizing-content {
-    box-sizing: content !important;
-  }
-
   .md\:fill-current {
     fill: currentColor !important;
   }
@@ -31307,6 +31307,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .lg\:box-border {
+    box-sizing: border !important;
+  }
+
+  .lg\:box-content {
+    box-sizing: content !important;
+  }
+
   .lg\:cursor-auto {
     cursor: auto !important;
   }
@@ -34785,14 +34793,6 @@ video {
     box-shadow: none !important;
   }
 
-  .lg\:box-sizing-border {
-    box-sizing: border !important;
-  }
-
-  .lg\:box-sizing-content {
-    box-sizing: content !important;
-  }
-
   .lg\:fill-current {
     fill: currentColor !important;
   }
@@ -40630,6 +40630,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .xl\:box-border {
+    box-sizing: border !important;
+  }
+
+  .xl\:box-content {
+    box-sizing: content !important;
+  }
+
   .xl\:cursor-auto {
     cursor: auto !important;
   }
@@ -44108,14 +44116,6 @@ video {
     box-shadow: none !important;
   }
 
-  .xl\:box-sizing-border {
-    box-sizing: border !important;
-  }
-
-  .xl\:box-sizing-content {
-    box-sizing: content !important;
-  }
-
   .xl\:fill-current {
     fill: currentColor !important;
   }

__tests__/fixtures/tailwind-output.css

@@ -3339,6 +3339,14 @@ video {
   border-left-width: 1px;
 }
 
+.box-border {
+  box-sizing: border;
+}
+
+.box-content {
+  box-sizing: content;
+}
+
 .cursor-auto {
   cursor: auto;
 }
@@ -6817,14 +6825,6 @@ video {
   box-shadow: none;
 }
 
-.box-sizing-border {
-  box-sizing: border;
-}
-
-.box-sizing-content {
-  box-sizing: content;
-}
-
 .fill-current {
   fill: currentColor;
 }
@@ -12661,6 +12661,14 @@ video {
     border-left-width: 1px;
   }
 
+  .sm\:box-border {
+    box-sizing: border;
+  }
+
+  .sm\:box-content {
+    box-sizing: content;
+  }
+
   .sm\:cursor-auto {
     cursor: auto;
   }
@@ -16139,14 +16147,6 @@ video {
     box-shadow: none;
   }
 
-  .sm\:box-sizing-border {
-    box-sizing: border;
-  }
-
-  .sm\:box-sizing-content {
-    box-sizing: content;
-  }
-
   .sm\:fill-current {
     fill: currentColor;
   }
@@ -21984,6 +21984,14 @@ video {
     border-left-width: 1px;
   }
 
+  .md\:box-border {
+    box-sizing: border;
+  }
+
+  .md\:box-content {
+    box-sizing: content;
+  }
+
   .md\:cursor-auto {
     cursor: auto;
   }
@@ -25462,14 +25470,6 @@ video {
     box-shadow: none;
   }
 
-  .md\:box-sizing-border {
-    box-sizing: border;
-  }
-
-  .md\:box-sizing-content {
-    box-sizing: content;
-  }
-
   .md\:fill-current {
     fill: currentColor;
   }
@@ -31307,6 +31307,14 @@ video {
     border-left-width: 1px;
   }
 
+  .lg\:box-border {
+    box-sizing: border;
+  }
+
+  .lg\:box-content {
+    box-sizing: content;
+  }
+
   .lg\:cursor-auto {
     cursor: auto;
   }
@@ -34785,14 +34793,6 @@ video {
     box-shadow: none;
   }
 
-  .lg\:box-sizing-border {
-    box-sizing: border;
-  }
-
-  .lg\:box-sizing-content {
-    box-sizing: content;
-  }
-
   .lg\:fill-current {
     fill: currentColor;
   }
@@ -40630,6 +40630,14 @@ video {
     border-left-width: 1px;
   }
 
+  .xl\:box-border {
+    box-sizing: border;
+  }
+
+  .xl\:box-content {
+    box-sizing: content;
+  }
+
   .xl\:cursor-auto {
     cursor: auto;
   }
@@ -44108,14 +44116,6 @@ video {
     box-shadow: none;
   }
 
-  .xl\:box-sizing-border {
-    box-sizing: border;
-  }
-
-  .xl\:box-sizing-content {
-    box-sizing: content;
-  }
-
   .xl\:fill-current {
     fill: currentColor;
   }

src/corePlugins.js

@@ -12,6 +12,7 @@ import borderColor from './plugins/borderColor'
 import borderRadius from './plugins/borderRadius'
 import borderStyle from './plugins/borderStyle'
 import borderWidth from './plugins/borderWidth'
+import boxSizing from './plugins/boxSizing'
 import cursor from './plugins/cursor'
 import display from './plugins/display'
 import flexDirection from './plugins/flexDirection'
@@ -48,7 +49,6 @@ import position from './plugins/position'
 import inset from './plugins/inset'
 import resize from './plugins/resize'
 import boxShadow from './plugins/boxShadow'
-import boxSizing from './plugins/boxSizing'
 import fill from './plugins/fill'
 import stroke from './plugins/stroke'
 import tableLayout from './plugins/tableLayout'
@@ -91,6 +91,7 @@ export default function({ corePlugins: corePluginConfig }) {
     borderRadius,
     borderStyle,
     borderWidth,
+    boxSizing,
     cursor,
     display,
     flexDirection,
@@ -127,7 +128,6 @@ export default function({ corePlugins: corePluginConfig }) {
     inset,
     resize,
     boxShadow,
-    boxSizing,
     fill,
     stroke,
     tableLayout,

src/plugins/boxSizing.js

@@ -2,8 +2,8 @@ export default function() {
   return function({ addUtilities, variants }) {
     addUtilities(
       {
-        '.box-sizing-border': { 'box-sizing': 'border' },
-        '.box-sizing-content': { 'box-sizing': 'content' },
+        '.box-border': { 'box-sizing': 'border' },
+        '.box-content': { 'box-sizing': 'content' },
       },
       variants('boxSizing')
     )