ef2ebb28d5
* exclude `Features.LogicalProperties` lightningcss feature We don't want this to automatically apply since we have dedicated logical property based utilities already. We also have a feature flag to toggle some utilities to make use of logical property based ones. This feature should be opt-in to prevent backwards compatibility (e.g.: RTL sites that _did_ use a mr-4 explicitly). * update default browserslist * explicitly include/exclude Lightning CSS features * update tests based on new browserslist and include/exclude features from Lightning CSS * update integration tests * prefer user browserslist, fallback to built-in browserslist * always include Nesting If a custom browserslist config is used, then we don't explicitly set the include/exclude features from Lightning CSS (except for nesting, we always want to process nesting) * ensure to fallback to the current working directory * update changelog
171 lines
3.4 KiB
JavaScript
171 lines
3.4 KiB
JavaScript
import { run, html, css } 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: 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: 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: #00f;
|
|
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: 100vh;
|
|
height: -webkit-fill-available;
|
|
}
|
|
`)
|
|
})
|
|
})
|