import { spacing } from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
    spacing: {
      ...spacing,
      0.5: undefined,
      1.5: undefined,
      2.5: undefined,
      3.5: undefined,
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      function extractVars(obj, group = '', prefix) {
        return Object.keys(obj).reduce((vars, key) => {
          const value = obj[key];
          if (!value || typeof value === 'boolean') return vars;
          const cssVariable = key === 'DEFAULT' ? `--${prefix}${group}` : `--${prefix}${group}-${key}`;
          const newVars = typeof value === 'string' ? { [cssVariable]: value } : extractVars(value, `-${key}`, prefix);

          return { ...vars, ...newVars };
        }, {});
      }

      addUtilities({
        ':root': {
          ...extractVars(theme('colors'), '', 'color'),
          ...extractVars(theme('boxShadow'), '', 'shadow'),
          ...extractVars(theme('ringWidth'), '', 'ring'),
          ...extractVars(theme('ringColor'), '', 'ring'),
          ...extractVars(theme('ringOffsetWidth'), '', 'ring'),
          ...extractVars(theme('ringOffsetColor'), '', 'ring'),
          ...extractVars(theme('spacing'), '', 'space'),
          ...extractVars(theme('screens'), '', 'screen'),
          ...extractVars(theme('maxWidth'), '', 'w'),
          ...extractVars(theme('borderRadius'), '', 'rounded'),
        },
      });
    },
  ],
};