From 90b1b6bbb8354d52069c26863b6197f865595c5b Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 16 Dec 2016 11:36:35 +0100 Subject: [PATCH 1/4] chore(docs): fix npm run build:docs to use custom theme --- docs/docs/index.html | 1653 ++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 1601 +--------------------------------------- package.json | 2 +- 3 files changed, 1661 insertions(+), 1595 deletions(-) create mode 100644 docs/docs/index.html diff --git a/docs/docs/index.html b/docs/docs/index.html new file mode 100644 index 00000000..f76c8d82 --- /dev/null +++ b/docs/docs/index.html @@ -0,0 +1,1653 @@ + + + + + polished | Documentation + + + + + + + +
+
+
+
+

polished

+
+ + +
+ Need help reading this? +
+
+
+
+ + +
+ +

+ Mixins +

+ + +

These are reusable chunks of styles. By extracting common ones into small utilities you avoid repetition and mistakes.

+ + +
+
+ + + +
+ + +
+ +

+ clearFix +

+ + + + src/mixins/clearFix.js + + +
+ + +

CSS to contain a float (credit to CSSMojo).

+ + +
clearFix(parent: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ parent ([string] + = '&') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+   ...clearFix(),
+}
+
+// styled-components usage
+const div = styled.div`
+  ${clearFix()}
+`
+
+// CSS as JS Output
+
+'&::after': {
+  'clear': 'both',
+  'content': '',
+  'display': 'table'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ ellipsis +

+ + + + src/mixins/ellipsis.js + + +
+ + +

CSS to represent truncated text with an ellipsis.

+ + +
ellipsis(width: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ width ([string] + = '100%') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...ellipsis(250px)
+}
+
+// styled-components usage
+const div = styled.div`
+  ${ellipsis(250px)}
+
+
+// CSS as JS Output
+
+div: {
+  'display': 'inline-block',
+  'max-width': '250px',
+  'overflow': 'hidden',
+  'text-overflow': 'ellipsis',
+  'white-space': 'nowrap',
+  'word-wrap': 'normal'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ hiDPI +

+ + + + src/mixins/hiDPI.js + + +
+ + +

Generates a media query to target HiDPI devices.

+ + +
hiDPI(ratio: [number])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ ratio ([number] + = 1.3) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+ [hiDPI(1.5)]: {
+   width: 200px;
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+  ${hiDPI(1.5)} {
+    width: 200px;
+  }
+`
+
+// CSS as JS Output
+
+'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (-o-min-device-pixel-ratio: 1.5/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+  'width': '200px',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ hideText +

+ + + + src/mixins/hideText.js + + +
+ + +

CSS to hide text to show a background image in a SEO-Friendly.

+ + +
hideText()
+ + + + + + + + + + + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'background-image': 'url(logo.png)',
+  ...hideText(),
+}
+
+// styled-components usage
+const div = styled.div`
+  background-image: url(logo.png);
+  ${hideText()};
+`
+
+// CSS as JS Output
+
+'div': {
+  'background-image': 'url(logo.png)',
+  'text-indent': '101%',
+  'overflow': 'hidden',
+  'white-space': 'nowrap',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ selection +

+ + + + src/mixins/selection.js + + +
+ + +

CSS to style the selection psuedo-element.

+ + +
selection(styles: Object, parent: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ styles (Object) + +
+ +
+ +
+
+ parent ([string] + = '') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...selection({
+    'background': 'blue'
+  }, 'section')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${selection({'background': 'blue'}, 'section')}
+`
+
+// CSS as JS Output
+
+'div': {
+  'section::-moz-selection': {
+    'background-color':'blue',
+  },
+  'section::selection': {
+    'background-color': 'blue',
+  }
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ size +

+ + + + src/mixins/size.js + + +
+ + +

Mixin to set the height and width properties in a single statement.

+ + +
size(height: string, width: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ height (string) + +
+ +
+ +
+
+ width ([string] + = height) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...size('300px', '250px')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${size('300px', '250px')}
+`
+
+// CSS as JS Output
+
+div {
+  'height': '300px',
+  'width': '250px',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ timingFunctions +

+ + + + src/mixins/timingFunctions.js + + +
+ + +

String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).

+ + +
timingFunctions(timingFunction: TimingFunctions)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ timingFunction (TimingFunctions) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'transition-timing-function': timingFunctions('easeInQuad')
+}
+
+// styled-components usage
+ const div = styled.div`
+  transition-timing-function: ${timingFunctions('easeInQuad')};
+`
+
+// CSS as JS Output
+
+'div': {
+  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ wordWrap +

+ + + + src/mixins/wordWrap.js + + +
+ + +

Provides an easy way to change the word-wrap property

+ + +
wordWrap(wrap: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ wrap ([string] + = 'break-word') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...wordWrap('break-all')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${wordWrap('break-all')}
+
+
+// CSS as JS Output
+
+const styles = {
+  overflow-wrap: 'break-all',
+  word-wrap: 'break-all',
+  word-break: 'break-all',
+}
+ + + + + + + + +
+ + + + +
+ +

+ Helpers +

+ + +

Tiny helper functions that make your life easier.

+ + +
+
+ + + +
+ + +
+ +

+ stripUnit +

+ + + + src/helpers/stripUnit.js + + +
+ + +

Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)

+ + +
stripUnit(value: string): (number | string)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ value (string) + +
+ +
+ +
+ + + + + + +
Returns
+ (number | string) + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  '--dimension': stripUnit(100px)
+}
+
+// styled-components usage
+const div = styled.div`
+  --dimension: ${stripUnit(100px)}
+`
+
+// CSS in JS Output
+
+element {
+  '--dimension': 100
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ em +

+ + + + src/helpers/em.js + + +
+ + +

Convert pixel value to ems. The default base value is 16px, but can be changed by passing a +second argument to the function.

+ + +
em(pxval: (string | number), base: [(string | number)])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ pxval ((string | number)) + +
+ +
+ +
+
+ base ([(string | number)] + = '16px') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'height': em('16px')
+}
+
+// styled-components usage
+const div = styled.div`
+  height: ${em('16px')}
+`
+
+// CSS in JS Output
+
+element {
+  'height': '1em'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ modularScale +

+ + + + src/helpers/modularScale.js + + +
+ + +

Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.

+ + +
modularScale(steps: number, base: [(number | string)], ratio: [Ratio])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ steps (number) + +
+ +
+ +
+
+ base ([(number | string)] + = '1em') + +
+ +
+ +
+
+ ratio ([Ratio] + = 'perfectFourth') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+   // Increment two steps up the default scale
+  'font-size': modularScale(2)
+}
+
+// styled-components usage
+const div = styled.div`
+   // Increment two steps up the default scale
+  font-size: ${modularScale(2)}
+`
+
+// CSS in JS Output
+
+element {
+  'font-size': '1.77689em'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ rem +

+ + + + src/helpers/rem.js + + +
+ + +

Convert pixel value to rems. The default base value is 16px, but can be changed by passing a +second argument to the function.

+ + +
rem(pxval: (string | number), base: [(string | number)])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ pxval ((string | number)) + +
+ +
+ +
+
+ base ([(string | number)] + = '16px') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'height': rem('16px')
+}
+
+// styled-components usage
+const div = styled.div`
+  height: ${rem('16px')}
+`
+
+// CSS in JS Output
+
+element {
+  'height': '1rem'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ placeholder +

+ + + + src/mixins/placeholder.js + + +
+ + +

CSS to style the selection psuedo-element.

+ + +
placeholder(styles: Object, parent: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ styles (Object) + +
+ +
+ +
+
+ parent ([string] + = '&') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...placeholder(styles)
+}
+
+// styled-components usage
+const div = styled.input`
+   ${placeholder(css`styles`)}
+`
+
+// CSS as JS Output
+
+'input': {
+  '&:-moz-placeholder': {
+    'color': 'blue',
+  },
+  '&:-ms-input-placeholder': {
+    'color': 'blue',
+  },
+  '&::-moz-placeholder': {
+    'color': 'blue',
+  },
+  '&::-webkit-input-placeholder': {
+    'color': 'blue',
+  },
+},
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ retinaImage +

+ + + + src/mixins/retinaImage.js + + +
+ + +

The retina-image mixin is a helper to generate a retina background image and non-retina +background image. The retina background image will output to a HiDPI media query. The mixin uses +a _2x.png filename suffix by default.

+ + +
retinaImage(filename: string, backgroundSize: string, extension: [string], retinaFilename: string, retinaSuffix: [string])
+ + + + + + + + + + +
Parameters
+
+ +
+
+ filename (string) + +
+ +
+ +
+
+ backgroundSize (string) + +
+ +
+ +
+
+ extension ([string] + = 'png') + +
+ +
+ +
+
+ retinaFilename (string) + +
+ +
+ +
+
+ retinaSuffix ([string] + = '_2x') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+ ...retinaImage('my-img')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${retinaImage('my-img')}
+`
+
+// CSS as JS Output
+div {
+  backgroundImage: 'url(my-img.png)',
+  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+   only screen and (min--moz-device-pixel-ratio: 1.3),
+   only screen and (-o-min-device-pixel-ratio: 1.3/1),
+   only screen and (min-resolution: 144dpi),
+   only screen and (min-resolution: 1.5dppx)': {
+    backgroundImage: 'url(my-img_2x.png)',
+  }
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ animation +

+ + + + src/shorthands/animation.js + + +
+ + +

Shorthand for easily setting the animation property. Allows either multiple arrays with animations +or a single animation spread over the arguments.

+ + +
animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ args (...Array<(Array<AnimationProperty> | AnimationProperty)>) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
+`
+
+// CSS as JS Output
+
+div {
+  'animation': 'rotate 1s ease-in-out, colorchange 2s'
+}
+ + + 
// Styles as object usage
+const styles = {
+  ...animation('rotate', '1s', 'ease-in-out')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation('rotate', '1s', 'ease-in-out')}
+`
+
+// CSS as JS Output
+
+div {
+  'animation': 'rotate 1s ease-in-out'
+}
+ + + + + + + + +
+ + + +
+
+
+ + + + + + diff --git a/docs/index.html b/docs/index.html index d402ded6..ec7efec3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,1605 +4,18 @@ polished | Documentation - - - + + + -
-
-
-
-

polished

-
- - -
- Need help reading this? -
-
-
-
- - -
- -

- Mixins -

- - -

These are reusable chunks of styles. By extracting common ones into small utilities you avoid repetition and mistakes.

- - -
-
- - - -
- - -
-

- clearFix -

- - - src/mixins/clearFix.js - - -
- - -

CSS to contain a float (credit to CSSMojo).

- - -
clearFix(parent: [string])
- - - - - - - - - - -
Parameters
-
- -
-
- parent ([string] - (default '&') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-   ...clearFix(),
-}
-
-// styled-components usage
-const div = styled.div`
-  ${clearFix()}
-`
-
-// CSS as JS Output
-
-'&::after': {
-  'clear': 'both',
-  'content': '',
-  'display': 'table'
-}
- - - - - - - - -
- - - - -
- - -
-

- ellipsis -

- - - src/mixins/ellipsis.js - - -
- - -

CSS to represent truncated text with an ellipsis.

- - -
ellipsis(width: [string])
- - - - - - - - - - -
Parameters
-
- -
-
- width ([string] - (default '100%') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  ...ellipsis(250px)
-}
-
-// styled-components usage
-const div = styled.div`
-  ${ellipsis(250px)}
-
-
-// CSS as JS Output
-
-div: {
-  'display': 'inline-block',
-  'max-width': '250px',
-  'overflow': 'hidden',
-  'text-overflow': 'ellipsis',
-  'white-space': 'nowrap',
-  'word-wrap': 'normal'
-}
- - - - - - - - -
- - - - -
- - -
-

- hiDPI -

- - - src/mixins/hiDPI.js - - -
- - -

Generates a media query to target HiDPI devices.

- - -
hiDPI(ratio: [number])
- - - - - - - - - - -
Parameters
-
- -
-
- ratio ([number] - (default 1.3) - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
- [hiDPI(1.5)]: {
-   width: 200px;
- }
-}
-
-// styled-components usage
-const div = styled.div`
-  ${hiDPI(1.5)} {
-    width: 200px;
-  }
-`
-
-// CSS as JS Output
-
-'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (-o-min-device-pixel-ratio: 1.5/1),
- only screen and (min-resolution: 144dpi),
- only screen and (min-resolution: 1.5dppx)': {
-  'width': '200px',
-}
- - - - - - - - -
- - - - -
- - -
-

- hideText -

- - - src/mixins/hideText.js - - -
- - -

CSS to hide text to show a background image in a SEO-Friendly.

- - -
hideText()
- - - - - - - - - - - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  'background-image': 'url(logo.png)',
-  ...hideText(),
-}
-
-// styled-components usage
-const div = styled.div`
-  background-image: url(logo.png);
-  ${hideText()};
-`
-
-// CSS as JS Output
-
-'div': {
-  'background-image': 'url(logo.png)',
-  'text-indent': '101%',
-  'overflow': 'hidden',
-  'white-space': 'nowrap',
-}
- - - - - - - - -
- - - - -
- - -
-

