test.js

const _ = require('lodash');
const cssMatcher = require('jest-matcher-css');
const postcss = require('postcss');
const tailwindcss = require('tailwindcss');
const gradientsPlugin = require('./index.js');

const generatePluginCss = (config) => {
  return postcss(
    tailwindcss(
      _.merge({
        theme: {
          screens: {
            'sm': '640px',
          },
        },
        corePlugins: false,
        plugins: [
          gradientsPlugin,
        ],
      }, config)
    )
  )
  .process('@tailwind utilities', {
    from: undefined,
  })
  .then(result => {
    return result.css;
  });
};

expect.extend({
  toMatchCss: cssMatcher,
});

test('only one utility is generated by default', () => {
  return generatePluginCss().then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      @media (min-width: 640px) {
        .sm\\:bg-none {
          background-image: none;
        }
      }
    `);
  });
});

test('no gradient is generated without directions or positions', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {},
      linearGradientColors: {
        'red': '#f00',
        'green': '#0f0',
        'blue': '#00f',
      },
      radialGradientPositions: {},
      radialGradientColors: {
        'red': '#f00',
        'green': '#0f0',
        'blue': '#00f',
      },
      conicGradientPositions: {},
      conicGradientColors: {
        'red': '#f00',
        'green': '#0f0',
        'blue': '#00f',
      },
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      @media (min-width: 640px) {
        .sm\\:bg-none {
          background-image: none;
        }
      }
    `);
  });
});

