diff --git a/src/corePlugins.js b/src/corePlugins.js index bfe6ca6fbabe..be936fd6a6d4 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -2072,6 +2072,10 @@ export let corePlugins = { type: ['lookup', 'number', 'any'], }), + fontStretch: createUtilityPlugin('fontStretch', [['stretch', ['fontStretch']]], { + type: ['lookup', 'percentage', 'any'], + }), + textTransform: ({ addUtilities }) => { addUtilities({ '.uppercase': { 'text-transform': 'uppercase' }, diff --git a/stubs/config.full.js b/stubs/config.full.js index 4bb1e89bbe0c..7aaa0f2bb3fd 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -347,6 +347,17 @@ module.exports = { extrabold: '800', black: '900', }, + fontStretch: { + normal: 'normal', + 'ultra-condensed': 'ultra-condensed', + 'extra-condensed': 'extra-condensed', + condensed: 'condensed', + 'semi-condensed': 'semi-condensed', + 'semi-expanded': 'semi-expanded', + expanded: 'expanded', + 'extra-expanded': 'extra-expanded', + 'ultra-expanded': 'ultra-expanded', + }, gap: ({ theme }) => theme('spacing'), gradientColorStops: ({ theme }) => theme('colors'), gradientColorStopPositions: { diff --git a/tests/plugins/__snapshots__/fontStretch.test.js.snap b/tests/plugins/__snapshots__/fontStretch.test.js.snap new file mode 100644 index 000000000000..460970e515c5 --- /dev/null +++ b/tests/plugins/__snapshots__/fontStretch.test.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should test the 'fontStretch' plugin 1`] = ` +" +.stretch-\\[100\\%\\] { + font-stretch: 100%; +} + +.stretch-\\[var\\(--my-value\\)\\] { + font-stretch: var(--my-value); +} + +.stretch-condensed { + font-stretch: condensed; +} + +.stretch-expanded { + font-stretch: expanded; +} + +.stretch-extra-condensed { + font-stretch: extra-condensed; +} + +.stretch-extra-expanded { + font-stretch: extra-expanded; +} + +.stretch-normal { + font-stretch: normal; +} + +.stretch-semi-condensed { + font-stretch: semi-condensed; +} + +.stretch-semi-expanded { + font-stretch: semi-expanded; +} + +.stretch-ultra-condensed { + font-stretch: ultra-condensed; +} + +.stretch-ultra-expanded { + font-stretch: ultra-expanded; +} +" +`; diff --git a/tests/plugins/fontStretch.test.js b/tests/plugins/fontStretch.test.js new file mode 100644 index 000000000000..d037a297da41 --- /dev/null +++ b/tests/plugins/fontStretch.test.js @@ -0,0 +1,9 @@ +import { quickPluginTest } from '../util/run' + +quickPluginTest('fontStretch', { + safelist: [ + // Arbitrary values + 'stretch-[100%]', + 'stretch-[var(--my-value)]', + ], +}).toMatchSnapshot() diff --git a/types/config.d.ts b/types/config.d.ts index fb3652cf59a0..7f9f8c3504e8 100644 --- a/types/config.d.ts +++ b/types/config.d.ts @@ -189,6 +189,7 @@ interface ThemeConfig { > > fontWeight: ResolvableTo + fontStretch: ResolvableTo lineHeight: ResolvableTo letterSpacing: ResolvableTo textColor: ThemeConfig['colors']