chore(normalize): Normalize mixin

Normalize mixin that can optionally exclude opionionated rules.
styled-components · Jan 6, 2017 · 4406e89 · 4406e89
1 parent d975ee1
commit 4406e89
Show file tree

Hide file tree

Showing 6 changed files with 815 additions and 28 deletions.
diff --git a/.documentation.json b/.documentation.json
@@ -13,6 +13,7 @@
     "fontFace",
     "hiDPI",
     "hideText",
+    "normalize",
     "placeholder",
     "retinaImage",
     "selection",

diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -85,6 +85,16 @@ <h3 class='mb0 no-anchor'>polished</h3>
               </li>
 
 
+              <li><a
+                href='#normalize'
+                class="">
+                normalize
+
+              </a>
+
+              </li>
+
+
               <li><a
                 href='#placeholder'
                 class="">
@@ -379,7 +389,7 @@ <h3 class='fl m0' id='clearfix'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/clearFix.js#L26-L35'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/clearFix.js#L26-L35'>
       <span>src/mixins/clearFix.js</span>
       </a>
 
@@ -465,7 +475,7 @@ <h3 class='fl m0' id='ellipsis'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/ellipsis.js#L29-L38'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/ellipsis.js#L29-L38'>
       <span>src/mixins/ellipsis.js</span>
       </a>
 
@@ -554,7 +564,7 @@ <h3 class='fl m0' id='fontface'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/fontFace.js#L60-L91'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/fontFace.js#L60-L91'>
       <span>src/mixins/fontFace.js</span>
       </a>
 
@@ -716,7 +726,7 @@ <h3 class='fl m0' id='hidpi'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/hiDPI.js#L32-L40'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/hiDPI.js#L32-L40'>
       <span>src/mixins/hiDPI.js</span>
       </a>
 
@@ -808,7 +818,7 @@ <h3 class='fl m0' id='hidetext'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/hideText.js#L29-L35'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/hideText.js#L29-L35'>
       <span>src/mixins/hideText.js</span>
       </a>
 
@@ -868,6 +878,90 @@ <h3 class='fl m0' id='hidetext'>
 
 
 
