Add placeholder mixin

docs/index.html

@@ -143,6 +143,16 @@ <h3 class='mb0 no-anchor'>polished</h3>
 
                 </li>
 
+
+                <li><a
+                  href='#placeholder'
+                  class="">
+                  placeholder
+
+                </a>
+
+                </li>
+
             </ul>
           </div>
           <div class='mt1 h6 quiet'>
@@ -178,7 +188,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/clearFix.js#L26-L35'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/clearFix.js#L26-L35'>
       <span>src/mixins/clearFix.js</span>
       </a>
 
@@ -264,7 +274,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/ellipsis.js#L29-L38'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/ellipsis.js#L29-L38'>
       <span>src/mixins/ellipsis.js</span>
       </a>
 
@@ -353,7 +363,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/hiDPI.js#L32-L40'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/hiDPI.js#L32-L40'>
       <span>src/mixins/hiDPI.js</span>
       </a>
 
@@ -445,7 +455,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/hideText.js#L29-L35'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/hideText.js#L29-L35'>
       <span>src/mixins/hideText.js</span>
       </a>
 
@@ -520,7 +530,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/selection.js#L31-L40'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/selection.js#L31-L40'>
       <span>src/mixins/selection.js</span>
       </a>
 
@@ -619,7 +629,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/size.js#L24-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/size.js#L24-L29'>
       <span>src/mixins/size.js</span>
       </a>
 
@@ -712,7 +722,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/timingFunctions.js#L81-L83'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/timingFunctions.js#L81-L83'>
       <span>src/mixins/timingFunctions.js</span>
       </a>
 
@@ -795,7 +805,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/mixins/wordWrap.js#L26-L33'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/wordWrap.js#L26-L33'>
       <span>src/mixins/wordWrap.js</span>
       </a>
 
@@ -896,7 +906,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/helpers/stripUnit.js#L24-L28'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/helpers/stripUnit.js#L24-L28'>
       <span>src/helpers/stripUnit.js</span>
       </a>
 
@@ -984,7 +994,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/f1ec85fd2c98ec6b4bf592a0f3964d2a4f4487ad/src/helpers/em.js#L32-L58'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/helpers/em.js#L32-L58'>
       <span>src/helpers/em.js</span>
       </a>
 
@@ -1072,6 +1082,109 @@ <h3 class='fl m0' id='em'>
 
 
 
