postcss/postcss-import

Emitted `@media` AtRules are invalid

sandhose opened this issue · 4 comments

sandhose commented

@import ... media queries; statements emit invalid AtRule, as the AtRule.params is an array instead of being a string.

This breaks the tailwindcss plugin in some scenarios, like:

@import url('./dark.css') screen and (prefered-color-scheme: dark);
@import url('./light.css') screen and (prefered-color-scheme: light);

Compiling this with both the postcss-import and tailwindcss plugin results to:

TypeError: (intermediate value)(intermediate value)(intermediate value).replace is not a function
    at ./node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:37:149
    at Array.every (<anonymous>)
    at ./node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:37:35
    at Root.each (./node_modules/postcss/lib/container.js:53:16)
    at collapseRulesIn (./node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:24:14)
    at ./node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:59:9
    at ./node_modules/tailwindcss/lib/processTailwindFeatures.js:61:53
    at async plugins (./node_modules/tailwindcss/lib/plugin.js:38:17)
    at async LazyResult.runAsync (./node_modules/postcss/lib/lazy-result.js:261:11)
    at async Promise.all (index 0)

I've done a minimal example to reproduce this issue here: https://github.com/sandhose/postcss-import-bug-repro

This bug was introduced in version 16.0.0

romainmenke commented

@sandhose Thank you for reporting this.
I will take a look shortly!

  • 🚀1
romainmenke commented

I've prepared a fix here : #558
Thank you again for the reproduction.

sandhose commented

You're welcome! Thanks for your really quick response!

RyanZim commented

Published in v16.0.1 🎆

  • 🎉2