From e4b32a7a32e5844649fff4132ddb9a1675558629 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 25 Oct 2023 11:54:37 -0400 Subject: [PATCH] Add `size-*` shorthand (#12287) * Add `size-*` shorthand Add plugin tests Adjust options wip * Update changelog --- CHANGELOG.md | 1 + src/corePlugins.js | 2 + stubs/config.full.js | 34 ++ tests/plugins/__snapshots__/size.test.js.snap | 337 ++++++++++++++++++ tests/plugins/size.test.js | 9 + 5 files changed, 383 insertions(+) create mode 100644 tests/plugins/__snapshots__/size.test.js.snap create mode 100644 tests/plugins/size.test.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d06371b8dd54..cfa5d57b75ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200)) - Support loading plugins by package / file name ([#12087](https://github.com/tailwindlabs/tailwindcss/pull/12087)) - Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180)) +- Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287)) ### Changed diff --git a/src/corePlugins.js b/src/corePlugins.js index bfe6ca6fbabe..b308affe5b21 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -773,6 +773,8 @@ export let corePlugins = { aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]), + size: createUtilityPlugin('size', [['size', ['width', 'height']]]), + height: createUtilityPlugin('height', [['h', ['height']]]), maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]), minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]), diff --git a/stubs/config.full.js b/stubs/config.full.js index 0ea7df9ba8d4..2f780a277d9c 100644 --- a/stubs/config.full.js +++ b/stubs/config.full.js @@ -968,6 +968,40 @@ module.exports = { '3/4': '75%', full: '100%', }), + size: ({ theme }) => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + min: 'min-content', + max: 'max-content', + fit: 'fit-content', + }), width: ({ theme }) => ({ auto: 'auto', ...theme('spacing'), diff --git a/tests/plugins/__snapshots__/size.test.js.snap b/tests/plugins/__snapshots__/size.test.js.snap new file mode 100644 index 000000000000..d197cf9727a1 --- /dev/null +++ b/tests/plugins/__snapshots__/size.test.js.snap @@ -0,0 +1,337 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should test the 'size' plugin 1`] = ` +" +.size-0 { + width: 0; + height: 0; +} + +.size-0\\.5 { + width: .125rem; + height: .125rem; +} + +.size-1 { + width: .25rem; + height: .25rem; +} + +.size-1\\.5 { + width: .375rem; + height: .375rem; +} + +.size-1\\/12 { + width: 8.33333%; + height: 8.33333%; +} + +.size-1\\/2 { + width: 50%; + height: 50%; +} + +.size-1\\/3 { + width: 33.3333%; + height: 33.3333%; +} + +.size-1\\/4 { + width: 25%; + height: 25%; +} + +.size-1\\/5 { + width: 20%; + height: 20%; +} + +.size-1\\/6 { + width: 16.6667%; + height: 16.6667%; +} + +.size-10 { + width: 2.5rem; + height: 2.5rem; +} + +.size-10\\/12 { + width: 83.3333%; + height: 83.3333%; +} + +.size-11 { + width: 2.75rem; + height: 2.75rem; +} + +.size-11\\/12 { + width: 91.6667%; + height: 91.6667%; +} + +.size-12 { + width: 3rem; + height: 3rem; +} + +.size-14 { + width: 3.5rem; + height: 3.5rem; +} + +.size-16 { + width: 4rem; + height: 4rem; +} + +.size-2 { + width: .5rem; + height: .5rem; +} + +.size-2\\.5 { + width: .625rem; + height: .625rem; +} + +.size-2\\/12 { + width: 16.6667%; + height: 16.6667%; +} + +.size-2\\/3 { + width: 66.6667%; + height: 66.6667%; +} + +.size-2\\/4 { + width: 50%; + height: 50%; +} + +.size-2\\/5 { + width: 40%; + height: 40%; +} + +.size-2\\/6 { + width: 33.3333%; + height: 33.3333%; +} + +.size-20 { + width: 5rem; + height: 5rem; +} + +.size-24 { + width: 6rem; + height: 6rem; +} + +.size-28 { + width: 7rem; + height: 7rem; +} + +.size-3 { + width: .75rem; + height: .75rem; +} + +.size-3\\.5 { + width: .875rem; + height: .875rem; +} + +.size-3\\/12 { + width: 25%; + height: 25%; +} + +.size-3\\/4 { + width: 75%; + height: 75%; +} + +.size-3\\/5 { + width: 60%; + height: 60%; +} + +.size-3\\/6 { + width: 50%; + height: 50%; +} + +.size-32 { + width: 8rem; + height: 8rem; +} + +.size-36 { + width: 9rem; + height: 9rem; +} + +.size-4 { + width: 1rem; + height: 1rem; +} + +.size-4\\/12 { + width: 33.3333%; + height: 33.3333%; +} + +.size-4\\/5 { + width: 80%; + height: 80%; +} + +.size-4\\/6 { + width: 66.6667%; + height: 66.6667%; +} + +.size-40 { + width: 10rem; + height: 10rem; +} + +.size-44 { + width: 11rem; + height: 11rem; +} + +.size-48 { + width: 12rem; + height: 12rem; +} + +.size-5 { + width: 1.25rem; + height: 1.25rem; +} + +.size-5\\/12 { + width: 41.6667%; + height: 41.6667%; +} + +.size-5\\/6 { + width: 83.3333%; + height: 83.3333%; +} + +.size-52 { + width: 13rem; + height: 13rem; +} + +.size-56 { + width: 14rem; + height: 14rem; +} + +.size-6 { + width: 1.5rem; + height: 1.5rem; +} + +.size-6\\/12 { + width: 50%; + height: 50%; +} + +.size-60 { + width: 15rem; + height: 15rem; +} + +.size-64 { + width: 16rem; + height: 16rem; +} + +.size-7 { + width: 1.75rem; + height: 1.75rem; +} + +.size-7\\/12 { + width: 58.3333%; + height: 58.3333%; +} + +.size-72 { + width: 18rem; + height: 18rem; +} + +.size-8 { + width: 2rem; + height: 2rem; +} + +.size-8\\/12 { + width: 66.6667%; + height: 66.6667%; +} + +.size-80 { + width: 20rem; + height: 20rem; +} + +.size-9 { + width: 2.25rem; + height: 2.25rem; +} + +.size-9\\/12 { + width: 75%; + height: 75%; +} + +.size-96 { + width: 24rem; + height: 24rem; +} + +.size-auto { + width: auto; + height: auto; +} + +.size-fit { + width: -moz-fit-content; + width: fit-content; + height: -moz-fit-content; + height: fit-content; +} + +.size-full { + width: 100%; + height: 100%; +} + +.size-max { + width: max-content; + height: max-content; +} + +.size-min { + width: min-content; + height: min-content; +} + +.size-px { + width: 1px; + height: 1px; +} +" +`; diff --git a/tests/plugins/size.test.js b/tests/plugins/size.test.js new file mode 100644 index 000000000000..7f696ee32062 --- /dev/null +++ b/tests/plugins/size.test.js @@ -0,0 +1,9 @@ +import { quickPluginTest } from '../util/run' + +quickPluginTest('size', { + safelist: [ + // Arbitrary values + 's-[12px]', + 's-[var(--my-value)]', + ], +}).toMatchSnapshot()