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
128 lines
2.9 KiB
JavaScript
128 lines
2.9 KiB
JavaScript
import { run, html, css } from './util/run'
|
|
|
|
it('should warn when we detect nested css', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="nested"></div>` }],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
|
|
.nested {
|
|
.example {
|
|
}
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.messages).toHaveLength(1)
|
|
expect(result.messages).toMatchObject([
|
|
{
|
|
type: 'warning',
|
|
text: [
|
|
'Nested CSS was detected, but CSS nesting has not been configured correctly.',
|
|
'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
|
|
'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
|
|
].join('\n'),
|
|
},
|
|
])
|
|
})
|
|
})
|
|
|
|
it('should not warn when we detect nested css inside css @layer rules', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="underline"></div>` }],
|
|
}
|
|
|
|
let input = css`
|
|
@layer tw-base, tw-components, tw-utilities;
|
|
@layer tw-utilities {
|
|
@tailwind utilities;
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.css).toMatchFormattedCss(css`
|
|
@layer tw-base, tw-components, tw-utilities;
|
|
@layer tw-utilities {
|
|
.underline {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
`)
|
|
expect(result.messages).toHaveLength(0)
|
|
})
|
|
})
|
|
|
|
it('should warn when we detect namespaced @tailwind at rules', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="text-center"></div>` }],
|
|
}
|
|
|
|
let input = css`
|
|
.namespace {
|
|
@tailwind utilities;
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.messages).toHaveLength(1)
|
|
expect(result.messages).toMatchObject([
|
|
{
|
|
type: 'warning',
|
|
text: [
|
|
'Nested @tailwind rules were detected, but are not supported.',
|
|
"Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
|
|
'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
|
|
].join('\n'),
|
|
},
|
|
])
|
|
})
|
|
})
|
|
|
|
it('should not warn when nesting a single rule inside a media query', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="nested"></div>` }],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
|
|
@media (min-width: 768px) {
|
|
.nested {
|
|
}
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.messages).toHaveLength(0)
|
|
expect(result.messages).toEqual([])
|
|
})
|
|
})
|
|
|
|
it('should only warn for the first detected nesting ', () => {
|
|
let config = {
|
|
content: [{ raw: html`<div class="nested other"></div>` }],
|
|
}
|
|
|
|
let input = css`
|
|
@tailwind utilities;
|
|
|
|
.nested {
|
|
.example {
|
|
}
|
|
|
|
.other {
|
|
}
|
|
}
|
|
|
|
.other {
|
|
.example {
|
|
}
|
|
}
|
|
`
|
|
|
|
return run(input, config).then((result) => {
|
|
expect(result.messages).toHaveLength(1)
|
|
})
|
|
})
|