Rename hairline and thin font weights to thin and extralight (#2333)

* Add standardFontWeights flag for update thin/extralight font weight names

* Update changelog

Author: adamwathan

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - Fix [issue](https://github.com/tailwindlabs/tailwindcss/issues/2258) where inserting extra PurgeCSS control comments could break integrated PurgeCSS support
+- Rename `font-hairline` and `font-thin` to `font-thin` and `font-extralight` behind `standardFontWeights` flag ([#2333](https://github.com/tailwindlabs/tailwindcss/pull/2333))
 
 ## [1.8.3] - 2020-09-05
 

__tests__/fixtures/tailwind-output-flagged.css

@@ -20817,11 +20817,11 @@ video {
   font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.font-hairline {
+.font-thin {
   font-weight: 100;
 }
 
-.font-thin {
+.font-extralight {
   font-weight: 200;
 }
 
@@ -20853,11 +20853,11 @@ video {
   font-weight: 900;
 }
 
-.hover\:font-hairline:hover {
+.hover\:font-thin:hover {
   font-weight: 100;
 }
 
-.hover\:font-thin:hover {
+.hover\:font-extralight:hover {
   font-weight: 200;
 }
 
@@ -20889,11 +20889,11 @@ video {
   font-weight: 900;
 }
 
-.focus\:font-hairline:focus {
+.focus\:font-thin:focus {
   font-weight: 100;
 }
 
-.focus\:font-thin:focus {
+.focus\:font-extralight:focus {
   font-weight: 200;
 }
 
@@ -62315,11 +62315,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .sm\:font-hairline {
+  .sm\:font-thin {
     font-weight: 100;
   }
 
-  .sm\:font-thin {
+  .sm\:font-extralight {
     font-weight: 200;
   }
 
@@ -62351,11 +62351,11 @@ video {
     font-weight: 900;
   }
 
-  .sm\:hover\:font-hairline:hover {
+  .sm\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .sm\:hover\:font-thin:hover {
+  .sm\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -62387,11 +62387,11 @@ video {
     font-weight: 900;
   }
 
-  .sm\:focus\:font-hairline:focus {
+  .sm\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .sm\:focus\:font-thin:focus {
+  .sm\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 
@@ -103783,11 +103783,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .md\:font-hairline {
+  .md\:font-thin {
     font-weight: 100;
   }
 
-  .md\:font-thin {
+  .md\:font-extralight {
     font-weight: 200;
   }
 
@@ -103819,11 +103819,11 @@ video {
     font-weight: 900;
   }
 
-  .md\:hover\:font-hairline:hover {
+  .md\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .md\:hover\:font-thin:hover {
+  .md\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -103855,11 +103855,11 @@ video {
     font-weight: 900;
   }
 
-  .md\:focus\:font-hairline:focus {
+  .md\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .md\:focus\:font-thin:focus {
+  .md\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 
@@ -145251,11 +145251,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .lg\:font-hairline {
+  .lg\:font-thin {
     font-weight: 100;
   }
 
-  .lg\:font-thin {
+  .lg\:font-extralight {
     font-weight: 200;
   }
 
@@ -145287,11 +145287,11 @@ video {
     font-weight: 900;
   }
 
-  .lg\:hover\:font-hairline:hover {
+  .lg\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .lg\:hover\:font-thin:hover {
+  .lg\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -145323,11 +145323,11 @@ video {
     font-weight: 900;
   }
 
-  .lg\:focus\:font-hairline:focus {
+  .lg\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .lg\:focus\:font-thin:focus {
+  .lg\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 
@@ -186719,11 +186719,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .xl\:font-hairline {
+  .xl\:font-thin {
     font-weight: 100;
   }
 
-  .xl\:font-thin {
+  .xl\:font-extralight {
     font-weight: 200;
   }
 
@@ -186755,11 +186755,11 @@ video {
     font-weight: 900;
   }
 
-  .xl\:hover\:font-hairline:hover {
+  .xl\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .xl\:hover\:font-thin:hover {
+  .xl\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -186791,11 +186791,11 @@ video {
     font-weight: 900;
   }
 
-  .xl\:focus\:font-hairline:focus {
+  .xl\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .xl\:focus\:font-thin:focus {
+  .xl\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 

src/featureFlags.js

@@ -3,7 +3,7 @@ import chalk from 'chalk'
 import log from './util/log'
 
 const featureFlags = {
-  future: ['removeDeprecatedGapUtilities', 'purgeLayersByDefault'],
+  future: ['removeDeprecatedGapUtilities', 'purgeLayersByDefault', 'standardFontWeights'],
   experimental: [
     'uniformColorPalette',
     'extendedSpacingScale',

src/flagged/standardFontWeights.js

@@ -0,0 +1,15 @@
+export default {
+  theme: {
+    fontWeight: {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+  },
+}

src/index.js

@@ -18,6 +18,7 @@ import extendedSpacingScale from './flagged/extendedSpacingScale.js'
 import defaultLineHeights from './flagged/defaultLineHeights.js'
 import extendedFontSizeScale from './flagged/extendedFontSizeScale.js'
 import darkModeVariant from './flagged/darkModeVariant.js'
+import standardFontWeights from './flagged/standardFontWeights'
 
 function getAllConfigs(config) {
   const configs = [defaultConfig]
@@ -38,6 +39,10 @@ function getAllConfigs(config) {
     configs.unshift(extendedFontSizeScale)
   }
 
+  if (flagEnabled(config, 'standardFontWeights')) {
+    configs.unshift(standardFontWeights)
+  }
+
   if (flagEnabled(config, 'darkModeVariant')) {
     configs.unshift(darkModeVariant)
     if (Array.isArray(config.plugins)) {