125 lines
2.4 KiB
JavaScript
125 lines
2.4 KiB
JavaScript
const plugin = require('tailwindcss/plugin')
|
|
|
|
const baseStyles = {
|
|
position: 'relative',
|
|
paddingBottom: `calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)`,
|
|
}
|
|
|
|
const childStyles = {
|
|
position: 'absolute',
|
|
height: '100%',
|
|
width: '100%',
|
|
top: '0',
|
|
right: '0',
|
|
bottom: '0',
|
|
left: '0',
|
|
}
|
|
|
|
const noneComponent = {
|
|
'.aspect-none': {
|
|
position: 'static',
|
|
paddingBottom: '0',
|
|
},
|
|
'.aspect-none > *': {
|
|
position: 'static',
|
|
height: 'auto',
|
|
width: 'auto',
|
|
top: 'auto',
|
|
right: 'auto',
|
|
bottom: 'auto',
|
|
left: 'auto',
|
|
},
|
|
}
|
|
|
|
const aspectRatio = plugin(
|
|
function ({ addComponents, matchComponents, theme, variants, e }) {
|
|
const values = theme('aspectRatio')
|
|
|
|
if (matchComponents) {
|
|
matchComponents(
|
|
{
|
|
'aspect-w': (value) => [
|
|
{
|
|
...baseStyles,
|
|
'--tw-aspect-w': value,
|
|
},
|
|
{
|
|
'> *': childStyles,
|
|
},
|
|
],
|
|
'aspect-h': (value) => ({ '--tw-aspect-h': value }),
|
|
},
|
|
{ values }
|
|
)
|
|
|
|
addComponents(noneComponent)
|
|
|
|
return
|
|
}
|
|
|
|
const baseSelectors = Object.entries(values)
|
|
.map(([key, value]) => {
|
|
return `.${e(`aspect-w-${key}`)}`
|
|
})
|
|
.join(',\n')
|
|
|
|
const childSelectors = Object.entries(values)
|
|
.map(([key, value]) => {
|
|
return `.${e(`aspect-w-${key}`)} > *`
|
|
})
|
|
.join(',\n')
|
|
|
|
addComponents(
|
|
[
|
|
{
|
|
[baseSelectors]: baseStyles,
|
|
[childSelectors]: childStyles,
|
|
},
|
|
noneComponent,
|
|
Object.entries(values).map(([key, value]) => {
|
|
return {
|
|
[`.${e(`aspect-w-${key}`)}`]: {
|
|
'--tw-aspect-w': value,
|
|
},
|
|
}
|
|
}),
|
|
Object.entries(values).map(([key, value]) => {
|
|
return {
|
|
[`.${e(`aspect-h-${key}`)}`]: {
|
|
'--tw-aspect-h': value,
|
|
},
|
|
}
|
|
}),
|
|
],
|
|
variants('aspectRatio')
|
|
)
|
|
},
|
|
{
|
|
theme: {
|
|
aspectRatio: {
|
|
1: '1',
|
|
2: '2',
|
|
3: '3',
|
|
4: '4',
|
|
5: '5',
|
|
6: '6',
|
|
7: '7',
|
|
8: '8',
|
|
9: '9',
|
|
10: '10',
|
|
11: '11',
|
|
12: '12',
|
|
13: '13',
|
|
14: '14',
|
|
15: '15',
|
|
16: '16',
|
|
},
|
|
},
|
|
variants: {
|
|
aspectRatio: ['responsive'],
|
|
},
|
|
}
|
|
)
|
|
|
|
module.exports = aspectRatio
|