✨ Support theme.fontSize in fontSize style

exah · Mar 10, 2019 · 01fb62d · 01fb62d
1 parent 6ccde8a
commit 01fb62d
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 9 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -1111,12 +1111,31 @@ const Text = styled.p`
 import { fontSize } from 'pss'
 ```
 
-| prop       | css         | type               | value | true | false |
-| :--------- | :---------- | :----------------- | :---- | :--- | :---- |
-| `fontSize` | `font-size` | `String`, `Number` | ✓     | —    | —     |
+| prop       | css         | type               | theme      | value | true | false |
+| :--------- | :---------- | :----------------- | :--------- | :---- | :--- | :---- |
+| `fontSize` | `font-size` | `String`, `Number` | `fontSize` | ✓     | —    | —     |
 
 Related: [text][17], [ellipsis][210], [rule][173], [boolValue][176].
 
+```js
+const theme = {
+  default: {
+    fontSize: 'root'
+  },
+  media: {
+    sm: '(max-width: 600px)'
+  },
+  fontSize: {
+    root: 16,
+    heading: 22,
+    caption: {
+      all: 12,
+      sm: 14
+    }
+  }
+}
+```
+
 #### Parameters
 
 -   `props` **[Object][206]** 
@@ -1132,7 +1151,9 @@ const Text = styled.p`
 ```
 
 ```js
-<Text fontSize='1rem' /> // font-size: 1rem
+<Text fontSize='1rem' /> // → font-size: 1rem
+<Text fontSize='root' /> // → theme.fontSize.root // → font-size: 1rem
+<Text fontSize='heading' /> // → theme.fontSize.heading // → font-size: 1.5rem
 ```
 
 ### fontWeight

diff --git a/src/styles/__tests__/font-size.js b/src/styles/__tests__/font-size.js
@@ -0,0 +1,55 @@
+import { fontSize } from '../..'
+import { toStyles } from '../../../test-helpers'
+
+const theme = {
+  default: {
+    fontSize: 'root'
+  },
+  media: {
+    M: '(max-width: 600px)'
+  },
+  fontSize: {
+    root: 16,
+    heading: 22,
+    caption: {
+      all: 12,
+      M: 14
+    }
+  }
+}
+
+test('defaults', () => {
+  const result = toStyles(fontSize({
+    theme,
+    fontSize: true
+  }))
+
+  expect(result).toEqual({
+    fontSize: '16px'
+  })
+})
+
+test('key', () => {
+  const result = toStyles(fontSize({
+    theme,
+    fontSize: 'heading'
+  }))
+
+  expect(result).toEqual({
+    fontSize: '22px'
+  })
+})
+
+test('responsive', () => {
+  const result = toStyles(fontSize({
+    theme,
+    fontSize: 'caption'
+  }))
+
+  expect(result).toEqual({
+    fontSize: '12px',
+    '@media (max-width: 600px)': {
+      fontSize: '14px'
+    }
+  })
+})
diff --git a/src/styles/font-size.js b/src/styles/font-size.js
@@ -1,16 +1,36 @@
 import { style } from '../core'
+import { px } from '../utils'
 
 /**
  * ```js
  * import { fontSize } from 'pss'
  * ```
  *
- * prop           | css              | type               | value | true   | false
- * :--------------|:-----------------|:-------------------|:------|:-------|:--------
- * `fontSize`     | `font-size`      | `String`, `Number` | ✓     | —      | —
+ * prop       | css         | type               | theme      | value | true   | false
+ * :----------|:------------|:------------------ |:-----------|:------|:-------|:--------
+ * `fontSize` | `font-size` | `String`, `Number` | `fontSize` | ✓     | —      | —
  *
  * Related: {@link text}, {@link ellipsis}, {@link rule}, {@link boolValue}.
  *
+ * ```js
+ * const theme = {
+ *   default: {
+ *     fontSize: 'root'
+ *   },
+ *   media: {
+ *     sm: '(max-width: 600px)'
+ *   },
+ *   fontSize: {
+ *     root: 16,
+ *     heading: 22,
+ *     caption: {
+ *       all: 12,
+ *       sm: 14
+ *     }
+ *   }
+ * }
+ * ```
+ *
  * @param {Object} props
  *
  * @example
@@ -21,9 +41,13 @@ import { style } from '../core'
  * `
  *
  * @example
- * <Text fontSize='1rem' /> // font-size: 1rem
+ * <Text fontSize='1rem' /> // → font-size: 1rem
+ * <Text fontSize='root' /> // → theme.fontSize.root // → font-size: 1rem
+ * <Text fontSize='heading' /> // → theme.fontSize.heading // → font-size: 1.5rem
  */
 
 export const fontSize = style({
-  cssProp: 'fontSize'
+  cssProp: 'fontSize',
+  themeKey: 'fontSize',
+  transformValue: px
 })