import type { Rule } from '@unocss/core' ; import type { Theme } from '../theme' ; import { handler as h } from '../utils' ; const sizeMapping = { h : 'height' , w : 'width' , inline : 'inline-size' , block : 'block-size' , } ; function getPropName ( minmax , hw ) { return `${ minmax || '' }${ sizeMapping [ hw ] }` ; } type SizeProps = 'width' | 'height' | 'maxWidth' | 'maxHeight' | 'minWidth' | 'minHeight' | 'inlineSize' | 'blockSize' | 'maxInlineSize' | 'maxBlockSize' | 'minInlineSize' | 'minBlockSize' ; function getSizeValue ( minmax , hw , theme , prop ) { const str = getPropName ( minmax , hw ) . replace ( /-(\w)/g , ( _ , p ) => p . toUpperCase ( ) ) as SizeProps ; const v = theme [ str ] ?. [ prop ] ; if ( v != null ) return v ; switch ( prop ) { case 'fit' : case 'max' : case 'min' : return `${ prop }-content` ; } return h . bracket . cssvar . auto . fraction . rem ( prop ) ; } export const sizes = [ [ /^(min-|max-)?([wh])-(.+)$/ , ( [ , m , w , s ] , { theme } ) => ( { [ getPropName ( m , w ) ] : getSizeValue ( m , w , theme , s ) } ) ] , [ /^(min-|max-)?(block|inline)-(.+)$/ , ( [ , m , w , s ] , { theme } ) => ( { [ getPropName ( m , w ) ] : getSizeValue ( m , w , theme , s ) } ) ] , [ /^(min-|max-)?(w)-screen-(.+)$/ , ( [ , m , w , s ] , { theme } ) => ( { [ getPropName ( m , w ) ] : theme . breakpoints ?. [ s ] } ) ] , ] ; function getAspectRatio ( prop ) { if ( /^\d+\/\d+$/ . test ( prop ) ) return prop ; switch ( prop ) { case 'square' : return '1/1' ; case 'video' : return '16/9' ; } return h . bracket . cssvar . auto . number ( prop ) ; } export const aspectRatio = [ [ /^aspect-(?:ratio-)?(.+)$/ , ( [ , d ] ) => ( { 'aspect-ratio' : getAspectRatio ( d ) } ) ] , ] ;