tailwindcss/tests/custom-transformers.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

73 lines
1.7 KiB
JavaScript

import { crosscheck, run, html, css } from './util/run'
function customTransformer(content) {
return content.replace(/uppercase/g, 'lowercase')
}
crosscheck(({ stable, oxide }) => {
oxide.test.todo('transform function')
stable.test('transform function', () => {
let config = {
content: {
files: [{ raw: html`<div class="uppercase"></div>` }],
transform: customTransformer,
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.lowercase {
text-transform: lowercase;
}
`)
})
})
oxide.test.todo('transform.DEFAULT')
stable.test('transform.DEFAULT', () => {
let config = {
content: {
files: [{ raw: html`<div class="uppercase"></div>` }],
transform: {
DEFAULT: customTransformer,
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.lowercase {
text-transform: lowercase;
}
`)
})
})
oxide.test.todo('transform.{extension}')
stable.test('transform.{extension}', () => {
let config = {
content: {
files: [
{ raw: 'blah blah blah', extension: 'html' },
{ raw: 'blah blah blah', extension: 'php' },
],
transform: {
html: () => 'uppercase',
php: () => 'lowercase',
},
},
}
return run('@tailwind utilities', config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
`)
})
})
})