tailwindcss-typography
Advanced tools
Comparing version 2.2.0 to 3.0.0
{ | ||
"git": { | ||
"tagName": "v%s" | ||
"tagName": "v%s", | ||
"requireCleanWorkingDir": false | ||
} | ||
} |
@@ -8,2 +8,16 @@ # Changelog | ||
## [3.0.0] - 2020-02-05 | ||
### Added | ||
- Added kerning utilities, which can be disabled by setting the `kerning` option to `false` (thanks, [@mapgrid](https://github.com/mapgrid)!) | ||
- Added text rendering utilities, which can be customized with the `textRendering` theme object (thanks, [@mapgrid](https://github.com/mapgrid)!) | ||
### Changed | ||
- Changed to use Tailwind 1.2’s new plugin definition syntax | ||
- Font variant utilities (caps, nums, and ligatures) are now generated from the `fontVariantCaps`, `fontVariantNumeric`, and `fontVariantLigatures` theme keys, and their names have changed to include a `caps-`, `nums-`, or `ligatures-` prefix (so `normal-caps` is now `caps-normal`, `no-ligatures` is now `ligatures-none`, etc.) | ||
- The `caps`, `nums`, and `ligatures` variants keys have changed to `fontVariantCaps`, `fontVariantNumeric`, and `fontVariantLigatures` | ||
### Removed | ||
- Removed the `caps`, `nums`, and `ligatures` options | ||
## [2.2.0] - 2019-09-02 | ||
@@ -76,3 +90,4 @@ | ||
[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v2.2.0...HEAD | ||
[Unreleased]: https://github.com/benface/tailwindcss-typography/compare/v3.0.0...HEAD | ||
[3.0.0]: https://github.com/benface/tailwindcss-typography/compare/v2.2.0...v3.0.0 | ||
[2.2.0]: https://github.com/benface/tailwindcss-typography/compare/v2.1.1...v2.2.0 | ||
@@ -79,0 +94,0 @@ [2.1.1]: https://github.com/benface/tailwindcss-typography/compare/v2.1.0...v2.1.1 |
287
index.js
@@ -0,3 +1,12 @@ | ||
const plugin = require('tailwindcss/plugin'); | ||
const _ = require('lodash'); | ||
const defaultOptions = { | ||
ellipsis: true, | ||
hyphens: true, | ||
kerning: true, | ||
textUnset: true, | ||
componentPrefix: 'c-', | ||
}; | ||
const camelCaseToKebabCase = function(string) { | ||
@@ -10,41 +19,8 @@ return string | ||
module.exports = function(options = {}) { | ||
return ({ theme, variants, e, addUtilities, addComponents }) => { | ||
const defaultOptions = { | ||
ellipsis: true, | ||
hyphens: true, | ||
textUnset: true, | ||
caps: true, | ||
nums: true, | ||
ligatures: true, | ||
componentPrefix: 'c-', | ||
}; | ||
module.exports = plugin.withOptions(function(options = {}) { | ||
return function({ theme, variants, e, addUtilities, addComponents }) { | ||
options = _.defaults({}, options, defaultOptions); | ||
const defaultTextIndentTheme = {}; | ||
const defaultTextIndentVariants = ['responsive']; | ||
const defaultTextShadowTheme = {}; | ||
const defaultTextShadowVariants = ['responsive']; | ||
const defaultEllipsisVariants = ['responsive']; | ||
const defaultHyphensVariants = ['responsive']; | ||
const defaultTextUnsetVariants = ['responsive']; | ||
const defaultCapsVariants = ['responsive']; | ||
const defaultNumsVariants = ['responsive']; | ||
const defaultLigaturesVariants = ['responsive']; | ||
const defaultTextStylesTheme = {}; | ||
const textIndentTheme = theme('textIndent', defaultTextIndentTheme); | ||
const textIndentVariants = variants('textIndent', defaultTextIndentVariants); | ||
const textShadowTheme = theme('textShadow', defaultTextShadowTheme); | ||
const textShadowVariants = variants('textShadow', defaultTextShadowVariants); | ||
const ellipsisVariants = variants('ellipsis', defaultEllipsisVariants); | ||
const hyphensVariants = variants('hyphens', defaultHyphensVariants); | ||
const textUnsetVariants = variants('textUnset', defaultTextUnsetVariants); | ||
const capsVariants = variants('caps', defaultCapsVariants); | ||
const numsVariants = variants('nums', defaultNumsVariants); | ||
const ligaturesVariants = variants('ligatures', defaultLigaturesVariants); | ||
const textStylesTheme = theme('textStyles', defaultTextStylesTheme); | ||
const textIndentUtilities = _.fromPairs( | ||
_.map(textIndentTheme, (value, modifier) => { | ||
_.map(theme('textIndent'), (value, modifier) => { | ||
return [ | ||
@@ -60,3 +36,3 @@ `.${e(`indent-${modifier}`)}`, | ||
const textShadowUtilities = _.fromPairs( | ||
_.map(textShadowTheme, (value, modifier) => { | ||
_.map(theme('textShadow'), (value, modifier) => { | ||
return [ | ||
@@ -71,3 +47,3 @@ `.${e(`text-shadow${modifier === 'default' ? '' : `-${modifier}`}`)}`, | ||
const ellipsisUtilities = { | ||
const ellipsisUtilities = options.ellipsis ? { | ||
'.ellipsis': { | ||
@@ -79,5 +55,5 @@ textOverflow: 'ellipsis', | ||
}, | ||
}; | ||
} : {}; | ||
const hyphensUtilities = { | ||
const hyphensUtilities = options.hyphens ? { | ||
'.hyphens-none': { | ||
@@ -92,5 +68,17 @@ hyphens: 'none', | ||
}, | ||
}; | ||
} : {}; | ||
const textUnsetUtilities = { | ||
const kerningUtilities = options.kerning ? { | ||
'.kerning': { | ||
fontKerning: 'normal', | ||
}, | ||
'.kerning-none': { | ||
fontKerning: 'none', | ||
}, | ||
'.kerning-auto': { | ||
fontKerning: 'auto', | ||
}, | ||
} : {}; | ||
const textUnsetUtilities = options.textUnset ? { | ||
'.font-family-unset': { | ||
@@ -123,88 +111,50 @@ fontFamily: 'inherit', | ||
}, | ||
}; | ||
} : {}; | ||
const capsUtilities = { | ||
'.normal-caps': { | ||
fontVariantCaps: 'normal', | ||
}, | ||
'.small-caps': { | ||
fontVariantCaps: 'small-caps', | ||
}, | ||
'.all-small-caps': { | ||
fontVariantCaps: 'all-small-caps', | ||
}, | ||
'.petite-caps': { | ||
fontVariantCaps: 'petite-caps', | ||
}, | ||
'.unicase': { | ||
fontVariantCaps: 'unicase', | ||
}, | ||
'.titling-caps': { | ||
fontVariantCaps: 'titling-caps', | ||
}, | ||
}; | ||
const fontVariantCapsUtilities = _.fromPairs( | ||
_.map(theme('fontVariantCaps'), (value, modifier) => { | ||
return [ | ||
`.${e(`caps-${modifier}`)}`, | ||
{ | ||
fontVariantCaps: value, | ||
}, | ||
]; | ||
}) | ||
); | ||
const numsUtilities = { | ||
'.normal-nums': { | ||
fontVariantNumeric: 'normal', | ||
}, | ||
'.ordinal-nums': { | ||
fontVariantNumeric: 'ordinal', | ||
}, | ||
'.slashed-zeros': { | ||
fontVariantNumeric: 'slashed-zero', | ||
}, | ||
'.lining-nums': { | ||
fontVariantNumeric: 'lining-nums', | ||
}, | ||
'.oldstyle-nums': { | ||
fontVariantNumeric: 'oldstyle-nums', | ||
}, | ||
'.proportional-nums': { | ||
fontVariantNumeric: 'proportional-nums', | ||
}, | ||
'.tabular-nums': { | ||
fontVariantNumeric: 'tabular-nums', | ||
}, | ||
'.diagonal-fractions': { | ||
fontVariantNumeric: 'diagonal-fractions', | ||
}, | ||
'.stacked-fractions': { | ||
fontVariantNumeric: 'stacked-fractions', | ||
}, | ||
}; | ||
const fontVariantNumericUtilities = _.fromPairs( | ||
_.map(theme('fontVariantNumeric'), (value, modifier) => { | ||
return [ | ||
`.${e(`nums-${modifier}`)}`, | ||
{ | ||
fontVariantNumeric: value, | ||
}, | ||
]; | ||
}) | ||
); | ||
const ligaturesUtilities = { | ||
'.normal-ligatures': { | ||
fontVariantLigatures: 'normal', | ||
}, | ||
'.no-ligatures': { | ||
fontVariantLigatures: 'none', | ||
}, | ||
'.common-ligatures': { | ||
fontVariantLigatures: 'common-ligatures', | ||
}, | ||
'.no-common-ligatures': { | ||
fontVariantLigatures: 'no-common-ligatures', | ||
}, | ||
'.discretionary-ligatures': { | ||
fontVariantLigatures: 'discretionary-ligatures', | ||
}, | ||
'.no-discretionary-ligatures': { | ||
fontVariantLigatures: 'no-discretionary-ligatures', | ||
}, | ||
'.historical-ligatures': { | ||
fontVariantLigatures: 'historical-ligatures', | ||
}, | ||
'.no-historical-ligatures': { | ||
fontVariantLigatures: 'no-historical-ligatures', | ||
}, | ||
'.contextual-ligatures': { | ||
fontVariantLigatures: 'contextual', | ||
}, | ||
'.no-contextual-ligatures': { | ||
fontVariantLigatures: 'no-contextual', | ||
}, | ||
}; | ||
const fontVariantLigaturesUtilities = _.fromPairs( | ||
_.map(theme('fontVariantLigatures'), (value, modifier) => { | ||
return [ | ||
`.${e(`ligatures-${modifier}`)}`, | ||
{ | ||
fontVariantLigatures: value, | ||
}, | ||
]; | ||
}) | ||
); | ||
const textRenderingUtilities = _.fromPairs( | ||
_.map(theme('textRendering'), (value, modifier) => { | ||
return [ | ||
`.${e(`text-${modifier}`)}`, | ||
{ | ||
textRendering: value, | ||
}, | ||
]; | ||
}) | ||
); | ||
const textStylesTheme = theme('textStyles'); | ||
const resolveTextStyle = function(styles) { | ||
@@ -243,24 +193,71 @@ if (!_.isPlainObject(styles)) { | ||
addUtilities(textIndentUtilities, textIndentVariants); | ||
addUtilities(textShadowUtilities, textShadowVariants); | ||
if (options.ellipsis) { | ||
addUtilities(ellipsisUtilities, ellipsisVariants); | ||
} | ||
if (options.hyphens) { | ||
addUtilities(hyphensUtilities, hyphensVariants); | ||
} | ||
if (options.textUnset) { | ||
addUtilities(textUnsetUtilities, textUnsetVariants); | ||
} | ||
if (options.caps) { | ||
addUtilities(capsUtilities, capsVariants); | ||
} | ||
if (options.nums) { | ||
addUtilities(numsUtilities, numsVariants); | ||
} | ||
if (options.ligatures) { | ||
addUtilities(ligaturesUtilities, ligaturesVariants); | ||
} | ||
addUtilities(textIndentUtilities, variants('textIndent')); | ||
addUtilities(textShadowUtilities, variants('textShadow')); | ||
addUtilities(ellipsisUtilities, variants('ellipsis')); | ||
addUtilities(hyphensUtilities, variants('hyphens')); | ||
addUtilities(kerningUtilities, variants('kerning')); | ||
addUtilities(textUnsetUtilities, variants('textUnset')); | ||
addUtilities(fontVariantCapsUtilities, variants('fontVariantCaps')); | ||
addUtilities(fontVariantNumericUtilities, variants('fontVariantNumeric')); | ||
addUtilities(fontVariantLigaturesUtilities, variants('fontVariantLigatures')); | ||
addUtilities(textRenderingUtilities, variants('textRendering')); | ||
addComponents(textStyles); | ||
}; | ||
}; | ||
}, function() { | ||
return { | ||
theme: { | ||
textIndent: {}, | ||
textShadow: {}, | ||
fontVariantCaps: { | ||
'normal': 'normal', | ||
'small': 'small-caps', | ||
'all-small': 'all-small-caps', | ||
'petite': 'petite-caps', | ||
'unicase': 'unicase', | ||
'titling': 'titling-caps', | ||
}, | ||
fontVariantNumeric: { | ||
'normal': 'normal', | ||
'ordinal': 'ordinal', | ||
'slashed-zero': 'slashed-zero', | ||
'lining': 'lining-nums', | ||
'oldstyle': 'oldstyle-nums', | ||
'proportional': 'proportional-nums', | ||
'tabular': 'tabular-nums', | ||
'diagonal-fractions': 'diagonal-fractions', | ||
'stacked-fractions': 'stacked-fractions', | ||
}, | ||
fontVariantLigatures: { | ||
'normal': 'normal', | ||
'none': 'none', | ||
'common': 'common-ligatures', | ||
'no-common': 'no-common-ligatures', | ||
'discretionary': 'discretionary-ligatures', | ||
'no-discretionary': 'no-discretionary-ligatures', | ||
'historical': 'historical-ligatures', | ||
'no-historical': 'no-historical-ligatures', | ||
'contextual': 'contextual', | ||
'no-contextual': 'no-contextual', | ||
}, | ||
textRendering: { | ||
'rendering-auto': 'auto', | ||
'optimize-legibility': 'optimizeLegibility', | ||
'optimize-speed': 'optimizeSpeed', | ||
'geometric-precision': 'geometricPrecision' | ||
}, | ||
textStyles: {}, | ||
}, | ||
variants: { | ||
textIndent: ['responsive'], | ||
textShadow: ['responsive'], | ||
ellipsis: ['responsive'], | ||
hyphens: ['responsive'], | ||
kerning: ['responsive'], | ||
textUnset: ['responsive'], | ||
fontVariantCaps: ['responsive'], | ||
fontVariantNumeric: ['responsive'], | ||
fontVariantLigatures: ['responsive'], | ||
textRendering: ['responsive'], | ||
}, | ||
}; | ||
}); |
{ | ||
"name": "tailwindcss-typography", | ||
"version": "2.2.0", | ||
"version": "3.0.0", | ||
"description": "Tailwind CSS plugin to generate typography utilities and text style components", | ||
@@ -18,9 +18,9 @@ "author": "Benoît Rouleau <benoit.rouleau@icloud.com>", | ||
"devDependencies": { | ||
"github-release-from-changelog": "^1.3.2", | ||
"jest": "^24.9.0", | ||
"github-release-from-changelog": "^2.1.0", | ||
"jest": "^25.1.0", | ||
"jest-matcher-css": "^1.1.0", | ||
"postcss": "^7.0.17", | ||
"release-it": "^12.3.6", | ||
"tailwindcss": "1.1.2" | ||
"postcss": "^7.0.26", | ||
"release-it": "^12.4.3", | ||
"tailwindcss": "1.2.0" | ||
} | ||
} |
134
README.md
@@ -13,3 +13,3 @@ # Typography Plugin for Tailwind CSS | ||
// tailwind.config.js | ||
{ | ||
module.exports = { | ||
theme: { | ||
@@ -24,2 +24,39 @@ textIndent: { // defaults to {} | ||
}, | ||
fontVariantCaps: { // defaults to these values | ||
'normal': 'normal', | ||
'small': 'small-caps', | ||
'all-small': 'all-small-caps', | ||
'petite': 'petite-caps', | ||
'unicase': 'unicase', | ||
'titling': 'titling-caps', | ||
}, | ||
fontVariantNumeric: { // defaults to these values | ||
'normal': 'normal', | ||
'ordinal': 'ordinal', | ||
'slashed-zero': 'slashed-zero', | ||
'lining': 'lining-nums', | ||
'oldstyle': 'oldstyle-nums', | ||
'proportional': 'proportional-nums', | ||
'tabular': 'tabular-nums', | ||
'diagonal-fractions': 'diagonal-fractions', | ||
'stacked-fractions': 'stacked-fractions', | ||
}, | ||
fontVariantLigatures: { // defaults to these values | ||
'normal': 'normal', | ||
'none': 'none', | ||
'common': 'common-ligatures', | ||
'no-common': 'no-common-ligatures', | ||
'discretionary': 'discretionary-ligatures', | ||
'no-discretionary': 'no-discretionary-ligatures', | ||
'historical': 'historical-ligatures', | ||
'no-historical': 'no-historical-ligatures', | ||
'contextual': 'contextual', | ||
'no-contextual': 'no-contextual', | ||
}, | ||
textRendering: { // defaults to these values | ||
'rendering-auto': 'auto', | ||
'optimize-legibility': 'optimizeLegibility', | ||
'optimize-speed': 'optimizeSpeed', | ||
'geometric-precision': 'geometricPrecision' | ||
}, | ||
textStyles: theme => ({ // defaults to {} | ||
@@ -117,6 +154,8 @@ heading: { | ||
hyphens: ['responsive'], | ||
kerning: ['responsive'], | ||
textUnset: ['responsive'], | ||
caps: ['responsive'], | ||
nums: ['responsive'], | ||
ligatures: ['responsive'], | ||
fontVariantCaps: ['responsive'], | ||
fontVariantNumeric: ['responsive'], | ||
fontVariantLigatures: ['responsive'], | ||
textRendering: ['responsive'], | ||
}, | ||
@@ -128,10 +167,8 @@ plugins: [ | ||
hyphens: true, // whether to generate hyphenation utilities | ||
kerning: true, // whether to generate kerning utilities | ||
textUnset: true, // whether to generate utilities to unset text properties | ||
caps: true, // whether to generate utilities to use alternate glyphs for capital letters | ||
nums: true, // whether to generate utilities to use alternate glyphs for numbers, fractions, and ordinal markers | ||
ligatures: true, // whether to generate ligature utilities | ||
componentPrefix: 'c-', // the prefix to use for text style classes | ||
}), | ||
], | ||
} | ||
}; | ||
``` | ||
@@ -172,2 +209,13 @@ | ||
/* generated when the "kerning" option is set to true */ | ||
.kerning { | ||
font-kerning: normal; | ||
} | ||
.kerning-none { | ||
font-kerning: none; | ||
} | ||
.kerning-auto { | ||
font-kerning: auto; | ||
} | ||
/* generated when the "textUnset" option is set to true */ | ||
@@ -202,82 +250,96 @@ .font-family-unset { | ||
/* generated when the "caps" option is set to true */ | ||
.normal-caps { | ||
/* configurable with the "fontVariantCaps" theme object */ | ||
.caps-normal { | ||
font-variant-caps: normal; | ||
} | ||
.small-caps { | ||
.caps-small { | ||
font-variant-caps: small-caps; | ||
} | ||
.all-small-caps { | ||
.caps-all-small { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.petite-caps { | ||
.caps-petite { | ||
font-variant-caps: petite-caps; | ||
} | ||
.unicase { | ||
.caps-unicase { | ||
font-variant-caps: unicase; | ||
} | ||
.titling-caps { | ||
.caps-titling { | ||
font-variant-caps: titling-caps; | ||
} | ||
/* generated when the "nums" option is set to true */ | ||
.normal-nums { | ||
/* configurable with the "fontVariantNumeric" theme object */ | ||
.nums-normal { | ||
font-variant-numeric: normal; | ||
} | ||
.ordinal-nums { | ||
.nums-ordinal { | ||
font-variant-numeric: ordinal; | ||
} | ||
.slashed-zeros { | ||
.nums-slashed-zero { | ||
font-variant-numeric: slashed-zero; | ||
} | ||
.lining-nums { | ||
.nums-lining { | ||
font-variant-numeric: lining-nums; | ||
} | ||
.oldstyle-nums { | ||
.nums-oldstyle { | ||
font-variant-numeric: oldstyle-nums; | ||
} | ||
.proportional-nums { | ||
.nums-proportional { | ||
font-variant-numeric: proportional-nums; | ||
} | ||
.tabular-nums { | ||
.nums-tabular { | ||
font-variant-numeric: tabular-nums; | ||
} | ||
.diagonal-fractions { | ||
.nums-diagonal-fractions { | ||
font-variant-numeric: diagonal-fractions; | ||
} | ||
.stacked-fractions { | ||
.nums-stacked-fractions { | ||
font-variant-numeric: stacked-fractions; | ||
} | ||
/* generated when the "ligatures" option is set to true */ | ||
.normal-ligatures { | ||
/* configurable with the "fontVariantLigatures" theme object */ | ||
.ligatures-normal { | ||
font-variant-ligatures: normal; | ||
} | ||
.no-ligatures { | ||
.ligatures-none { | ||
font-variant-ligatures: none; | ||
} | ||
.common-ligatures { | ||
.ligatures-common { | ||
font-variant-ligatures: common-ligatures; | ||
} | ||
.no-common-ligatures { | ||
.ligatures-no-common { | ||
font-variant-ligatures: no-common-ligatures; | ||
} | ||
.discretionary-ligatures { | ||
.ligatures-discretionary { | ||
font-variant-ligatures: discretionary-ligatures; | ||
} | ||
.no-discretionary-ligatures { | ||
.ligatures-no-discretionary { | ||
font-variant-ligatures: no-discretionary-ligatures; | ||
} | ||
.historical-ligatures { | ||
.ligatures-historical { | ||
font-variant-ligatures: historical-ligatures; | ||
} | ||
.no-historical-ligatures { | ||
.ligatures-no-historical { | ||
font-variant-ligatures: no-historical-ligatures; | ||
} | ||
.contextual-ligatures { | ||
.ligatures-contextual { | ||
font-variant-ligatures: contextual; | ||
} | ||
.no-contextual-ligatures { | ||
.ligatures-no-contextual { | ||
font-variant-ligatures: no-contextual; | ||
} | ||
/* configurable with the "textRendering" theme object */ | ||
.text-rendering-auto { | ||
text-rendering: auto; | ||
} | ||
.text-optimize-legibility { | ||
text-rendering: optimizeLegibility; | ||
} | ||
.text-optimize-speed { | ||
text-rendering: optimizeSpeed; | ||
} | ||
.text-geometric-precision { | ||
text-rendering: geometricPrecision; | ||
} | ||
``` | ||
@@ -284,0 +346,0 @@ |
582
test.js
@@ -53,2 +53,11 @@ const _ = require('lodash'); | ||
} | ||
.kerning { | ||
font-kerning: normal; | ||
} | ||
.kerning-none { | ||
font-kerning: none; | ||
} | ||
.kerning-auto { | ||
font-kerning: auto; | ||
} | ||
.font-family-unset { | ||
@@ -81,77 +90,89 @@ font-family: inherit; | ||
} | ||
.normal-caps { | ||
.caps-normal { | ||
font-variant-caps: normal; | ||
} | ||
.small-caps { | ||
.caps-small { | ||
font-variant-caps: small-caps; | ||
} | ||
.all-small-caps { | ||
.caps-all-small { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.petite-caps { | ||
.caps-petite { | ||
font-variant-caps: petite-caps; | ||
} | ||
.unicase { | ||
.caps-unicase { | ||
font-variant-caps: unicase; | ||
} | ||
.titling-caps { | ||
.caps-titling { | ||
font-variant-caps: titling-caps; | ||
} | ||
.normal-nums { | ||
.nums-normal { | ||
font-variant-numeric: normal; | ||
} | ||
.ordinal-nums { | ||
.nums-ordinal { | ||
font-variant-numeric: ordinal; | ||
} | ||
.slashed-zeros { | ||
.nums-slashed-zero { | ||
font-variant-numeric: slashed-zero; | ||
} | ||
.lining-nums { | ||
.nums-lining { | ||
font-variant-numeric: lining-nums; | ||
} | ||
.oldstyle-nums { | ||
.nums-oldstyle { | ||
font-variant-numeric: oldstyle-nums; | ||
} | ||
.proportional-nums { | ||
.nums-proportional { | ||
font-variant-numeric: proportional-nums; | ||
} | ||
.tabular-nums { | ||
.nums-tabular { | ||
font-variant-numeric: tabular-nums; | ||
} | ||
.diagonal-fractions { | ||
.nums-diagonal-fractions { | ||
font-variant-numeric: diagonal-fractions; | ||
} | ||
.stacked-fractions { | ||
.nums-stacked-fractions { | ||
font-variant-numeric: stacked-fractions; | ||
} | ||
.normal-ligatures { | ||
.ligatures-normal { | ||
font-variant-ligatures: normal; | ||
} | ||
.no-ligatures { | ||
.ligatures-none { | ||
font-variant-ligatures: none; | ||
} | ||
.common-ligatures { | ||
.ligatures-common { | ||
font-variant-ligatures: common-ligatures; | ||
} | ||
.no-common-ligatures { | ||
.ligatures-no-common { | ||
font-variant-ligatures: no-common-ligatures; | ||
} | ||
.discretionary-ligatures { | ||
.ligatures-discretionary { | ||
font-variant-ligatures: discretionary-ligatures; | ||
} | ||
.no-discretionary-ligatures { | ||
.ligatures-no-discretionary { | ||
font-variant-ligatures: no-discretionary-ligatures; | ||
} | ||
.historical-ligatures { | ||
.ligatures-historical { | ||
font-variant-ligatures: historical-ligatures; | ||
} | ||
.no-historical-ligatures { | ||
.ligatures-no-historical { | ||
font-variant-ligatures: no-historical-ligatures; | ||
} | ||
.contextual-ligatures { | ||
.ligatures-contextual { | ||
font-variant-ligatures: contextual; | ||
} | ||
.no-contextual-ligatures { | ||
.ligatures-no-contextual { | ||
font-variant-ligatures: no-contextual; | ||
} | ||
.text-rendering-auto { | ||
text-rendering: auto; | ||
} | ||
.text-optimize-legibility { | ||
text-rendering: optimizeLegibility; | ||
} | ||
.text-optimize-speed { | ||
text-rendering: optimizeSpeed; | ||
} | ||
.text-geometric-precision { | ||
text-rendering: geometricPrecision; | ||
} | ||
@media (min-width: 640px) { | ||
@@ -173,2 +194,11 @@ .sm\\:ellipsis { | ||
} | ||
.sm\\:kerning { | ||
font-kerning: normal; | ||
} | ||
.sm\\:kerning-none { | ||
font-kerning: none; | ||
} | ||
.sm\\:kerning-auto { | ||
font-kerning: auto; | ||
} | ||
.sm\\:font-family-unset { | ||
@@ -201,77 +231,89 @@ font-family: inherit; | ||
} | ||
.sm\\:normal-caps { | ||
.sm\\:caps-normal { | ||
font-variant-caps: normal; | ||
} | ||
.sm\\:small-caps { | ||
.sm\\:caps-small { | ||
font-variant-caps: small-caps; | ||
} | ||
.sm\\:all-small-caps { | ||
.sm\\:caps-all-small { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.sm\\:petite-caps { | ||
.sm\\:caps-petite { | ||
font-variant-caps: petite-caps; | ||
} | ||
.sm\\:unicase { | ||
.sm\\:caps-unicase { | ||
font-variant-caps: unicase; | ||
} | ||
.sm\\:titling-caps { | ||
.sm\\:caps-titling { | ||
font-variant-caps: titling-caps; | ||
} | ||
.sm\\:normal-nums { | ||
.sm\\:nums-normal { | ||
font-variant-numeric: normal; | ||
} | ||
.sm\\:ordinal-nums { | ||
.sm\\:nums-ordinal { | ||
font-variant-numeric: ordinal; | ||
} | ||
.sm\\:slashed-zeros { | ||
.sm\\:nums-slashed-zero { | ||
font-variant-numeric: slashed-zero; | ||
} | ||
.sm\\:lining-nums { | ||
.sm\\:nums-lining { | ||
font-variant-numeric: lining-nums; | ||
} | ||
.sm\\:oldstyle-nums { | ||
.sm\\:nums-oldstyle { | ||
font-variant-numeric: oldstyle-nums; | ||
} | ||
.sm\\:proportional-nums { | ||
.sm\\:nums-proportional { | ||
font-variant-numeric: proportional-nums; | ||
} | ||
.sm\\:tabular-nums { | ||
.sm\\:nums-tabular { | ||
font-variant-numeric: tabular-nums; | ||
} | ||
.sm\\:diagonal-fractions { | ||
.sm\\:nums-diagonal-fractions { | ||
font-variant-numeric: diagonal-fractions; | ||
} | ||
.sm\\:stacked-fractions { | ||
.sm\\:nums-stacked-fractions { | ||
font-variant-numeric: stacked-fractions; | ||
} | ||
.sm\\:normal-ligatures { | ||
.sm\\:ligatures-normal { | ||
font-variant-ligatures: normal; | ||
} | ||
.sm\\:no-ligatures { | ||
.sm\\:ligatures-none { | ||
font-variant-ligatures: none; | ||
} | ||
.sm\\:common-ligatures { | ||
.sm\\:ligatures-common { | ||
font-variant-ligatures: common-ligatures; | ||
} | ||
.sm\\:no-common-ligatures { | ||
.sm\\:ligatures-no-common { | ||
font-variant-ligatures: no-common-ligatures; | ||
} | ||
.sm\\:discretionary-ligatures { | ||
.sm\\:ligatures-discretionary { | ||
font-variant-ligatures: discretionary-ligatures; | ||
} | ||
.sm\\:no-discretionary-ligatures { | ||
.sm\\:ligatures-no-discretionary { | ||
font-variant-ligatures: no-discretionary-ligatures; | ||
} | ||
.sm\\:historical-ligatures { | ||
.sm\\:ligatures-historical { | ||
font-variant-ligatures: historical-ligatures; | ||
} | ||
.sm\\:no-historical-ligatures { | ||
.sm\\:ligatures-no-historical { | ||
font-variant-ligatures: no-historical-ligatures; | ||
} | ||
.sm\\:contextual-ligatures { | ||
.sm\\:ligatures-contextual { | ||
font-variant-ligatures: contextual; | ||
} | ||
.sm\\:no-contextual-ligatures { | ||
.sm\\:ligatures-no-contextual { | ||
font-variant-ligatures: no-contextual; | ||
} | ||
.sm\\:text-rendering-auto { | ||
text-rendering: auto; | ||
} | ||
.sm\\:text-optimize-legibility { | ||
text-rendering: optimizeLegibility; | ||
} | ||
.sm\\:text-optimize-speed { | ||
text-rendering: optimizeSpeed; | ||
} | ||
.sm\\:text-geometric-precision { | ||
text-rendering: geometricPrecision; | ||
} | ||
} | ||
@@ -282,9 +324,16 @@ `); | ||
test('the default utilities can be disabled', () => { | ||
return generatePluginCss({}, { | ||
hyphens: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
test('the font variant utilities can be disabled', () => { | ||
return generatePluginCss({ | ||
theme: { | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
variants: { | ||
ellipsis: [], | ||
hyphens: [], | ||
kerning: [], | ||
textUnset: [], | ||
}, | ||
}).then(css => { | ||
@@ -298,10 +347,47 @@ expect(css).toMatchCss(` | ||
} | ||
@media (min-width: 640px) { | ||
.sm\\:ellipsis { | ||
text-overflow: ellipsis; | ||
} | ||
.sm\\:no-ellipsis { | ||
text-overflow: clip; | ||
} | ||
.hyphens-none { | ||
hyphens: none; | ||
} | ||
.hyphens-manual { | ||
hyphens: manual; | ||
} | ||
.hyphens-auto { | ||
hyphens: auto; | ||
} | ||
.kerning { | ||
font-kerning: normal; | ||
} | ||
.kerning-none { | ||
font-kerning: none; | ||
} | ||
.kerning-auto { | ||
font-kerning: auto; | ||
} | ||
.font-family-unset { | ||
font-family: inherit; | ||
} | ||
.font-weight-unset { | ||
font-weight: inherit; | ||
} | ||
.font-style-unset { | ||
font-style: inherit; | ||
} | ||
.text-size-unset { | ||
font-size: inherit; | ||
} | ||
.text-align-unset { | ||
text-align: inherit; | ||
} | ||
.leading-unset { | ||
line-height: inherit; | ||
} | ||
.tracking-unset { | ||
letter-spacing: inherit; | ||
} | ||
.text-color-unset { | ||
color: inherit; | ||
} | ||
.text-transform-unset { | ||
text-transform: inherit; | ||
} | ||
`); | ||
@@ -311,5 +397,23 @@ }); | ||
test('text indent and text shadow utilities can be customized', () => { | ||
test('the ellipsis, hyphens, and text unset utilities can be disabled', () => { | ||
return generatePluginCss({ | ||
theme: { | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
}, { | ||
ellipsis: false, | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
}).then(css => { | ||
expect(css).toMatchCss(``); | ||
}); | ||
}); | ||
test('the text indent and text shadow utilities can be customized', () => { | ||
return generatePluginCss({ | ||
theme: { | ||
textIndent: { | ||
@@ -323,6 +427,8 @@ '1': '0.25rem', | ||
}, | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
variants: { | ||
ellipsis: [], | ||
hyphens: [], | ||
textIndent: [], | ||
@@ -333,6 +439,5 @@ textShadow: [], | ||
ellipsis: false, | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -352,11 +457,130 @@ expect(css).toMatchCss(` | ||
} | ||
.hyphens-none { | ||
hyphens: none; | ||
`); | ||
}); | ||
}); | ||
test('the font variant utilities can be extended', () => { | ||
return generatePluginCss({ | ||
theme: { | ||
extend: { | ||
fontVariantCaps: { | ||
'inherit': 'inherit', | ||
}, | ||
fontVariantNumeric: { | ||
'initial': 'initial', | ||
}, | ||
fontVariantLigatures: { | ||
'revert': 'revert', | ||
}, | ||
}, | ||
}, | ||
variants: { | ||
fontVariantCaps: [], | ||
fontVariantNumeric: [], | ||
fontVariantLigatures: [], | ||
textRendering: [], | ||
}, | ||
}, { | ||
ellipsis: false, | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
}).then(css => { | ||
expect(css).toMatchCss(` | ||
.caps-normal { | ||
font-variant-caps: normal; | ||
} | ||
.hyphens-manual { | ||
hyphens: manual; | ||
.caps-small { | ||
font-variant-caps: small-caps; | ||
} | ||
.hyphens-auto { | ||
hyphens: auto; | ||
.caps-all-small { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.caps-petite { | ||
font-variant-caps: petite-caps; | ||
} | ||
.caps-unicase { | ||
font-variant-caps: unicase; | ||
} | ||
.caps-titling { | ||
font-variant-caps: titling-caps; | ||
} | ||
.caps-inherit { | ||
font-variant-caps: inherit; | ||
} | ||
.nums-normal { | ||
font-variant-numeric: normal; | ||
} | ||
.nums-ordinal { | ||
font-variant-numeric: ordinal; | ||
} | ||
.nums-slashed-zero { | ||
font-variant-numeric: slashed-zero; | ||
} | ||
.nums-lining { | ||
font-variant-numeric: lining-nums; | ||
} | ||
.nums-oldstyle { | ||
font-variant-numeric: oldstyle-nums; | ||
} | ||
.nums-proportional { | ||
font-variant-numeric: proportional-nums; | ||
} | ||
.nums-tabular { | ||
font-variant-numeric: tabular-nums; | ||
} | ||
.nums-diagonal-fractions { | ||
font-variant-numeric: diagonal-fractions; | ||
} | ||
.nums-stacked-fractions { | ||
font-variant-numeric: stacked-fractions; | ||
} | ||
.nums-initial { | ||
font-variant-numeric: initial; | ||
} | ||
.ligatures-normal { | ||
font-variant-ligatures: normal; | ||
} | ||
.ligatures-none { | ||
font-variant-ligatures: none; | ||
} | ||
.ligatures-common { | ||
font-variant-ligatures: common-ligatures; | ||
} | ||
.ligatures-no-common { | ||
font-variant-ligatures: no-common-ligatures; | ||
} | ||
.ligatures-discretionary { | ||
font-variant-ligatures: discretionary-ligatures; | ||
} | ||
.ligatures-no-discretionary { | ||
font-variant-ligatures: no-discretionary-ligatures; | ||
} | ||
.ligatures-historical { | ||
font-variant-ligatures: historical-ligatures; | ||
} | ||
.ligatures-no-historical { | ||
font-variant-ligatures: no-historical-ligatures; | ||
} | ||
.ligatures-contextual { | ||
font-variant-ligatures: contextual; | ||
} | ||
.ligatures-no-contextual { | ||
font-variant-ligatures: no-contextual; | ||
} | ||
.ligatures-revert { | ||
font-variant-ligatures: revert; | ||
} | ||
.text-rendering-auto { | ||
text-rendering: auto; | ||
} | ||
.text-optimize-legibility { | ||
text-rendering: optimizeLegibility; | ||
} | ||
.text-optimize-speed { | ||
text-rendering: optimizeSpeed; | ||
} | ||
.text-geometric-precision { | ||
text-rendering: geometricPrecision; | ||
} | ||
`); | ||
@@ -393,2 +617,6 @@ }); | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -398,6 +626,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -435,2 +661,6 @@ expect(css).toMatchCss(` | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -440,6 +670,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
componentPrefix: '', | ||
@@ -491,2 +719,6 @@ }).then(css => { | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -496,6 +728,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -571,2 +801,6 @@ expect(css).toMatchCss(` | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -576,6 +810,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -668,2 +900,6 @@ expect(css).toMatchCss(` | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -673,6 +909,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -768,2 +1002,6 @@ expect(css).toMatchCss(` | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -773,6 +1011,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -848,2 +1084,6 @@ expect(css).toMatchCss(` | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -853,6 +1093,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -965,2 +1203,6 @@ expect(css).toMatchCss(` | ||
}), | ||
fontVariantCaps: {}, | ||
fontVariantNumeric: {}, | ||
fontVariantLigatures: {}, | ||
textRendering: {}, | ||
}, | ||
@@ -970,6 +1212,4 @@ }, { | ||
hyphens: false, | ||
kerning: false, | ||
textUnset: false, | ||
caps: false, | ||
nums: false, | ||
ligatures: false, | ||
}).then(css => { | ||
@@ -1051,6 +1291,8 @@ expect(css).toMatchCss(` | ||
hyphens: ['active'], | ||
kerning: ['focus'], | ||
textUnset: [], | ||
caps: ['focus', 'responsive'], | ||
nums: ['group-hover'], | ||
ligatures: [], | ||
fontVariantCaps: ['focus', 'responsive'], | ||
fontVariantNumeric: ['group-hover'], | ||
fontVariantLigatures: [], | ||
textRendering: [], | ||
}, | ||
@@ -1089,2 +1331,20 @@ }).then(css => { | ||
} | ||
.kerning { | ||
font-kerning: normal; | ||
} | ||
.kerning-none { | ||
font-kerning: none; | ||
} | ||
.kerning-auto { | ||
font-kerning: auto; | ||
} | ||
.focus\\:kerning:focus { | ||
font-kerning: normal; | ||
} | ||
.focus\\:kerning-none:focus { | ||
font-kerning: none; | ||
} | ||
.focus\\:kerning-auto:focus { | ||
font-kerning: auto; | ||
} | ||
.font-family-unset { | ||
@@ -1117,157 +1377,169 @@ font-family: inherit; | ||
} | ||
.normal-caps { | ||
.caps-normal { | ||
font-variant-caps: normal; | ||
} | ||
.small-caps { | ||
.caps-small { | ||
font-variant-caps: small-caps; | ||
} | ||
.all-small-caps { | ||
.caps-all-small { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.petite-caps { | ||
.caps-petite { | ||
font-variant-caps: petite-caps; | ||
} | ||
.unicase { | ||
.caps-unicase { | ||
font-variant-caps: unicase; | ||
} | ||
.titling-caps { | ||
.caps-titling { | ||
font-variant-caps: titling-caps; | ||
} | ||
.focus\\:normal-caps:focus { | ||
.focus\\:caps-normal:focus { | ||
font-variant-caps: normal; | ||
} | ||
.focus\\:small-caps:focus { | ||
.focus\\:caps-small:focus { | ||
font-variant-caps: small-caps; | ||
} | ||
.focus\\:all-small-caps:focus { | ||
.focus\\:caps-all-small:focus { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.focus\\:petite-caps:focus { | ||
.focus\\:caps-petite:focus { | ||
font-variant-caps: petite-caps; | ||
} | ||
.focus\\:unicase:focus { | ||
.focus\\:caps-unicase:focus { | ||
font-variant-caps: unicase; | ||
} | ||
.focus\\:titling-caps:focus { | ||
.focus\\:caps-titling:focus { | ||
font-variant-caps: titling-caps; | ||
} | ||
.normal-nums { | ||
.nums-normal { | ||
font-variant-numeric: normal; | ||
} | ||
.ordinal-nums { | ||
.nums-ordinal { | ||
font-variant-numeric: ordinal; | ||
} | ||
.slashed-zeros { | ||
.nums-slashed-zero { | ||
font-variant-numeric: slashed-zero; | ||
} | ||
.lining-nums { | ||
.nums-lining { | ||
font-variant-numeric: lining-nums; | ||
} | ||
.oldstyle-nums { | ||
.nums-oldstyle { | ||
font-variant-numeric: oldstyle-nums; | ||
} | ||
.proportional-nums { | ||
.nums-proportional { | ||
font-variant-numeric: proportional-nums; | ||
} | ||
.tabular-nums { | ||
.nums-tabular { | ||
font-variant-numeric: tabular-nums; | ||
} | ||
.diagonal-fractions { | ||
.nums-diagonal-fractions { | ||
font-variant-numeric: diagonal-fractions; | ||
} | ||
.stacked-fractions { | ||
.nums-stacked-fractions { | ||
font-variant-numeric: stacked-fractions; | ||
} | ||
.group:hover .group-hover\\:normal-nums { | ||
.group:hover .group-hover\\:nums-normal { | ||
font-variant-numeric: normal; | ||
} | ||
.group:hover .group-hover\\:ordinal-nums { | ||
.group:hover .group-hover\\:nums-ordinal { | ||
font-variant-numeric: ordinal; | ||
} | ||
.group:hover .group-hover\\:slashed-zeros { | ||
.group:hover .group-hover\\:nums-slashed-zero { | ||
font-variant-numeric: slashed-zero; | ||
} | ||
.group:hover .group-hover\\:lining-nums { | ||
.group:hover .group-hover\\:nums-lining { | ||
font-variant-numeric: lining-nums; | ||
} | ||
.group:hover .group-hover\\:oldstyle-nums { | ||
.group:hover .group-hover\\:nums-oldstyle { | ||
font-variant-numeric: oldstyle-nums; | ||
} | ||
.group:hover .group-hover\\:proportional-nums { | ||
.group:hover .group-hover\\:nums-proportional { | ||
font-variant-numeric: proportional-nums; | ||
} | ||
.group:hover .group-hover\\:tabular-nums { | ||
.group:hover .group-hover\\:nums-tabular { | ||
font-variant-numeric: tabular-nums; | ||
} | ||
.group:hover .group-hover\\:diagonal-fractions { | ||
.group:hover .group-hover\\:nums-diagonal-fractions { | ||
font-variant-numeric: diagonal-fractions; | ||
} | ||
.group:hover .group-hover\\:stacked-fractions { | ||
.group:hover .group-hover\\:nums-stacked-fractions { | ||
font-variant-numeric: stacked-fractions; | ||
} | ||
.normal-ligatures { | ||
.ligatures-normal { | ||
font-variant-ligatures: normal; | ||
} | ||
.no-ligatures { | ||
.ligatures-none { | ||
font-variant-ligatures: none; | ||
} | ||
.common-ligatures { | ||
.ligatures-common { | ||
font-variant-ligatures: common-ligatures; | ||
} | ||
.no-common-ligatures { | ||
.ligatures-no-common { | ||
font-variant-ligatures: no-common-ligatures; | ||
} | ||
.discretionary-ligatures { | ||
.ligatures-discretionary { | ||
font-variant-ligatures: discretionary-ligatures; | ||
} | ||
.no-discretionary-ligatures { | ||
.ligatures-no-discretionary { | ||
font-variant-ligatures: no-discretionary-ligatures; | ||
} | ||
.historical-ligatures { | ||
.ligatures-historical { | ||
font-variant-ligatures: historical-ligatures; | ||
} | ||
.no-historical-ligatures { | ||
.ligatures-no-historical { | ||
font-variant-ligatures: no-historical-ligatures; | ||
} | ||
.contextual-ligatures { | ||
.ligatures-contextual { | ||
font-variant-ligatures: contextual; | ||
} | ||
.no-contextual-ligatures { | ||
.ligatures-no-contextual { | ||
font-variant-ligatures: no-contextual; | ||
} | ||
.text-rendering-auto { | ||
text-rendering: auto; | ||
} | ||
.text-optimize-legibility { | ||
text-rendering: optimizeLegibility; | ||
} | ||
.text-optimize-speed { | ||
text-rendering: optimizeSpeed; | ||
} | ||
.text-geometric-precision { | ||
text-rendering: geometricPrecision; | ||
} | ||
@media (min-width: 640px) { | ||
.sm\\:normal-caps { | ||
.sm\\:caps-normal { | ||
font-variant-caps: normal; | ||
} | ||
.sm\\:small-caps { | ||
.sm\\:caps-small { | ||
font-variant-caps: small-caps; | ||
} | ||
.sm\\:all-small-caps { | ||
.sm\\:caps-all-small { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.sm\\:petite-caps { | ||
.sm\\:caps-petite { | ||
font-variant-caps: petite-caps; | ||
} | ||
.sm\\:unicase { | ||
.sm\\:caps-unicase { | ||
font-variant-caps: unicase; | ||
} | ||
.sm\\:titling-caps { | ||
.sm\\:caps-titling { | ||
font-variant-caps: titling-caps; | ||
} | ||
.sm\\:focus\\:normal-caps:focus { | ||
.sm\\:focus\\:caps-normal:focus { | ||
font-variant-caps: normal; | ||
} | ||
.sm\\:focus\\:small-caps:focus { | ||
.sm\\:focus\\:caps-small:focus { | ||
font-variant-caps: small-caps; | ||
} | ||
.sm\\:focus\\:all-small-caps:focus { | ||
.sm\\:focus\\:caps-all-small:focus { | ||
font-variant-caps: all-small-caps; | ||
} | ||
.sm\\:focus\\:petite-caps:focus { | ||
.sm\\:focus\\:caps-petite:focus { | ||
font-variant-caps: petite-caps; | ||
} | ||
.sm\\:focus\\:unicase:focus { | ||
.sm\\:focus\\:caps-unicase:focus { | ||
font-variant-caps: unicase; | ||
} | ||
.sm\\:focus\\:titling-caps:focus { | ||
.sm\\:focus\\:caps-titling:focus { | ||
font-variant-caps: titling-caps; | ||
@@ -1274,0 +1546,0 @@ } |
58737
1750
463