feat(modules): All properties produced by polished are now camel-cased (

#210)

* feat(modules): All properties produced by polished are now camel-cased

* docs(modules): Removed incorrect spread usage in several module docs

src/helpers/directionalProperty.js

@@ -1,11 +1,17 @@
 // @flow
-const positionMap = ['top', 'right', 'bottom', 'left']
+import capitalizeString from '../internalHelpers/_capitalizeString'
+
+const positionMap = ['Top', 'Right', 'Bottom', 'Left']
 
 function generateProperty(property: string, position: string) {
-  if (!property) return position
-  const splitPropertyName = property.split('-')
-  splitPropertyName.splice(1, 0, position)
-  return splitPropertyName.join('-')
+  if (!property) return position.toLowerCase()
+  const splitProperty = property.split('-')
+  if (splitProperty.length > 1) {
+    splitProperty.splice(1, 0, position)
+    return splitProperty.reduce((acc, val) => `${acc}${capitalizeString(val)}`)
+  }
+  const joinedProperty = property.replace(/([a-z])([A-Z])/g, `$1${position}$2`)
+  return property === joinedProperty ? `${property}${position}` : joinedProperty
 }
 
 function generateStyles(property: string, valuesWithDefaults: Array<?string>) {
@@ -19,7 +25,7 @@ function generateStyles(property: string, valuesWithDefaults: Array<?string>) {
 }
 
 /**
- * The directional property helper enables shorthand for direction based properties. It accepts a property and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can optionally pass a null argument for a directional value to ignore it.
+ * A helper that enables shorthand for direction based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.
  * @example
  * // Styles as object usage
  * const styles = {
@@ -34,10 +40,10 @@ function generateStyles(property: string, valuesWithDefaults: Array<?string>) {
  * // CSS as JS Output
  *
  * div {
- *   'padding-top': '12px',
- *   'padding-right': '24px',
- *   'padding-bottom': '36px',
- *   'padding-left': '48px'
+ *   'paddingTop': '12px',
+ *   'paddingRight': '24px',
+ *   'paddingBottom': '36px',
+ *   'paddingLeft': '48px'
  * }
  */
 

src/helpers/modularScale.js

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

src/helpers/test/__snapshots__/directionalProperty.test.js.snap

@@ -1,45 +1,54 @@
 exports[`directionalProperty properly applies a value when passed only one 1`] = `
 Object {
-  "border-bottom": "12px",
-  "border-left": "12px",
-  "border-right": "12px",
-  "border-top": "12px",
+  "borderBottom": "12px",
+  "borderLeft": "12px",
+  "borderRight": "12px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly applies values when passed four 1`] = `
 Object {
-  "border-bottom": "36px",
-  "border-left": "48px",
-  "border-right": "24px",
-  "border-top": "12px",
+  "borderBottom": "36px",
+  "borderLeft": "48px",
+  "borderRight": "24px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly applies values when passed three 1`] = `
 Object {
-  "border-bottom": "36px",
-  "border-left": "24px",
-  "border-right": "24px",
-  "border-top": "12px",
+  "borderBottom": "36px",
+  "borderLeft": "24px",
+  "borderRight": "24px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly applies values when passed two 1`] = `
 Object {
-  "border-bottom": "12px",
-  "border-left": "24px",
-  "border-right": "24px",
-  "border-top": "12px",
+  "borderBottom": "12px",
+  "borderLeft": "24px",
+  "borderRight": "24px",
+  "borderTop": "12px",
+}
+`;
+
+exports[`directionalProperty properly generates properties when passed a camelCased property 1`] = `
+Object {
+  "borderBottomWidth": "12px",
+  "borderLeftWidth": "12px",
+  "borderRightWidth": "12px",
+  "borderTopWidth": "12px",
 }
 `;
 
 exports[`directionalProperty properly generates properties when passed a hyphenated property 1`] = `
 Object {
-  "border-bottom-width": "12px",
-  "border-left-width": "12px",
-  "border-right-width": "12px",
-  "border-top-width": "12px",
+  "borderBottomWidth": "12px",
+  "borderLeftWidth": "12px",
+  "borderRightWidth": "12px",
+  "borderTopWidth": "12px",
 }
 `;
 
@@ -54,69 +63,69 @@ Object {
 
 exports[`directionalProperty properly skips bottom property when last value is null 1`] = `
 Object {
-  "border-left": "24px",
-  "border-right": "24px",
-  "border-top": "12px",
+  "borderLeft": "24px",
+  "borderRight": "24px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips bottom property when third value is null 1`] = `
 Object {
-  "border-left": "48px",
-  "border-right": "24px",
-  "border-top": "12px",
+  "borderLeft": "48px",
+  "borderRight": "24px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips left and right properties when second value is null 1`] = `
 Object {
-  "border-bottom": "12px",
-  "border-top": "12px",
+  "borderBottom": "12px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips left property when fourth value is null 1`] = `
 Object {
-  "border-bottom": "36px",
-  "border-right": "24px",
-  "border-top": "12px",
+  "borderBottom": "36px",
+  "borderRight": "24px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips right and left properties when second value is null 1`] = `
 Object {
-  "border-bottom": "36px",
-  "border-top": "12px",
+  "borderBottom": "36px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips right property when second value is null 1`] = `
 Object {
-  "border-bottom": "36px",
-  "border-left": "48px",
-  "border-top": "12px",
+  "borderBottom": "36px",
+  "borderLeft": "48px",
+  "borderTop": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips top and bottom properties when first value is null 1`] = `
 Object {
-  "border-left": "12px",
-  "border-right": "12px",
+  "borderLeft": "12px",
+  "borderRight": "12px",
 }
 `;
 
 exports[`directionalProperty properly skips top property when first value is null 1`] = `
 Object {
-  "border-bottom": "36px",
-  "border-left": "24px",
-  "border-right": "24px",
+  "borderBottom": "36px",
+  "borderLeft": "24px",
+  "borderRight": "24px",
 }
 `;
 
 exports[`directionalProperty properly skips top property when first value is null 2`] = `
 Object {
-  "border-bottom": "36px",
-  "border-left": "48px",
-  "border-right": "24px",
+  "borderBottom": "36px",
+  "borderLeft": "48px",
+  "borderRight": "24px",
 }
 `;

