Merge pull request #24 from streamich/feat/font

Feat/font

Author: streamich

.storybook/googleFont.stories.js

@@ -0,0 +1,30 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+const {create} = require('../index');
+const {addon: addonRule} = require('../addon/rule');
+const {addon: addonGoogleFont} = require('../addon/googleFont');
+
+const nano = create();
+addonRule(nano);
+addonGoogleFont(nano);
+
+nano.googleFont('Roboto');
+nano.googleFont('Roboto Slab', 700);
+
+const className1 = nano.rule({
+    fontFamily: '"Roboto"'
+}, 'Roboto');
+
+const className2 = nano.rule({
+    fontFamily: '"Roboto Slab"'
+}, 'Roboto_Slab');
+
+storiesOf('Addons/googleFont', module)
+    .add('Roboto', () =>
+        h('div', {className: className1}, 'Hello world')
+    )
+    .add('Roboto Slab, bold', () =>
+        h('div', {className: className2}, 'Hello world')
+    )

.storybook/important.stories.js

@@ -12,10 +12,10 @@ addonImportant(renderer);
 const {rule} = renderer;
 
 const className1 = rule({
-  border: '1px solid red'
+    border: '1px solid red'
 }, 'RedBorderImportant');
 
 storiesOf('Addons/!important', module)
-  .add('Default', () =>
-    h('div', {className: className1}, 'Hello world')
-  )
+    .add('Default', () =>
+        h('div', {className: className1}, 'Hello world')
+    )

README.md

@@ -42,6 +42,7 @@ __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/
   - [`animate/*`](./docs/animations.md)
   - [`reset/*`](./docs/resets.md)
   - [`reset-font`](./docs/reset-font.md)
+  - [`googleFont()`](./docs/googleFont.md)
 - [Server-side rendering](./docs/SSR.md)
 
 

addon/googleFont.js

@@ -0,0 +1,43 @@
+'use strict';
+
+function createUrl (font, weights, subsets) {
+    var params = '?family=' + encodeURIComponent(font);
+
+    if (weights) {
+        if (!(weights instanceof Array))
+            weights = [weights];
+
+        params += ':' + weights.join(',');
+    }
+
+    if (subsets) {
+        if (!(subsets instanceof Array))
+            subsets = [subsets];
+
+        params += '&subset=' + subsets.join(',');
+    }
+
+    return 'https://fonts.googleapis.com/css' + params;
+}
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
+    }
+
+    if (renderer.client) {
+        renderer.googleFont = function (font, weights, subsets) {
+            var el = document.createElement('link');
+
+            el.href = createUrl(font, weights, subsets);
+            el.rel = 'stylesheet';
+            el.type = 'text/css';
+
+            document.head.appendChild(el);
+        };
+    } else {
+        renderer.googleFont = function (font, weights, subsets) {
+            renderer.raw = "@import url('" + createUrl(font, weights, subsets) + "');" + renderer.raw;
+        };
+    }
+};

addon/hydrate.js

@@ -1,19 +1,17 @@
 'use strict';
 
-exports.addon = function (renderer, id) {
-    id = id || 'nano-css';
-
+exports.addon = function (renderer) {
     if (process.env.NODE_ENV !== 'production') {
         require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
     }
 
     if (renderer.client) {
         var hydrated = {};
-        var stylesheet = document.getElementById(id);
+        var stylesheet = renderer.sh;
 
         if (!stylesheet) {
             if (process.env.NODE_ENV !== 'production') {
-                console.error('Hydration stylesheet with id "' + id + '" was not found.');
+                console.error('Hydration style sheet was not found.');
             }
 
             return;

addon/keyframes.js

@@ -10,9 +10,9 @@ exports.addon = function (renderer) {
         document.head.appendChild(renderer.ksh = document.createElement('style'))
     }
 
-    var putAtrule = renderer.putAtrule;
+    var putAt = renderer.putAt;
 
-    renderer.putAtrule = function (__, keyframes, prelude) {
+    renderer.putAt = function (__, keyframes, prelude) {
         // @keyframes
         if (prelude[1] === 'k') {
             var str = '';
@@ -38,14 +38,14 @@ exports.addon = function (renderer) {
             return;
         }
 
-        putAtrule(__, keyframes, prelude);
+        putAt(__, keyframes, prelude);
     };
 
     renderer.keyframes = function (keyframes, block) {
         if (!block) block = renderer.hash(keyframes);
         block = renderer.pfx + block;
 
-        renderer.putAtrule('', keyframes, '@keyframes ' + block);
+        renderer.putAt('', keyframes, '@keyframes ' + block);
 
         return block;
     };

docs/Addons.md

@@ -28,7 +28,8 @@ plenty more to chose from. Below is a list of addons shipped with `nano-css`.
 - [`:global`](./global.md) — allows emitting global styles
 - [`animate/*`](./animations.md) — collection of animation styles
 - [`reset/*`](./resets.md) — collection of CSS resets
-- [`reset-font`](./docs/reset-font.md) — global styles for better font
+- [`reset-font`](./reset-font.md) — global styles for better font
+- [`googleFont()`](./googleFont.md) — loads custom fonts from *Google Fonts*
 
 ## Addon Installation
 

docs/SSR.md

@@ -12,8 +12,12 @@ html += `<style>${nano.raw}</style>`;
 ## Re-hydrating
 
 `nano-css` can re-hydrate server-side generated CSS. To do that, you need to install [`hydrate` addon](hydrate.md);
-and set `nano-css` id on your `<style>` element.
+and provide style sheet you want to hydrate to the `nano-css` instance when creating it.
 
 ```js
+const nano = create({
+    sh: typeof document === 'object' ? document.getElementById('nano-css') : null
+});
+
 html += `<style id="nano-css">${nano.raw}</style>`;
 ```

docs/googleFont.md

@@ -0,0 +1,21 @@
+# `googleFont()` Addon
+
+Creates `googleFont()` method that loads fonts from *Google Fonts*. Signature:
+
+```ts
+googleFont(name: string, widths?: number | number[], subsets?: string | string[])
+```
+
+
+## Example
+
+Below example loads `Roboto Slab` font at `400` and `700` widths, including `cyrillic` characters.
+
+```js
+nano.googleFont('Roboto Slab', [400, 700], 'cyrillic');
+```
+
+
+## Installation
+
+Simply install `googleFont` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).

docs/hydrate.md

@@ -6,20 +6,16 @@ Re-hydrates CSS styles generated on the server. On the server add `nano-css` id
 html += `<style id="nano-css">${nano.raw}</style>`;
 ```
 
-That's it! `hydrate` addon will find this stylesheet in the browser and will not emit CSS
-rules that were already generated by the server.
-
-
-## Configuration
-
-You can set a custom id for you style sheet.
+And when creating `nano-css` instance provide that style sheet in configuration.
 
 ```js
-import {addon as addonHydrate} from 'nano-css/addon/hydrate';
-
-addonHydrate(nano, 'custom-id');
+const nano = create({
+    sh: typeof document === 'object' ? document.getElementById('nano-css') : null
+});
 ```
 
+That's it!
+
 
 ## Installation