| 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": "AACA,6CAmBA,GAAM,GAAkB,IAAO,EAC7B,cAAe,qDAGX,EAAe,CACnB,EACA,CAAE,QAAO,SAET,IAAU,OACN,0DAcA,CACE,gBAAiB,EAAM,GAAK,EAAM,IAAM,SAAW,EAAM,cAAe,GAAK,EAAM,EAAG,GAAK,EAAM,GACjG,gBAAiB,EAAM,GAAK,EAAM,cAAe,GAAK,EAAM,EAAG,GAAK,EAAM,GAE1E,EAAG,EAAM,GAAK,EAAM,IAAM,QAAU,EAAI,gBAAkB,OAC1D,UAAW,EACR,IACD,EACE,iBACE,aAAiB,gDAiBlB,EAAe,CAC1B,EACA,KAEA,GAAI,MAAM,QAAQ,GAChB,OAAQ,EAAM,QAEP,IACH,MAAO,GAAU,EAAc,CAAE,EAAG,EAAM,SAEvC,IACH,MAAO,GAAU,EAAc,CAAE,EAAG,EAAM,SAEvC,OACH,MAAO,GAAU,EAAc,EAAM,YAGrC,MAAI,GAAM,SAAW,GACnB,GAAQ,EAAM,GAAG,MAAM,MAIlB,EAAU,EAAc,CAAE,EAAG,EAAM,GAAI,EAAG,EAAM,KAM7D,GAAI,IAAU,OACZ,MAAO,GAAU,EAAc,GAIjC,GAAI,MAAO,IAAU,SACnB,MAAO,GAAU,EAAc,GAIjC,GAAI,IAAY,OACd,MAAO,GAAU,EAAc,CAAE,EAAG,EAAO,EAAG,IAIhD,GAAM,CAAC,EAAG,GAAM,EAAiB,MAAM,KACvC,MAAO,GAAU,EAAc,CAAE,IAAG",
|