tailwindcss/tests/custom-separator.test.js
Adam Wathan 42136e94ce
Run test suite against both engines (#10373)
* Run test suite against both engines

* make eslint happy

* only run `stable` tests on Node 12

* use normal expectation instead of snapshot file

When we run the tests only against `stable` (for node 12), then the
snapshots exists for the `Oxide` build. They are marked as `obsolete`
and will cause the `npm run test` script to fail. Sadly.

Inlined them for now, but ideally we make those tests more blackbox-y so
that we test that we get source maps and that we can map the sourcemap
back to the input files (without looking at the actual annotations).

* properly indent inline css

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2023-01-20 18:45:04 +01:00

58 lines
1.6 KiB
JavaScript

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;
}
[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;
}
}
.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."
)
})
})