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>

Author: thecrypticace

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Types: allow for arbitrary theme values (for 3rd party plugins) ([#7926](https://github.com/tailwindlabs/tailwindcss/pull/7926))
 - Don’t split vars with numbers in them inside arbitrary values ([#8091](https://github.com/tailwindlabs/tailwindcss/pull/8091))
 - Require matching prefix when detecting negatives ([#8121](https://github.com/tailwindlabs/tailwindcss/pull/8121))
+- Handle duplicate At Rules without children ([#8122](https://github.com/tailwindlabs/tailwindcss/pull/8122))
 
 ### Added
 

src/lib/collapseAdjacentRules.js

@@ -29,7 +29,11 @@ export default function collapseAdjacentRules() {
             (currentRule[property] ?? '').replace(/\s+/g, ' ')
         )
       ) {
-        currentRule.append(node.nodes)
+        // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
+        if (node.nodes) {
+          currentRule.append(node.nodes)
+        }
+
         node.remove()
       } else {
         currentRule = node

tests/collapse-adjacent-rules.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { run, css } from './util/run'
+import { run, html, css } from './util/run'
 
 test('collapse adjacent rules', () => {
   let config = {
@@ -61,3 +61,21 @@ test('collapse adjacent rules', () => {
     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');
+    `)
+  })
+})