Skip to content

Commit 634dd2f

Browse files
RobinMalfaitRobinMalfait
committed
improve fontVariantNumeric implementation
We will use `@defaults`, so that only the resets are injected for the utilities we actually use.
1 parent b81ceaa commit 634dd2f

File tree

5 files changed

+84
-83
lines changed

5 files changed

+84
-83
lines changed

‎src/corePlugins.js

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1546,25 +1546,56 @@ export let corePlugins = {
15461546

15471547
fontVariantNumeric: ({ addUtilities }) => {
15481548
addUtilities({
1549-
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions':
1550-
{
1551-
'--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
1552-
'--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
1553-
'--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
1554-
'--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
1555-
'--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
1556-
'font-variant-numeric':
1557-
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
1558-
},
1549+
'@defaults font-variant-numeric': {
1550+
'--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
1551+
'--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
1552+
'--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
1553+
'--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
1554+
'--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
1555+
'--tw-font-variant-numeric':
1556+
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
1557+
},
15591558
'.normal-nums': { 'font-variant-numeric': 'normal' },
1560-
'.ordinal': { '--tw-ordinal': 'ordinal' },
1561-
'.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' },
1562-
'.lining-nums': { '--tw-numeric-figure': 'lining-nums' },
1563-
'.oldstyle-nums': { '--tw-numeric-figure': 'oldstyle-nums' },
1564-
'.proportional-nums': { '--tw-numeric-spacing': 'proportional-nums' },
1565-
'.tabular-nums': { '--tw-numeric-spacing': 'tabular-nums' },
1566-
'.diagonal-fractions': { '--tw-numeric-fraction': 'diagonal-fractions' },
1567-
'.stacked-fractions': { '--tw-numeric-fraction': 'stacked-fractions' },
1559+
'.ordinal': {
1560+
'@defaults font-variant-numeric': {},
1561+
'--tw-ordinal': 'ordinal',
1562+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1563+
},
1564+
'.slashed-zero': {
1565+
'@defaults font-variant-numeric': {},
1566+
'--tw-slashed-zero': 'slashed-zero',
1567+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1568+
},
1569+
'.lining-nums': {
1570+
'@defaults font-variant-numeric': {},
1571+
'--tw-numeric-figure': 'lining-nums',
1572+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1573+
},
1574+
'.oldstyle-nums': {
1575+
'@defaults font-variant-numeric': {},
1576+
'--tw-numeric-figure': 'oldstyle-nums',
1577+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1578+
},
1579+
'.proportional-nums': {
1580+
'@defaults font-variant-numeric': {},
1581+
'--tw-numeric-spacing': 'proportional-nums',
1582+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1583+
},
1584+
'.tabular-nums': {
1585+
'@defaults font-variant-numeric': {},
1586+
'--tw-numeric-spacing': 'tabular-nums',
1587+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1588+
},
1589+
'.diagonal-fractions': {
1590+
'@defaults font-variant-numeric': {},
1591+
'--tw-numeric-fraction': 'diagonal-fractions',
1592+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1593+
},
1594+
'.stacked-fractions': {
1595+
'@defaults font-variant-numeric': {},
1596+
'--tw-numeric-fraction': 'stacked-fractions',
1597+
'font-variant-numeric': 'var(--tw-font-variant-numeric)',
1598+
},
15681599
})
15691600
},
15701601