test('linear gradients have default directions', () => {
  return generatePluginCss({
    theme: {
      linearGradientColors: {
        'red': '#f00',
      },
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-tr-red {
        background-image: linear-gradient(to top right, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-r-red {
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-br-red {
        background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-b-red {
        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-bl-red {
        background-image: linear-gradient(to bottom left, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-l-red {
        background-image: linear-gradient(to left, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-tl-red {
        background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), #f00);
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('radial gradients have a default shape, size, and positions', () => {
  return generatePluginCss({
    theme: {
      radialGradientColors: {
        'red': '#f00',
      },
    },
    variants: {
      backgroundImage: [],
      radialGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-radial-red {
        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-t-red {
        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-tr-red {
        background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-r-red {
        background-image: radial-gradient(closest-side at right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-br-red {
        background-image: radial-gradient(closest-side at bottom right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-b-red {
        background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-bl-red {
        background-image: radial-gradient(closest-side at bottom left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-l-red {
        background-image: radial-gradient(closest-side at left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-tl-red {
        background-image: radial-gradient(closest-side at top left, #f00, rgba(255, 0, 0, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('conic gradients have a default starting angle and positions', () => {
  return generatePluginCss({
    theme: {
      conicGradientColors: {
        'red': '#f00',
      },
    },
    variants: {
      backgroundImage: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-conic-red {
        background-image: conic-gradient(#f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-t-red {
        background-image: conic-gradient(at top, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-tr-red {
        background-image: conic-gradient(at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-r-red {
        background-image: conic-gradient(at right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-br-red {
        background-image: conic-gradient(at bottom right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-b-red {
        background-image: conic-gradient(at bottom, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-bl-red {
        background-image: conic-gradient(at bottom left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-l-red {
        background-image: conic-gradient(at left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-tl-red {
        background-image: conic-gradient(at top left, #f00, rgba(255, 0, 0, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('directions and positions can be customized', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {
        'to-top': 'to top',
      },
      linearGradientColors: {
        'red': '#f00',
        'green': '#0f0',
        'blue': '#00f',
      },
      radialGradientPositions: {
        'off-center': '55% 60%',
      },
      radialGradientColors: {
        'red': '#f00',
      },
      conicGradientStartingAngles: {
        'default': '0deg',
      },
      conicGradientPositions: {
        'almost-right': '90% center',
      },
      conicGradientColors: {
        'red': '#f00',
      },
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-to-top-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-to-top-green {
        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0);
      }
      .bg-gradient-to-top-blue {
        background-image: linear-gradient(to top, rgba(0, 0, 255, 0), #00f);
      }
      .bg-radial-off-center-red {
        background-image: radial-gradient(closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-almost-right-red {
        background-image: conic-gradient(at 90% center, #f00, rgba(255, 0, 0, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('directions and positions can be extended', () => {
  return generatePluginCss({
    theme: {
      linearGradientColors: {
        'red': '#f00',
      },
      radialGradientColors: {
        'red': '#f00',
      },
      conicGradientStartingAngles: {
        'default': '0deg',
      },
      conicGradientColors: {
        'red': '#f00',
      },
      extend: {
        linearGradientDirections: {
          'tilted': '55deg',
        },
        radialGradientPositions: {
          'off-center': '55% 60%',
        },
        conicGradientPositions: {
          'almost-right': '90% center',
        },
      },
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-tr-red {
        background-image: linear-gradient(to top right, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-r-red {
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-br-red {
        background-image: linear-gradient(to bottom right, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-b-red {
        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-bl-red {
        background-image: linear-gradient(to bottom left, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-l-red {
        background-image: linear-gradient(to left, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-tl-red {
        background-image: linear-gradient(to top left, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-tilted-red {
        background-image: linear-gradient(55deg, rgba(255, 0, 0, 0), #f00);
      }
      .bg-radial-red {
        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-t-red {
        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-tr-red {
        background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-r-red {
        background-image: radial-gradient(closest-side at right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-br-red {
        background-image: radial-gradient(closest-side at bottom right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-b-red {
        background-image: radial-gradient(closest-side at bottom, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-bl-red {
        background-image: radial-gradient(closest-side at bottom left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-l-red {
        background-image: radial-gradient(closest-side at left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-tl-red {
        background-image: radial-gradient(closest-side at top left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-off-center-red {
        background-image: radial-gradient(closest-side at 55% 60%, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-red {
        background-image: conic-gradient(#f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-t-red {
        background-image: conic-gradient(at top, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-tr-red {
        background-image: conic-gradient(at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-r-red {
        background-image: conic-gradient(at right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-br-red {
        background-image: conic-gradient(at bottom right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-b-red {
        background-image: conic-gradient(at bottom, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-bl-red {
        background-image: conic-gradient(at bottom left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-l-red {
        background-image: conic-gradient(at left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-tl-red {
        background-image: conic-gradient(at top left, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-almost-right-red {
        background-image: conic-gradient(at 90% center, #f00, rgba(255, 0, 0, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('gradients can have multiple colors', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {
        'to-bottom': 'to bottom',
      },
      linearGradientColors: {
        'red-green': ['#f00', '#0f0'],
        'red-green-blue': ['#f00', '#0f0', '#00f'],
      },
      radialGradientPositions: {
        'default': 'center',
      },
      radialGradientColors: {
        'green-yellow': ['#0f0', '#ff0'],
        'green-yellow-blue': ['#0f0', '#ff0', '#00f'],
      },
      conicGradientPositions: {
        'default': 'center',
      },
      conicGradientColors: {
        'blue-green': ['#0f0', '#f00'],
        'blue-green-red': ['#0f0', '#f00', '#f00'],
      },
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-to-bottom-red-green {
        background-image: linear-gradient(#f00, #0f0);
      }
      .bg-gradient-to-bottom-red-green-blue {
        background-image: linear-gradient(#f00, #0f0, #00f);
      }
      .bg-radial-green-yellow {
        background-image: radial-gradient(closest-side, #0f0, #ff0);
      }
      .bg-radial-green-yellow-blue {
        background-image: radial-gradient(closest-side, #0f0, #ff0, #00f);
      }
      .bg-conic-blue-green {
        background-image: conic-gradient(#0f0, #f00);
      }
      .bg-conic-blue-green-red {
        background-image: conic-gradient(#0f0, #f00, #f00);
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('multiple directions/positions and multiple colors can be used together', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {
        'to-top': 'to top',
        'to-bottom': 'to bottom',
      },
      linearGradientColors: {
        'red': ['#f00'],
        'green': ['#0f0'],
      },
      radialGradientPositions: {
        'top': 'top',
        'bottom': 'bottom',
      },
      radialGradientColors: {
        'green': ['#0f0'],
        'blue': ['#00f'],
      },
      conicGradientPositions: {
        'left': 'left',
        'right': 'right',
      },
      conicGradientColors: {
        'blue': ['#00f'],
        'yellow': ['#ff0'],
      },
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-to-top-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-to-bottom-red {
        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-to-top-green {
        background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #0f0);
      }
      .bg-gradient-to-bottom-green {
        background-image: linear-gradient(rgba(0, 255, 0, 0), #0f0);
      }
      .bg-radial-top-green {
        background-image: radial-gradient(closest-side at top, #0f0, rgba(0, 255, 0, 0));
      }
      .bg-radial-bottom-green {
        background-image: radial-gradient(closest-side at bottom, #0f0, rgba(0, 255, 0, 0));
      }
      .bg-radial-top-blue {
        background-image: radial-gradient(closest-side at top, #00f, rgba(0, 0, 255, 0));
      }
      .bg-radial-bottom-blue {
        background-image: radial-gradient(closest-side at bottom, #00f, rgba(0, 0, 255, 0));
      }
      .bg-conic-left-blue {
        background-image: conic-gradient(at left, #00f, rgba(0, 0, 255, 0));
      }
      .bg-conic-right-blue {
        background-image: conic-gradient(at right, #00f, rgba(0, 0, 255, 0));
      }
      .bg-conic-left-yellow {
        background-image: conic-gradient(at left, #ff0, rgba(255, 255, 0, 0));
      }
      .bg-conic-right-yellow {
        background-image: conic-gradient(at right, #ff0, rgba(255, 255, 0, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('colors can be referenced from the theme with a closure', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'red': '#f00',
        'blue': '#00f',
      },
      linearGradientDirections: {
        'b': 'to bottom',
      },
      linearGradientColors: theme => theme('colors'),
      radialGradientSizes: {
        'default': 'farthest-corner',
      },
      radialGradientPositions: {
        'b': 'bottom',
      },
      radialGradientColors: theme => theme('colors'),
      conicGradientPositions: {
        'default': 'center',
      },
      conicGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-b-red {
        background-image: linear-gradient(rgba(255, 0, 0, 0), #f00);
      }
      .bg-gradient-b-blue {
        background-image: linear-gradient(rgba(0, 0, 255, 0), #00f);
      }
      .bg-radial-b-red {
        background-image: radial-gradient(at bottom, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-b-blue {
        background-image: radial-gradient(at bottom, #00f, rgba(0, 0, 255, 0));
      }
      .bg-conic-red {
        background-image: conic-gradient(#f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-blue {
        background-image: conic-gradient(#00f, rgba(0, 0, 255, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('colors can use nested object notation', () => {
  return generatePluginCss({
    theme: {
      colors: {
        indigo: {
          lighter: '#b3bcf5',
          default: '#5c6ac4',
          dark: '#202e78',
        },
      },
      linearGradientDirections: {
        't': 'to top',
      },
      linearGradientColors: theme => theme('colors'),
      radialGradientSizes: {
        'default': 'farthest-corner',
      },
      radialGradientPositions: {
        'b': 'bottom',
      },
      radialGradientColors: theme => theme('colors'),
      conicGradientPositions: {
        'default': 'center',
      },
      conicGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-indigo-lighter {
        background-image: linear-gradient(to top, rgba(179, 188, 245, 0), #b3bcf5);
      }
      .bg-gradient-t-indigo {
        background-image: linear-gradient(to top, rgba(92, 106, 196, 0), #5c6ac4);
      }
      .bg-gradient-t-indigo-dark {
        background-image: linear-gradient(to top, rgba(32, 46, 120, 0), #202e78);
      }
      .bg-radial-b-indigo-lighter {
        background-image: radial-gradient(at bottom, #b3bcf5, rgba(179, 188, 245, 0));
      }
      .bg-radial-b-indigo {
        background-image: radial-gradient(at bottom, #5c6ac4, rgba(92, 106, 196, 0));
      }
      .bg-radial-b-indigo-dark {
        background-image: radial-gradient(at bottom, #202e78, rgba(32, 46, 120, 0));
      }
      .bg-conic-indigo-lighter {
        background-image: conic-gradient(#b3bcf5, rgba(179, 188, 245, 0));
      }
      .bg-conic-indigo {
        background-image: conic-gradient(#5c6ac4, rgba(92, 106, 196, 0));
      }
      .bg-conic-indigo-dark {
        background-image: conic-gradient(#202e78, rgba(32, 46, 120, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('color keywords are accepted', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'white': 'white',
        'black': 'black',
        'transparent': 'transparent',
        'current': 'currentColor',
      },
      linearGradientDirections: {
        't': 'to top',
      },
      linearGradientColors: theme => theme('colors'),
      radialGradientPositions: {
        't': 'top',
      },
      radialGradientColors: theme => theme('colors'),
      conicGradientPositions: {
        'b': 'bottom',
      },
      conicGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-white {
        background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white);
      }
      .bg-gradient-t-black {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), black);
      }
      .bg-gradient-t-transparent {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);
      }
      .bg-gradient-t-current {
        background-image: linear-gradient(to top, transparent, currentColor);
      }
      .bg-radial-t-white {
        background-image: radial-gradient(closest-side at top, white, rgba(255, 255, 255, 0));
      }
      .bg-radial-t-black {
        background-image: radial-gradient(closest-side at top, black, rgba(0, 0, 0, 0));
      }
      .bg-radial-t-transparent {
        background-image: radial-gradient(closest-side at top, transparent, rgba(0, 0, 0, 0));
      }
      .bg-radial-t-current {
        background-image: radial-gradient(closest-side at top, currentColor, transparent);
      }
      .bg-conic-b-white {
        background-image: conic-gradient(at bottom, white, rgba(255, 255, 255, 0));
      }
      .bg-conic-b-black {
        background-image: conic-gradient(at bottom, black, rgba(0, 0, 0, 0));
      }
      .bg-conic-b-transparent {
        background-image: conic-gradient(at bottom, transparent, rgba(0, 0, 0, 0));
      }
      .bg-conic-b-current {
        background-image: conic-gradient(at bottom, currentColor, transparent);
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('some keywords such as "inherit" are skipped', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'inherit': 'inherit',
        'red': '#f00',
        'initial': 'initial',
        'unset': 'unset',
        'revert': 'revert',
      },
      linearGradientDirections: {
        't': 'to top',
      },
      linearGradientColors: theme => theme('colors'),
      radialGradientPositions: {
        't': 'top',
      },
      radialGradientColors: theme => theme('colors'),
      conicGradientPositions: {
        'b': 'bottom',
      },
      conicGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-radial-t-red {
        background-image: radial-gradient(closest-side at top, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-b-red {
        background-image: conic-gradient(at bottom, #f00, rgba(255, 0, 0, 0));
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('radial gradient shapes and sizes can be customized', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'red': '#f00',
        'green-blue': ['#0f0', '#00f'],
      },
      radialGradientShapes: {
        'default': 'circle',
        'ellipse': 'ellipse',
      },
      radialGradientSizes: {
        'default': 'closest-side',
        'cover': 'farthest-corner',
      },
      radialGradientPositions: {
        'default': 'center',
        'tr': 'top right',
      },
      radialGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      radialGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-radial-red {
        background-image: radial-gradient(circle closest-side, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-ellipse-red {
        background-image: radial-gradient(closest-side, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-cover-red {
        background-image: radial-gradient(circle, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-ellipse-cover-red {
        background-image: radial-gradient(#f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-tr-red {
        background-image: radial-gradient(circle closest-side at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-ellipse-tr-red {
        background-image: radial-gradient(closest-side at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-cover-tr-red {
        background-image: radial-gradient(circle at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-ellipse-cover-tr-red {
        background-image: radial-gradient(at top right, #f00, rgba(255, 0, 0, 0));
      }
      .bg-radial-green-blue {
        background-image: radial-gradient(circle closest-side, #0f0, #00f);
      }
      .bg-radial-ellipse-green-blue {
        background-image: radial-gradient(closest-side, #0f0, #00f);
      }
      .bg-radial-cover-green-blue {
        background-image: radial-gradient(circle, #0f0, #00f);
      }
      .bg-radial-ellipse-cover-green-blue {
        background-image: radial-gradient(#0f0, #00f);
      }
      .bg-radial-tr-green-blue {
        background-image: radial-gradient(circle closest-side at top right, #0f0, #00f);
      }
      .bg-radial-ellipse-tr-green-blue {
        background-image: radial-gradient(closest-side at top right, #0f0, #00f);
      }
      .bg-radial-cover-tr-green-blue {
        background-image: radial-gradient(circle at top right, #0f0, #00f);
      }
      .bg-radial-ellipse-cover-tr-green-blue {
        background-image: radial-gradient(at top right, #0f0, #00f);
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('conic gradient starting angles can be customized', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'red': '#f00',
        'green-blue': ['#0f0', '#00f'],
      },
      conicGradientStartingAngles: {
        'default': '90deg',
        'reverse': '0.5turn',
      },
      conicGradientPositions: {
        'default': 'center',
      },
      conicGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      conicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-conic-red {
        background-image: conic-gradient(from 90deg, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-reverse-red {
        background-image: conic-gradient(from 0.5turn, #f00, rgba(255, 0, 0, 0));
      }
      .bg-conic-green-blue {
        background-image: conic-gradient(from 90deg, #0f0, #00f);
      }
      .bg-conic-reverse-green-blue {
        background-image: conic-gradient(from 0.5turn, #0f0, #00f);
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('there is no output for repeating gradients without lengths', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'red': '#f00',
        'blue': '#00f',
      },
      repeatingLinearGradientColors: theme => theme('colors'),
      repeatingRadialGradientColors: theme => theme('colors'),
      repeatingConicGradientColors: theme => theme('colors'),
    },
    variants: {
      backgroundImage: [],
      repeatingLinearGradients: [],
      repeatingRadialGradients: [],
      repeatingConicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('lengths can be customized', () => {
  return generatePluginCss({
    theme: {
      colors: {
        'red': '#f00',
        'blue': '#00f',
      },
      repeatingLinearGradientDirections: {
        't': 'to top',
      },
      repeatingLinearGradientColors: theme => theme('colors'),
      repeatingLinearGradientLengths: {
        'sm': '25px',
        'md': '50px',
        'lg': '100px',
      },
      repeatingRadialGradientPositions: {
        'default': 'center',
      },
      repeatingRadialGradientColors: theme => theme('colors'),
      repeatingRadialGradientLengths: {
        'sm': '10px',
        'md': '20px',
        'lg': '30px',
      },
      repeatingConicGradientPositions: {
        'default': 'center',
      },
      repeatingConicGradientColors: theme => theme('colors'),
      repeatingConicGradientLengths: {
        'sm': '10deg',
        'md': '20deg',
        'lg': '40deg',
      },
    },
    variants: {
      backgroundImage: [],
      repeatingLinearGradients: [],
      repeatingRadialGradients: [],
      repeatingConicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-red-sm {
        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 25px);
      }
      .bg-gradient-t-blue-sm {
        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 25px);
      }
      .bg-gradient-t-red-md {
        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 50px);
      }
      .bg-gradient-t-blue-md {
        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 50px);
      }
      .bg-gradient-t-red-lg {
        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 100px);
      }
      .bg-gradient-t-blue-lg {
        background-image: repeating-linear-gradient(to top, rgba(0, 0, 255, 0), #00f 100px);
      }
      .bg-radial-red-sm {
        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 10px);
      }
      .bg-radial-blue-sm {
        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 10px);
      }
      .bg-radial-red-md {
        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 20px);
      }
      .bg-radial-blue-md {
        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 20px);
      }
      .bg-radial-red-lg {
        background-image: repeating-radial-gradient(#f00, rgba(255, 0, 0, 0) 30px);
      }
      .bg-radial-blue-lg {
        background-image: repeating-radial-gradient(#00f, rgba(0, 0, 255, 0) 30px);
      }
      .bg-conic-red-sm {
        background-image: repeating-conic-gradient(#f00, rgba(255, 0, 0, 0) 10deg);
      }
      .bg-conic-blue-sm {
        background-image: repeating-conic-gradient(#00f, rgba(0, 0, 255, 0) 10deg);
      }
      .bg-conic-red-md {
        background-image: repeating-conic-gradient(#f00, rgba(255, 0, 0, 0) 20deg);
      }
      .bg-conic-blue-md {
        background-image: repeating-conic-gradient(#00f, rgba(0, 0, 255, 0) 20deg);
      }
      .bg-conic-red-lg {
        background-image: repeating-conic-gradient(#f00, rgba(255, 0, 0, 0) 40deg);
      }
      .bg-conic-blue-lg {
        background-image: repeating-conic-gradient(#00f, rgba(0, 0, 255, 0) 40deg);
      }
      @media (min-width: 640px) {
      }
    `);
  });
});

test('color stops can be customized', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {
        'r': 'to right',
      },
      linearGradientColors: {
        'custom': ['#000', '#000 45%', '#fff 55%', '#fff'],
      },
      radialGradientPositions: {
        'default': 'center',
      },
      radialGradientColors: {
        'custom': ['#000', '#000 45%', '#fff 55%', '#fff'],
      },
      conicGradientPositions: {
        'default': 'center',
      },
      conicGradientColors: {
        'checkerboard': ['white 90deg', 'black 90deg 180deg', 'white 180deg 270deg', 'black 270deg'],
      },
      repeatingLinearGradientColors: {
        'custom': ['#000', '#000 10px', '#fff 10px', '#fff 20px'],
      },
      repeatingLinearGradientLengths: {
        'repeating': '',
      },
      repeatingRadialGradientColors: {
        'custom': ['#000', '#000 10px', '#fff 10px', '#fff 20px'],
      },
      repeatingRadialGradientLengths: {
        'repeating': '',
      },
      repeatingConicGradientColors: {
        'starburst': ['white 0 5deg', 'blue 5deg 10deg'],
      },
      repeatingConicGradientLengths: {
        'repeating': '',
      },
    },
    variants: {
      backgroundImage: [],
      linearGradients: [],
      radialGradients: [],
      conicGradients: [],
      repeatingLinearGradients: [],
      repeatingRadialGradients: [],
      repeatingConicGradients: [],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-r-custom {
        background-image: linear-gradient(to right, #000, #000 45%, #fff 55%, #fff);
      }
      .bg-radial-custom {
        background-image: radial-gradient(closest-side, #000, #000 45%, #fff 55%, #fff);
      }
      .bg-conic-checkerboard {
        background-image: conic-gradient(white 90deg, black 90deg 180deg, white 180deg 270deg, black 270deg);
      }
      .bg-gradient-r-custom-repeating {
        background-image: repeating-linear-gradient(to right, #000, #000 10px, #fff 10px, #fff 20px);
      }
      .bg-radial-custom-repeating {
        background-image: repeating-radial-gradient(#000, #000 10px, #fff 10px, #fff 20px);
      }
      .bg-conic-starburst-repeating {
        background-image: repeating-conic-gradient(white 0 5deg, blue 5deg 10deg);
      }
    `);
  });
});

test('responsive variants are generated by default', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {
        't': 'to top',
      },
      linearGradientColors: {
        'red': '#f00',
      },
      radialGradientPositions: {
        'default': 'center',
      },
      radialGradientColors: {
        'green': '#0f0',
      },
      conicGradientPositions: {
        'default': 'center',
      },
      conicGradientColors: {
        'blue': '#00f',
      },
      repeatingLinearGradientColors: theme => theme('linearGradientColors'),
      repeatingLinearGradientLengths: {
        'repeating': '20px',
      },
      repeatingRadialGradientColors: theme => theme('radialGradientColors'),
      repeatingRadialGradientLengths: {
        'repeating': '10px',
      },
      repeatingConicGradientColors: theme => theme('conicGradientColors'),
      repeatingConicGradientLengths: {
        'repeating': '10deg',
      },
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .bg-gradient-t-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-radial-green {
        background-image: radial-gradient(closest-side, #0f0, rgba(0, 255, 0, 0));
      }
      .bg-conic-blue {
        background-image: conic-gradient(#00f, rgba(0, 0, 255, 0));
      }
      .bg-gradient-t-red-repeating {
        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
      }
      .bg-radial-green-repeating {
        background-image: repeating-radial-gradient(#0f0, rgba(0, 255, 0, 0) 10px);
      }
      .bg-conic-blue-repeating {
        background-image: repeating-conic-gradient(#00f, rgba(0, 0, 255, 0) 10deg);
      }
      @media (min-width: 640px) {
        .sm\\:bg-none {
          background-image: none;
        }
        .sm\\:bg-gradient-t-red {
          background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
        }
        .sm\\:bg-radial-green {
          background-image: radial-gradient(closest-side, #0f0, rgba(0, 255, 0, 0));
        }
        .sm\\:bg-conic-blue {
          background-image: conic-gradient(#00f, rgba(0, 0, 255, 0));
        }
        .sm\\:bg-gradient-t-red-repeating {
          background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
        }
        .sm\\:bg-radial-green-repeating {
          background-image: repeating-radial-gradient(#0f0, rgba(0, 255, 0, 0) 10px);
        }
        .sm\\:bg-conic-blue-repeating {
          background-image: repeating-conic-gradient(#00f, rgba(0, 0, 255, 0) 10deg);
        }
      }
    `);
  });
});

test('variants can be customized', () => {
  return generatePluginCss({
    theme: {
      linearGradientDirections: {
        't': 'to top',
      },
      linearGradientColors: {
        'red': '#f00',
      },
      radialGradientPositions: {
        't': 'top',
      },
      radialGradientColors: {
        'green': '#0f0',
      },
      conicGradientPositions: {
        'b': 'bottom',
      },
      conicGradientColors: {
        'blue': '#00f',
      },
      repeatingLinearGradientColors: theme => theme('linearGradientColors'),
      repeatingLinearGradientLengths: {
        'repeating': '20px',
      },
      repeatingRadialGradientColors: theme => theme('radialGradientColors'),
      repeatingRadialGradientLengths: {
        'repeating': '10px',
      },
      repeatingConicGradientColors: theme => theme('conicGradientColors'),
      repeatingConicGradientLengths: {
        'repeating': '10deg',
      },
    },
    variants: {
      backgroundImage: ['focus'],
      linearGradients: ['hover', 'active'],
      radialGradients: ['group-hover'],
      conicGradients: ['hover'],
      repeatingLinearGradients: ['active'],
      repeatingRadialGradients: [],
      repeatingConicGradients: ['hover', 'responsive'],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .bg-none {
        background-image: none;
      }
      .focus\\:bg-none:focus {
        background-image: none;
      }
      .bg-gradient-t-red {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .hover\\:bg-gradient-t-red:hover {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .active\\:bg-gradient-t-red:active {
        background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #f00);
      }
      .bg-radial-t-green {
        background-image: radial-gradient(closest-side at top, #0f0, rgba(0, 255, 0, 0));
      }
      .group:hover .group-hover\\:bg-radial-t-green {
        background-image: radial-gradient(closest-side at top, #0f0, rgba(0, 255, 0, 0));
      }
      .bg-conic-b-blue {
        background-image: conic-gradient(at bottom, #00f, rgba(0, 0, 255, 0));
      }
      .hover\\:bg-conic-b-blue:hover {
        background-image: conic-gradient(at bottom, #00f, rgba(0, 0, 255, 0));
      }
      .bg-gradient-t-red-repeating {
        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
      }
      .active\\:bg-gradient-t-red-repeating:active {
        background-image: repeating-linear-gradient(to top, rgba(255, 0, 0, 0), #f00 20px);
      }
      .bg-radial-t-green-repeating {
        background-image: repeating-radial-gradient(at top, #0f0, rgba(0, 255, 0, 0) 10px);
      }
      .bg-conic-b-blue-repeating {
        background-image: repeating-conic-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10deg);
      }
      .hover\\:bg-conic-b-blue-repeating:hover {
        background-image: repeating-conic-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10deg);
      }
      @media (min-width: 640px) {
        .sm\\:bg-conic-b-blue-repeating {
          background-image: repeating-conic-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10deg);
        }
        .sm\\:hover\\:bg-conic-b-blue-repeating:hover {
          background-image: repeating-conic-gradient(at bottom, #00f, rgba(0, 0, 255, 0) 10deg);
        }
      }
    `);
  });
});