postcss.config.cjs

/**
 * ! Important References:
 * https://mantine.dev/guides/next/#postcss-setup
 * https://nextjs.org/docs/pages/building-your-application/configuring/post-css#default-behavior
 * https://stackoverflow.com/q/69725289/17627866
 */

module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
    "postcss-flexbugs-fixes": {},
    "postcss-preset-env": {
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
      features: {
        "custom-properties": false,
      },
    },
  },
};