- selection -

- - - src/mixins/selection.js - - -
- - -

CSS to style the selection psuedo-element.

- - -
selection(styles: Object, parent: [string])
- - - - - - - - - - -
Parameters
-
- -
-
- styles (Object) -
- -
- -
-
- parent ([string] - (default '') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  ...selection({
-    'background': 'blue'
-  }, 'section')
-}
-
-// styled-components usage
-const div = styled.div`
-  ${selection({'background': 'blue'}, 'section')}
-`
-
-// CSS as JS Output
-
-'div': {
-  'section::-moz-selection': {
-    'background-color':'blue',
-  },
-  'section::selection': {
-    'background-color': 'blue',
-  }
-}
- - - - - - - - -
- - - - -
- - -
-

- size -

- - - src/mixins/size.js - - -
- - -

Mixin to set the height and width properties in a single statement.

- - -
size(height: string, width: [string])
- - - - - - - - - - -
Parameters
-
- -
-
- height (string) -
- -
- -
-
- width ([string] - (default height) - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  ...size('300px', '250px')
-}
-
-// styled-components usage
-const div = styled.div`
-  ${size('300px', '250px')}
-`
-
-// CSS as JS Output
-
-div {
-  'height': '300px',
-  'width': '250px',
-}
- - - - - - - - -
- - - - -
- - -
-

