From 1033f4be04b8a044b571e9714b97f9797ad1984f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 6 Sep 2020 07:01:35 -0400 Subject: [PATCH 1/2] Add standardFontWeights flag for update thin/extralight font weight names --- .../fixtures/tailwind-output-flagged.css | 60 +++++++++---------- src/featureFlags.js | 2 +- src/flagged/standardFontWeights.js | 15 +++++ src/index.js | 5 ++ 4 files changed, 51 insertions(+), 31 deletions(-) create mode 100644 src/flagged/standardFontWeights.js diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index df6557ab4460..e92760ef832d 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__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; } diff --git a/src/featureFlags.js b/src/featureFlags.js index 7df28441564d..f954fe0f0f9a 100644 --- a/src/featureFlags.js +++ b/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', diff --git a/src/flagged/standardFontWeights.js b/src/flagged/standardFontWeights.js new file mode 100644 index 000000000000..58f02ad99999 --- /dev/null +++ b/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', + }, + }, +} diff --git a/src/index.js b/src/index.js index 18f7ae04acde..ad5f2c9ed3e2 100644 --- a/src/index.js +++ b/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)) { From 09e206fb9144968bcfe773af563fec481f08fb5e Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 6 Sep 2020 07:06:43 -0400 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19e4e1e6fed3..be2feccb0d25 100644 --- a/CHANGELOG.md +++ b/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