tailwindcss/tests/collapse-adjacent-rules.test.js
Jordan Pittman e5ed08b5cb
Handle duplicate atrules without children (#8122)
* Handle duplicate atrules without children

We assumed that all At Rule nodes had children. Including ones that do not and should not — for example `@import url(…);`. Since this is not the case we’ll skip adding children for nodes that don’t have any.

* Update changelog

Co-authored-by: Jordi Marimon Palarea <jordimarimon7@gmail.com>
2022-04-15 12:24:27 -04:00

82 lines
2.1 KiB
JavaScript

import fs from 'fs'
import path from 'path'
import { run, html, css } from './util/run'
test('collapse adjacent rules', () => {
let config = {
content: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')],
corePlugins: { preflight: false },
theme: {},
plugins: [
function ({ addVariant }) {
addVariant('foo-bar', '@supports (foo: bar)')
},
],
}
let input = css`
@tailwind base;
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
}
@font-face {
font-family: 'Gilroy';
src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
}
@page {
margin: 1cm;
}
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Poppins';
src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
}
@font-face {
font-family: 'Proxima Nova';
src: url('/fonts/ProximaNova.woff2') format('woff2'),
url('/fonts/ProximaNova.woff') format('woff');
}
}
.foo,
.bar {
color: black;
}
.foo,
.bar {
font-weight: 700;
}
.some-apply-thing {
@apply foo-bar:md:text-black foo-bar:md:font-bold foo-bar:text-black foo-bar:font-bold md:font-bold md:text-black;
}
`
return run(input, config).then((result) => {
let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css')
let expected = fs.readFileSync(expectedPath, 'utf8')
expect(result.css).toMatchFormattedCss(expected)
})
})
test('duplicate url imports does not break rule collapsing', () => {
let config = {
content: [{ raw: html`` }],
corePlugins: { preflight: false },
}
let input = css`
@import url('https://example.com');
@import url('https://example.com');
`
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
@import url('https://example.com');
`)
})
})