Merge pull request tailwindlabs#214 from tailwindcss/reorder-border-widths

[0.2] Sort border width utilities from most general to most specific

Author: adamwathan

__tests__/fixtures/tailwind-output.css

@@ -1642,6 +1642,22 @@ button,
   border-width: 0;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-4 {
+  border-width: 4px;
+}
+
+.border-8 {
+  border-width: 8px;
+}
+
+.border {
+  border-width: 1px;
+}
+
 .border-t-0 {
   border-top-width: 0;
 }
@@ -1658,10 +1674,6 @@ button,
   border-left-width: 0;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-t-2 {
   border-top-width: 2px;
 }
@@ -1678,10 +1690,6 @@ button,
   border-left-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-t-4 {
   border-top-width: 4px;
 }
@@ -1698,10 +1706,6 @@ button,
   border-left-width: 4px;
 }
 
-.border-8 {
-  border-width: 8px;
-}
-
 .border-t-8 {
   border-top-width: 8px;
 }
@@ -1718,10 +1722,6 @@ button,
   border-left-width: 8px;
 }
 
-.border {
-  border-width: 1px;
-}
-
 .border-t {
   border-top-width: 1px;
 }
@@ -4762,6 +4762,22 @@ button,
     border-width: 0;
   }
 
+  .sm\:border-2 {
+    border-width: 2px;
+  }
+
+  .sm\:border-4 {
+    border-width: 4px;
+  }
+
+  .sm\:border-8 {
+    border-width: 8px;
+  }
+
+  .sm\:border {
+    border-width: 1px;
+  }
+
   .sm\:border-t-0 {
     border-top-width: 0;
   }
@@ -4778,10 +4794,6 @@ button,
     border-left-width: 0;
   }
 
-  .sm\:border-2 {
-    border-width: 2px;
-  }
-
   .sm\:border-t-2 {
     border-top-width: 2px;
   }
@@ -4798,10 +4810,6 @@ button,
     border-left-width: 2px;
   }
 
-  .sm\:border-4 {
-    border-width: 4px;
-  }
-
   .sm\:border-t-4 {
     border-top-width: 4px;
   }
@@ -4818,10 +4826,6 @@ button,
     border-left-width: 4px;
   }
 
-  .sm\:border-8 {
-    border-width: 8px;
-  }
-
   .sm\:border-t-8 {
     border-top-width: 8px;
   }
@@ -4838,10 +4842,6 @@ button,
     border-left-width: 8px;
   }
 
-  .sm\:border {
-    border-width: 1px;
-  }
-
   .sm\:border-t {
     border-top-width: 1px;
   }
@@ -7883,6 +7883,22 @@ button,
     border-width: 0;
   }
 
+  .md\:border-2 {
+    border-width: 2px;
+  }
+
+  .md\:border-4 {
+    border-width: 4px;
+  }
+
+  .md\:border-8 {
+    border-width: 8px;
+  }
+
+  .md\:border {
+    border-width: 1px;
+  }
+
   .md\:border-t-0 {
     border-top-width: 0;
   }
@@ -7899,10 +7915,6 @@ button,
     border-left-width: 0;
   }
 
-  .md\:border-2 {
-    border-width: 2px;
-  }
-
   .md\:border-t-2 {
     border-top-width: 2px;
   }
@@ -7919,10 +7931,6 @@ button,
     border-left-width: 2px;
   }
 
-  .md\:border-4 {
-    border-width: 4px;
-  }
-
   .md\:border-t-4 {
     border-top-width: 4px;
   }
@@ -7939,10 +7947,6 @@ button,
     border-left-width: 4px;
   }
 
-  .md\:border-8 {
-    border-width: 8px;
-  }
-
   .md\:border-t-8 {
     border-top-width: 8px;
   }
@@ -7959,10 +7963,6 @@ button,
     border-left-width: 8px;
   }
 
-  .md\:border {
-    border-width: 1px;
-  }
-
   .md\:border-t {
     border-top-width: 1px;
   }
@@ -11004,6 +11004,22 @@ button,
     border-width: 0;
   }
 
+  .lg\:border-2 {
+    border-width: 2px;
+  }
+
+  .lg\:border-4 {
+    border-width: 4px;
+  }
+
+  .lg\:border-8 {
+    border-width: 8px;
+  }
+
+  .lg\:border {
+    border-width: 1px;
+  }
+
   .lg\:border-t-0 {
     border-top-width: 0;
   }
