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.

Sign up for GitHub

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

Jump to bottom

Manually added prefixed rules break source map positions #170

Closed
mgol opened this issue Jan 8, 2014 · 11 comments
Closed

Manually added prefixed rules break source map positions #170

mgol opened this issue Jan 8, 2014 · 11 comments
Labels
bug

Comments

@mgol
Copy link
Contributor

mgol commented Jan 8, 2014

I see misplaced source map line mappings in Chrome. They're usually moved only by a couple of lines which makes me think that my workaround for #165 & similar by manually adding a missing/broken rule like:

selector {
    // TODO remove the following rule when https://github.com/ai/autoprefixer/issues/165 gets fixed
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

are not reflected in the final position.

I can try to construct a minimal case if you need it, @ai, but I thought that maybe it would be obvious for you where the problem lies so I haven't tried yet. Let me know if you need it. :)
@mgol
Copy link
Contributor Author

mgol commented Jan 8, 2014

Hmm, these "a few lines off" errors have more significant consequences if you Cmd+click/Ctrl+click in Chrome on a concrete CSS rule; it should redirect you to a proper line but it's not only a few lines off but sometimes in a different place in the file.

This may be caused by the same issue. Anyway, clicking on the _partial.scss link in the Chrome inspector seems to produce a smaller error.

@ai
Copy link
Member

ai commented Jan 8, 2014

For source map issues I need input/output source and input/output maps. (Source map is very difficult to debug :( )

@mgol
Copy link
Contributor Author

mgol commented Jan 8, 2014

OK, I'll try to create a smaller example then (but I'll need up to a few days for that).

@mgol
Copy link
Contributor Author

mgol commented Jan 10, 2014

It seems my intuitive diagnosis might have been correct - after your recent fixes when I removed redundant rules that used to serve as workarounds, mappings now work correctly. I'll try to construct a smaller example soon.

@mgol
Copy link
Contributor Author

mgol commented Jan 13, 2014

@ai OK, I found one issue, though it's triggered by mixins, not manually inserted rules.
Sass (you need Sass 3.3.0.rc.2):

@mixin flex-test {
    justify-content: flex-end;
}

#test-elem {
    @include flex-test;
    font-size: 16px;
    color: red;
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="test-elem"></div>
</body>

Compile it via:

sass --sourcemap styles-autoprefixer.scss:styles-autoprefixer.css &&
autoprefixer styles-autoprefixer.css -o styles.css --map

Then open Chrome, mark the #test-elem div and Cmd+click/Ctrl+click on the justify-content rule. It should redirect you to the mixin but it doesn't. The same when you click on the font-size rule - it leads one to the color rule. Everything here is off by one line.

@mgol
Copy link
Contributor Author

mgol commented Jan 13, 2014

Hmm, no, that issue is caused by not changing the source map annotation comment. (which is a bug, btw, but separate from this one).

For the project I use grunt-autoprefixer, though, that puts the proper comment by itself so this issue must have been different.

Tough to crack... :/

@ai
Copy link
Member

ai commented Jan 13, 2014

What if you output CSS after Autoprefixer to same file name?

@ai
Copy link
Member

ai commented Jan 13, 2014

Source map annotation fix will b released in next version.

@mgol
Copy link
Contributor Author

mgol commented Jan 13, 2014

I was definitely seeing the issue when I manually added some prefixed rules in the large project but I can't reproduce it in a simple case... :/

@lydell
Copy link
Contributor

lydell commented Jan 15, 2014

Use this source map visualizer to help debugging.

@ai
Copy link
Member

ai commented Jan 19, 2014

Feel free to reopen issue if you will have some new information

@ai ai closed this as completed Jan 19, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ai @mgol @lydell