| 4 | "sourcesContent": ["import type { Context, CSSRules, ThemeSection, Directive, MaybeThunk } from 'twind'\nimport { apply, directive } from 'twind'\n\ndeclare module 'twind' {\n interface Theme {\n aspectRatio?: ThemeSection<string>\n }\n}\n\nexport interface Ratio {\n w: string | number\n h: string | number\n}\n\nexport interface AspectRatio {\n (ratio: 'none' | `${number}/${number}` | Ratio): Directive<CSSRules>\n (width: string | number, height: string | number): Directive<CSSRules>\n (parts: string[], context: Context): Directive<CSSRules>\n}\n\nconst aspectRatioCalc = () => ({\n paddingBottom: `calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)`,\n})\n\nconst aspectRatio$ = (\n ratio: 'none' | { w?: string | number; h?: string | number },\n { theme, tag }: Context,\n): MaybeThunk<CSSRules> =>\n ratio === 'none'\n ? apply`static pb-0 children:(static h-auto w-auto inset-auto)`\n : // {\n // position: 'static',\n // paddingBottom: '0',\n // '&>*': {\n // position: 'static',\n // height: 'auto',\n // width: 'auto',\n // top: 'auto',\n // right: 'auto',\n // bottom: 'auto',\n // left: 'auto',\n // },\n // }\n {\n '--tw-aspect-w': ratio.w && ratio.w !== 'ratio' && theme('aspectRatio', '' + ratio.w, '' + ratio.w),\n '--tw-aspect-h': ratio.h && theme('aspectRatio', '' + ratio.h, '' + ratio.h),\n // Add additional aspect-ratio class only once\n _: ratio.h && ratio.w !== 'ratio' ? tag('aspect-ratio') : undefined,\n ':global': {\n ['.' +\n tag(\n 'aspect-ratio',\n )]: apply`relative ${aspectRatioCalc} children:(absolute h-full w-full inset-0)`,\n // {\n // position: 'relative',\n // paddingBottom: `calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%)`,\n // '&>*': {\n // position: 'absolute',\n // height: '100%',\n // width: '100%',\n // top: '0',\n // right: '0',\n // bottom: '0',\n // left: '0',\n // },\n // },\n },\n }\n\nexport const aspectRatio = ((\n ratio: 'none' | Ratio | string | number | string[],\n context: string | number | Context,\n): Directive<CSSRules> => {\n if (Array.isArray(ratio)) {\n switch (ratio[0]) {\n // aspect-w-16\n case 'w':\n return directive(aspectRatio$, { w: ratio[1] })\n // aspect-h-9\n case 'h':\n return directive(aspectRatio$, { h: ratio[1] })\n // aspect-none\n case 'none':\n return directive(aspectRatio$, ratio[0])\n default: {\n // aspect-16/9\n if (ratio.length === 1) {\n ratio = ratio[0].split('/')\n }\n\n // aspect-16-9\n return directive(aspectRatio$, { w: ratio[0], h: ratio[1] })\n }\n }\n }\n\n // aspectRatio('none')\n if (ratio === 'none') {\n return directive(aspectRatio$, ratio)\n }\n\n // aspectRatio({w: 16, h: 9})\n if (typeof ratio === 'object') {\n return directive(aspectRatio$, ratio)\n }\n\n // aspectRatio(16, 9)\n if (context !== undefined) {\n return directive(aspectRatio$, { w: ratio, h: context as string | number })\n }\n\n // aspectRatio('16/9')\n const [w, h] = (ratio as string).split('/')\n return directive(aspectRatio$, { w, h })\n}) as AspectRatio\n"],
|
| 5 | "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AACA,mBAAiC;AAmBjC,IAAM,kBAAkB,MAAO;AAAA,EAC7B,eAAe;AAAA;AAGjB,IAAM,eAAe,CACnB,OACA,CAAE,OAAO,SAET,UAAU,SACN,6EAcA;AAAA,EACE,iBAAiB,MAAM,KAAK,MAAM,MAAM,WAAW,MAAM,eAAe,KAAK,MAAM,GAAG,KAAK,MAAM;AAAA,EACjG,iBAAiB,MAAM,KAAK,MAAM,eAAe,KAAK,MAAM,GAAG,KAAK,MAAM;AAAA,EAE1E,GAAG,MAAM,KAAK,MAAM,MAAM,UAAU,IAAI,kBAAkB;AAAA,EAC1D,WAAW;AAAA,KACR,MACD,IACE,kBACE,8BAAiB;AAAA;AAAA;AAiBxB,IAAM,cAAe,CAC1B,OACA;AAEA,MAAI,MAAM,QAAQ;AAChB,YAAQ,MAAM;AAAA,WAEP;AACH,eAAO,uBAAU,cAAc,CAAE,GAAG,MAAM;AAAA,WAEvC;AACH,eAAO,uBAAU,cAAc,CAAE,GAAG,MAAM;AAAA,WAEvC;AACH,eAAO,uBAAU,cAAc,MAAM;AAAA;AAGrC,YAAI,MAAM,WAAW;AACnB,kBAAQ,MAAM,GAAG,MAAM;AAAA;AAIzB,eAAO,uBAAU,cAAc,CAAE,GAAG,MAAM,IAAI,GAAG,MAAM;AAAA;AAAA;AAAA;AAM7D,MAAI,UAAU;AACZ,WAAO,uBAAU,cAAc;AAAA;AAIjC,MAAI,OAAO,UAAU;AACnB,WAAO,uBAAU,cAAc;AAAA;AAIjC,MAAI,YAAY;AACd,WAAO,uBAAU,cAAc,CAAE,GAAG,OAAO,GAAG;AAAA;AAIhD,QAAM,CAAC,GAAG,KAAM,MAAiB,MAAM;AACvC,SAAO,uBAAU,cAAc,CAAE,GAAG;AAAA;",
|