tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.28k stars 4.22k forks source link

Add missing `layer(…)` to imports above Tailwind directives #14982

Closed RobinMalfait closed 1 week ago

RobinMalfait commented 1 week ago

This PR fixes an issue where imports above Tailwind directives didn't get a layer(…) argument.

Given this CSS:

@import "./typography.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

It was migrated to:

@import "./typography.css";
@import "tailwindcss";

But to ensure that the typography styles end up in the correct location, it requires the layer(…) argument.

This PR now migrates the input to:

@import "./typography.css" layer(base);
@import "tailwindcss";

Test plan:

Added an integration test where an import receives the layer(…), but an import that eventually contains @utility does not receive the layer(…) argument. This is necessary otherwise the @utility will be nested when we are processing the inlined CSS.

Running this on the Commit template, we do have a proper layer(…)

image