Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't rewrite source maps for @layer rules #8971

merged 3 commits into from Jul 27, 2022


Copy link

@thecrypticace thecrypticace commented Jul 27, 2022

Since we generate utilities on demand the source maps point back to the corresponding @tailwind directive for that rule. For example, the component .container points back to the @tailwind components at-rule.

We would do this unconditionally for all generated output by Tailwind CSS. Since @layer components and @layer utilities in CSS register custom utilities, the source maps for these could be lost when the files containing the @layer and @tailwind directives were different. This happens when using postcss-import for example:

/* Source is: "node_modules/tailwindcss/components.css" */
@import "tailwindcss/components";

/* Source is: "input.css" */
@layer components {
  .test {
    color: red;

Because of this we would throw away the original source information and it appeared, to later tools, that the original source map was just @tailwind components from the components.css file instead of having sources from components.css AND from input.css. This in turn broke Vite's url-rewriting because it relies on the original source map input.

Curiously, with postcss-import, this problem doesn't appear for local CSS file imports. Only imports coming from node_modules (unless I did something wrong 馃檭 ). I would have expected it to rewrite the rules from inside the CSS file to point to the @import but perhaps it treats node_modules stuff differently.

In any case, this PR fixes the source maps so that rules generated from @layer point back to the original source.

Fixes #8966

@thecrypticace thecrypticace merged commit a1346c9 into master Jul 27, 2022
@thecrypticace thecrypticace deleted the feature/dont-rewrite-layer-sources branch July 27, 2022 16:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

Incorrect work of url() in css file when using vite.js
1 participant