Add size-* shorthand (#12287)
* Add `size-*` shorthand Add plugin tests Adjust options wip * Update changelog
This commit is contained in:
Jordan Pittman
GitHub
parent
9d83400a51
commit
e4b32a7a32
5 changed files with 383 additions and 0 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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']]]),
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
337
tests/plugins/__snapshots__/size.test.js.snap
Normal file
337
tests/plugins/__snapshots__/size.test.js.snap
Normal file
|
|
@ -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;
|
||||
}
|
||||
"
|
||||
`;
|
||||
9
tests/plugins/size.test.js
Normal file
9
tests/plugins/size.test.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { quickPluginTest } from '../util/run'
|
||||
|
||||
quickPluginTest('size', {
|
||||
safelist: [
|
||||
// Arbitrary values
|
||||
's-[12px]',
|
||||
's-[var(--my-value)]',
|
||||
],
|
||||
}).toMatchSnapshot()
|
||||
Loading…
Add table
Add a link
Reference in a new issue