const plugin = require("tailwindcss/plugin");

// Safari 14-compatible aspect ratio
module.exports = plugin(function ({ matchUtilities, theme }) {
  matchUtilities(
    {
      aspect: (value) => ({
        "@supports (aspect-ratio: 1 / 1)": {
          aspectRatio: value,
        },
        "@supports not (aspect-ratio: 1 / 1)": {
          "&::before": {
            content: '""',
            float: "left",
            paddingTop: `calc(100% / (${value}))`,
          },
          "&::after": {
            clear: "left",
            content: '""',
            display: "block",
          },
        },
      }),
    },
    { values: theme("aspectRatio") }
  );
});