e572dc645a
* bump `lightningcss` * allow for non-standard selector combinators such as `::deep` * just use Prettier when comparing CSS results We were using 2 different engines where the stable one was not using Lightning CSS and the Oxide one was using Lightning CSS. To ensure that we didn't have to rewrite every single test expectation, the `toMatchFormattedCss` parsed both the actual and expected value using Lightning CSS (to make the result similar), then it used Prettier to make it... pretty. Right now we _only_ use Lightning CSS, which means that we can drop the additional lightningcss format step and just use Prettier on both the actual and expected values. Pretty also only prettifies the CSS, it doesn't rewrite it. E.g.: `@media (min-width: 768px)` will not be optimized to `@media (width >= 768px)`, that's something that Lightning CSS does for us. This will require some changes in our test output, but it will be consistent afterwards because there won't be hidden transformation steps anymore. Because up until now it could be that the actual result was `color: black` but the tests showed `color: #000` (because it is shorter). This change will reflect reality. * update tests based on previous commit * only use `toMatchFormattedCss` instead of `toMatchCss` They both do the exact same thing right now. While `toMatchCss` is shorter, `toMatchFormattedCss` makes a bit more sense since we are comparing the Prettier results. * update integration tests
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 (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)
|
|
})
|
|
})
|