+</section>
+
+
+
+
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+
+    <h3 class='fl m0' id='normalize'>
+      normalize
+    </h3>
+
+
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/normalize.js#L293-L296'>
+      <span>src/mixins/normalize.js</span>
+      </a>
+
+  </div>
+
+
+  <p>CSS to normalize abnormalities across browsers (normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css)</p>
+
+
+  <div class='pre p1 fill-light mt0'>normalize(excludeOpinionated: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</div>
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>excludeOpinionated</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
+
+          </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Example</div>
+
+
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
+const styles = {
+   ...<span class="hljs-keyword">normalize</span>(),
+}
+
+<span class="hljs-comment">// styled-components usage</span>
+injectGlobals<span class="hljs-string">`${normalize()}`</span>
+
+<span class="hljs-comment">// CSS as JS Output</span>
+
+html {
+  font-family: sans-serif,
+  line-height: <span class="hljs-number">1.15</span>,
+  -ms-<span class="hljs-keyword">text</span>-<span class="hljs-keyword">size</span>-adjust: <span class="hljs-number">100</span>%,
+  -webkit-<span class="hljs-keyword">text</span>-<span class="hljs-keyword">size</span>-adjust: <span class="hljs-number">100</span>%,
+} ...</pre>
+
+
+
+
+
+
+
+
 </section>
 
 
@@ -883,7 +977,7 @@ <h3 class='fl m0' id='placeholder'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/placeholder.js#L35-L50'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/placeholder.js#L35-L50'>
       <span>src/mixins/placeholder.js</span>
       </a>
 
@@ -986,7 +1080,7 @@ <h3 class='fl m0' id='retinaimage'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/retinaImage.js#L33-L48'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/retinaImage.js#L33-L48'>
       <span>src/mixins/retinaImage.js</span>
       </a>
 
@@ -1111,7 +1205,7 @@ <h3 class='fl m0' id='selection'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/selection.js#L31-L40'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/selection.js#L31-L40'>
       <span>src/mixins/selection.js</span>
       </a>
 
@@ -1210,7 +1304,7 @@ <h3 class='fl m0' id='timingfunctions'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/timingFunctions.js#L81-L83'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/timingFunctions.js#L81-L83'>
       <span>src/mixins/timingFunctions.js</span>
       </a>
 
@@ -1293,7 +1387,7 @@ <h3 class='fl m0' id='wordwrap'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/mixins/wordWrap.js#L26-L33'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/mixins/wordWrap.js#L26-L33'>
       <span>src/mixins/wordWrap.js</span>
       </a>
 
@@ -1394,7 +1488,7 @@ <h3 class='fl m0' id='rgb'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/helpers/rgb.js#L35-L43'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/helpers/rgb.js#L35-L43'>
       <span>src/helpers/rgb.js</span>
       </a>
 
@@ -1516,7 +1610,7 @@ <h3 class='fl m0' id='animation'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/animation.js#L41-L61'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/animation.js#L41-L61'>
       <span>src/shorthands/animation.js</span>
       </a>
 
@@ -1617,7 +1711,7 @@ <h3 class='fl m0' id='backgroundimages'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/backgroundImages.js#L23-L27'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/backgroundImages.js#L23-L27'>
       <span>src/shorthands/backgroundImages.js</span>
       </a>
 
@@ -1700,7 +1794,7 @@ <h3 class='fl m0' id='backgrounds'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/backgrounds.js#L22-L26'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/backgrounds.js#L22-L26'>
       <span>src/shorthands/backgrounds.js</span>
       </a>
 
@@ -1783,7 +1877,7 @@ <h3 class='fl m0' id='bordercolor'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/borderColor.js#L27-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/borderColor.js#L27-L29'>
       <span>src/shorthands/borderColor.js</span>
       </a>
 
@@ -1869,7 +1963,7 @@ <h3 class='fl m0' id='borderstyle'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/borderStyle.js#L27-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/borderStyle.js#L27-L29'>
       <span>src/shorthands/borderStyle.js</span>
       </a>
 
@@ -1955,7 +2049,7 @@ <h3 class='fl m0' id='borderwidth'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/borderWidth.js#L27-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/borderWidth.js#L27-L29'>
       <span>src/shorthands/borderWidth.js</span>
       </a>
 
@@ -2041,7 +2135,7 @@ <h3 class='fl m0' id='buttons'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/buttons.js#L47-L49'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/buttons.js#L47-L49'>
       <span>src/shorthands/buttons.js</span>
       </a>
 
@@ -2131,7 +2225,7 @@ <h3 class='fl m0' id='margin'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/margin.js#L27-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/margin.js#L27-L29'>
       <span>src/shorthands/margin.js</span>
       </a>
 
@@ -2217,7 +2311,7 @@ <h3 class='fl m0' id='padding'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/padding.js#L27-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/padding.js#L27-L29'>
       <span>src/shorthands/padding.js</span>
       </a>
 
@@ -2303,7 +2397,7 @@ <h3 class='fl m0' id='position'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/position.js#L49-L59'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/position.js#L49-L59'>
       <span>src/shorthands/position.js</span>
       </a>
 
@@ -2417,7 +2511,7 @@ <h3 class='fl m0' id='size'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/size.js#L24-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/size.js#L24-L29'>
       <span>src/shorthands/size.js</span>
       </a>
 
@@ -2510,7 +2604,7 @@ <h3 class='fl m0' id='textinputs'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/shorthands/textInputs.js#L71-L73'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/shorthands/textInputs.js#L71-L73'>
       <span>src/shorthands/textInputs.js</span>
       </a>
 
@@ -2627,7 +2721,7 @@ <h3 class='fl m0' id='directionalproperty'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/helpers/directionalProperty.js#L44-L49'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/helpers/directionalProperty.js#L44-L49'>
       <span>src/helpers/directionalProperty.js</span>
       </a>
 
@@ -2721,7 +2815,7 @@ <h3 class='fl m0' id='em'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/helpers/em.js#L29-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/helpers/em.js#L29-L29'>
       <span>src/helpers/em.js</span>
       </a>
 
@@ -2814,7 +2908,7 @@ <h3 class='fl m0' id='modularscale'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/helpers/modularScale.js#L66-L82'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/helpers/modularScale.js#L66-L82'>
       <span>src/helpers/modularScale.js</span>
       </a>
 
@@ -2917,7 +3011,7 @@ <h3 class='fl m0' id='rem'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/helpers/rem.js#L28-L28'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/helpers/rem.js#L28-L28'>
       <span>src/helpers/rem.js</span>
       </a>
 
@@ -3010,7 +3104,7 @@ <h3 class='fl m0' id='stripunit'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/61460681ecd3c10afc5bd27a979e07285900d157/src/helpers/stripUnit.js#L24-L28'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d975ee1a42b86c1dc54d13463d66974564310235/src/helpers/stripUnit.js#L24-L28'>
       <span>src/helpers/stripUnit.js</span>
       </a>
 

diff --git a/src/index.js b/src/index.js
@@ -12,6 +12,7 @@ import ellipsis from './mixins/ellipsis'
 import fontFace from './mixins/fontFace'
 import hideText from './mixins/hideText'
 import hiDPI from './mixins/hiDPI'
+import normalize from './mixins/normalize'
 import placeholder from './mixins/placeholder'
 import retinaImage from './mixins/retinaImage'
 import selection from './mixins/selection'
@@ -52,6 +53,7 @@ export {
   hiDPI,
   margin,
   modularScale,
+  normalize,
   padding,
   placeholder,
   position,