From 362ac92b88f3d22450c6fc219e881f508197277b Mon Sep 17 00:00:00 2001 From: Samuel Castro Date: Thu, 24 Sep 2020 10:59:21 -0700 Subject: [PATCH 1/3] Added csstype for better style typing experience --- package.json | 1 + src/components/assets/GraphCMSAsset.test.tsx | 20 ++++++------ .../__snapshots__/GraphCMSAsset.test.tsx.snap | 32 +++++++++---------- src/types/CSSStyles.ts | 4 +-- yarn.lock | 5 +++ 5 files changed, 34 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 26db786f0..8c5393e32 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "cookieconsent": "3.1.1", "cookies": "0.8.0", "css-to-react-native": "3.0.0", + "csstype": "^3.0.3", "deepmerge": "4.2.2", "emotion-theming": "10.0.27", "graphql": "15.3.0", diff --git a/src/components/assets/GraphCMSAsset.test.tsx b/src/components/assets/GraphCMSAsset.test.tsx index 164b5b779..61b158a61 100644 --- a/src/components/assets/GraphCMSAsset.test.tsx +++ b/src/components/assets/GraphCMSAsset.test.tsx @@ -35,7 +35,7 @@ describe('GraphCMSAsset', () => { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const linkId = 'link-test'; const linkUrl = 'https://google.com'; @@ -328,7 +328,7 @@ describe('GraphCMSAsset', () => { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const linkId = 'link-test'; const linkUrl = 'https://google.com'; const overriddenLinkUrl = 'https://overridden.com'; @@ -374,7 +374,7 @@ describe('GraphCMSAsset', () => { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: 5 }; + const style = { paddingTop: '5' }; const linkId = 'link-test'; const linkUrl = 'https://google.com'; const overriddenLinkUrl = 'https://overridden.com'; diff --git a/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap b/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap index 3856d6369..dffcfcfc7 100644 --- a/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap +++ b/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap @@ -19,7 +19,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -34,7 +34,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/quality=value:100/resize=height:300/auto_image/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -49,7 +49,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/quality=value:100/resize=width:500/auto_image/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -64,7 +64,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -79,7 +79,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -94,7 +94,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -109,7 +109,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/quality=value:100/resize=width:500,height:300/auto_image/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -154,7 +154,7 @@ Object { "id": "test", "src": "https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V", "style": Object { - "paddingTop": 5, + "paddingTop": "5", }, "title": "Test asset", } @@ -168,7 +168,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image onClick={null} style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } target="_blank" @@ -180,7 +180,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -195,7 +195,7 @@ Object { "id": "test", "src": "https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V", "style": Object { - "paddingTop": 5, + "paddingTop": "5", }, "title": "Test asset", } @@ -209,7 +209,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image onClick={null} style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } target="_blank" @@ -221,7 +221,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" @@ -236,7 +236,7 @@ Object { "id": "test", "src": "https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V", "style": Object { - "paddingTop": 5, + "paddingTop": "5", }, "title": "Test asset", } @@ -250,7 +250,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image onClick={[Function]} style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } target="_blank" @@ -262,7 +262,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": 5, + "paddingTop": "5", } } title="Test asset" diff --git a/src/types/CSSStyles.ts b/src/types/CSSStyles.ts index 2bb178f88..4aea3c592 100644 --- a/src/types/CSSStyles.ts +++ b/src/types/CSSStyles.ts @@ -1,6 +1,6 @@ -import { GenericObject } from './GenericObject'; +import * as CSS from 'csstype'; /** * Represents a CSS "styles" object. */ -export type CSSStyles = GenericObject; +export type CSSStyles = CSS.Properties; diff --git a/yarn.lock b/yarn.lock index 40bf52af9..91be23da6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4948,6 +4948,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8" integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag== +csstype@^3.0.3: + version "3.0.3" + resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8" + integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" From e2619e1cf327699d268a2c301dad9f354294c564 Mon Sep 17 00:00:00 2001 From: Samuel Castro Date: Fri, 25 Sep 2020 09:55:26 -0700 Subject: [PATCH 2/3] CSSStyles properties should allow numbers or strings --- package.json | 2 +- src/components/assets/GraphCMSAsset.test.tsx | 20 ++++++------ .../__snapshots__/GraphCMSAsset.test.tsx.snap | 32 +++++++++---------- src/types/CSSStyles.ts | 2 +- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 8c5393e32..96ccbe551 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "cookieconsent": "3.1.1", "cookies": "0.8.0", "css-to-react-native": "3.0.0", - "csstype": "^3.0.3", + "csstype": "3.0.3", "deepmerge": "4.2.2", "emotion-theming": "10.0.27", "graphql": "15.3.0", diff --git a/src/components/assets/GraphCMSAsset.test.tsx b/src/components/assets/GraphCMSAsset.test.tsx index 61b158a61..164b5b779 100644 --- a/src/components/assets/GraphCMSAsset.test.tsx +++ b/src/components/assets/GraphCMSAsset.test.tsx @@ -35,7 +35,7 @@ describe('GraphCMSAsset', () => { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const renderer = TestRenderer .create( { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const linkId = 'link-test'; const linkUrl = 'https://google.com'; @@ -328,7 +328,7 @@ describe('GraphCMSAsset', () => { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const linkId = 'link-test'; const linkUrl = 'https://google.com'; const overriddenLinkUrl = 'https://overridden.com'; @@ -374,7 +374,7 @@ describe('GraphCMSAsset', () => { const id = 'test'; const title = 'Test asset'; const classes = 'test-class1 test-class2'; - const style = { paddingTop: '5' }; + const style = { paddingTop: 5 }; const linkId = 'link-test'; const linkUrl = 'https://google.com'; const overriddenLinkUrl = 'https://overridden.com'; diff --git a/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap b/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap index dffcfcfc7..3856d6369 100644 --- a/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap +++ b/src/components/assets/__snapshots__/GraphCMSAsset.test.tsx.snap @@ -19,7 +19,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -34,7 +34,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/quality=value:100/resize=height:300/auto_image/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -49,7 +49,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/quality=value:100/resize=width:500/auto_image/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -64,7 +64,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -79,7 +79,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -94,7 +94,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -109,7 +109,7 @@ exports[`GraphCMSAsset should properly render an asset from GraphCMS when the as src="https://media.graphcms.com/quality=value:100/resize=width:500,height:300/auto_image/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -154,7 +154,7 @@ Object { "id": "test", "src": "https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V", "style": Object { - "paddingTop": "5", + "paddingTop": 5, }, "title": "Test asset", } @@ -168,7 +168,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image onClick={null} style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } target="_blank" @@ -180,7 +180,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -195,7 +195,7 @@ Object { "id": "test", "src": "https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V", "style": Object { - "paddingTop": "5", + "paddingTop": 5, }, "title": "Test asset", } @@ -209,7 +209,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image onClick={null} style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } target="_blank" @@ -221,7 +221,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" @@ -236,7 +236,7 @@ Object { "id": "test", "src": "https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V", "style": Object { - "paddingTop": "5", + "paddingTop": 5, }, "title": "Test asset", } @@ -250,7 +250,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image onClick={[Function]} style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } target="_blank" @@ -262,7 +262,7 @@ exports[`GraphCMSAsset when the asset is used as a link() containing an image src="https://media.graphcms.com/88YmsSFsSEGI9i0qcH0V" style={ Object { - "paddingTop": "5", + "paddingTop": 5, } } title="Test asset" diff --git a/src/types/CSSStyles.ts b/src/types/CSSStyles.ts index 4aea3c592..1d5eead0a 100644 --- a/src/types/CSSStyles.ts +++ b/src/types/CSSStyles.ts @@ -3,4 +3,4 @@ import * as CSS from 'csstype'; /** * Represents a CSS "styles" object. */ -export type CSSStyles = CSS.Properties; +export type CSSStyles = CSS.Properties From 5572c6dcb7949ad24e03f81b7a456f71a29b6b15 Mon Sep 17 00:00:00 2001 From: Samuel Castro Date: Fri, 25 Sep 2020 09:56:59 -0700 Subject: [PATCH 3/3] Updating yarn.lock --- yarn.lock | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/yarn.lock b/yarn.lock index 91be23da6..9f7f22ab8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4938,21 +4938,16 @@ cssstyle@^2.2.0: dependencies: cssom "~0.3.6" +csstype@3.0.3, csstype@^3.0.2: + version "3.0.3" + resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8" + integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag== + csstype@^2.2.0, csstype@^2.5.7: version "2.6.9" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098" integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q== -csstype@^3.0.2: - version "3.0.3" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8" - integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag== - -csstype@^3.0.3: - version "3.0.3" - resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8" - integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag== - cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"