- timingFunctions -

- - - src/mixins/timingFunctions.js - - -
- - -

String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).

- - -
timingFunctions(timingFunction: TimingFunctions)
- - - - - - - - - - -
Parameters
-
- -
-
- timingFunction (TimingFunctions) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  'transition-timing-function': timingFunctions('easeInQuad')
-}
-
-// styled-components usage
- const div = styled.div`
-  transition-timing-function: ${timingFunctions('easeInQuad')};
-`
-
-// CSS as JS Output
-
-'div': {
-  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
-}
- - - - - - - - -
- - - - -
- - -
-

- wordWrap -

- - - src/mixins/wordWrap.js - - -
- - -

Provides an easy way to change the word-wrap property

- - -
wordWrap(wrap: [string])
- - - - - - - - - - -
Parameters
-
- -
-
- wrap ([string] - (default 'break-word') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  ...wordWrap('break-all')
-}
-
-// styled-components usage
-const div = styled.div`
-  ${wordWrap('break-all')}
-
-
-// CSS as JS Output
-
-const styles = {
-  overflow-wrap: 'break-all',
-  word-wrap: 'break-all',
-  word-break: 'break-all',
-}
- - - - - - - - -
- - - - -
- -

- Helpers -

- - -

Tiny helper functions that make your life easier.

- - -
-
- - - -
- - -
-

- stripUnit -

- - - src/helpers/stripUnit.js - - -
- - -

Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)

- - -
stripUnit(value: string): (number | string)
- - - - - - - - - - -
Parameters
-
- -
-
- value (string) -
- -
- -
- - - - - - -
Returns
- (number | string) - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  '--dimension': stripUnit(100px)
-}
-
-// styled-components usage
-const div = styled.div`
-  --dimension: ${stripUnit(100px)}
-`
-
-// CSS in JS Output
-
-element {
-  '--dimension': 100
-}
- - - - - - - - -
- - - - -
- - -
-

- em -

- - - src/helpers/em.js - - -
- - -

Convert pixel value to ems. The default base value is 16px, but can be changed by passing a -second argument to the function.

- - -
em(pxval: (string | number), base: [(string | number)])
- - - - - - - - - - -
Parameters
-
- -
-
- pxval ((string | number)) -
- -
- -
-
- base ([(string | number)] - (default '16px') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  'height': em('16px')
-}
-
-// styled-components usage
-const div = styled.div`
-  height: ${em('16px')}
-`
-
-// CSS in JS Output
-
-element {
-  'height': '1em'
-}
- - - - - - - - -
- - - - -
- - -
-

- modularScale -

- - - src/helpers/modularScale.js - - -
- - -

Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.

- - -
modularScale(steps: number, base: [(number | string)], ratio: [Ratio])
- - - - - - - - - - -
Parameters
-
- -
-
- steps (number) -
- -
- -
-
- base ([(number | string)] - (default '1em') - ) -
- -
- -
-
- ratio ([Ratio] - (default 'perfectFourth') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-   // Increment two steps up the default scale
-  'font-size': modularScale(2)
-}
-
-// styled-components usage
-const div = styled.div`
-   // Increment two steps up the default scale
-  font-size: ${modularScale(2)}
-`
-
-// CSS in JS Output
-
-element {
-  'font-size': '1.77689em'
-}
- - - - - - - - -
- - - - -
- - -
-

- rem -

- - - src/helpers/rem.js - - -
- - -

Convert pixel value to rems. The default base value is 16px, but can be changed by passing a -second argument to the function.

- - -
rem(pxval: (string | number), base: [(string | number)])
- - - - - - - - - - -
Parameters
-
- -
-
- pxval ((string | number)) -
- -
- -
-
- base ([(string | number)] - (default '16px') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  'height': rem('16px')
-}
-
-// styled-components usage
-const div = styled.div`
-  height: ${rem('16px')}
-`
-
-// CSS in JS Output
-
-element {
-  'height': '1rem'
-}
- - - - - - - - -
- - - - -
- - -
-

- placeholder -

- - - src/mixins/placeholder.js - - -
- - -

CSS to style the selection psuedo-element.

- - -
placeholder(styles: Object, parent: [string])
- - - - - - - - - - -
Parameters
-
- -
-
- styles (Object) -
- -
- -
-
- parent ([string] - (default '&') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  ...placeholder(styles)
-}
-
-// styled-components usage
-const div = styled.input`
-   ${placeholder(css`styles`)}
-`
-
-// CSS as JS Output
-
-'input': {
-  '&:-moz-placeholder': {
-    'color': 'blue',
-  },
-  '&:-ms-input-placeholder': {
-    'color': 'blue',
-  },
-  '&::-moz-placeholder': {
-    'color': 'blue',
-  },
-  '&::-webkit-input-placeholder': {
-    'color': 'blue',
-  },
-},
- - - - - - - - -
- - - - -
- - -
-

- retinaImage -

- - - src/mixins/retinaImage.js - - -
- - -

The retina-image mixin is a helper to generate a retina background image and non-retina -background image. The retina background image will output to a HiDPI media query. The mixin uses -a _2x.png filename suffix by default.

- - -
retinaImage(filename: string, backgroundSize: string, extension: [string], retinaFilename: string, retinaSuffix: [string])
- - - - - - - - - -
Parameters
-
- -
-
- filename (string) -
- -
- -
-
- backgroundSize (string) -
- -
- -
-
- extension ([string] - (default 'png') - ) -
- -
- -
-
- retinaFilename (string) -
- -
- -
-
- retinaSuffix ([string] - (default '_2x') - ) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
- ...retinaImage('my-img')
-}
-
-// styled-components usage
-const div = styled.div`
-  ${retinaImage('my-img')}
-`
-
-// CSS as JS Output
-div {
-  backgroundImage: 'url(my-img.png)',
-  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
-   only screen and (min--moz-device-pixel-ratio: 1.3),
-   only screen and (-o-min-device-pixel-ratio: 1.3/1),
-   only screen and (min-resolution: 144dpi),
-   only screen and (min-resolution: 1.5dppx)': {
-    backgroundImage: 'url(my-img_2x.png)',
-  }
-}
- - - - - - - - -
- - - - -
- - -
-

- animation -

- - - src/shorthands/animation.js - - -
- - -

Shorthand for easily setting the animation property. Allows either multiple arrays with animations -or a single animation spread over the arguments.

- - -
animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
- - - - - - - - - - -
Parameters
-
- -
-
- args (...Array<(Array<AnimationProperty> | AnimationProperty)>) -
- -
- -
- - - - - - - - - -
Example
- - - 
// Styles as object usage
-const styles = {
-  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
-}
-
-// styled-components usage
-const div = styled.div`
-  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
-`
-
-// CSS as JS Output
-
-div {
-  'animation': 'rotate 1s ease-in-out, colorchange 2s'
-}
- - - 
// Styles as object usage
-const styles = {
-  ...animation('rotate', '1s', 'ease-in-out')
-}
-
-// styled-components usage
-const div = styled.div`
-  ${animation('rotate', '1s', 'ease-in-out')}
-`
-
-// CSS as JS Output
-
-div {
-  'animation': 'rotate 1s ease-in-out'
-}
- - - - - +

polished

+
-
- - - -
-
-
- - + + diff --git a/package.json b/package.json index ea075ef9..f7a66319 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "prebuild:dist": "rm -rf dist/*", "build:dist": "rollup -c && rollup -c --environment PRODUCTION", "prebuild:docs": "rm -rf docs/*", - "build:docs": "documentation build --github -o docs -f html -c ./.documentation.json", + "build:docs": "documentation build -t docs-theme --github -o docs -f html -c ./.documentation.json", "postbuild:docs": "cp CNAME docs/CNAME", "build:watch": "npm-watch", "build:flow": "flow-copy-source -v -i '{**/test/*.js,**/*.test.js}' src lib", From acc67dda5569574d23ee9328d66014b2b5a5ccd7 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 16 Dec 2016 11:42:09 +0100 Subject: [PATCH 2/4] chore(docs): update ToC --- .documentation.json | 10 + docs/docs/index.html | 647 ++++++++++++++++++++++--------------------- 2 files changed, 346 insertions(+), 311 deletions(-) diff --git a/.documentation.json b/.documentation.json index d9bbe11e..3b0f8597 100644 --- a/.documentation.json +++ b/.documentation.json @@ -12,14 +12,24 @@ "ellipsis", "hiDPI", "hideText", + "placeholder", + "retinaImage", "selection", "size", "timingFunctions", "wordWrap", + { + "name": "Shorthands", + "description": "Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation." + }, + "animation", { "name": "Helpers", "description": "Tiny helper functions that make your life easier." }, + "em", + "modularScale", + "rem", "stripUnit" ] } diff --git a/docs/docs/index.html b/docs/docs/index.html index f76c8d82..b8535a23 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -75,6 +75,26 @@

polished

+
  • + placeholder + + + +
    • + + +
  • + retinaImage + + + +
    • + +
  • @@ -116,19 +136,9 @@

    polished

  • - Helpers - - - -
    • - - -
  • - stripUnit + Shorthands @@ -136,9 +146,9 @@

    polished

  • - em + animation @@ -146,9 +156,9 @@

    polished

  • - modularScale + href='#helpers' + class="h5 bold black caps"> + Helpers @@ -156,9 +166,9 @@

    polished

  • - rem + em @@ -166,9 +176,9 @@

    polished

  • - placeholder + modularScale @@ -176,9 +186,9 @@

    polished

  • - retinaImage + rem @@ -186,9 +196,9 @@

    polished

  • - animation + stripUnit @@ -229,7 +239,7 @@

    - + src/mixins/clearFix.js @@ -315,7 +325,7 @@

    - + src/mixins/ellipsis.js @@ -404,7 +414,7 @@

    - + src/mixins/hiDPI.js @@ -496,7 +506,7 @@

    - + src/mixins/hideText.js @@ -566,13 +576,13 @@

    -

    - selection +

    + placeholder

    - - src/mixins/selection.js + + src/mixins/placeholder.js
    @@ -581,7 +591,7 @@

    CSS to style the selection psuedo-element.

    -
    selection(styles: Object, parent: [string])
    +
    placeholder(styles: Object, parent: [string])
    @@ -606,7 +616,7 @@

    parent ([string] - = '') + = '&')
    @@ -627,26 +637,30 @@ 

    // Styles as object usage
 const styles = {
-  ...selection({
-    'background': 'blue'
-  }, 'section')
+  ...placeholder(styles)
 }
 
 // styled-components usage
-const div = styled.div`
-  ${selection({'background': 'blue'}, 'section')}
+const div = styled.input`
+   ${placeholder(css`styles`)}
 `
 
 // CSS as JS Output
 
