Fix for SCSS debug info
qianc opened this issue · comments
When including debug info in files created with Compass/SCSS, Respond.js won't work. An easy fix is to add "(?![\s]*-)" to the regex on line 109.
Before:
var qs = styles.match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi )After:
var qs = styles.match( /@media(?![\s]*-)[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),The skips media queries of the following type:
@media -sass-debug-info{filename{font-family:<filename>}line{font-family:<line>}}
tbh it seems kind of inappropriate for respond to handle the nasty debuginfo annotations.
Paul, I understand your point of view, but it cost me hours to find out that this was breaking respond.js. I accept debugging as part of my job, but it would be great if we can prevent other people from running into the same trouble.
Nope. At least in IE8, the "fix" from above doesn't work.
@marcvangend yeah i agree with my. my earlier comment was.. wrong. :)
agreed, please fix this, I also just spent an hour or so debugging respond before finding out the issue is with the scss debug output.
Would it be adequate to update the readme with a clear warning of potential conflicts with scss debug output? Working around it seems excessive for this script, but being clear about it up-front seems responsible and helpful.
Thoughts?
On Jun 24, 2013, at 5:21 AM, penx notifications@github.com wrote:
agreed, please fix this, I also just spent an hour or so debugging respond before finding out the issue is with the scss debug output.
—
Reply to this email directly or view it on GitHub.
If there is no acceptable workaround or fix, adding a clear warning to the readme is the least we should do, IMO.
That said, I'm not sure if I would call that solution "adequate". Let's face it: people don't read readme's in advance, but only when something breaks. If you enable respond.js and it doesn't work immediately, it's a no-brainer to check the readme. But suppose that respond.js is already working, you enable the SASS debug info, and the next day you discover that your responsive design breaks in IE8... Then checking the respond.js readme is not the first thing that comes to mind.
My concern is working around an edge case that is generated only when debugging Sass. Complicating the source code to work around an issue that won't likely occur in production environments (or non-sass environements) seems less than ideal. If we could update the readme that'd be a great first step. Anyone able to help on this?
On Jun 26, 2013, at 10:43 AM, marcvangend notifications@github.com wrote:
If there is no acceptable workaround or fix, adding a clear warning to the readme is the least we should do, IMO.
That said, I'm not sure if I would call that solution "adequate". Let's face it: people don't read readme's in advance, but only when something breaks. If you enable respond.js and it doesn't work immediately, it's a no-brainer to check the readme. But suppose that respond.js is already working, you enable the SASS debug info, and the next day you discover that your responsive design breaks in IE8... Then checking the respond.js readme is not the first thing that comes to mind.
—
Reply to this email directly or view it on GitHub.
Just ran into this problem myself, also. Spent about an hour, not understanding what the hell is going on. The moment I looked at the generated CSS I figured it was the the source maps with their funky @media -sass-debug-info syntax :D This should definitely be documented in the readme, at the very least. I'll probably create a PR.
I can understand the point about not wanting to over-complicate the source code, or mess with a working system. (If it aint' broken, etc.) But it's lame that I have to disable source maps and restart Rails everytime I want to test IE, making IE testing even more cumbersome. Boo. Non-code-changing solution would be nice.
PS. Respond.js rocks and you're awesome ❤️
Pulled the README related piece in here. A code-changing solution might be a solution for the deep future, but not currently.