Ensure @import layer(…) source(…) work together

[RobinMalfait]

This PR fixes an issue where the combining source(…) and layer(…) didn't work well together.

@import "tailwindcss/utilities" layer(utilities);

and

@import "tailwindcss/utilities" source(none);

Worked well individually, but together they did not:

@import "tailwindcss/utilities" layer(utilities) source(none);

This is because when we handled the @import, if you see a layer(…), the import handling already converts it to:

@layer utilities {
  /* Contents of the imported file */
} 

However, if you have multiple params, it would be converted to:

@media layer(utilities) source(none) {
  /* Contents of the imported file */
} 

In this case, we never handled the @media layer(…) case correctly and we have to make sure to convert it to an @layer utilities {…} ourselves.

[philipp-spiess]

However, if you have multiple params, it would be converted to:

@media layer(utilities) source(none) {
/* Contents of the imported file */
}

This seems like a bug in the at-import code then, no?

Layer's are supposed to be extracted into this way and it should instead create:

@layer (utilities) {
  @media source(none) {
    /* Contents of the imported file */
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@import#syntax

[philipp-spiess]

This PR only fixes

@import 'tailwindcss/utilities' source('./paths') layer(utilities);

and not

@import 'tailwindcss/utilities' layer(utilities) source('./paths');

I think 🙈 I think it's fine to require layer to be the first part as per the at-import spec though, but there is still a bug in the at-import resolver 😬

[RobinMalfait]

Ah you are right, I was thinking about that people might do this themselves or if we got this if other tools handled imports. But you are right let me fix it there instead!

[thecrypticace]

This should be handled in the substituteAtImports step

[philipp-spiess]

Oh ignore my comment @import 'tailwindcss/utilities' layer(utilities) source('./paths'); already works, but putting source first doesn't since that's not valid css and we rely on media query propagation right now. I'll clean this up a bit so we can allow these CSS spec functions (layer and supports) at any place in the param argument list.

[philipp-spiess]

Current thinking is that we do not want to support this since it won't work with third-party CSS @import resolvers (e.g. if your project depends on postcss-import or uses any sass/scss pre-processors)

This still works though, even when using a third-party import resolver:

@import 'tailwindcss/utilities' layer(utilities) source('./paths');