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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 27, 2022

Conversation

thecrypticace
Copy link
Contributor

@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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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