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

less error #51

Closed
amelon opened this issue Apr 29, 2015 · 7 comments
Closed

less error #51

amelon opened this issue Apr 29, 2015 · 7 comments

Comments

@amelon
Copy link

amelon commented Apr 29, 2015

Hi,
I have an issue with following lines in jgrowl.core.less

    -ms-filter:         progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100));
    filter:             progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100));

could you enclose them with ~"" like this

    -ms-filter:         ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100))";
    filter:             ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100))";
@stanlemon
Copy link
Owner

@amelon I don't mind making this change, but I want to make sure these still work - have you been able to confirm this inside of Internet Explorer? Thanks for your contribution!

stanlemon added a commit that referenced this issue May 1, 2015
@amelon
Copy link
Author

amelon commented May 4, 2015

Sorry I missed interpolation.

Here new solution found on boostrap

    filter: e(%("progid:DXImageTransform.Microsoft.Alpha(Opacity=(%d*100))",@jgrowl-opacity)); // IE9 and down
    -ms-filter: e(%("progid:DXImageTransform.Microsoft.Alpha(Opacity=(%d*100))",@jgrowl-opacity)); // IE9 and down

And here result:

.jGrowl-notification {
  background-color: #000000;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  text-align: left;
  display: none;
  border-radius: 5px;
  min-height: 40px;
}

@stanlemon
Copy link
Owner

Hmm, the last change you pasted seemed to generate the correct filters - maybe I'm missing something? https://github.com/stanlemon/jGrowl/blob/master/jquery.jgrowl.css#L37-L38

@amelon
Copy link
Author

amelon commented May 6, 2015

I think you missed less variable in css file :(

result in css with first exemple

  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100));
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(@jgrowl-opacity*100));

note the @jgrowl-opacity variable which is wrong.

result in css with second exemple

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=(0.9*100));

here @jgrowl-opacity variable is replaced by its value 0.9

@redbar0n
Copy link

redbar0n commented May 8, 2015

Had a similar error with SCSS. When pushing to production we got:

Sass::SyntaxError: $color: 90 is not a color for 'alpha'

in the jquery.jgrowl.css.min file.

So we had to change alpha(90) to alpha(opacity=90) and it worked.

It ought to be fixed in the jgrowl source, in case other people run into the same problem, and to avoid regression error when updating the library (thus overwriting the fix).

@stanlemon
Copy link
Owner

Alright, I think this is fixed and it's been tagged. I'm curious why when I was running my grunt commands I wasn't seeing the issue you guys were running into. I'm pretty green-with LESS/SCSS so any pointers on how I can catch stuff like this in the future would be very appreciated! Thanks for your contributions!

@redbar0n
Copy link

redbar0n commented May 8, 2015

Awesome @stanlemon :) I'm not sure. Maybe grunt doesn't pick it up/analyze those kinds of errors in CSS files. I'm not sure how to test for it, I'm afraid. Maybe using this linter (syntax checker) in grunt would help: https://www.npmjs.com/package/grunt-scss-lint
cheers

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

No branches or pull requests

3 participants