1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- import { run, html, css } from './util/run'
- 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."
- )
- })
|