‎tests/apply.test.css

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -126,22 +126,10 @@
126126
}
127127
/* TODO: This works but the generated CSS is unnecessarily verbose. */
128128
.complex-utilities {
129-
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
130-
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
131-
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
132-
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
133-
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
134-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
135-
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
136-
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
137-
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
138-
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
139-
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
140-
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
141-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
142-
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
143129
--tw-ordinal: ordinal;
130+
font-variant-numeric: var(--tw-font-variant-numeric);
144131
--tw-numeric-spacing: tabular-nums;
132+
font-variant-numeric: var(--tw-font-variant-numeric);
145133
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
146134
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
147135
var(--tw-shadow);
@@ -152,14 +140,8 @@
152140
var(--tw-shadow);
153141
}
154142
.complex-utilities:focus {
155-
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
156-
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
157-
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
158-
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
159-
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
160-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
161-
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
162143
--tw-numeric-fraction: diagonal-fractions;
144+
font-variant-numeric: var(--tw-font-variant-numeric);
163145
}
164146
.basic-nesting-parent {
165147
.basic-nesting-child {
@@ -332,6 +314,15 @@ h2 {
332314
.important-modifier-variant:hover {
333315
border-radius: 0.375rem !important;
334316
}
317+
.complex-utilities {
318+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
319+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
320+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
321+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
322+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
323+
--tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
324+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
325+
}
335326
@keyframes spin {
336327
to {
337328
transform: rotate(360deg);

‎tests/basic-usage.test.css

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -730,29 +730,27 @@
730730
font-style: normal;
731731
}
732732
.ordinal,
733-
.slashed-zero,
734-
.lining-nums,
735-
.oldstyle-nums,
736-
.proportional-nums,
737733
.tabular-nums,
738-
.diagonal-fractions,
739-
.stacked-fractions {
734+
.diagonal-fractions {
740735
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
741736
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
742737
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
743738
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
744739
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
745-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
740+
--tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
746741
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
747742
}
748743
.ordinal {
749744
--tw-ordinal: ordinal;
745+
font-variant-numeric: var(--tw-font-variant-numeric);
750746
}
751747
.tabular-nums {
752748
--tw-numeric-spacing: tabular-nums;
749+
font-variant-numeric: var(--tw-font-variant-numeric);
753750
}
754751
.diagonal-fractions {
755752
--tw-numeric-fraction: diagonal-fractions;
753+
font-variant-numeric: var(--tw-font-variant-numeric);
756754
}
757755
.leading-relaxed {
758756
line-height: 1.625;

‎tests/kitchen-sink.test.css

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -198,22 +198,10 @@ div {
198198
}
199199
}
200200
.test-apply-font-variant {
201-
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
202-
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
203-
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
204-
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
205-
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
206-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
207-
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
208-
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
209-
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
210-
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
211-
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
212-
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
213-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
214-
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
215201
--tw-ordinal: ordinal;
202+
font-variant-numeric: var(--tw-font-variant-numeric);
216203
--tw-numeric-spacing: tabular-nums;
204+
font-variant-numeric: var(--tw-font-variant-numeric);
217205
}
218206
.custom-component {
219207
background: #123456;
@@ -267,6 +255,16 @@ div {
267255
.font-medium {
268256
font-weight: 500;
269257
}
258+
.test-apply-font-variant,
259+
.sm\:tabular-nums {
260+
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
261+
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
262+
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
263+
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
264+
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
265+
--tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
266+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
267+
}
270268
.shadow-sm {
271269
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
272270
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -427,24 +425,9 @@ div {
427425
.sm\:text-center {
428426
text-align: center;
429427
}
430-
.sm\:ordinal,
431-
.sm\:slashed-zero,
432-
.sm\:lining-nums,
433-
.sm\:oldstyle-nums,
434-
.sm\:proportional-nums,
435-
.sm\:tabular-nums,
436-
.sm\:diagonal-fractions,
437-
.sm\:stacked-fractions {
438-
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
439-
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
440-
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
441-
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
442-
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
443-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
444-
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
445-
}
446428
.sm\:tabular-nums {
447429
--tw-numeric-spacing: tabular-nums;
430+
font-variant-numeric: var(--tw-font-variant-numeric);
448431
}
449432
.sm\:custom-util {
450433
background: #abcdef;

‎tests/raw-content.test.css

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -513,29 +513,27 @@
513513
font-style: normal;
514514
}
515515
.ordinal,
516-
.slashed-zero,
517-
.lining-nums,
518-
.oldstyle-nums,
519-
.proportional-nums,
520516
.tabular-nums,
521-
.diagonal-fractions,
522-
.stacked-fractions {
517+
.diagonal-fractions {
523518
--tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
524519
--tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
525520
--tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
526521
--tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
527522
--tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
528-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
523+
--tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
529524
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
530525
}
531526
.ordinal {
532527
--tw-ordinal: ordinal;
528+
font-variant-numeric: var(--tw-font-variant-numeric);
533529
}
534530
.tabular-nums {
535531
--tw-numeric-spacing: tabular-nums;
532+
font-variant-numeric: var(--tw-font-variant-numeric);
536533
}
537534
.diagonal-fractions {
538535
--tw-numeric-fraction: diagonal-fractions;
536+
font-variant-numeric: var(--tw-font-variant-numeric);
539537
}
540538
.leading-relaxed {
541539
line-height: 1.625;

0 commit comments

Comments
 (0)