@vulppi/tailwindcss/dist/container.js

A collection of plugins for TailwindCSS.

// node_modules/tailwindcss/dist/plugin.mjs
function u(n, i) {
  return { handler: n, config: i };
}
u.withOptions = function(n, i = () => ({})) {
  function t(o) {
    return { handler: n(o), config: i(o) };
  }
  return t.__isOptionsFunction = true, t;
};
var g = u;

// src/utils/comment.ts
function isRem(str) {
  return /^[0-9]+rem$/.test(str);
}
function parseRemToPx(str) {
  const remValue = parseFloat(str.replace(/rem$/, ""));
  return `${remValue * 16}px`;
}
function createPxComment(str) {
  if (isRem(str))
    return ` /* ${parseRemToPx(str)} */`;
  return "";
}

// src/utils/theme-content.ts
function createNumber(length) {
  return Array.from({ length }, (_, i) => i + 1).reduce((acc, cur) => ({ ...acc, [cur]: cur.toString() }), {});
}

// src/container.ts
var containers = g(function({ matchUtilities, addUtilities, theme }) {
  addUtilities({
    ".flex-center": {
      alignItems: "center",
      justifyContent: "center"
    }
  });
  matchUtilities({
    stack: (value) => ({
      display: "flex",
      flexDirection: "column" + value
    }),
    cluster: (value) => ({
      display: "flex",
      flexDirection: "row" + value,
      flexWrap: "wrap"
    })
  }, { values: theme("containersReverse") });
  matchUtilities({
    center: (value) => ({
      display: "flex",
      flexDirection: "column",
      marginLeft: "auto",
      marginRight: "auto",
      width: "100%",
      maxWidth: `${value}` + createPxComment(value)
    })
  }, { values: { ...theme("width"), ...theme("maxWidth") } });
  matchUtilities({
    switcher: (value) => ({
      display: "flex",
      flexDirection: "row",
      flexWrap: "wrap",
      "& > *": {
        flexGrow: "1",
        flexBasis: `calc((${value} - 100%) * 999)` + createPxComment(value),
        "& > *": {
          maxWidth: "100%"
        }
      }
    }),
    "switcher-reverse": (value) => ({
      display: "flex",
      flexDirection: "row-reverse",
      flexWrap: "wrap",
      "& > *": {
        flexGrow: "1",
        flexBasis: `calc((${value} - 100%) * 999)` + createPxComment(value),
        "& > *": {
          maxWidth: "100%"
        }
      }
    })
  }, { values: theme("maxWidth") });
  matchUtilities({
    "switcher-threshold": (value) => ({
      [`& > :nth-last-child(n + ${value}), & > :nth-last-child(n + ${value}) ~ *`]: {
        flexBasis: "100%"
      }
    })
  }, { values: theme("switcherThreshold") });
}, {
  theme: {
    containersReverse: {
      DEFAULT: "",
      reverse: "-reverse"
    },
    switcherThreshold: createNumber(16)
  }
});
var container_default = containers;
export {
  container_default as default
};