Postcss requires semicolons after import statement or it will only perform the import for the first line

tl;dr

When merging css files using postcss-import don’t forget to add semicolons after each import statement, or else postcss will only import the first file and for some reason add a @media directive in front of the next import and stop processing of further imports.

This does make sense, but I still lost like 2 hours of working time on this 😫.

I.e. I had a file like this (note the missing semicolons):

@import "foo.css"
@import "bar.css"

and after merging the files using tailwind using this command: npx tailwindcss --input=css/merge.css --output=app.css --postcss the resulting file would look like this:

@media @import "bar.css"

contens of "foo.css" here

The solution was to simply add the missing semicolons:

@import "foo.css";
@import "bar.css";