Merge pull request #21 from streamich/feat/global-css

Feat/global css

Author: streamich

.storybook/animate.stories.js

@@ -0,0 +1,33 @@
+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: addonKeyframes} = require('../addon/keyframes');
+
+const animations = [
+    'fadeIn',
+    'fadeInDown',
+    'fadeInExpand',
+];
+
+const nano = create();
+addonRule(nano);
+addonKeyframes(nano);
+const {rule} = nano;
+
+var className = rule({
+    width: '200px',
+    height: '200px',
+    background: 'red',
+});
+
+let stories = storiesOf('Addons/Animate', module);
+
+animations.forEach(name => {
+    stories = stories.add(name, () => {
+        require('../addon/animate/' + name).addon(nano);
+        return h('div', {className: name + className});
+    });
+});

.storybook/global-css.stories.js

@@ -0,0 +1,14 @@
+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: resetEricMeyerCondensed} = require('../addon/reset/EricMeyerCondensed');
+
+const nano = create();
+resetEricMeyerCondensed(nano);
+
+storiesOf('CSS resets', module)
+  .add('Eric Meyer - condensed', () =>
+    h('div', null, 'Hello world')
+  )

.storybook/stylis.stories.js

@@ -0,0 +1,24 @@
+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: addonStylis} = require('../addon/stylis');
+const {addon: addonRule} = require('../addon/rule');
+
+const renderer = create({h});
+addonStylis(renderer);
+addonRule(renderer);
+const {rule} = renderer;
+
+const className = rule(`
+    color: red;
+    &:hover {
+        color: blue;
+    }
+`);
+
+storiesOf('Addons/stylis', module)
+    .add('Default', () =>
+        h('div', {className}, 'Hello world')
+    )

.travis.yml

@@ -11,7 +11,6 @@ node_js:
   - '8'
 script:
   - npm run test
-  - npm run build
 matrix:
   allow_failures: []
   fast_finish: true

README.md

@@ -33,9 +33,12 @@ __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/
   - [`nesting`](./docs/nesting.md)
   - [`keyframes()`](./docs/keyframes.md)
   - [`hydrate`](./docs/hydrate.md)
+  - [`stylis`](./docs/stylis.md)
   - [`unitless`](./docs/unitless.md)
   - [`!important`](./docs/important.md)
   - [`:global`](./docs/global.md)
+  - [Animations](./docs/animations.md)
+  - [CSS resets](./docs/resets.md)
 - [Server-side rendering](./docs/SSR.md)