libsass compatibility?
Closed this issue · 30 comments
Hi,
I recently moved to the latest libsass and noticed this:
[11:47:41] { [Error: /Users/rolle/test/web-fonts:91: @import directives are not allowed inside mixins and functions
]
message: '/Users/rolle/test/web-fonts:91: @import directives are not allowed inside mixins and functions\n',
showStack: false,
showProperties: true,
plugin: 'gulp-sass',
__safety: { toString: [Function] } }
Any way to make this to work with libsass?
Sorry, I don't think it's currently possible to work with libsass, because many important features, like maps, are still missing. I'll look into a bit a more though. Maybe I could redo the mixin so it uses only the subset of Sass available in libsass.
After experimenting with libsass, I have determined that it has no way of passing a variable to an @import statement. Therefore, it is not currently possible to support libsass.
Apparently, we can pass variables to @import statements in libsass by using a function if we hack around a bit:
//change this
@mixin web-fonts($fonts...) {
$protocol: wf-protocol();
$query-string: wf-params-string($fonts);
$url: "#{$protocol}//fonts.googleapis.com/css?#{$query-string}";
@import url($url);
}
//to this
@function web-fonts($fonts...) {
$protocol: wf-protocol();
$query-string: wf-params-string($fonts);
$url: "#{$protocol}//fonts.googleapis.com/css?#{$query-string}";
@return $url;
}
//and later on, you can use the function with familiar syntax like this:
@import url(web-fonts('Open Sans'));
//generates: //fonts.googleapis.com/css?family=Open%20Sans
$web-fonts-params: (subset: "latin,latin-ext");
@import url(web-fonts('Open Sans'));
//generates: //fonts.googleapis.com/css?family=Open%20Sans&subset=latin%2Clatin-ext
@import url(web-fonts(("Open Sans": ("500", "600 italic"))));
//generates: //fonts.googleapis.com/css?family=Open%20Sans%3A500%2C600italic
@import url(web-fonts("Open Sans", ("Ubuntu": ("400", "italic"))));
//generates: //fonts.googleapis.com/css?family=Open%20Sans%3A400%2C700|Roboto%3A400%2C700
For some reason libsass doesn't notice us using variables this way.
Tested in Brackets with Brackets SASS extension
Oh, cool! I'll investigate later this week. :)
Nice findings @Minopolis! Thanks for keeping the possibility open.
@ronilaukkarinen Pleasure :)
Okay, I've started working on this on the libsass branch. It's probably going to be possible to support libsass, with a slightly different syntax.
In future, I'll probably change the documentation so it recommends everybody uses the new syntax, but keep the old one around to preserve backwards compatibility.
@alyssais, what was the solution for the answer, when I keep getting the error
@import directives are not allowed inside mixins and functions
Sorry I've taken such a long time on this. I'm working on a new version of Sass-Web-Fonts that should be compatible with libsass. Is anybody available to help me test it?
@alyssais what would be required to test?
@jgacuca567 Just need you to try using a new version in one of your projects (libsass or Ruby Sass) and let me know if everything works
@alyssais Let me know when it's ready, I'd love to test it out.
For anyone that wants to test, please take a look at https://github.com/alyssais/Sass-Web-Fonts/tree/2.0.0-rc1. (You can install it from bower with bower install sass-web-fonts#2.0.0) It should have enough information for you to start using it in your project. Let me know how it goes so I can get the new version released! :)
@alyssais Works fine here!
$ node-sass --version
node-sass 3.3.2 (Wrapper) [JavaScript]
libsass 3.2.5 (Sass Compiler) [C/C++]
@ronilaukkarinen Excellent, thanks!
@alyssais for Grunt Libsass, it is no longer being maintained. Currently Using grunt-contrib-sass
@jgacuca567 Does it work with grunt-contrib-sass?
Will have to get back on you on that, currently getting grunt errors right
now.
@alyssais No Errors So Far, after using grunt-contrib-sass.
Excellent @jgacuca567! So that's working fine for one libsass user and one Ruby user. Should be good to release!
I've created a pre-release of this new version. I'd appreciate if anybody reading this thread could take the time to test it out and let me know how it goes (successful or unsuccessful). If nobody finds any bugs in the next 4 days (by 2015-11-03), I'll release it properly then.
@alyssais The Upgrading Guide Redirects to a 404 Page.
Oops. Fixed! Thanks @jgacuca567.
How about loading up multiple webfonts and multiple weights? It works fine for a single font, but I get error reading values after ) and invalid top-level expression too easily. The syntax should be more readable, it's hard to focus with that many parentheses, don't you think?
@ronilaukkarinen I agree that the syntax is not the best. Can you suggest an alternative that would preserve all the existing functionality? I can't think of one.
@alyssais Actually, I can't think of one either, just food for thought if anyone has ideas about it.
@ronilaukkarinen I agree with you and welcome suggestions from anybody on how to make the syntax clearer. Now is the perfect time, too, since the libsass support requires breaking changes anyway.
Right, I think it's time for a release!
Okay, I have released Sass-Web-Fonts 2.0.0. Libsass is supported, and we can finally close this issue for good after a year. :D :D :D
For those interested, libsass can finally parse @import url() correctly