feat: introduce rpx unit

styled-components · Jul 8, 2019 · 8bcc4cb · 8bcc4cb
1 parent 2e44531
commit 8bcc4cb
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "bundlesize": [
     {
       "path": "./packages/system/dist/xstyled-system.min.js",
-      "maxSize": "4.4 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./packages/styled-components/dist/xstyled-styled-components.min.js",

diff --git a/packages/system/src/styles/basics.js b/packages/system/src/styles/basics.js
@@ -1,15 +1,17 @@
 import { style, themeGetter, compose } from '../style'
-import { px, percent } from '../unit'
+import { rpxPx, percent } from '../unit'
 
 export const getColor = themeGetter({ key: 'colors' })
 
-export const getPx = themeGetter({ transform: px })
+export const getPx = themeGetter({ transform: rpxPx })
 
-export const getPercent = themeGetter({ transform: percent })
+export const getPercent = themeGetter({
+  transform: percent,
+})
 
 export const getRadius = themeGetter({
   key: 'radii',
-  transform: px,
+  transform: rpxPx,
 })
 
 export const opacity = style({

diff --git a/packages/system/src/styles/borders.js b/packages/system/src/styles/borders.js
@@ -1,11 +1,11 @@
 import { style, themeGetter, compose } from '../style'
 import { num } from '../util'
-import { px } from '../unit'
+import { px, rpxPx } from '../unit'
 import { getColor, getRadius } from './basics'
 
 export const getBorder = themeGetter({
   key: 'borders',
-  transform: n => (num(n) && n > 0 ? `${n}px solid` : n),
+  transform: n => (num(n) && n > 0 ? `${px(n)} solid` : n),
 })
 
 export const border = style({
@@ -60,7 +60,7 @@ export const borderColor = style({
 
 export const getBorderWidth = themeGetter({
   key: 'borderWidths',
-  transform: px,
+  transform: rpxPx,
 })
 
 export const borderWidth = style({

diff --git a/packages/system/src/styles/space.js b/packages/system/src/styles/space.js
@@ -1,6 +1,6 @@
 import { style, themeGetter, compose } from '../style'
 import { is, string, negative } from '../util'
-import { px as pxUnit } from '../unit'
+import { rpxPx } from '../unit'
 
 function toNegative(value) {
   if (string(value)) return `-${value}`
@@ -16,12 +16,12 @@ export const getSpace = themeGetter({
       const absoluteValue = neg ? rawValue.substr(1) : rawValue
       const variantValue = variants[absoluteValue]
       const value = is(variantValue) ? variantValue : absoluteValue
-      return pxUnit(neg ? toNegative(value) : value)
+      return rpxPx(neg ? toNegative(value) : value)
     }
     const abs = Math.abs(rawValue)
     const neg = negative(rawValue)
     const value = is(variants[abs]) ? variants[abs] : abs
-    return pxUnit(neg ? toNegative(value) : value)
+    return rpxPx(neg ? toNegative(value) : value)
   },
 })
 

diff --git a/packages/system/src/styles/typography.js b/packages/system/src/styles/typography.js
@@ -1,5 +1,5 @@
 import { style, compose, themeGetter } from '../style'
-import { px } from '../unit'
+import { rpx, rpxPx } from '../unit'
 import { getColor } from './basics'
 
 export const getFont = themeGetter({ key: 'fonts' })
@@ -12,15 +12,15 @@ export const fontFamily = style({
 export const getFontSize = themeGetter({
   key: 'fontSizes',
   defaultVariants: [0, 12, 14, 16, 20, 24, 32, 48, 64, 72],
-  transform: px,
+  transform: rpxPx,
 })
 
 export const fontSize = style({
   prop: 'fontSize',
   themeGet: getFontSize,
 })
 
-export const getLineHeight = themeGetter({ key: 'lineHeights' })
+export const getLineHeight = themeGetter({ key: 'lineHeights', transform: rpx })
 
 export const lineHeight = style({
   prop: 'lineHeight',
@@ -40,7 +40,7 @@ export const textAlign = style({
 
 export const getLetterSpacing = themeGetter({
   key: 'letterSpacings',
-  transform: px,
+  transform: rpxPx,
 })
 
 export const letterSpacing = style({

diff --git a/packages/system/src/unit.js b/packages/system/src/unit.js
@@ -1,7 +1,19 @@
-import { num } from './util'
+import { num, string } from './util'
+
+const round = value => Math.round(value * 10 ** 4) / 10 ** 4
 
 export const unit = unit => value =>
   num(value) && value !== 0 ? `${value}${unit}` : value
 export const px = unit('px')
+export const rpx = value => {
+  if (!string(value) || value.length < 4) return value
+  const unit = value.slice(-3)
+  if (unit !== 'rpx') return value
+  const n = Number(value.slice(0, value.length - 3))
+  if (n === 0) return 0
+  return `${round(n / 16)}rem`
+}
+export const rpxPx = value => px(rpx(value))
+
 export const percent = n =>
-  n !== 0 && n >= -1 && n <= 1 ? `${Math.round(n * 10 ** 6) / 10 ** 4}%` : px(n)
+  n !== 0 && n >= -1 && n <= 1 ? `${round(n * 100)}%` : rpxPx(n)
diff --git a/packages/system/src/unit.test.js b/packages/system/src/unit.test.js
@@ -1,4 +1,4 @@
-import { unit, px, percent } from './unit'
+import { unit, px, rpx, percent } from './unit'
 
 describe('util', () => {
   describe('#unit', () => {
@@ -33,4 +33,17 @@ describe('util', () => {
       expect(percent(0.3333333333)).toBe('33.3333%')
     })
   })
+
+  describe('#rpx', () => {
+    it('transforms px into rem', () => {
+      expect(rpx(0)).toBe(0)
+      expect(rpx(10)).toBe(10)
+      expect(rpx('10rpx')).toBe('0.625rem')
+      expect(rpx('16rpx')).toBe('1rem')
+      expect(rpx('-16rpx')).toBe('-1rem')
+      expect(rpx('0rpx')).toBe(0)
+      expect(rpx('10px')).toBe('10px')
+      expect(rpx('10px')).toBe('10px')
+    })
+  })
 })
diff --git a/packages/system/tests/styled-components/styles.test.js b/packages/system/tests/styled-components/styles.test.js
@@ -28,7 +28,13 @@ describe('styles', () => {
         theme: {
           fontSizes: [10, 15, 40],
         },
-        expectations: [[0, '10px'], [1, '15px'], [20, '20px'], ['3em', '3em']],
+        expectations: [
+          [0, '10px'],
+          [1, '15px'],
+          [20, '20px'],
+          ['3em', '3em'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -38,7 +44,13 @@ describe('styles', () => {
         theme: {
           lineHeights: [1.2, 1.5, 2],
         },
-        expectations: [[0, 1.2], [1, 1.5], [3, 3], ['3em', '3em']],
+        expectations: [
+          [0, 1.2],
+          [1, 1.5],
+          [3, 3],
+          ['3em', '3em'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -70,6 +82,7 @@ describe('styles', () => {
           [1, '2px'],
           [1.1, '1.1px'],
           ['2rem', '2rem'],
+          ['16rpx', '1rem'],
         ],
       },
     ],
@@ -98,7 +111,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -110,7 +128,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -122,7 +145,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -134,7 +162,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -146,7 +179,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -158,7 +196,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -170,7 +213,12 @@ describe('styles', () => {
             large: 400,
           },
         },
-        expectations: [[0.5, '50%'], ['large', '400px'], [50, '50px']],
+        expectations: [
+          [0.5, '50%'],
+          ['large', '400px'],
+          [50, '50px'],
+          ['16rpx', '1rem'],
+        ],
       },
     ],
     [
@@ -226,7 +274,7 @@ describe('styles', () => {
       'flexBasis',
       {
         styleRule: 'flex-basis',
-        expectations: [[0.5, '50%'], [50, '50px']],
+        expectations: [[0.5, '50%'], [50, '50px'], ['16rpx', '1rem']],
       },
     ],
     [
@@ -330,31 +378,65 @@ describe('styles', () => {
         expectations: [
           ['10', '10'],
           [10, '10px'],
+          [-10, '-10px'],
           ['10', '10'],
+          ['16rpx', '1rem'],
           ['10px', '10px'],
           ['4%', '4%'],
+          ['16rpx', '1rem'],
+          ['-16rpx', '-1rem'],
         ],
       },
     ],
     [
       'right',
       {
         styleRule: 'right',
-        expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']],
+        expectations: [
+          ['10', '10'],
+          [10, '10px'],
+          [-10, '-10px'],
+          ['10', '10'],
+          ['16rpx', '1rem'],
+          ['10px', '10px'],
+          ['4%', '4%'],
+          ['16rpx', '1rem'],
+          ['-16rpx', '-1rem'],
+        ],
       },
     ],
     [
       'bottom',
       {
         styleRule: 'bottom',
-        expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']],
+        expectations: [
+          ['10', '10'],
+          [10, '10px'],
+          [-10, '-10px'],
+          ['10', '10'],
+          ['16rpx', '1rem'],
+          ['10px', '10px'],
+          ['4%', '4%'],
+          ['16rpx', '1rem'],
+          ['-16rpx', '-1rem'],
+        ],
       },
     ],
     [
       'left',
       {
         styleRule: 'left',
-        expectations: [[10, '10px'], ['10px', '10px'], ['4%', '4%']],
+        expectations: [
+          ['10', '10'],
+          [10, '10px'],
+          [-10, '-10px'],
+          ['10', '10'],
+          ['16rpx', '1rem'],
+          ['10px', '10px'],
+          ['4%', '4%'],
+          ['16rpx', '1rem'],
+          ['-16rpx', '-1rem'],
+        ],
       },
     ],
     [
@@ -368,7 +450,7 @@ describe('styles', () => {
       'borderWidth',
       {
         styleRule: 'border-width',
-        expectations: [[1, '1px'], ['20%', '20%']],
+        expectations: [[1, '1px'], ['20%', '20%'], ['16rpx', '1rem']],
       },
     ],
     [
@@ -427,7 +509,7 @@ describe('styles', () => {
           },
         },
         styleRule: 'border-radius',
-        expectations: [['round', '50%'], [10, '10px']],
+        expectations: [['round', '50%'], [10, '10px'], ['16rpx', '1rem']],
       },
     ],
     [