This PR adds support for `addBase` in JS plugins which adds styles into
the CSS base layer using `@layer base`. This exists for backwards
compatibility with v3 but is not something we will encourage people to
use going forward — in v4 it's better to just write these styles in a
CSS file.
In v3, `@layer base` was something we compiled away and was only used
for determining where to add some styles in the final CSS, but in v4 we
are using native CSS layers. This means that `addBase` in v4 expects you
to have a _real_ `@layer base` in your final CSS, which you will have as
long as you are using `@import "tailwindcss"` to add Tailwind to your
project.
Now something like this works:
```js
function ({ addBase }) {
addBase({
'h1': { fontSize: '2em' },
'h2': { fontSize: '1.5em' },
})
}
```
Which will emit the following CSS:
```css
@layer base {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
}
```
The only limitation compared to v3 is that there is no way for you to
wrap these styles in another custom layer.
In v3 you could do this:
```css
@layer my-base {
@tailwind base;
}
```
…and then anything you added with `addBase` would end up exactly where
`@tailwind base` was in your source CSS.
But in v4 there is no `@tailwind base`, so there's no way to wrap these
styles in `@layer my-base` like in the example above. All base styles
added by plugins are simply appended to the end of the stylesheet but
wrapped in `@layer base` so they behave as if they are co-located with
other base styles.
Odds of this impacting anyone are extremely low, but if it proves to be
an actual issue I think we could output these styles at the location of
an optional `@tailwind base` rule if we detect it exists.
9ab47329b8