From 06a0eb17f5e23b93d0867e412d5e3dbb80d1cffc Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Fri, 21 Oct 2022 09:53:21 -0400
Subject: [PATCH 01/10] Add line-height modifier for font-size utilities
---
src/corePlugins.js | 11 ++++++++-
tests/plugins/fontSize.test.js | 45 ++++++++++++++++++++++++++++++++++
2 files changed, 55 insertions(+), 1 deletion(-)
diff --git a/src/corePlugins.js b/src/corePlugins.js
index b9ca42f749d1..f92767e24cbe 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1834,8 +1834,16 @@ export let corePlugins = {
fontSize: ({ matchUtilities, theme }) => {
matchUtilities(
{
- text: (value) => {
+ text: (value, { modifier }) => {
let [fontSize, options] = Array.isArray(value) ? value : [value]
+
+ if (modifier) {
+ return {
+ 'font-size': fontSize,
+ 'line-height': modifier,
+ }
+ }
+
let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
? options
: { lineHeight: options }
@@ -1850,6 +1858,7 @@ export let corePlugins = {
},
{
values: theme('fontSize'),
+ modifiers: theme('lineHeight'),
type: ['absolute-size', 'relative-size', 'length', 'percentage'],
}
)
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index f26735db94e5..9242de2b6f5e 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -119,3 +119,48 @@ test('font-size utilities can include a font-weight', () => {
`)
})
})
+
+test('font-size utilities can include a line-height modifier', () => {
+ let config = {
+ content: [
+ {
+ raw: html``,
+ },
+ ],
+ theme: {
+ fontSize: {
+ sm: ['12px', '20px'],
+ base: ['16px', '24px'],
+ },
+ lineHeight: {
+ 6: '24px',
+ 7: '28px',
+ },
+ },
+ }
+
+ return run('@tailwind utilities', config).then((result) => {
+ expect(result.css).toMatchCss(css`
+ .text-sm {
+ font-size: 12px;
+ line-height: 20px;
+ }
+ .text-sm\/6 {
+ font-size: 12px;
+ line-height: 24px;
+ }
+ @media (min-width: 768px) {
+ .md\:text-base {
+ font-size: 16px;
+ line-height: 24px;
+ }
+ .md\:text-base\/7 {
+ font-size: 16px;
+ line-height: 28px;
+ }
+ }
+ `)
+ })
+})
From 984d4519a79774d7bd45146762c003b1855a2edc Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Fri, 21 Oct 2022 09:54:09 -0400
Subject: [PATCH 02/10] Add test for arbitrary values
---
tests/plugins/fontSize.test.js | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index 9242de2b6f5e..38ea82150376 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -126,6 +126,7 @@ test('font-size utilities can include a line-height modifier', () => {
{
raw: html``,
},
],
@@ -151,6 +152,10 @@ test('font-size utilities can include a line-height modifier', () => {
font-size: 12px;
line-height: 24px;
}
+ .text-sm\/\[21px\] {
+ font-size: 12px;
+ line-height: 21px;
+ }
@media (min-width: 768px) {
.md\:text-base {
font-size: 16px;
@@ -160,6 +165,10 @@ test('font-size utilities can include a line-height modifier', () => {
font-size: 16px;
line-height: 28px;
}
+ .md\:text-base\/\[33px\] {
+ font-size: 16px;
+ line-height: 33px;
+ }
}
`)
})
From af88dcd0884cb1748d941be57ad3bb79e0948b70 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Fri, 21 Oct 2022 09:55:01 -0400
Subject: [PATCH 03/10] Add failing test for non-configured modifier values
---
tests/plugins/fontSize.test.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index 38ea82150376..e8d48fd60f0e 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -127,6 +127,7 @@ test('font-size utilities can include a line-height modifier', () => {
raw: html``,
},
],
From 1ca5d8eac97466a67bd9428d783c4ef0dd3d7df9 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Wed, 16 Nov 2022 19:08:22 -0500
Subject: [PATCH 04/10] Add more tests (including failing case)
---
tests/plugins/fontSize.test.js | 19 +++++++++++++++++++
1 file changed, 19 insertions(+)
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index e8d48fd60f0e..9731daf8768e 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -127,6 +127,8 @@ test('font-size utilities can include a line-height modifier', () => {
raw: html``,
},
@@ -139,6 +141,7 @@ test('font-size utilities can include a line-height modifier', () => {
lineHeight: {
6: '24px',
7: '28px',
+ 8: '32px',
},
},
}
@@ -157,6 +160,14 @@ test('font-size utilities can include a line-height modifier', () => {
font-size: 12px;
line-height: 21px;
}
+ .text-\[13px\]\/6 {
+ font-size: 13px;
+ line-height: 24px;
+ }
+ .text-\[17px\]\/\[23px\] {
+ font-size: 17px;
+ line-height: 23px;
+ }
@media (min-width: 768px) {
.md\:text-base {
font-size: 16px;
@@ -170,6 +181,14 @@ test('font-size utilities can include a line-height modifier', () => {
font-size: 16px;
line-height: 33px;
}
+ .md\:text-\[19px\]\/8 {
+ font-size: 19px;
+ line-height: 32px;
+ }
+ .md\:text-\[21\]\/\[29px\] {
+ font-size: 21px;
+ line-height: 29px;
+ }
}
`)
})
From 3d5fcd93790831b1df6e4ff1b9324db90a9cb16d Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 17 Nov 2022 06:25:54 -0500
Subject: [PATCH 05/10] Remove unused code
---
src/util/pluginUtils.js | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 5c4821d3cbca..87b1a0dd77f3 100644
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -290,6 +290,12 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
utilityModifier = utilityModifier.slice(1, -1)
}
}
+
+ let result = asValue(rawModifier, options)
+
+ if (result !== undefined) {
+ yield [result, 'any', null]
+ }
}
for (let { type } of types ?? []) {
From 340eb1ab4d5f800f9ccb2eace4f475f7c3b9f382 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Thu, 17 Nov 2022 06:29:10 -0500
Subject: [PATCH 06/10] Add note + failing test
---
src/util/pluginUtils.js | 1 +
tests/match-utilities.test.js | 5 ++++-
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 87b1a0dd77f3..115a6d58fc70 100644
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -291,6 +291,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
}
}
+ // TODO: What is this chunk for, since it doesn't use `utilityModifier`?
let result = asValue(rawModifier, options)
if (result !== undefined) {
diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js
index b6add847d809..0c593b15431b 100644
--- a/tests/match-utilities.test.js
+++ b/tests/match-utilities.test.js
@@ -4,7 +4,9 @@ test('match utilities with modifiers', async () => {
let config = {
content: [
{
- raw: html` `,
+ raw: html` `,
},
],
corePlugins: { preflight: false },
@@ -24,6 +26,7 @@ test('match utilities with modifiers', async () => {
'1': 'one',
'2': 'two',
'1/foo': 'onefoo',
+ '[8]/[9]': 'eightnine',
},
modifiers: 'any',
}
From ea1720a30e7c1f334b1ae22082111cfeca128347 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Fri, 18 Nov 2022 14:46:10 -0500
Subject: [PATCH 07/10] Remove unused code
---
src/util/pluginUtils.js | 7 -------
1 file changed, 7 deletions(-)
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 115a6d58fc70..5c4821d3cbca 100644
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -290,13 +290,6 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
utilityModifier = utilityModifier.slice(1, -1)
}
}
-
- // TODO: What is this chunk for, since it doesn't use `utilityModifier`?
- let result = asValue(rawModifier, options)
-
- if (result !== undefined) {
- yield [result, 'any', null]
- }
}
for (let { type } of types ?? []) {
From e973fc7f52536dff6c8de0b13ebffe45d89c7a20 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Fri, 18 Nov 2022 14:46:14 -0500
Subject: [PATCH 08/10] Fix test
---
tests/plugins/fontSize.test.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index 9731daf8768e..5738e0a96384 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -185,7 +185,7 @@ test('font-size utilities can include a line-height modifier', () => {
font-size: 19px;
line-height: 32px;
}
- .md\:text-\[21\]\/\[29px\] {
+ .md\:text-\[21px\]\/\[29px\] {
font-size: 21px;
line-height: 29px;
}
From 50959e892c7179783af9f5753c768e295c3f34ee Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Fri, 18 Nov 2022 16:40:03 -0500
Subject: [PATCH 09/10] Fix test
---
tests/match-utilities.test.js | 3 +++
1 file changed, 3 insertions(+)
diff --git a/tests/match-utilities.test.js b/tests/match-utilities.test.js
index 0c593b15431b..918145382854 100644
--- a/tests/match-utilities.test.js
+++ b/tests/match-utilities.test.js
@@ -60,6 +60,9 @@ test('match utilities with modifiers', async () => {
.test-1\/\[foo\] {
color: one_[foo];
}
+ .test-\[8\]\/\[9\] {
+ color: eightnine_null;
+ }
`)
})
From a518e3ae15824825cc5341635c51d3cdf85fa104 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Sat, 19 Nov 2022 06:35:35 -0500
Subject: [PATCH 10/10] Update changelog
---
CHANGELOG.md | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fdc889403bc..5c88eb73ddc4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
+### Added
+
+- Add `line-height` modifier support to `font-size` utilities ([#9875](https://github.com/tailwindlabs/tailwindcss/pull/9875))
+
### Fixed
- Cleanup unused `variantOrder` ([#9829](https://github.com/tailwindlabs/tailwindcss/pull/9829))