Ensure @import url(…) is hoisted

[RobinMalfait]

This PR fixes an issue where if you use @import url(…); after the @import "tailwindcss";, then invalid CSS is being generated.

This is because the @import "tailwindcss"; directive is being replaced with the actual generated CSS variables, utilities, etc. but the @import url(…); is kept as-is (Tailwind CSS doesn't handle these). This means that in the final CSS the @import url(…) could be in the middle of the generated CSS which is invalid.

/* Invalid: */
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Valid: */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import "tailwindcss";

While the above examples should both work from a CSS perspective, this PR makes sure to hoist the @import url(…); rules. All non-external imports will be inlined already.

Once this PR is merged, both these situations are valid:

/* Valid: */
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Valid: */
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

In order to do this correctly, we also have to make sure that the license comment and @charset is in the correct spot.

Test plan

• Added a simple unit test
• Added an integration test

[wongjn]

Both situations seem the same to me:

@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

[RobinMalfait]

Going to close this for now. Will document this behavior instead, where we explain how these imports are inlined.

[RobinMalfait]

Documented here: tailwindlabs/tailwindcss.com#2051