chore: bump csstype (#472)

change/@griffel-core-43031a38-3223-4553-a2f3-05142eee1f22.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump csstype",
+  "packageName": "@griffel/core",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@griffel-eslint-plugin-d06c6453-b439-474e-bcde-97387b549782.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump csstype",
+  "packageName": "@griffel/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@griffel-style-types-b7292bbe-13fd-447b-a640-6e9ada086369.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump csstype",
+  "packageName": "@griffel/style-types",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

e2e/typescript/src/assets/legacy/fixture.ts

@@ -197,9 +197,11 @@ assertType({
     ...typedMixin,
     color: 'var(--customColor)',
   },
+  // @ts-expect-error FIXME - this is supposed to pass!
   ':after': {
     ...typedMixin,
   },
+  // @ts-expect-error FIXME - this is supposed to pass!
   ':before': {
     ...typedMixin,
     color: 'var(--customColor)',

package.json

@@ -154,7 +154,7 @@
     "@typescript-eslint/utils": "^5.47.0",
     "ajv": "^8.4.0",
     "browserslist": "^4.19.1",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "enhanced-resolve": "^5.8.2",
     "rtl-css-js": "^1.16.1",
     "source-map-js": "1.0.2",

packages/core/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/hash": "^0.9.0",
     "@griffel/style-types": "^1.0.2",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "rtl-css-js": "^1.16.1",
     "stylis": "^4.2.0",
     "tslib": "^2.1.0"

packages/core/src/constants.ts

@@ -64,6 +64,7 @@ export const LOOKUP_DIR_INDEX = 1;
 export const UNSUPPORTED_CSS_PROPERTIES: Record<keyof GriffelStylesUnsupportedCSSProperties, 1> = {
   all: 1,
   animation: 1,
+  animationRange: 1,
   background: 1,
   backgroundPosition: 1,
   border: 1,
@@ -128,4 +129,5 @@ export const UNSUPPORTED_CSS_PROPERTIES: Record<keyof GriffelStylesUnsupportedCS
   textDecoration: 1,
   textEmphasis: 1,
   transition: 1,
+  viewTimeline: 1,
 } as const;

packages/core/src/runtime/resolveResetStyleRules.ts

@@ -127,7 +127,7 @@ function createStringFromStyles(styles: GriffelResetStyle) {
       }
     }
 
-    warnAboutUnresolvedRule(property, value);
+    warnAboutUnresolvedRule(property, value as GriffelResetStyle);
   }
 
   return [ltrCSS, rtlCSS];

packages/core/src/runtime/resolveStyleRules.ts

@@ -249,7 +249,7 @@ export function resolveStyleRules(
         ? {
             rtlClassName,
             rtlProperty: rtlDefinitions[0].key,
-            rtlValue: rtlDefinitions.map(d => d.value) as Array<string | number>,
+            rtlValue: rtlDefinitions.map(d => d.value) as unknown as Array<string | number>,
           }
         : undefined;
 
@@ -262,7 +262,7 @@ export function resolveStyleRules(
         property,
         support,
         container,
-        value: value as Array<string | number>,
+        value: value as unknown as Array<string | number>,
         ...rtlCompileOptions,
       });
 

packages/eslint-plugin/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@typescript-eslint/utils": "^5.47.0",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

packages/eslint-plugin/src/rules/no-shorthands.ts

@@ -12,6 +12,7 @@ export const RULE_NAME = 'no-shorthands';
 const UNSUPPORTED_CSS_PROPERTIES: Record<keyof CSS.StandardShorthandProperties, true> = {
   all: true,
   animation: true,
+  animationRange: true,
   background: true,
   backgroundPosition: true,
   border: true,
@@ -76,6 +77,7 @@ const UNSUPPORTED_CSS_PROPERTIES: Record<keyof CSS.StandardShorthandProperties,
   textDecoration: true,
   textEmphasis: true,
   transition: true,
+  viewTimeline: true,
 };
 
 const pxSplitter = buildShorthandSplitter({ numberUnit: 'px' });

packages/style-types/package.json

@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "csstype": "^3.1.2"
+    "csstype": "^3.1.3"
   },
   "typesVersions": {
     "<4.4": {

packages/style-types/src/unsupported-properties.ts

@@ -10,6 +10,8 @@ export interface GriffelStylesUnsupportedCSSProperties extends Record<keyof CSS.
   all: never;
   /** @deprecated Use corresponding longhand properties such as `animationName` and `animationDuration` instead. */
   animation: never;
+  /** @deprecated Use corresponding longhand properties such as `animationRangeStart` and `animationRangeEnd` instead. */
+  animationRange: never;
   /** @deprecated Use corresponding longhand properties such as `backgroundImage` and `backgroundSize` instead. */
   background: never;
   /** @deprecated Use corresponding longhand properties `backgroundPositionX` and `backgroundPositionY` instead. */
@@ -138,4 +140,6 @@ export interface GriffelStylesUnsupportedCSSProperties extends Record<keyof CSS.
   textEmphasis: never;
   /** @deprecated Use `shorthands.transition()` instead. */
   transition: never;
+  /** @deprecated Use corresponding longhand properties such as `viewTimelineName` and `viewTimelineAxis` instead. */
+  viewTimeline: never;
 }

yarn.lock

@@ -11189,10 +11189,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.0.5, csstype@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "csstype@npm:3.1.2"
-  checksum: 1f39c541e9acd9562996d88bc9fb62d1cb234786ef11ed275567d4b2bd82e1ceacde25debc8de3d3b4871ae02c2933fa02614004c97190711caebad6347debc2
+"csstype@npm:^3.0.2, csstype@npm:^3.0.5, csstype@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: f593cce41ff5ade23f44e77521e3a1bcc2c64107041e1bf6c3c32adc5187d0d60983292fda326154d20b01079e24931aa5b08e4467cc488b60bb1e7f6d478ade
   languageName: node
   linkType: hard
 
@@ -14882,7 +14882,7 @@ __metadata:
     browserslist: "npm:^4.19.1"
     classnames: "npm:2.3.2"
     css-loader: "npm:^6.4.0"
-    csstype: "npm:^3.1.2"
+    csstype: "npm:^3.1.3"
     d3-scale-chromatic: "npm:^3.0.0"
     doctoc: "npm:2.2.1"
     enhanced-resolve: "npm:^5.8.2"