fix: migrate capsize to @capsizecss/core

Replace the previous `capsize` dependency with the new scoped version of the package `@capsizecss/core`
tony-ho · Oct 8, 2021 · 6ef5541 · 6ef5541
1 parent 38d8e62
commit 6ef5541
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "semantic-release": "^17.1.1"
   },
   "dependencies": {
-    "capsize": "^2.0.0",
+    "@capsizecss/core": "^3.0.0",
     "lodash.zipwith": "^4.2.0"
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,8 @@
-import capsize, { CapsizeStyles, FontMetrics } from 'capsize'
+import { createStyleObject, FontMetrics } from '@capsizecss/core'
 import zipWith from 'lodash.zipwith'
 
+type CapsizeStyles = ReturnType<typeof createStyleObject>
+
 type CapHeightWithLeading = {
   capHeight: number[]
   leading: number[]
@@ -60,7 +62,7 @@ export default function responsiveCapsize(
       const { leading } = options
       return mergeCapsizeStyles(
         zipWith(capHeight, leading, (c, l) =>
-          capsize({
+          createStyleObject({
             capHeight: c ?? capHeight[capHeight.length - 1],
             leading:
               l ??
@@ -77,7 +79,7 @@ export default function responsiveCapsize(
     }
     return mergeCapsizeStyles(
       zipWith(capHeight, lineGap, (c, l) =>
-        capsize({
+        createStyleObject({
           capHeight: c ?? capHeight[capHeight.length - 1],
           lineGap: l ?? lineGap[lineGap.length - 1],
           fontMetrics
@@ -94,7 +96,7 @@ export default function responsiveCapsize(
     const { leading } = options
     return mergeCapsizeStyles(
       zipWith(fontSize, leading, (f, l) =>
-        capsize({
+        createStyleObject({
           fontSize: f ?? fontSize[fontSize.length - 1],
           leading:
             l ?? (leading.length > 0 ? leading[leading.length - 1] : undefined),
@@ -110,7 +112,7 @@ export default function responsiveCapsize(
   }
   return mergeCapsizeStyles(
     zipWith(fontSize, lineGap, (f, l) =>
-      capsize({
+      createStyleObject({
         fontSize: f ?? fontSize[fontSize.length - 1],
         lineGap: l ?? lineGap[lineGap.length - 1],
         fontMetrics

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -1,6 +1,8 @@
-import capsize, { CapsizeStyles } from 'capsize'
+import { createStyleObject } from '@capsizecss/core'
 import responsiveCapsize, { ResponsiveCapsizeStyles } from '../src'
 
+type CapsizeStyles = ReturnType<typeof createStyleObject>
+
 const fontMetrics = {
   capHeight: 1456,
   ascent: 1900,
@@ -74,7 +76,7 @@ describe('options validation', () => {
 describe('matches Capsize output', () => {
   test('capHeight with leading', () => {
     const options = { capHeight: 48, leading: 72 }
-    const capsizeStyles = capsize({ fontMetrics, ...options })
+    const capsizeStyles = createStyleObject({ fontMetrics, ...options })
     const styles = responsiveCapsize({
       fontMetrics,
       capHeight: [options.capHeight],
@@ -87,7 +89,7 @@ describe('matches Capsize output', () => {
   test('capHeight with lineGap', () => {
     const options = { capHeight: 48, lineGap: 24 }
 
-    const capsizeStyles = capsize({ fontMetrics, ...options })
+    const capsizeStyles = createStyleObject({ fontMetrics, ...options })
     const styles = responsiveCapsize({
       fontMetrics,
       capHeight: [options.capHeight],
@@ -100,7 +102,7 @@ describe('matches Capsize output', () => {
   test('fontSize with leading', () => {
     const options = { fontSize: 48, leading: 72 }
 
-    const capsizeStyles = capsize({ fontMetrics, ...options })
+    const capsizeStyles = createStyleObject({ fontMetrics, ...options })
     const styles = responsiveCapsize({
       fontMetrics,
       fontSize: [options.fontSize],
@@ -113,7 +115,7 @@ describe('matches Capsize output', () => {
   test('fontSize with lineGap', () => {
     const options = { fontSize: 48, lineGap: 24 }
 
-    const capsizeStyles = capsize({ fontMetrics, ...options })
+    const capsizeStyles = createStyleObject({ fontMetrics, ...options })
     const styles = responsiveCapsize({
       fontMetrics,
       fontSize: [options.fontSize],
@@ -138,12 +140,12 @@ describe('matches Capsize output', () => {
     const capHeight = [48, 96]
     const lineGap = [24, 48]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       lineGap: lineGap[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[1],
       lineGap: lineGap[1]
@@ -161,12 +163,12 @@ describe('matches Capsize output', () => {
     const capHeight = [48, 96]
     const lineGap = [24]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       lineGap: lineGap[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[1],
       lineGap: lineGap[0]
@@ -184,12 +186,12 @@ describe('matches Capsize output', () => {
     const capHeight = [48]
     const lineGap = [24, 48]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       lineGap: lineGap[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       lineGap: lineGap[1]
@@ -207,12 +209,12 @@ describe('matches Capsize output', () => {
     const fontSize = [48, 96]
     const lineGap = [24]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[0],
       lineGap: lineGap[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[1],
       lineGap: lineGap[0]
@@ -230,12 +232,12 @@ describe('matches Capsize output', () => {
     const fontSize = [48]
     const lineGap = [24, 48]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[0],
       lineGap: lineGap[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[0],
       lineGap: lineGap[1]
@@ -253,12 +255,12 @@ describe('matches Capsize output', () => {
     const capHeight = [48, 96]
     const leading = [72]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       leading: leading[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[1],
       leading: leading[0]
@@ -276,12 +278,12 @@ describe('matches Capsize output', () => {
     const capHeight = [48]
     const leading = [72, 144]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       leading: leading[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       capHeight: capHeight[0],
       leading: leading[1]
@@ -299,12 +301,12 @@ describe('matches Capsize output', () => {
     const fontSize = [48, 96]
     const leading = [72]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[0],
       leading: leading[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[1],
       leading: leading[0]
@@ -322,12 +324,12 @@ describe('matches Capsize output', () => {
     const fontSize = [48]
     const leading = [72, 144]
 
-    const firstCapsizeStyles = capsize({
+    const firstCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[0],
       leading: leading[0]
     })
-    const secondCapsizeStyles = capsize({
+    const secondCapsizeStyles = createStyleObject({
       fontMetrics,
       fontSize: fontSize[0],
       leading: leading[1]