src/helpers/test/directionalProperty.test.js

@@ -5,6 +5,11 @@ describe('directionalProperty', () => {
   it('properly generates properties when passed a hyphenated property', () => {
     expect(directionalProperty('border-width', '12px')).toMatchSnapshot()
   })
+
+  it('properly generates properties when passed a camelCased property', () => {
+    expect(directionalProperty('borderWidth', '12px')).toMatchSnapshot()
+  })
+
   it('properly passes just the position when not given a property', () => {
     expect(directionalProperty('', '12px')).toMatchSnapshot()
   })

src/internalHelpers/_capitalizeString.js

@@ -0,0 +1,8 @@
+// @flow
+
+// @private
+function capitalizeString(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export default capitalizeString

src/internalHelpers/test/_capitalizeString.test.js

@@ -0,0 +1,11 @@
+// @flow
+import capitalizeString from '../_capitalizeString'
+
+describe('capitalizeString', () => {
+  it('capitalizes a string', () => {
+    expect(capitalizeString('polished')).toEqual('Polished')
+  })
+  it('returns a capitalized string untouched', () => {
+    expect(capitalizeString('Polished')).toEqual('Polished')
+  })
+})

src/mixins/ellipsis.js

@@ -18,22 +18,22 @@
  *
  * div: {
  *   'display': 'inline-block',
- *   'max-width': '250px',
+ *   'maxWidth': '250px',
  *   'overflow': 'hidden',
- *   'text-overflow': 'ellipsis',
- *   'white-space': 'nowrap',
- *   'word-wrap': 'normal'
+ *   'textOverflow': 'ellipsis',
+ *   'whiteSpace': 'nowrap',
+ *   'wordWrap': 'normal'
  * }
  */
 
 function ellipsis(width: string = '100%') {
   return {
     'display': 'inline-block',
-    'max-width': width,
+    'maxWidth': width,
     'overflow': 'hidden',
-    'text-overflow': 'ellipsis',
-    'white-space': 'nowrap',
-    'word-wrap': 'normal',
+    'textOverflow': 'ellipsis',
+    'whiteSpace': 'nowrap',
+    'wordWrap': 'normal',
   }
 }
 

src/mixins/fontFace.js

@@ -53,7 +53,7 @@ function generateSources(fontFilePath?: string, localFonts?: Array<string>, file
  * // CSS as JS Output
  *
  * '@font-face': {
- *   'font-family': 'Sans-Pro',
+ *   'fontFamily': 'Sans-Pro',
  *   'src': 'url("path/to/file.eot"), url("path/to/file.woff2"), url("path/to/file.woff"), url("path/to/file.ttf"), url("path/to/file.svg")',
  * }
  */
@@ -77,13 +77,13 @@ function fontFace({
 
   const fontFaceDeclaration = {
     '@font-face': {
-      'font-family': fontFamily,
-      'src': generateSources(fontFilePath, localFonts, fileFormats),
-      'unicode-range': unicodeRange,
-      'font-stretch': fontStretch,
-      'font-style': fontStyle,
-      'font-variant': fontVariant,
-      'font-weight': fontWeight,
+      fontFamily,
+      src: generateSources(fontFilePath, localFonts, fileFormats),
+      unicodeRange,
+      fontStretch,
+      fontStyle,
+      fontVariant,
+      fontWeight,
     },
   }
 

src/mixins/hideText.js

@@ -6,31 +6,31 @@
  * @example
  * // Styles as object usage
  * const styles = {
- *   'background-image': 'url(logo.png)',
+ *   'backgroundImage': 'url(logo.png)',
  *   ...hideText(),
  * }
  *
  * // styled-components usage
  * const div = styled.div`
- *   background-image: url(logo.png);
+ *   backgroundImage: url(logo.png);
  *   ${hideText()};
  * `
  *
  * // CSS as JS Output
  *
  * 'div': {
- *   'background-image': 'url(logo.png)',
- *   'text-indent': '101%',
+ *   'backgroundImage': 'url(logo.png)',
+ *   'textIndent': '101%',
  *   'overflow': 'hidden',
- *   'white-space': 'nowrap',
+ *   'whiteSpace': 'nowrap',
  * }
  */
 
 function hideText() {
   return {
-    'text-indent': '101%',
-    'overflow': 'hidden',
-    'white-space': 'nowrap',
+    textIndent: '101%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
   }
 }