Add @reference "…"

[philipp-spiess]

This PR adds a new @reference "…" API as an replacement for the previously added @import "…" reference. The motivation for a distinct at rule is that @import is already handled outside of Tailwind in some scenarios (e.g. when using in combination with postcss-import, other pre-processors, or frameworks like Svelte). While our implementation of hijacking the media attribute works in this cases, it can cause annoying linter issues because tooling build around @import does not know about our behavior.

To fix this, we've decided to move this mode into a separate at rule that is passed-through in the other tooling. Here's an example of how this would look like in Svelte:

<h1>Hello world!</h1>

<style>
  @reference './theme.css';
  h1 {
    color: var(--theme-color);
  }
</style>

With this change, the Svelte linter would not be detecting unused CSS from the theme.css file as it would if we'd rely on @import.

[thecrypticace]

Need to add support for this to IntelliSense. I've made a note to do that.

[Stephan-MC]

Nice one. I am using scss for all my project and the

@import "...";

is deprecated in scss/sass.

Thanks for the great Job 👍