Skip to content

Commit e9cde3a

Browse files
authored
Add native aspect ratio support (#5359)
1 parent 154d990 commit e9cde3a

7 files changed

+25
-0
lines changed

src/plugins/aspectRatio.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import createUtilityPlugin from '../util/createUtilityPlugin'
2+
3+
export default function () {
4+
return createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]])
5+
}

src/plugins/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export { default as clear } from './clear'
2121
export { default as margin } from './margin'
2222
export { default as boxSizing } from './boxSizing'
2323
export { default as display } from './display'
24+
export { default as aspectRatio } from './aspectRatio'
2425
export { default as height } from './height'
2526
export { default as maxHeight } from './maxHeight'
2627
export { default as minHeight } from './minHeight'

stubs/defaultConfig.stub.js

+5
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ module.exports = {
7171
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
7272
bounce: 'bounce 1s infinite',
7373
},
74+
aspectRatio: {
75+
'auto': 'auto',
76+
'square': '1 / 1',
77+
'video': '16 / 9',
78+
},
7479
backdropBlur: (theme) => theme('blur'),
7580
backdropBrightness: (theme) => theme('brightness'),
7681
backdropContrast: (theme) => theme('contrast'),

tests/jit/arbitrary-values.test.css

+6
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,12 @@
4848
.mt-\[clamp\(30px\2c 100px\)\] {
4949
margin-top: clamp(30px, 100px);
5050
}
51+
.aspect-\[16\/9\] {
52+
aspect-ratio: 16 / 9;
53+
}
54+
.aspect-\[var\(--aspect\)\] {
55+
aspect-ratio: var(--aspect);
56+
}
5157
.h-\[3\.23rem\] {
5258
height: 3.23rem;
5359
}

tests/jit/arbitrary-values.test.html

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<div class="bg-opacity-[var(--value)]"></div>
1616
<div class="border-[#f00]"></div>
1717
<div class="border-[2.5px]"></div>
18+
<div class="aspect-[16/9] aspect-[var(--aspect)]"></div>
1819
<div class="w-[3.23rem]"></div>
1920
<div class="w-[calc(100%+1rem)]"></div>
2021
<div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>

tests/jit/basic-usage.test.css

+6
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,12 @@
193193
.hidden {
194194
display: none;
195195
}
196+
.aspect-square {
197+
aspect-ratio: 1 / 1;
198+
}
199+
.aspect-video {
200+
aspect-ratio: 16 / 9;
201+
}
196202
.h-16 {
197203
height: 4rem;
198204
}

tests/jit/basic-usage.test.html

+1
Original file line numberDiff line numberDiff line change
@@ -168,5 +168,6 @@
168168
<div class="break-words"></div>
169169
<div class="z-30"></div>
170170
<div class="content-none"></div>
171+
<div class="aspect-square aspect-video"></div>
171172
</body>
172173
</html>

0 commit comments

Comments
 (0)