@@ -11020,10 +11036,6 @@ button,
     border-left-width: 0;
   }
 
-  .lg\:border-2 {
-    border-width: 2px;
-  }
-
   .lg\:border-t-2 {
     border-top-width: 2px;
   }
@@ -11040,10 +11052,6 @@ button,
     border-left-width: 2px;
   }
 
-  .lg\:border-4 {
-    border-width: 4px;
-  }
-
   .lg\:border-t-4 {
     border-top-width: 4px;
   }
@@ -11060,10 +11068,6 @@ button,
     border-left-width: 4px;
   }
 
-  .lg\:border-8 {
-    border-width: 8px;
-  }
-
   .lg\:border-t-8 {
     border-top-width: 8px;
   }
@@ -11080,10 +11084,6 @@ button,
     border-left-width: 8px;
   }
 
-  .lg\:border {
-    border-width: 1px;
-  }
-
   .lg\:border-t {
     border-top-width: 1px;
   }
@@ -14125,6 +14125,22 @@ button,
     border-width: 0;
   }
 
+  .xl\:border-2 {
+    border-width: 2px;
+  }
+
+  .xl\:border-4 {
+    border-width: 4px;
+  }
+
+  .xl\:border-8 {
+    border-width: 8px;
+  }
+
+  .xl\:border {
+    border-width: 1px;
+  }
+
   .xl\:border-t-0 {
     border-top-width: 0;
   }
@@ -14141,10 +14157,6 @@ button,
     border-left-width: 0;
   }
 
-  .xl\:border-2 {
-    border-width: 2px;
-  }
-
   .xl\:border-t-2 {
     border-top-width: 2px;
   }
@@ -14161,10 +14173,6 @@ button,
     border-left-width: 2px;
   }
 
-  .xl\:border-4 {
-    border-width: 4px;
-  }
-
   .xl\:border-t-4 {
     border-top-width: 4px;
   }
@@ -14181,10 +14189,6 @@ button,
     border-left-width: 4px;
   }
 
-  .xl\:border-8 {
-    border-width: 8px;
-  }
-
   .xl\:border-t-8 {
     border-top-width: 8px;
   }
@@ -14201,10 +14205,6 @@ button,
     border-left-width: 8px;
   }
 
-  .xl\:border {
-    border-width: 1px;
-  }
-
   .xl\:border-t {
     border-top-width: 1px;
   }

src/generators/borderWidths.js

@@ -1,28 +1,38 @@
 import _ from 'lodash'
 import defineClasses from '../util/defineClasses'
 
-function sizedBorder(width, modifier) {
-  modifier = modifier === 'default' ? '' : `-${modifier}`
+function defineBorderWidthUtilities(borderWidths) {
+  const generators = [
+    (width, modifier) =>
+      defineClasses({
+        [`border${modifier}`]: {
+          'border-width': `${width}`,
+        },
+      }),
+    (width, modifier) =>
+      defineClasses({
+        [`border-t${modifier}`]: {
+          'border-top-width': `${width}`,
+        },
+        [`border-r${modifier}`]: {
+          'border-right-width': `${width}`,
+        },
+        [`border-b${modifier}`]: {
+          'border-bottom-width': `${width}`,
+        },
+        [`border-l${modifier}`]: {
+          'border-left-width': `${width}`,
+        },
+      }),
+  ]
 
-  return defineClasses({
-    [`border${modifier}`]: {
-      'border-width': `${width}`,
-    },
-    [`border-t${modifier}`]: {
-      'border-top-width': `${width}`,
-    },
-    [`border-r${modifier}`]: {
-      'border-right-width': `${width}`,
-    },
-    [`border-b${modifier}`]: {
-      'border-bottom-width': `${width}`,
-    },
-    [`border-l${modifier}`]: {
-      'border-left-width': `${width}`,
-    },
+  return _.flatMap(generators, generator => {
+    return _.flatMap(borderWidths, (width, modifier) => {
+      return generator(width, modifier === 'default' ? '' : `-${modifier}`)
+    })
   })
 }
 
 module.exports = function({ borderWidths }) {
-  return _.flatMap(borderWidths, sizedBorder)
+  return defineBorderWidthUtilities(borderWidths)
 }