Merge branch '2.0.0'

Gemfile.lock

@@ -1,12 +1,12 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    commander (4.3.0)
-      highline (~> 1.6.11)
-    highline (1.6.21)
-    minitest (5.5.1)
-    sass (3.4.12)
-    sassunit (1.0.1)
+    commander (4.3.5)
+      highline (~> 1.7.2)
+    highline (1.7.8)
+    minitest (5.8.2)
+    sass (3.4.19)
+    sassunit (1.0.0)
       commander
       minitest
       sass

README.md

@@ -5,6 +5,11 @@ A Sass mixin to allow easy, efficient usage of [Google Web Fonts](https://google
 
 You can clone this repo and include [_web-fonts.scss](https://github.com/penman/Sass-Web-Fonts) in your project manually, or you can install the _sass-web-fonts_ package from [Bower](http://bower.io).
 
+Upgrading from a previous version of Sass Web Fonts
+---------------------------------------------------
+
+Sass Web Fonts 2.x introduces breaking changes from 1.x. If you're upgrading from Sass Web Fonts 1.x, read the [upgrading guide](UPGRADING.md#upgrading-from-1x-to-2x). It's very easy. :)
+
 Usage
 -----
 First, import Sass Web Fonts like this:
@@ -13,28 +18,41 @@ First, import Sass Web Fonts like this:
 @import "web-fonts";
 ```
 
+### Using with [libsass](https://github.com/sass/libsass)
+
+If you are using libsass, you can't pass the result of `web-fonts-url()` directly into `@import url()`. You have to store it in a variable first. This is due to the compiler not supporting importing urls from functions.
+
+```scss
+// This won't work with libsass
+@import url(web-fonts-url("Open Sans"));
+
+// This will work with libsass
+$url: web-fonts-url("Open Sans");
+@import url($url);
+```
+
 ### Importing a single font
 
 ```scss
-@include web-fonts("Open Sans");
+@import url(web-fonts-url("Open Sans"));
 ```
 
 ### Specifying font variant
 
 ```scss
-@include web-fonts(("Open Sans": "bold"));
+@import url(web-fonts-url(("Open Sans": "bold")));
 ```
 
 ### Multiple variants
 
 ```scss
-@include web-fonts(("Open Sans": ("500", "600 italic")));
+@import url(web-fonts-url(("Open Sans": ("500", "600 italic"))));
 ```
 
 ### Multiple fonts
 
 ```scss
-@include web-fonts("Open Sans", ("Ubuntu": ("400", "italic")));
+@import url(web-fonts-url("Open Sans", ("Ubuntu": ("400", "italic"))));
 ```
 
 Protocols
@@ -51,7 +69,7 @@ possible to override the automatic protocol detection by setting the
 
 ```scss
 $web-fonts-protocol: "https"; // fonts will be loaded over HTTPS from here on.
-@include web-fonts("Open Sans"); // uses HTTPS;
+@import url(web-fonts-url("Open Sans"); // uses HTTPS);
 ```
 
 Extra parameters
@@ -61,7 +79,7 @@ To add additional parameters to the web fonts URL, you can override the `$web-fo
 
 ```scss
 $web-fonts-params: (subset: "latin,latin-ext");
-@include web-fonts("Open Sans");
+@import url(web-fonts-url("Open Sans"));
 ```
 
 ```css
@@ -89,6 +107,7 @@ Troubleshooting
 If you get a `Sass::SyntaxError` when using the library, you probably need to update Sass. See [issue #7](https://github.com/penman/Sass-Web-Fonts/issues/7) for more information.
 
 ---
-_Requires Sass 3.3 or later version. **[Not compatible with libsass.](https://github.com/penman/Sass-Web-Fonts/issues/14)** Pull requests welcome._
+
+_Requires Sass 3.3 or later version. Pull requests welcome._
 
 [You can follow me on Twitter.](https://twitter.com/PenmanRoss)

UPGRADING.md

@@ -0,0 +1,21 @@
+# Upgrade Guide
+
+## Upgrading from 1.x to 2.x
+
+The syntax for Sass Web Fonts has changed.
+
+What would previously have been written:
+
+```scss
+@include web-fonts("Open Sans");
+```
+
+Should now be written:
+
+```scss
+@import url(web-fonts-url("Open Sans"));
+```
+
+This change was made to allow Sass Web Fonts to be used with [libsass](https://github.com/sass/libsass).
+
+If you have a large project with lots of calls to `web-fonts()` that you don't want to replace by hand, you can include `web-fonts/compat.scss` from the Sass Web Fonts repository and replace any occurrence of `@import "web-fonts"` with `@import "web-fonts/compat"` to continue using the old syntax. However, it is recommended that you switch to using the new syntax at some point, because `web-fonts/compat` will be removed in a future release of the library.

_web-fonts.scss

@@ -106,9 +106,9 @@
   @return wf-query-string-encode($params);
 }
 
-@mixin web-fonts($fonts...) {
+@function web-fonts-url($fonts...) {
   $protocol: wf-protocol();
   $query-string: wf-params-string($fonts);
   $url: "#{$protocol}//fonts.googleapis.com/css?#{$query-string}";
-  @import url($url);
+  @return $url;
 }

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "sass-web-fonts",
   "main": "_web-fonts.scss",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "homepage": "https://github.com/penman/Sass-Web-Fonts",
   "authors": [
     "Ross Penman <[email protected]>"

test/compat/multiple-calls.css

@@ -0,0 +1,2 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans");
+@import url("//fonts.googleapis.com/css?family=Ubuntu");

test/compat/multiple-calls.scss

@@ -0,0 +1,3 @@
+@import "web-fonts/compat";
+@include web-fonts("Open Sans");
+@include web-fonts("Ubuntu");

test/compat/multiple-fonts.css

@@ -0,0 +1 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans|Ubuntu%3A400%2Citalic");

test/compat/multiple-fonts.scss

@@ -0,0 +1,2 @@
+@import "web-fonts/compat";
+@include web-fonts("Open Sans", ("Ubuntu": ("400", "italic")));

test/compat/multiple-variants.css

@@ -0,0 +1 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans%3A500%2C600italic");

test/compat/multiple-variants.scss

@@ -0,0 +1,2 @@
+@import "web-fonts/compat";
+@include web-fonts(("Open Sans": ("500", "600 italic")));

test/compat/protocol.css

@@ -0,0 +1,4 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans");
+@import url("http://fonts.googleapis.com/css?family=Open%20Sans");
+@import url("https://fonts.googleapis.com/css?family=Open%20Sans");
+@import url("//fonts.googleapis.com/css?family=Open%20Sans");

test/compat/protocol.scss

@@ -0,0 +1,12 @@
+@import "web-fonts/compat";
+
+@include web-fonts("Open Sans");
+
+$web-fonts-protocol: "http";
+@include web-fonts("Open Sans");
+
+$web-fonts-protocol: "https";
+@include web-fonts("Open Sans");
+
+$web-fonts-protocol: "";
+@include web-fonts("Open Sans");

test/compat/single-font.css

@@ -0,0 +1 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans");

test/compat/single-font.scss

@@ -0,0 +1,2 @@
+@import "web-fonts/compat";
+@include web-fonts("Open Sans");

test/compat/single-variant.css

@@ -0,0 +1 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans%3Abold");

test/compat/single-variant.scss

@@ -0,0 +1,2 @@
+@import "web-fonts/compat";
+@include web-fonts(("Open Sans": "bold"));

test/compat/subset.css

@@ -0,0 +1 @@
+@import url("//fonts.googleapis.com/css?family=Open%20Sans&subset=latin%2Clatin-ext");

test/compat/subset.scss

@@ -0,0 +1,3 @@
+@import "web-fonts/compat";
+$web-fonts-params: (subset: "latin,latin-ext");
+@include web-fonts("Open Sans");

test/multiple-calls.scss

@@ -1,3 +1,5 @@
 @import "web-fonts";
-@include web-fonts("Open Sans");
-@include web-fonts("Ubuntu");
+$url: web-fonts-url("Open Sans");
+@import url($url);
+$url: web-fonts-url("Ubuntu");
+@import url($url);

test/multiple-fonts.scss

@@ -1,2 +1,3 @@
 @import "web-fonts";
-@include web-fonts("Open Sans", ("Ubuntu": ("400", "italic")));
+$url: web-fonts-url("Open Sans", ("Ubuntu": ("400", "italic")));
+@import url($url);

test/multiple-variants.scss

@@ -1,2 +1,3 @@
 @import "web-fonts";
-@include web-fonts(("Open Sans": ("500", "600 italic")));
+$url: web-fonts-url(("Open Sans": ("500", "600 italic")));
+@import url($url);

test/protocol.scss

@@ -1,12 +1,16 @@
 @import "web-fonts";
 
-@include web-fonts("Open Sans");
+$url: web-fonts-url("Open Sans");
+@import url($url);
 
 $web-fonts-protocol: "http";
-@include web-fonts("Open Sans");
+$url: web-fonts-url("Open Sans");
+@import url($url);
 
 $web-fonts-protocol: "https";
-@include web-fonts("Open Sans");
+$url: web-fonts-url("Open Sans");
+@import url($url);
 
 $web-fonts-protocol: "";
-@include web-fonts("Open Sans");
+$url: web-fonts-url("Open Sans");
+@import url($url);

test/single-font.scss

@@ -1,2 +1,4 @@
 @import "web-fonts";
-@include web-fonts("Open Sans");
+
+$url: web-fonts-url("Open Sans");
+@import url($url);

test/single-variant.scss

@@ -1,2 +1,3 @@
 @import "web-fonts";
-@include web-fonts(("Open Sans": "bold"));
+$url: web-fonts-url(("Open Sans": "bold"));
+@import url($url);

test/subset.scss

@@ -1,3 +1,4 @@
 @import "web-fonts";
 $web-fonts-params: (subset: "latin,latin-ext");
-@include web-fonts("Open Sans");
+$url: web-fonts-url("Open Sans");
+@import url($url);

web-fonts/compat.scss

@@ -0,0 +1,5 @@
+@import "web-fonts";
+
+@mixin web-fonts($fonts...) {
+  @import url(web-fonts-url($fonts...));
+}