+</section>
+
+
+
+
+            <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+
+    <h3 class='fl m0' id='placeholder'>
+      placeholder
+    </h3>
+
+
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/cf8f3f9538e4a7a55be221ede2f5caee64d97f59/src/mixins/placeholder.js#L35-L50'>
+      <span>src/mixins/placeholder.js</span>
+      </a>
+
+  </div>
+
+
+  <p>CSS to style the selection psuedo-element.</p>
+
+
+  <div class='pre p1 fill-light mt0'>placeholder(styles: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, parent: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</div>
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>styles</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
+
+          </div>
+
+        </div>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>parent</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?
+            = <code>&#39;&amp;&#39;</code>)</code>
+
+          </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Example</div>
+
+
+      <pre class='p1 overflow-auto round fill-light'>// Styles <span class="hljs-keyword">as</span> object usage
+const styles = {
+  ...placeholder(styles)
+}
+
+// styled-components usage
+const div = styled.input`
+   ${placeholder(css`styles`)}
+`
+
+// CSS <span class="hljs-keyword">as</span> JS Output
+
+<span class="hljs-string">'input'</span>: {
+  <span class="hljs-string">'&amp;:-moz-placeholder'</span>: {
+    <span class="hljs-string">'color'</span>: <span class="hljs-string">'blue'</span>,
+  },
+  <span class="hljs-string">'&amp;:-ms-input-placeholder'</span>: {
+    <span class="hljs-string">'color'</span>: <span class="hljs-string">'blue'</span>,
+  },
+  <span class="hljs-string">'&amp;::-moz-placeholder'</span>: {
+    <span class="hljs-string">'color'</span>: <span class="hljs-string">'blue'</span>,
+  },
+  <span class="hljs-string">'&amp;::-webkit-input-placeholder'</span>: {
+    <span class="hljs-string">'color'</span>: <span class="hljs-string">'blue'</span>,
+  },
+},</pre>
+
+
+
+
+
+
+
+
 </section>
 
 

src/index.js

@@ -8,6 +8,7 @@ import clearFix from './mixins/clearFix'
 import ellipsis from './mixins/ellipsis'
 import hideText from './mixins/hideText'
 import hiDPI from './mixins/hiDPI'
+import placeholder from './mixins/placeholder'
 import selection from './mixins/selection'
 import size from './mixins/size'
 import timingFunctions from './mixins/timingFunctions'
@@ -19,6 +20,7 @@ const polished = {
   em,
   hideText,
   hiDPI,
+  placeholder,
   selection,
   size,
   stripUnit,
@@ -34,6 +36,7 @@ export {
   em,
   hideText,
   hiDPI,
+  placeholder,
   selection,
   size,
   stripUnit,

src/mixins/placeholder.js

@@ -0,0 +1,52 @@
+// @flow
+
+/**
+ * CSS to style the selection psuedo-element.
+ *
+ * @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',
+ *   },
+ * },
+ */
+
+function placeholder(styles: Object, parent: string = '&') {
+  return {
+    [`${parent}::-webkit-input-placeholder`]: {
+      ...styles,
+    },
+    [`${parent}:-moz-placeholder`]: {
+      ...styles,
+    },
+    [`${parent}::-moz-placeholder`]: {
+      ...styles,
+    },
+    [`${parent}:-ms-input-placeholder`]: {
+      ...styles,
+    },
+  }
+}
+
+export default placeholder

src/mixins/test/__snapshots__/placeholder.test.js.snap

@@ -0,0 +1,53 @@
+exports[`placeholder should properly add rules when block has existing rules 1`] = `
+Object {
+  "background": "white",
+  "input:-moz-placeholder": Object {
+    "color": "blue",
+  },
+  "input:-ms-input-placeholder": Object {
+    "color": "blue",
+  },
+  "input::-moz-placeholder": Object {
+    "color": "blue",
+  },
+  "input::-webkit-input-placeholder": Object {
+    "color": "blue",
+  },
+}
+`;
+
+exports[`placeholder should properly default to & when not passed a parent 1`] = `
+Object {
+  "input": Object {
+    "&:-moz-placeholder": Object {
+      "color": "blue",
+    },
+    "&:-ms-input-placeholder": Object {
+      "color": "blue",
+    },
+    "&::-moz-placeholder": Object {
+      "color": "blue",
+    },
+    "&::-webkit-input-placeholder": Object {
+      "color": "blue",
+    },
+  },
+}
+`;
+
+exports[`placeholder should properly pass styles object and parent 1`] = `
+Object {
+  "input:-moz-placeholder": Object {
+    "color": "blue",
+  },
+  "input:-ms-input-placeholder": Object {
+    "color": "blue",
+  },
+  "input::-moz-placeholder": Object {
+    "color": "blue",
+  },
+  "input::-webkit-input-placeholder": Object {
+    "color": "blue",
+  },
+}
+`;

src/mixins/test/placeholder.test.js

@@ -0,0 +1,31 @@
+// @flow
+import placeholder from '../placeholder'
+
+describe('placeholder', function() {
+
+  const styles = {
+    'color': 'blue',
+  }
+
+  it('should properly pass styles object and parent', function() {
+    expect({
+      ...placeholder(styles,'input')
+    }).toMatchSnapshot()
+  })
+
+  it('should properly add rules when block has existing rules', function() {
+    expect({
+      'background': 'white',
+      ...placeholder(styles,'input')
+    }).toMatchSnapshot()
+  })
+
+  it('should properly default to & when not passed a parent', function() {
+    expect({
+      input: {
+        ...placeholder(styles)
+      }
+    }).toMatchSnapshot()
+  })
+
+})