parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.37k stars 2.26k forks source link

PostCSS Sourcemap don't work correctly #9099

Open romanhrynevych opened 1 year ago

romanhrynevych commented 1 year ago

🐛 bug report

PostCSS Sourcemap is linking to index.pcss file which has import all other pcss files, but i don't see them in generated sourcemap

🎛 Configuration (.babelrc, package.json, cli command)

Reprodiction link: link

🤔 Expected Behavior

Want to see definitely source files of styles, not only that i am linking in .

😯 Current Behavior

image

💁 Possible Solution

Tried target config inside package.json, rename files to css, and many more - nothing helped me 😞

🔦 Context

I want to move my newer project from Gulp to Parcel, but with this zero confident sourcemaps it will be imposible to find a bug inside 5k+ lines of code 🥲

💻 Code Sample

Reproduction link on SandBox: link

🌍 Your Environment

Software Version(s)
MacOS Ventura 13.4
Parcel 2.9.2
Node v20.2.0
Pnpm 8.6.1
romanhrynevych commented 1 year ago

Made some researches and noticed that if there is no postcss.config.cjs (extension don't metter) sourcemap is generated correctly, but if i only add .postcssrc.cjs file and one plugin, postcss-import for example, everything break and don't work. I get two generated sourcemaps, and in first (autogenerated config) we have all files content inside sourcesContent and all files link in sources, but it second, in which i want to add all needed plugins - we have only true content with imports and link to index.pcss file, maybe it will help 🙂

Sourcemap with Autogenerated .postcssrc

image

Sourcemap with Manual .postcssrc.cjs

image
romanhrynevych commented 1 year ago

@devongovett hello, don't want to spam but this tiny bug stopped me, can you give some response on it? Any additional info to add, i will do everything i can to help 🫡

romanhrynevych commented 1 year ago

@mischnic any updates here?

devongovett commented 1 year ago

The code sandbox errors when opening for me. Maybe I don't have access?

romanhrynevych commented 1 year ago

@devongovett try this please, take from share tab of it 🙂

Link to CodeSandbox

Also it is available on my github public repo: link

onetrev commented 1 year ago

Hey @devongovett, I've found the same issue, but in my case I'm just just plain .css imports and adding postcss-import to my .postcssrc config file. However, I have the same issue as @RomanHrynevych -- sources is just the single root import CSS file and the sourceContent is not all the CSS, but rather just the URLs for the individual @import's.

This is a snippet of my .map file:

"sources":["src/site.css"],
"sourcesContent":["/* - CORE ------------------------------- */\n@import './css/core/settings.css';\n@import './css/core/reset.css';\n@import './css/core/page.css';\n@import './css/core/form.css';\n@import './css/core/links.css';

If I remove the .postcssrc file then the sourcemap works and looks like a normal sourcemap with the CSS output in the sourcesContent.