custom-separator.test.js

import { crosscheck, run, html, css } from './util/run'

crosscheck(() => {
  test('custom separator', () => {
    let config = {
      darkMode: 'class',
      content: [
        {
          raw: html`
            <div class="md_hover_text-right"></div>
            <div class="motion-safe_hover_text-center"></div>
            <div class="dark_focus_text-left"></div>
            <div class="group-hover_focus-within_text-left"></div>
            <div class="rtl_active_text-center"></div>
          `,
        },
      ],
      separator: '_',
    }

    return run('@tailwind utilities', config).then((result) => {
      expect(result.css).toMatchFormattedCss(css`
        .group:hover .group-hover_focus-within_text-left:focus-within {
          text-align: left;
        }
        :is([dir='rtl'] .rtl_active_text-center:active) {
          text-align: center;
        }
        @media (prefers-reduced-motion: no-preference) {
          .motion-safe_hover_text-center:hover {
            text-align: center;
          }
        }
        :is(.dark .dark_focus_text-left:focus) {
          text-align: left;
        }
        @media (min-width: 768px) {
          .md_hover_text-right:hover {
            text-align: right;
          }
        }
      `)
    })
  })

  test('dash is not supported', () => {
    let config = {
      darkMode: 'class',
      content: [{ raw: 'lg-hover-font-bold' }],
      separator: '-',
    }

    return expect(run('@tailwind utilities', config)).rejects.toThrowError(
      "The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead."
    )
  })
})