Merge pull request #5 from yordis/yordis/add-new-features

Add display Swap support

README.md

@@ -2,18 +2,23 @@
 
 [PostCSS] plugin for import Google fonts.
 
-***Syntax:*** `@google-font font-family styles [subset]`
-- ***font-family***: The name of the font. ***Compound family names*** should be wrapped out
-inside quotes or double quotes
-- ***styles***: The styles of the font. Use the comma for separated multiples styles: `400,500,700italic`
-- ***subset*** (optional): The subset of the font. Use the comma for separated multiples styles: `latin,latin-ext`
+**Syntax:** `@google-font font-family styles [args]`
+
+- **font-family**: The name of the font. **Compound family names** should
+  be wrapped out inside quotes or double quotes
+- **styles**: The styles of the font. Use the comma for separated multiples
+  styles: `400,500,700italic`
+- **args** (optional): The dislpay and subset of the font:
+  `display=swap,subset=latin|latin-ext`
 
 ```css
-@google-font Lato 400 latin;
+@google-font Lato 400 subset=latin;
+@google-font Lato 400 display=swap,subset=latin|latin-ext;
 ```
 
 ```css
 @import url(https://fonts.googleapis.com/css?family=Lato:400?subset=latin);
+@import url(https://fonts.googleapis.com/css?family=Lato:400?display=swap&subset=latin,latin-ext);
 ```
 
 ## Usage

lib/index.js

@@ -3,21 +3,27 @@
 const url = require('url');
 const postcss = require('postcss');
 
+function addArgToQuery(query, arg) {
+  const [key, value] = arg.split('=');
+  query[key] = value.replace('|', ',');
+  return query;
+}
+
 /**
  * Construct the Google Font URL.
  * @param {String} family - The font family.
  * @param {String} styles - The font styles separated by comma.
- * @param {String} subset - The subset separated by comma
+ * @param {String} args - The args separated by comma
  * @returns {String}
  */
-function getGoogleUrl(family, styles, subset) {
+function getGoogleUrl(family, styles, args) {
   const font = `${family}:${styles}`;
   const query = {
     family: font,
   };
 
-  if (subset) {
-    query.subset = subset;
+  if (args) {
+    args.split(',').reduce(addArgToQuery, query);
   }
 
   /**

lib/index.test.js

@@ -42,18 +42,18 @@ it('with multiple styles', () => {
   return run(input, expectedOutput, {});
 });
 
-it('with subset', () => {
-  const input = '@google-font Lato 700 latin;';
+it('with arg', () => {
+  const input = '@google-font Lato 700 subset=latin;';
   const expectedOutput =
     '@import url(https://fonts.googleapis.com/css?family=Lato:700&subset=latin);';
 
   return run(input, expectedOutput, {});
 });
 
-it('with multiple subset', () => {
-  const input = '@google-font Lato 700 latin,latin-ext;';
+it('with multiple args', () => {
+  const input = '@google-font Lato 700 subset=latin|latin-ext,display=swap;';
   const expectedOutput =
-    '@import url(https://fonts.googleapis.com/css?family=Lato:700&subset=latin,latin-ext);';
+    '@import url(https://fonts.googleapis.com/css?family=Lato:700&subset=latin,latin-ext&display=swap);';
 
   return run(input, expectedOutput, {});
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-google-font",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "PostCSS plugin for import Google fonts",
   "main": "./lib/index.js",
   "keywords": [