Skip to content
This repository was archived by the owner on Feb 22, 2022. It is now read-only.

Commit 40c6f09

Browse files
benfacebenface
committed
Add utilities for caps, nums, and ligatures
1 parent 9ae2dee commit 40c6f09

File tree

4 files changed

+571
-12
lines changed

4 files changed

+571
-12
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8-
## [Unreleased]
8+
## [2.2.0] - 2019-09-02
99

1010
### Added
11-
- Added a `no-ellipsis` utility to reset `ellipsis` at breakpoints
11+
- Added utilities for some OpenType features: caps (alternate glyphs for capital letters), nums (alternate glyphs for numbers, fractions, and ordinal markers), and ligatures
12+
- Added a `no-ellipsis` utility to undo `ellipsis` at breakpoints
1213

1314
## [2.1.1] - 2019-05-27
1415

@@ -71,7 +72,8 @@ and this project mostly adheres to [Semantic Versioning](https://semver.org/spec
7172

7273
Initial release
7374

74-
[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.1.1...HEAD
75+
[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.2.0...HEAD
76+
[2.2.0]: https://github.com/benface/tailwindcss-typography/compare/v2.1.1...v2.2.0
7577
[2.1.1]: https://github.com/benface/tailwindcss-typography/compare/v2.1.0...v2.1.1
7678
[2.1.0]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0...v2.1.0
7779
[2.0.0]: https://github.com/benface/tailwindcss-typography/compare/v2.0.0-beta.2...v2.0.0

‎README.md

Lines changed: 95 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -113,13 +113,20 @@ npm install tailwindcss-typography
113113
ellipsis: ['responsive'],
114114
hyphens: ['responsive'],
115115
textUnset: ['responsive'],
116+
caps: ['responsive'],
117+
nums: ['responsive'],
118+
ligatures: ['responsive'],
116119
},
117120
plugins: [
118121
require('tailwindcss-typography')({
119-
ellipsis: true, // defaults to true
120-
hyphens: true, // defaults to true
121-
textUnset: true, // defaults to true
122-
componentPrefix: 'c-', // for text styles; defaults to 'c-'
122+
// all these options default to the values specified here
123+
ellipsis: true, // whether to generate ellipsis utilities
124+
hyphens: true, // whether to generate hyphenation utilities
125+
textUnset: true, // whether to generate utilities to unset text properties
126+
caps: true, // whether to generate utilities to use alternate glyphs for capital letters
127+
nums: true, // whether to generate utilities to use alternate glyphs for numbers, fractions, and ordinal markers
128+
ligatures: true, // whether to generate ligature utilities
129+
componentPrefix: 'c-', // the prefix to use for text style classes
123130
}),
124131
],
125132
}
@@ -139,15 +146,15 @@ This plugin generates the following utilities:
139146
text-shadow: [value];
140147
}
141148

142-
/* disableable with the "ellipsis" option */
149+
/* generated when the "ellipsis" option is set to true */
143150
.ellipsis {
144151
text-overflow: ellipsis;
145152
}
146153
.no-ellipsis {
147154
text-overflow: clip;
148155
}
149156

150-
/* disableable with the "hyphens" option */
157+
/* generated when the "hyphens" option is set to true */
151158
.hyphens-none {
152159
hyphens: none;
153160
}
@@ -158,7 +165,7 @@ This plugin generates the following utilities:
158165
hyphens: auto;
159166
}
160167

