123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- import { run, css, html } from './util/run'
- it('should collapse duplicate declarations with the same units (px)', () => {
- let config = {
- content: [{ raw: html`<div class="example"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .example {
- height: 100px;
- height: 200px;
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- height: 200px;
- }
- `)
- })
- })
- it('should collapse duplicate declarations with the same units (no unit)', () => {
- let config = {
- content: [{ raw: html`<div class="example"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .example {
- line-height: 3;
- line-height: 2;
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- line-height: 2;
- }
- `)
- })
- })
- it('should not collapse duplicate declarations with the different units', () => {
- let config = {
- content: [{ raw: html`<div class="example"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .example {
- height: 100px;
- height: 50%;
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- height: 100px;
- height: 50%;
- }
- `)
- })
- })
- it('should collapse the duplicate declarations with the same unit, but leave the ones with different units', () => {
- let config = {
- content: [{ raw: html`<div class="example"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .example {
- height: 100px;
- height: 50%;
- height: 20vh;
- height: 200px;
- height: 100%;
- height: 30vh;
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- height: 200px;
- height: 100%;
- height: 30vh;
- }
- `)
- })
- })
- it('should collapse the duplicate declarations with the exact same value', () => {
- let config = {
- content: [{ raw: html`<div class="example"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .example {
- height: var(--value);
- color: blue;
- height: var(--value);
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .example {
- color: blue;
- height: var(--value);
- }
- `)
- })
- })
- it('should work on a real world example', () => {
- let config = {
- content: [{ raw: html`<div class="h-available"></div>` }],
- corePlugins: { preflight: false },
- plugins: [],
- }
- let input = css`
- @tailwind utilities;
- @layer utilities {
- .h-available {
- height: 100%;
- height: 100vh;
- height: -webkit-fill-available;
- }
- }
- `
- return run(input, config).then((result) => {
- expect(result.css).toMatchFormattedCss(css`
- .h-available {
- height: 100%;
- height: 100vh;
- height: -webkit-fill-available;
- }
- `)
- })
- })
|