I don't myself understand what's going on, it clearly has something to do with source maps, but may also have to do with other sprockets changes.
But I can describe a simple reproduction case to demonstrate the developer inconvenience (can provide a sample app if it's helpful).
Setup
Let's say I have an app/assets/stylesheets/application.scss (note scss) that consists of one line:
`@import 'additional/additional`
Then that's importing a file at app/assets/stylesheets/additional/additional.scss that consists of one line for the purpose of demonstration, body { background: blue; }
Debugging in Chrome Inspector, Sprockets 3
I have launched my app in Rails dev mode. In Sprockets 3, if I "inspect" the "body" tag, and look at this in the inspector:
Now I click on that link to application...s?body, wanting to see where the body background blue decleration is, and I see:
It is showing me the actual CSS generated, and in a comment it's even telling me what .scss source file it came from at what line number. OK, great, not perfect, but enough for me to debug my CSS.
Debugging in Chrome inspector, sprockets 4
We'd think the addition of source maps in sprockets 4 might improve things. However, it is in fact harder for me to figure out where CSS is coming from.
With the same app with sprockets 4, still launching in dev mode, I "inspect" the body tag again, and see a similar thing:
I click on the application...rce link to find out more about where the CSS is coming from, and see:
It's just showing me the line @import "additional/additional". OK, I know what scss file it's coming from, but I can't actually see the CSS, and I don't even have a line number. I am not sure how to figure out what part of the SCSS source file is delivering this decleration.
Sprockets 4 is making it harder for me to debug my CSS, not easier. This is a very simple reproduction to demonstrate the issue, but in more complciated source (where you can have @import's that themselves have @import's, and sprockets 4 only takes me to the top first @import), it can be even worse.
Workarounds?
I don't really understand what's going on. Clearly source maps have something to do with it -- a source map feature that doesn't handle SCSS very well, apparently.
Is there a way to disable source maps in sprockets 4, possibly just for CSS and not for JS? I am not sure if that will restore the sprockets 3 debugging behavior I'm used to, but it seems worth a try -- but I can't figure out if there's a way to tell sprockets not to do source maps.
Alternately, I'm not sure if there's something I'm doing wrong, or something I can do to make source maps work better to actually give me a better debugging experience. If I can't do something to change the sprockets 4 debugging experience I am seeing, I am going to probably downgrade back to sprockets 3. I am finding it impossible to develop CSS the ways I am used to.
I don't myself understand what's going on, it clearly has something to do with source maps, but may also have to do with other sprockets changes.
But I can describe a simple reproduction case to demonstrate the developer inconvenience (can provide a sample app if it's helpful).
Setup
Let's say I have an
app/assets/stylesheets/application.scss(notescss) that consists of one line:Then that's importing a file at
app/assets/stylesheets/additional/additional.scssthat consists of one line for the purpose of demonstration,body { background: blue; }Debugging in Chrome Inspector, Sprockets 3
I have launched my app in Rails dev mode. In Sprockets 3, if I "inspect" the "body" tag, and look at this in the inspector:
Now I click on that link to
application...s?body, wanting to see where the body background blue decleration is, and I see:It is showing me the actual CSS generated, and in a comment it's even telling me what .scss source file it came from at what line number. OK, great, not perfect, but enough for me to debug my CSS.
Debugging in Chrome inspector, sprockets 4
We'd think the addition of source maps in sprockets 4 might improve things. However, it is in fact harder for me to figure out where CSS is coming from.
With the same app with sprockets 4, still launching in dev mode, I "inspect" the
bodytag again, and see a similar thing:I click on the
application...rcelink to find out more about where the CSS is coming from, and see:It's just showing me the line
@import "additional/additional". OK, I know what scss file it's coming from, but I can't actually see the CSS, and I don't even have a line number. I am not sure how to figure out what part of the SCSS source file is delivering this decleration.Sprockets 4 is making it harder for me to debug my CSS, not easier. This is a very simple reproduction to demonstrate the issue, but in more complciated source (where you can have @import's that themselves have @import's, and sprockets 4 only takes me to the top first @import), it can be even worse.
Workarounds?
I don't really understand what's going on. Clearly source maps have something to do with it -- a source map feature that doesn't handle SCSS very well, apparently.
Is there a way to disable source maps in sprockets 4, possibly just for CSS and not for JS? I am not sure if that will restore the sprockets 3 debugging behavior I'm used to, but it seems worth a try -- but I can't figure out if there's a way to tell sprockets not to do source maps.
Alternately, I'm not sure if there's something I'm doing wrong, or something I can do to make source maps work better to actually give me a better debugging experience. If I can't do something to change the sprockets 4 debugging experience I am seeing, I am going to probably downgrade back to sprockets 3. I am finding it impossible to develop CSS the ways I am used to.