-'div': {
-  'section::-moz-selection': {
-    'background-color':'blue',
+'input': {
+  '&:-moz-placeholder': {
+    'color': 'blue',
   },
-  'section::selection': {
-    'background-color': 'blue',
-  }
-}
    + '&:-ms-input-placeholder': { + 'color': 'blue', + }, + '&::-moz-placeholder': { + 'color': 'blue', + }, + '&::-webkit-input-placeholder': { + 'color': 'blue', + }, +}, @@ -665,22 +679,24 @@

    -

    - size +

    + retinaImage

    - - src/mixins/size.js + + src/mixins/retinaImage.js
    -

    Mixin to set the height and width properties in a single statement.

    +

    The retina-image mixin is a helper to generate a retina background image and non-retina +background image. The retina background image will output to a HiDPI media query. The mixin uses +a _2x.png filename suffix by default.

    -
    size(height: string, width: [string])
    +
    retinaImage(filename: string, backgroundSize: string, extension: [string], retinaFilename: string, retinaSuffix: [string])
    @@ -696,7 +712,7 @@

    - height (string) + filename (string)
    @@ -704,8 +720,33 @@

    - width ([string] - = height) + backgroundSize (string) + +
    + +
    + +
    +
    + extension ([string] + = 'png') + +
    + +
    + +
    +
    + retinaFilename (string) + +
    + +
    + +
    +
    + retinaSuffix ([string] + = '_2x')
    @@ -725,20 +766,25 @@ 

    // Styles as object usage
-const styles = {
-  ...size('300px', '250px')
+const styles = {
+ ...retinaImage('my-img')
 }
 
 // styled-components usage
-const div = styled.div`
-  ${size('300px', '250px')}
+const div = styled.div`
+  ${retinaImage('my-img')}
 `
 
 // CSS as JS Output
-
-div {
-  'height': '300px',
-  'width': '250px',
+div {
+  backgroundImage: 'url(my-img.png)',
+  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+   only screen and (min--moz-device-pixel-ratio: 1.3),
+   only screen and (-o-min-device-pixel-ratio: 1.3/1),
+   only screen and (min-resolution: 144dpi),
+   only screen and (min-resolution: 1.5dppx)': {
+    backgroundImage: 'url(my-img_2x.png)',
+  }
 }
    @@ -758,22 +804,22 @@

    -

    - timingFunctions +

    + selection

    - - src/mixins/timingFunctions.js + + src/mixins/selection.js
    -

    String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).

    +

    CSS to style the selection psuedo-element.

    -
    timingFunctions(timingFunction: TimingFunctions)
    +
    selection(styles: Object, parent: [string])
    @@ -789,7 +835,16 @@

    - timingFunction (TimingFunctions) + styles (Object) + +
    + +
    + +
    +
    + parent ([string] + = '')
    @@ -808,20 +863,27 @@

    Example
    - 
    // Styles as object usage
-const styles = {
-  'transition-timing-function': timingFunctions('easeInQuad')
+      
    // Styles as object usage
+const styles = {
+  ...selection({
+    'background': 'blue'
+  }, 'section')
 }
 
-// styled-components usage
- const div = styled.div`
-  transition-timing-function: ${timingFunctions('easeInQuad')};
+// styled-components usage
+const div = styled.div`
+  ${selection({'background': 'blue'}, 'section')}
 `
 
-// CSS as JS Output
+// CSS as JS Output
 
 'div': {
-  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
+  'section::-moz-selection': {
+    'background-color':'blue',
+  },
+  'section::selection': {
+    'background-color': 'blue',
+  }
 }
    
     
   
@@ -841,22 +903,22 @@ 
    
   
   
    
     
-    
    
-      wordWrap
+    
    
+      size
     
    
     
     
-      
-      src/mixins/wordWrap.js
+      
+      src/mixins/size.js
       
     
   
    
   
 
-  
    Provides an easy way to change the word-wrap property
    
+  
    Mixin to set the height and width properties in a single statement.
    
 
 
-  
    wordWrap(wrap: [string])
    
+  
    size(height: string, width: [string])
    
   
   
 
@@ -872,8 +934,16 @@ 
    
       
         
    
           
    
-            wrap ([string]
-            = 'break-word')
+            height (string)
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            width ([string]
+            = height)
 	    
           
    
           
@@ -893,21 +963,20 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-  ...wordWrap('break-all')
+const styles = {
+  ...size('300px', '250px')
 }
 
 // styled-components usage
-const div = styled.div`
-  ${wordWrap('break-all')}
-
+const div = styled.div`
+  ${size('300px', '250px')}
+`
 
 // CSS as JS Output
 
-const styles = {
-  overflow-wrap: 'break-all',
-  word-wrap: 'break-all',
-  word-break: 'break-all',
+div {
+  'height': '300px',
+  'width': '250px',
 }
    
     
   
@@ -922,42 +991,27 @@ 
    
         
       
         
-          
    
-
-  
    
-    Helpers
-  
    
-
-  
-    
    Tiny helper functions that make your life easier.
    
-
-  
-
    
-
    
-        
-      
-        
-          
    
+          
    
 
   
   
    
     
-    
    
-      stripUnit
+    
    
+      timingFunctions
     
    
     
     
-      
-      src/helpers/stripUnit.js
+      
+      src/mixins/timingFunctions.js
       
     
   
    
   
 
-  
    Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)
    
+  
    String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).
    
 
 
-  
    stripUnit(value: string): (number | string)
    
+  
    timingFunctions(timingFunction: TimingFunctions)
    
   
   
 
@@ -973,7 +1027,7 @@ 
    
       
         
    
           
    
-            value (string)
+            timingFunction (TimingFunctions)
 	    
           
    
           
@@ -985,11 +1039,6 @@ 
    
   
 
   
-    
-      
    Returns
    
-      (number | string)
-    
-  
 
   
 
@@ -999,18 +1048,18 @@ 
    
       
       
    // Styles as object usage
 const styles = {
-  '--dimension': stripUnit(100px)
+  'transition-timing-function': timingFunctions('easeInQuad')
 }
 
 // styled-components usage
-const div = styled.div`
-  --dimension: ${stripUnit(100px)}
-`
+ const div = styled.div`
+  transition-timing-function: ${timingFunctions('easeInQuad')};
+`
 
-// CSS in JS Output
+// CSS as JS Output
 
-element {
-  '--dimension': 100
+'div': {
+  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
 }
    
     
   
@@ -1030,23 +1079,22 @@ 
    
   
   
    
     
-    
    
-      em
+    
    
+      wordWrap
     
    
     
     
-      
-      src/helpers/em.js
+      
+      src/mixins/wordWrap.js
       
     
   
    
   
 
-  
    Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
-second argument to the function.
    
+  
    Provides an easy way to change the word-wrap property
    
 
 
-  
    em(pxval: (string | number), base: [(string | number)])
    
+  
    wordWrap(wrap: [string])
    
   
   
 
@@ -1062,16 +1110,8 @@ 
    
       
         
    
           
    
-            pxval ((string | number))
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            base ([(string | number)]
-            = '16px')
+            wrap ([string]
+            = 'break-word')
 	    
           
    
           
@@ -1092,18 +1132,20 @@ 
    
       
       
    // Styles as object usage
 const styles = {
-  'height': em('16px')
+  ...wordWrap('break-all')
 }
 
 // styled-components usage
-const div = styled.div`
-  height: ${em('16px')}
-`
+const div = styled.div`
+  ${wordWrap('break-all')}
 
-// CSS in JS Output
 
-element {
-  'height': '1em'
+// CSS as JS Output
+
+const styles = {
+  overflow-wrap: 'break-all',
+  word-wrap: 'break-all',
+  word-break: 'break-all',
 }
    
     
   
@@ -1118,27 +1160,43 @@ 
    
         
       
         
+          
    
+
+  
    
+    Shorthands
+  
    
+
+  
+    
    Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation.
    
+
+  
+
    
+
    
+        
+      
+        
           
    
 
   
   
    
     
-    
    
-      modularScale
+    
    
+      animation
     
    
     
     
-      
-      src/helpers/modularScale.js
+      
+      src/shorthands/animation.js
       
     
   
    
   
 
-  
    Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
    
+  
    Shorthand for easily setting the animation property. Allows either multiple arrays with animations
+or a single animation spread over the arguments.
    
 
 
-  
    modularScale(steps: number, base: [(number | string)], ratio: [Ratio])
    
+  
    animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
    
   
   
 
@@ -1154,25 +1212,7 @@ 
    
       
         
    
           
    
-            steps (number)
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            base ([(number | string)]
-            = '1em')
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            ratio ([Ratio]
-            = 'perfectFourth')
+            args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
 	    
           
    
           
@@ -1192,21 +1232,36 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-   // Increment two steps up the default scale
-  'font-size': modularScale(2)
+const styles = {
+  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
 }
 
 // styled-components usage
-const div = styled.div`
-   // Increment two steps up the default scale
-  font-size: ${modularScale(2)}
+const div = styled.div`
+  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
 `
 
-// CSS in JS Output
+// CSS as JS Output
 
-element {
-  'font-size': '1.77689em'
+div {
+  'animation': 'rotate 1s ease-in-out, colorchange 2s'
+}
    
+    
+      
+      
    // Styles as object usage
+const styles = {
+  ...animation('rotate', '1s', 'ease-in-out')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation('rotate', '1s', 'ease-in-out')}
+`
+
+// CSS as JS Output
+
+div {
+  'animation': 'rotate 1s ease-in-out'
 }
    
     
   
@@ -1221,28 +1276,43 @@ 
    
         
       
         
+          
    
+
+  
    
+    Helpers
+  
    
+
+  
+    
    Tiny helper functions that make your life easier.
    
+
+  
+
    
+
    
+        
+      
+        
           
    
 
   
   
    
     
-    
    
-      rem
+    
    
+      em
     
    
     
     
-      
-      src/helpers/rem.js
+      
+      src/helpers/em.js
       
     
   
    
   
 
-  
    Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
+  
    Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
 second argument to the function.
    
 
 
-  
    rem(pxval: (string | number), base: [(string | number)])
    
+  
    em(pxval: (string | number), base: [(string | number)])
    
   
   
 
@@ -1288,18 +1358,18 @@ 
    
       
       
    // Styles as object usage
 const styles = {
-  'height': rem('16px')
+  'height': em('16px')
 }
 
 // styled-components usage
 const div = styled.div`
-  height: ${rem('16px')}
+  height: ${em('16px')}
 `
 
 // CSS in JS Output
 
 element {
-  'height': '1rem'
+  'height': '1em'
 }
    
     
   
@@ -1319,22 +1389,22 @@ 
    
   
   
    
     
-    
    
-      placeholder
+    
    
+      modularScale
     
    
     
     
-      
-      src/mixins/placeholder.js
+      
+      src/helpers/modularScale.js
       
     
   
    
   
 
-  
    CSS to style the selection psuedo-element.
    
+  
    Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
    
 
 
-  
    placeholder(styles: Object, parent: [string])
    
+  
    modularScale(steps: number, base: [(number | string)], ratio: [Ratio])
    
   
   
 
@@ -1350,7 +1420,7 @@ 
    
       
         
    
           
    
-            styles (Object)
+            steps (number)
 	    
           
    
           
@@ -1358,8 +1428,17 @@ 
    
       
         
    
           
    
-            parent ([string]
-            = '&')
+            base ([(number | string)]
+            = '1em')
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            ratio ([Ratio]
+            = 'perfectFourth')
 	    
           
    
           
@@ -1378,32 +1457,23 @@ 
    
     
    Example
    
     
       
-      
    // Styles as object usage
-const styles = {
-  ...placeholder(styles)
+      
    // Styles as object usage
+const styles = {
+   // Increment two steps up the default scale
+  'font-size': modularScale(2)
 }
 
-// styled-components usage
-const div = styled.input`
-   ${placeholder(css`styles`)}
+// styled-components usage
+const div = styled.div`
+   // Increment two steps up the default scale
+  font-size: ${modularScale(2)}
 `
 
-// CSS as JS Output
+// CSS in JS Output
 
-'input': {
-  '&:-moz-placeholder': {
-    'color': 'blue',
-  },
-  '&:-ms-input-placeholder': {
-    'color': 'blue',
-  },
-  '&::-moz-placeholder': {
-    'color': 'blue',
-  },
-  '&::-webkit-input-placeholder': {
-    'color': 'blue',
-  },
-},
    
+element {
+  'font-size': '1.77689em'
+}
    
     
   
 
@@ -1422,24 +1492,23 @@ 
    
   
   
    
     
-    
    
-      retinaImage
+    
    
+      rem
     
    
     
     
-      
-      src/mixins/retinaImage.js
+      
+      src/helpers/rem.js
       
     
   
    
   
 
-  
    The retina-image mixin is a helper to generate a retina background image and non-retina
-background image. The retina background image will output to a HiDPI media query. The mixin uses
-a _2x.png filename suffix by default.
    
+  
    Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
+second argument to the function.
    
 
 
-  
    retinaImage(filename: string, backgroundSize: string, extension: [string], retinaFilename: string, retinaSuffix: [string])
    
+  
    rem(pxval: (string | number), base: [(string | number)])
    
   
   
 
@@ -1455,32 +1524,7 @@ 
    
       
         
    
           
    
-            filename (string)
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            backgroundSize (string)
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            extension ([string]
-            = 'png')
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            retinaFilename (string)
+            pxval ((string | number))
 	    
           
    
           
@@ -1488,8 +1532,8 @@ 
    
       
         
    
           
    
-            retinaSuffix ([string]
-            = '_2x')
+            base ([(string | number)]
+            = '16px')
 	    
           
    
           
@@ -1510,24 +1554,18 @@ 
    
       
       
    // Styles as object usage
 const styles = {
- ...retinaImage('my-img')
+  'height': rem('16px')
 }
 
 // styled-components usage
-const div = styled.div`
-  ${retinaImage('my-img')}
-`
+const div = styled.div`
+  height: ${rem('16px')}
+`
 
-// CSS as JS Output
-div {
-  backgroundImage: 'url(my-img.png)',
-  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
-   only screen and (min--moz-device-pixel-ratio: 1.3),
-   only screen and (-o-min-device-pixel-ratio: 1.3/1),
-   only screen and (min-resolution: 144dpi),
-   only screen and (min-resolution: 1.5dppx)': {
-    backgroundImage: 'url(my-img_2x.png)',
-  }
+// CSS in JS Output
+
+element {
+  'height': '1rem'
 }
    
     
   
@@ -1547,23 +1585,22 @@ 
    
   
   
    
     
-    
    
-      animation
+    
    
+      stripUnit
     
    
     
     
-      
-      src/shorthands/animation.js
+      
+      src/helpers/stripUnit.js
       
     
   
    
   
 
-  
    Shorthand for easily setting the animation property. Allows either multiple arrays with animations
-or a single animation spread over the arguments.
    
+  
    Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)
    
 
 
-  
    animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
    
+  
    stripUnit(value: string): (number | string)
    
   
   
 
@@ -1579,7 +1616,7 @@ 
    
       
         
    
           
    
-            args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
+            value (string)
 	    
           
    
           
@@ -1591,6 +1628,11 @@ 
    
   
 
   
+    
+      
    Returns
    
+      (number | string)
+    
+  
 
   
 
@@ -1599,36 +1641,19 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
-}
-
-// styled-components usage
-const div = styled.div`
-  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
-`
-
-// CSS as JS Output
-
-div {
-  'animation': 'rotate 1s ease-in-out, colorchange 2s'
-}
    
-    
-      
-      
    // Styles as object usage
-const styles = {
-  ...animation('rotate', '1s', 'ease-in-out')
+const styles = {
+  '--dimension': stripUnit(100px)
 }
 
 // styled-components usage
-const div = styled.div`
-  ${animation('rotate', '1s', 'ease-in-out')}
-`
+const div = styled.div`
+  --dimension: ${stripUnit(100px)}
+`
 
-// CSS as JS Output
+// CSS in JS Output
 
-div {
-  'animation': 'rotate 1s ease-in-out'
+element {
+  '--dimension': 100
 }
    
     
   

From 4e97f01f797ce3b046991fdbc574d66fc7846629 Mon Sep 17 00:00:00 2001
From: Max 
Date: Fri, 16 Dec 2016 15:51:29 +0100
Subject: [PATCH 3/4] chore(deps): add missing deps

---
 package.json |  8 +++++++-
 yarn.lock    | 54 +++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index f7a66319..ae5bd025 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.16.0",
     "babel-polyfill": "^6.16.0",
     "babel-preset-latest": "^6.16.0",
+    "concat-stream": "^1.5.2",
     "cz-conventional-changelog": "^1.2.0",
     "documentation": "^4.0.0-beta16",
     "eslint": "^3.9.1",
@@ -62,7 +63,10 @@
     "flow-bin": "^0.36.0",
     "flow-copy-source": "^1.1.0",
     "ghooks": "^1.3.2",
+    "github-slugger": "^1.1.1",
+    "highlight.js": "^9.9.0",
     "jest": "^16.0.2",
+    "lodash": "^4.17.2",
     "npm-watch": "^0.1.6",
     "rollup": "^0.36.3",
     "rollup-plugin-babel": "^2.6.1",
@@ -74,7 +78,9 @@
     "rollup-plugin-replace": "^1.1.1",
     "rollup-plugin-uglify": "^1.0.1",
     "semantic-release": "^4.3.5",
-    "validate-commit-msg": "^2.8.2"
+    "validate-commit-msg": "^2.8.2",
+    "vinyl": "^2.0.1",
+    "vinyl-fs": "^2.4.4"
   },
   "config": {
     "ghooks": {
diff --git a/yarn.lock b/yarn.lock
index af2f6bcd..1c485d86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1265,14 +1265,30 @@ cliui@^3.0.3, cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+
 clone-stats@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
 
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+
 clone@^1.0.0, clone@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
+cloneable-readable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.0.0.tgz#a6290d413f217a61232f95e458ff38418cfb0117"
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^1.0.6"
+    through2 "^2.0.1"
+
 co@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/co/-/co-3.1.0.tgz#4ea54ea5a08938153185e15210c68d9092bc1b78"
@@ -2413,7 +2429,7 @@ hawk@~3.1.3:
     hoek "2.x.x"
     sntp "1.x.x"
 
-highlight.js@^9.1.0:
+highlight.js@^9.1.0, highlight.js@^9.9.0:
   version "9.9.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.9.0.tgz#b9995dcfdc2773e307a34f0460d92b9a474782c0"
 
@@ -3330,7 +3346,7 @@ lodash@^3.6.0, lodash@^3.9.3:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.11.1, lodash@^4.2.0, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.11.1, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.2"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
 
@@ -3657,7 +3673,7 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
-normalize-package-data@^1.0.3:
+normalize-package-data@^1.0.3, "normalize-package-data@~1.0.1 || ^2.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-1.0.3.tgz#8be955b8907af975f1a4584ea8bb9b41492312f5"
   dependencies:
@@ -3665,7 +3681,7 @@ normalize-package-data@^1.0.3:
     github-url-from-username-repo "^1.0.0"
     semver "2 || 3 || 4"
 
-normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, "normalize-package-data@~1.0.1 || ^2.0.0":
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.5.tgz#8d924f142960e1777e7ffe170543631cc7cb02df"
   dependencies:
@@ -4054,7 +4070,7 @@ private@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
 
-process-nextick-args@~1.0.6:
+process-nextick-args@^1.0.6, process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
 
@@ -4155,7 +4171,7 @@ read-pkg@^1.0.0:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.1.5, readable-stream@~2.1.0, readable-stream@~2.1.4:
+readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.5, readable-stream@^2.1.5, readable-stream@~2.1.0, readable-stream@~2.1.4:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
   dependencies:
@@ -4167,7 +4183,7 @@ readable-stream@^2.0.0, "readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readable-stream@^2.0.2, readable-stream@~2.0.0:
+readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@~2.0.0:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
   dependencies:
@@ -4331,6 +4347,10 @@ remote-origin-url@0.4.0:
   dependencies:
     parse-git-config "^0.2.0"
 
+remove-trailing-separator@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.1.tgz#615ebb96af559552d4bf4057c8436d486ab63cc4"
+
 repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
@@ -4355,6 +4375,10 @@ replace-ext@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
 
+replace-ext@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+
 request@^2.55.0, request@^2.74.0, request@^2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
@@ -4911,7 +4935,7 @@ through2@^0.6.0:
     readable-stream ">=1.0.33-1 <1.1.0-0"
     xtend ">=4.0.0 <4.1.0-0"
 
-through2@^2.0.0, through2@~2.0.0:
+through2@^2.0.0, through2@^2.0.1, through2@~2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
   dependencies:
@@ -5212,7 +5236,7 @@ vfile@^1.0.0, vfile@^1.1.0, vfile@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-1.4.0.tgz#c0fd6fa484f8debdb771f68c31ed75d88da97fe7"
 
-vinyl-fs@^2.3.1:
+vinyl-fs@^2.3.1, vinyl-fs@^2.4.4:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-2.4.4.tgz#be6ff3270cb55dfd7d3063640de81f25d7532239"
   dependencies:
@@ -5242,6 +5266,18 @@ vinyl@^1.0.0, vinyl@^1.1.0:
     clone-stats "^0.0.1"
     replace-ext "0.0.1"
 
+vinyl@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.0.1.tgz#1c3b4931e7ac4c1efee743f3b91a74c094407bb6"
+  dependencies:
+    clone "^1.0.0"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    is-stream "^1.1.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
 vlq@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.1.tgz#14439d711891e682535467f8587c5630e4222a6c"

From 6dafce31d7a8349887915bab07caaf8d2d3da47d Mon Sep 17 00:00:00 2001
From: Max 
Date: Fri, 16 Dec 2016 16:15:16 +0100
Subject: [PATCH 4/4] chore(travis): disable node v4

---
 .travis.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 5eca915c..f072803f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,7 +7,6 @@ notifications:
   email: false
 node_js:
   - '6'
-  - '4'
 before_install:
   - npm i -g npm@^2.0.0
 install: