Add native aspect ratio support (#5359)

src/plugins/aspectRatio.js

@@ -0,0 +1,5 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function () {
+  return createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]])
+}

src/plugins/index.js

@@ -21,6 +21,7 @@ export { default as clear } from './clear'
 export { default as margin } from './margin'
 export { default as boxSizing } from './boxSizing'
 export { default as display } from './display'
+export { default as aspectRatio } from './aspectRatio'
 export { default as height } from './height'
 export { default as maxHeight } from './maxHeight'
 export { default as minHeight } from './minHeight'

stubs/defaultConfig.stub.js

@@ -71,6 +71,11 @@ module.exports = {
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
     },
+    aspectRatio: {
+      'auto': 'auto',
+      'square': '1 / 1',
+      'video': '16 / 9',
+    },
     backdropBlur: (theme) => theme('blur'),
     backdropBrightness: (theme) => theme('brightness'),
     backdropContrast: (theme) => theme('contrast'),

tests/jit/arbitrary-values.test.css

@@ -48,6 +48,12 @@
 .mt-\[clamp\(30px\2c 100px\)\] {
   margin-top: clamp(30px, 100px);
 }
+.aspect-\[16\/9\] {
+  aspect-ratio: 16 / 9;
+}
+.aspect-\[var\(--aspect\)\] {
+  aspect-ratio: var(--aspect);
+}
 .h-\[3\.23rem\] {
   height: 3.23rem;
 }

tests/jit/arbitrary-values.test.html

@@ -15,6 +15,7 @@
     <div class="bg-opacity-[var(--value)]"></div>
     <div class="border-[#f00]"></div>
     <div class="border-[2.5px]"></div>
+    <div class="aspect-[16/9] aspect-[var(--aspect)]"></div>
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
     <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>

tests/jit/basic-usage.test.css

@@ -193,6 +193,12 @@
 .hidden {
   display: none;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
 .h-16 {
   height: 4rem;
 }

tests/jit/basic-usage.test.html

@@ -168,5 +168,6 @@
     <div class="break-words"></div>
     <div class="z-30"></div>
     <div class="content-none"></div>
+    <div class="aspect-square aspect-video"></div>
   </body>
 </html>