Updated to csstype@3 (#38)

* Updated CSSType to 3.0.10 * Change files * changefile updated * Updated types.ts with AnimationProperty * Updated tests from flexShrink to overflow. * fix "generateStyles()" typings Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
microsoft · Feb 22, 2022 · e62b24f · e62b24f
1 parent 95b0a74
commit e62b24f
Show file tree

Hide file tree

Showing 17 changed files with 115 additions and 102 deletions.
diff --git a/change/@griffel-core-cfd5601f-e13b-4186-a276-5c42b533d71d.json b/change/@griffel-core-cfd5601f-e13b-4186-a276-5c42b533d71d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: update csstype to 3.0.10",
+  "packageName": "@griffel/core",
+  "email": "rahulsunil2@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "@linaria/babel-preset": "^3.0.0-beta.14",
     "@linaria/shaker": "^3.0.0-beta.14",
     "ajv": "^8.4.0",
-    "csstype": "^2.6.19",
+    "csstype": "^3.0.10",
     "enhanced-resolve": "^5.8.2",
     "loader-utils": "^2.0.0",
     "rtl-css-js": "^1.15.0",

diff --git a/packages/core/src/shorthands/border.ts b/packages/core/src/shorthands/border.ts
@@ -1,4 +1,4 @@
-import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
+import * as CSS from 'csstype';
 
 import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
 import { borderWidth } from './borderWidth';
@@ -21,12 +21,15 @@ type BorderStyle = Pick<
   | 'borderLeftWidth'
 >;
 
-export function border(width: BorderWidthProperty<GriffelStylesCSSValue>): BorderStyle;
-export function border(width: BorderWidthProperty<GriffelStylesCSSValue>, style: BorderStyleProperty): BorderStyle;
+export function border(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderStyle;
 export function border(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
-  color: BorderColorProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
+): BorderStyle;
+export function border(
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
+  color: CSS.Property.BorderColor,
 ): BorderStyle;
 
 /**
@@ -40,7 +43,7 @@ export function border(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border
  */
 export function border(
-  ...values: [BorderWidthProperty<GriffelStylesCSSValue>, BorderStyleProperty?, BorderColorProperty?]
+  ...values: [CSS.Property.BorderWidth<GriffelStylesCSSValue>, CSS.Property.BorderStyle?, CSS.Property.BorderColor?]
 ): BorderStyle {
   return {
     ...borderWidth(values[0]),

diff --git a/packages/core/src/shorthands/borderBottom.ts b/packages/core/src/shorthands/borderBottom.ts
@@ -1,20 +1,20 @@
-import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
+import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
 
 type BorderBottomStyle = Pick<
   GriffelStylesStrictCSSObject,
   'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'
 >;
 
-export function borderBottom(width: BorderWidthProperty<GriffelStylesCSSValue>): BorderBottomStyle;
+export function borderBottom(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderBottomStyle;
 export function borderBottom(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
 ): BorderBottomStyle;
 export function borderBottom(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
-  color: BorderColorProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
+  color: CSS.Property.BorderColor,
 ): BorderBottomStyle;
 
 /**
@@ -28,7 +28,7 @@ export function borderBottom(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom
  */
 export function borderBottom(
-  ...values: [BorderWidthProperty<GriffelStylesCSSValue>, BorderStyleProperty?, BorderColorProperty?]
+  ...values: [CSS.Property.BorderWidth<GriffelStylesCSSValue>, CSS.Property.BorderStyle?, CSS.Property.BorderColor?]
 ): BorderBottomStyle {
   return {
     borderBottomWidth: values[0],

diff --git a/packages/core/src/shorthands/borderColor.ts b/packages/core/src/shorthands/borderColor.ts
@@ -1,4 +1,4 @@
-import type { BorderColorProperty } from 'csstype';
+import * as CSS from 'csstype';
 
 import type { GriffelStylesStrictCSSObject } from '../types';
 import { generateStyles } from './generateStyles';
@@ -8,18 +8,18 @@ type BorderColorStyle = Pick<
   'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'
 >;
 
-export function borderColor(all: BorderColorProperty): BorderColorStyle;
-export function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): BorderColorStyle;
+export function borderColor(all: CSS.Property.BorderColor): BorderColorStyle;
+export function borderColor(vertical: CSS.Property.BorderColor, horizontal: CSS.Property.BorderColor): BorderColorStyle;
 export function borderColor(
-  top: BorderColorProperty,
-  horizontal: BorderColorProperty,
-  bottom: BorderColorProperty,
+  top: CSS.Property.BorderColor,
+  horizontal: CSS.Property.BorderColor,
+  bottom: CSS.Property.BorderColor,
 ): BorderColorStyle;
 export function borderColor(
-  top: BorderColorProperty,
-  right: BorderColorProperty,
-  bottom: BorderColorProperty,
-  left: BorderColorProperty,
+  top: CSS.Property.BorderColor,
+  right: CSS.Property.BorderColor,
+  bottom: CSS.Property.BorderColor,
+  left: CSS.Property.BorderColor,
 ): BorderColorStyle;
 
 /**
@@ -33,6 +33,6 @@ export function borderColor(
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
  */
-export function borderColor(...values: BorderColorProperty[]): BorderColorStyle {
-  return generateStyles('border', 'Color', ...values);
+export function borderColor(...values: CSS.Property.BorderColor[]): BorderColorStyle {
+  return generateStyles<BorderColorStyle>('border', 'Color', ...values);
 }
diff --git a/packages/core/src/shorthands/borderLeft.ts b/packages/core/src/shorthands/borderLeft.ts
@@ -1,17 +1,17 @@
-import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
+import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
 
 type BorderLeftStyle = Pick<GriffelStylesStrictCSSObject, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
 
-export function borderLeft(width: BorderWidthProperty<GriffelStylesCSSValue>): BorderLeftStyle;
+export function borderLeft(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderLeftStyle;
 export function borderLeft(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
 ): BorderLeftStyle;
 export function borderLeft(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
-  color: BorderColorProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
+  color: CSS.Property.BorderColor,
 ): BorderLeftStyle;
 
 /**
@@ -25,7 +25,7 @@ export function borderLeft(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left
  */
 export function borderLeft(
-  ...values: [BorderWidthProperty<GriffelStylesCSSValue>, BorderStyleProperty?, BorderColorProperty?]
+  ...values: [CSS.Property.BorderWidth<GriffelStylesCSSValue>, CSS.Property.BorderStyle?, CSS.Property.BorderColor?]
 ): BorderLeftStyle {
   return {
     borderLeftWidth: values[0],

diff --git a/packages/core/src/shorthands/borderRight.ts b/packages/core/src/shorthands/borderRight.ts
@@ -1,20 +1,20 @@
-import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
+import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
 
 type BorderRightStyle = Pick<
   GriffelStylesStrictCSSObject,
   'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'
 >;
 
-export function borderRight(width: BorderWidthProperty<GriffelStylesCSSValue>): BorderRightStyle;
+export function borderRight(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderRightStyle;
 export function borderRight(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
 ): BorderRightStyle;
 export function borderRight(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
-  color: BorderColorProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
+  color: CSS.Property.BorderColor,
 ): BorderRightStyle;
 
 /**
@@ -28,7 +28,7 @@ export function borderRight(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right
  */
 export function borderRight(
-  ...values: [BorderWidthProperty<GriffelStylesCSSValue>, BorderStyleProperty?, BorderColorProperty?]
+  ...values: [CSS.Property.BorderWidth<GriffelStylesCSSValue>, CSS.Property.BorderStyle?, CSS.Property.BorderColor?]
 ): BorderRightStyle {
   return {
     borderRightWidth: values[0],

diff --git a/packages/core/src/shorthands/borderStyle.ts b/packages/core/src/shorthands/borderStyle.ts
@@ -1,4 +1,4 @@
-import type { BorderStyleProperty } from 'csstype';
+import * as CSS from 'csstype';
 
 import type { GriffelStylesStrictCSSObject } from '../types';
 import { generateStyles } from './generateStyles';
@@ -8,18 +8,18 @@ type BorderStyleStyle = Pick<
   'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'
 >;
 
-export function borderStyle(all: BorderStyleProperty): BorderStyleStyle;
-export function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): BorderStyleStyle;
+export function borderStyle(all: CSS.Property.BorderStyle): BorderStyleStyle;
+export function borderStyle(vertical: CSS.Property.BorderStyle, horizontal: CSS.Property.BorderStyle): BorderStyleStyle;
 export function borderStyle(
-  top: BorderStyleProperty,
-  horizontal: BorderStyleProperty,
-  bottom: BorderStyleProperty,
+  top: CSS.Property.BorderStyle,
+  horizontal: CSS.Property.BorderStyle,
+  bottom: CSS.Property.BorderStyle,
 ): BorderStyleStyle;
 export function borderStyle(
-  top: BorderStyleProperty,
-  right: BorderStyleProperty,
-  bottom: BorderStyleProperty,
-  left: BorderStyleProperty,
+  top: CSS.Property.BorderStyle,
+  right: CSS.Property.BorderStyle,
+  bottom: CSS.Property.BorderStyle,
+  left: CSS.Property.BorderStyle,
 ): BorderStyleStyle;
 
 /**
@@ -33,6 +33,6 @@ export function borderStyle(
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
  */
-export function borderStyle(...values: BorderStyleProperty[]): BorderStyleStyle {
-  return generateStyles('border', 'Style', ...values);
+export function borderStyle(...values: CSS.Property.BorderStyle[]): BorderStyleStyle {
+  return generateStyles<BorderStyleStyle>('border', 'Style', ...values);
 }
diff --git a/packages/core/src/shorthands/borderTop.ts b/packages/core/src/shorthands/borderTop.ts
@@ -1,17 +1,17 @@
-import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype';
+import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
 
 type BorderTopStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
 
-export function borderTop(width: BorderWidthProperty<GriffelStylesCSSValue>): BorderTopStyle;
+export function borderTop(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderTopStyle;
 export function borderTop(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
 ): BorderTopStyle;
 export function borderTop(
-  width: BorderWidthProperty<GriffelStylesCSSValue>,
-  style: BorderStyleProperty,
-  color: BorderColorProperty,
+  width: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  style: CSS.Property.BorderStyle,
+  color: CSS.Property.BorderColor,
 ): BorderTopStyle;
 
 /**
@@ -25,7 +25,7 @@ export function borderTop(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top
  */
 export function borderTop(
-  ...values: [BorderWidthProperty<GriffelStylesCSSValue>, BorderStyleProperty?, BorderColorProperty?]
+  ...values: [CSS.Property.BorderWidth<GriffelStylesCSSValue>, CSS.Property.BorderStyle?, CSS.Property.BorderColor?]
 ): BorderTopStyle {
   return {
     borderTopWidth: values[0],

diff --git a/packages/core/src/shorthands/borderWidth.ts b/packages/core/src/shorthands/borderWidth.ts
@@ -1,4 +1,4 @@
-import type { BorderWidthProperty } from 'csstype';
+import * as CSS from 'csstype';
 
 import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
 import { generateStyles } from './generateStyles';
@@ -8,21 +8,21 @@ type BorderWidthStyle = Pick<
   'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'
 >;
 
-export function borderWidth(all: BorderWidthProperty<GriffelStylesCSSValue>): BorderWidthStyle;
+export function borderWidth(all: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderWidthStyle;
 export function borderWidth(
-  vertical: BorderWidthProperty<GriffelStylesCSSValue>,
-  horizontal: BorderWidthProperty<GriffelStylesCSSValue>,
+  vertical: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  horizontal: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
 ): BorderWidthStyle;
 export function borderWidth(
-  top: BorderWidthProperty<GriffelStylesCSSValue>,
-  horizontal: BorderWidthProperty<GriffelStylesCSSValue>,
-  bottom: BorderWidthProperty<GriffelStylesCSSValue>,
+  top: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  horizontal: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  bottom: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
 ): BorderWidthStyle;
 export function borderWidth(
-  top: BorderWidthProperty<GriffelStylesCSSValue>,
-  right: BorderWidthProperty<GriffelStylesCSSValue>,
-  bottom: BorderWidthProperty<GriffelStylesCSSValue>,
-  left: BorderWidthProperty<GriffelStylesCSSValue>,
+  top: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  right: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  bottom: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
+  left: CSS.Property.BorderWidth<GriffelStylesCSSValue>,
 ): BorderWidthStyle;
 
 /**
@@ -36,6 +36,6 @@ export function borderWidth(
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
  */
-export function borderWidth(...values: BorderWidthProperty<GriffelStylesCSSValue>[]): BorderWidthStyle {
-  return generateStyles('border', 'Width', ...values);
+export function borderWidth(...values: CSS.Property.BorderWidth<GriffelStylesCSSValue>[]): BorderWidthStyle {
+  return generateStyles<BorderWidthStyle>('border', 'Width', ...values);
 }
diff --git a/packages/core/src/shorthands/generateStyles.ts b/packages/core/src/shorthands/generateStyles.ts
@@ -1,24 +1,24 @@
-import { GriffelStylesCSSValue, GriffelStylesStrictCSSObject } from '../types';
+import { GriffelStylesCSSValue } from '../types';
 
 type DirectionalProperties = 'border' | 'padding' | 'margin';
 
 const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
 
-export function generateStyles(
+export function generateStyles<Styles extends Record<string, GriffelStylesCSSValue>>(
   property: DirectionalProperties,
   suffix: '' | 'Color' | 'Style' | 'Width',
   ...values: GriffelStylesCSSValue[]
-): GriffelStylesStrictCSSObject {
+): Styles {
   const [firstValue, secondValue = firstValue, thirdValue = firstValue, fourthValue = secondValue] = values;
   const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
 
-  const styles: GriffelStylesStrictCSSObject = {};
+  const styles: Styles = {} as Styles;
 
   for (let i = 0; i < valuesWithDefaults.length; i += 1) {
     if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
-      const newKey = (property + positionMap[i] + suffix) as keyof GriffelStylesStrictCSSObject;
+      const newKey = (property + positionMap[i] + suffix) as keyof Styles;
 
-      styles[newKey] = valuesWithDefaults[i] as unknown as undefined;
+      styles[newKey] = valuesWithDefaults[i] as Styles[keyof Styles];
     }
   }
 

diff --git a/packages/core/src/shorthands/margin.ts b/packages/core/src/shorthands/margin.ts
@@ -29,5 +29,5 @@ export function margin(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
  */
 export function margin(...values: GriffelStylesCSSValue[]): MarginStyle {
-  return generateStyles('margin', '', ...values);
+  return generateStyles<MarginStyle>('margin', '', ...values);
 }
diff --git a/packages/core/src/shorthands/overflow.ts b/packages/core/src/shorthands/overflow.ts
@@ -1,4 +1,4 @@
-import type { OverflowProperty } from 'csstype';
+import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject } from '../types';
 
 type OverflowStyle = Pick<GriffelStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
@@ -12,7 +12,10 @@ type OverflowStyle = Pick<GriffelStylesStrictCSSObject, 'overflowX' | 'overflowY
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
  */
-export function overflow(overflowX: OverflowProperty, overflowY: OverflowProperty = overflowX): OverflowStyle {
+export function overflow(
+  overflowX: CSS.Property.Overflow,
+  overflowY: CSS.Property.Overflow = overflowX,
+): OverflowStyle {
   return {
     overflowX,
     overflowY,

diff --git a/packages/core/src/shorthands/padding.ts b/packages/core/src/shorthands/padding.ts
@@ -28,6 +28,6 @@ export function padding(
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
  */
-export function padding(...values: GriffelStylesCSSValue[]): PaddingStyle {
-  return generateStyles('padding', '', ...values);
+export function padding(...values: GriffelStylesCSSValue[]) {
+  return generateStyles<PaddingStyle>('padding', '', ...values);
 }