diff --git a/README.md b/README.md index 15931f1..8660e74 100644 --- a/README.md +++ b/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 diff --git a/lib/index.js b/lib/index.js index 82b3dfc..b389cbc 100644 --- a/lib/index.js +++ b/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); } /** diff --git a/lib/index.test.js b/lib/index.test.js index 035a2da..e454f17 100644 --- a/lib/index.test.js +++ b/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, {}); }); diff --git a/package.json b/package.json index d13e3a1..7f1f20b 100644 --- a/package.json +++ b/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": [