import fs from 'fs';
import postcss from 'postcss';
import { type Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      // fontSize: {
      //   line1: 'line1',
      //   line2: 'line2',
      // },
      screens: {
        'desktop-figma': '1600px',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      animation: {
        'infinite-scroll': 'infinite-scroll 45s linear infinite',
        'highlight-product': 'highlight-product 0.1s ease-in 0s',
      },
      keyframes: {
        'infinite-scroll': {
          from: { transform: 'translateX(0%)' },
          to: { transform: 'translateX(-100%)' },
        },
        'highlight-product': {
          '100%': {
            backgroundImage: 'url(/img/components/products/highlight.svg)',
          },
        },
        scaling: {
          '0%': {
            transform: 'min-width 31.6vw min-height 31.8vw',
            transition: 'transform 500ms',
          },
          '100%': {
            transform: 'min-width 48vw min-height 48vw',
          },
        },
      },
    },
  },
  plugins: [
    function ({ addBase }: { addBase: any }) {
      const preflightStyles = postcss.parse(
        fs.readFileSync(
          require.resolve('tailwindcss/lib/css/preflight.css'),
          'utf8'
        )
      );
      preflightStyles.walkRules((rule) => {
        rule.selector = '.no-tailwind-base ' + rule.selector;
      });
      addBase(preflightStyles.nodes);
    },
  ],
};

export default config;