Add size-* shorthand (#12287)

* Add `size-*` shorthand Add plugin tests Adjust options wip * Update changelog
tailwindlabs · Oct 25, 2023 · e4b32a7 · e4b32a7
1 parent 9d83400
commit e4b32a7
Show file tree

Hide file tree

Showing 5 changed files with 383 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}
+"
+`;