161-
/* disableable with the "textUnset" option */
168+
/* generated when the "textUnset" option is set to true */
162169
.font-family-unset {
163170
font-family: inherit;
164171
}
@@ -186,6 +193,87 @@ This plugin generates the following utilities:
186193
.text-transform-unset {
187194
text-transform: inherit;
188195
}
196+
197+
/* generated when the "caps" option is set to true */
198+
.normal-caps {
199+
font-variant-caps: normal;
200+
}
201+
.small-caps {
202+
font-variant-caps: small-caps;
203+
}
204+
.all-small-caps {
205+
font-variant-caps: all-small-caps;
206+
}
207+
.petite-caps {
208+
font-variant-caps: petite-caps;
209+
}
210+
.unicase {
211+
font-variant-caps: unicase;
212+
}
213+
.titling-caps {
214+
font-variant-caps: titling-caps;
215+
}
216+
217+
/* generated when the "nums" option is set to true */
218+
.normal-nums {
219+
font-variant-numeric: normal;
220+
}
221+
.ordinal-nums {
222+
font-variant-numeric: ordinal;
223+
}
224+
.slashed-zeros {
225+
font-variant-numeric: slashed-zero;
226+
}
227+
.lining-nums {
228+
font-variant-numeric: lining-nums;
229+
}
230+
.oldstyle-nums {
231+
font-variant-numeric: oldstyle-nums;
232+
}
233+
.proportional-nums {
234+
font-variant-numeric: proportional-nums;
235+
}
236+
.tabular-nums {
237+
font-variant-numeric: tabular-nums;
238+
}
239+
.diagonal-fractions {
240+
font-variant-numeric: diagonal-fractions;
241+
}
242+
.stacked-fractions {
243+
font-variant-numeric: stacked-fractions;
244+
}
245+
246+
/* generated when the "ligatures" option is set to true */
247+
.normal-ligatures {
248+
font-variant-ligatures: normal;
249+
}
250+
.no-ligatures {
251+
font-variant-ligatures: none;
252+
}
253+
.common-ligatures {
254+
font-variant-ligatures: common-ligatures;
255+
}
256+
.no-common-ligatures {
257+
font-variant-ligatures: no-common-ligatures;
258+
}
259+
.discretionary-ligatures {
260+
font-variant-ligatures: discretionary-ligatures;
261+
}
262+
.no-discretionary-ligatures {
263+
font-variant-ligatures: no-discretionary-ligatures;
264+
}
265+
.historical-ligatures {
266+
font-variant-ligatures: historical-ligatures;
267+
}
268+
.no-historical-ligatures {
269+
font-variant-ligatures: no-historical-ligatures;
270+
}
271+
.contextual-ligatures {
272+
font-variant-ligatures: contextual;
273+
}
274+
.no-contextual-ligatures {
275+
font-variant-ligatures: no-contextual;
276+
}
189277
```
190278

191279
The plugin also generates components for text styles. The above config example would generate something like this:

‎index.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ module.exports = function(options = {}) {
1313
ellipsis: true,
1414
hyphens: true,
1515
textUnset: true,
16+
caps: true,
17+
nums: true,
18+
ligatures: true,
1619
componentPrefix: 'c-',
1720
};
1821
options = _.defaults({}, options, defaultOptions);
@@ -24,6 +27,9 @@ module.exports = function(options = {}) {
2427
const defaultEllipsisVariants = ['responsive'];
2528
const defaultHyphensVariants = ['responsive'];
2629
const defaultTextUnsetVariants = ['responsive'];
30+
const defaultCapsVariants = ['responsive'];
31+
const defaultNumsVariants = ['responsive'];
32+
const defaultLigaturesVariants = ['responsive'];
2733
const defaultTextStylesTheme = {};
2834

2935
const textIndentTheme = theme('textIndent', defaultTextIndentTheme);
@@ -33,6 +39,9 @@ module.exports = function(options = {}) {
3339
const ellipsisVariants = variants('ellipsis', defaultEllipsisVariants);
3440
const hyphensVariants = variants('hyphens', defaultHyphensVariants);
3541
const textUnsetVariants = variants('textUnset', defaultTextUnsetVariants);
42+
const capsVariants = variants('caps', defaultCapsVariants);
43+
const numsVariants = variants('nums', defaultNumsVariants);
44+
const ligaturesVariants = variants('ligatures', defaultLigaturesVariants);
3645
const textStylesTheme = theme('textStyles', defaultTextStylesTheme);
3746

3847
const textIndentUtilities = _.fromPairs(
@@ -108,6 +117,90 @@ module.exports = function(options = {}) {
108117
},
109118
};
110119

120+
const capsUtilities = {
121+
'.normal-caps': {
122+
fontVariantCaps: 'normal',
123+
},
124+
'.small-caps': {
125+
fontVariantCaps: 'small-caps',
126+
},
127+
'.all-small-caps': {
128+
fontVariantCaps: 'all-small-caps',
129+
},
130+
'.petite-caps': {
131+
fontVariantCaps: 'petite-caps',
132+
},
133+
'.unicase': {
134+
fontVariantCaps: 'unicase',
135+
},
136+
'.titling-caps': {
137+
fontVariantCaps: 'titling-caps',
138+
},
139+
};
140+
141+
const numsUtilities = {
142+
'.normal-nums': {
143+
fontVariantNumeric: 'normal',
144+
},
145+
'.ordinal-nums': {
146+
fontVariantNumeric: 'ordinal',
147+
},
148+
'.slashed-zeros': {
149+
fontVariantNumeric: 'slashed-zero',
150+
},
151+
'.lining-nums': {
152+
fontVariantNumeric: 'lining-nums',
153+
},
154+
'.oldstyle-nums': {
155+
fontVariantNumeric: 'oldstyle-nums',
156+
},
157+
'.proportional-nums': {
158+
fontVariantNumeric: 'proportional-nums',
159+
},
160+
'.tabular-nums': {
161+
fontVariantNumeric: 'tabular-nums',
162+
},
163+
'.diagonal-fractions': {
164+
fontVariantNumeric: 'diagonal-fractions',
165+
},
166+
'.stacked-fractions': {
167+
fontVariantNumeric: 'stacked-fractions',
168+
},
169+
};
170+
171+
const ligaturesUtilities = {
172+
'.normal-ligatures': {
173+
fontVariantLigatures: 'normal',
174+
},
175+
'.no-ligatures': {
176+
fontVariantLigatures: 'none',
177+
},
178+
'.common-ligatures': {
179+
fontVariantLigatures: 'common-ligatures',
180+
},
181+
'.no-common-ligatures': {
182+
fontVariantLigatures: 'no-common-ligatures',
183+
},
184+
'.discretionary-ligatures': {
185+
fontVariantLigatures: 'discretionary-ligatures',
186+
},
187+
'.no-discretionary-ligatures': {
188+
fontVariantLigatures: 'no-discretionary-ligatures',
189+
},
190+
'.historical-ligatures': {
191+
fontVariantLigatures: 'historical-ligatures',
192+
},
193+
'.no-historical-ligatures': {
194+
fontVariantLigatures: 'no-historical-ligatures',
195+
},
196+
'.contextual-ligatures': {
197+
fontVariantLigatures: 'contextual',
198+
},
199+
'.no-contextual-ligatures': {
200+
fontVariantLigatures: 'no-contextual',
201+
},
202+
};
203+
111204
const resolveTextStyle = function(styles) {
112205
if (!_.isPlainObject(styles)) {
113206
return _.isArray(styles) ? styles.join(', ') : styles;
@@ -152,6 +245,15 @@ module.exports = function(options = {}) {
152245
if (options.textUnset) {
153246
addUtilities(textUnsetUtilities, textUnsetVariants);
154247
}
248+
if (options.caps) {
249+
addUtilities(capsUtilities, capsVariants);
250+
}
251+
if (options.nums) {
252+
addUtilities(numsUtilities, numsVariants);
253+
}
254+
if (options.ligatures) {
255+
addUtilities(ligaturesUtilities, ligaturesVariants);
256+
}
155257
addComponents(textStyles);
156258
};
157259
};

0 commit comments

Comments
 (0)