Update cssmap types (#1499)

liamqma · web-flow · commit c5377cdbd0df · 2023-08-31T11:30:01.000+10:00
* Update cssmap types

* Replace readonly

* Add changeset
diff --git a/.changeset/six-apples-invite.md b/.changeset/six-apples-invite.md
@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Ensure that the return types of `css` and `cssMap` are readonly.
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "flow-bin": "^0.183.0",
-    "flowgen": "^1.20.1",
+    "flowgen": "^1.21.0",
     "husky": "^4.3.8",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
diff --git a/packages/jest/src/index.js.flow b/packages/jest/src/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { MatchFilter } from './types';
diff --git a/packages/jest/src/matchers.js.flow b/packages/jest/src/matchers.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for matchers
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { MatchFilter } from './types';
diff --git a/packages/jest/src/types.js.flow b/packages/jest/src/types.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { Pseudos } from 'csstype';
diff --git a/packages/react/src/class-names/index.js.flow b/packages/react/src/class-names/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { Node } from 'react';
diff --git a/packages/react/src/css-map/index.js.flow b/packages/react/src/css-map/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { CSSProps, CssObject } from '../types';
@@ -20,6 +20,7 @@ import type { CSSProps, CssObject } from '../types';
  * <Component borderStyle="solid" />
  * ```
  */
+declare type returnType<T: string, P> = { [key: T]: CSSProps<P> };
 declare export default function cssMap<T: string, TProps>(_styles: {
   [key: T]: CssObject<TProps> | CssObject<TProps>[],
-}): { [key: T]: CSSProps<TProps> };
+}): $ReadOnly<returnType<T, TProps>>;
diff --git a/packages/react/src/css-map/index.ts b/packages/react/src/css-map/index.ts
@@ -18,8 +18,10 @@ import { createSetupError } from '../utils/error';
  * <Component borderStyle="solid" />
  * ```
  */
+type returnType<T extends string, P> = Record<T, CSSProps<P>>;
+
 export default function cssMap<T extends string, TProps = unknown>(
   _styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>
-): Record<T, CSSProps<TProps>> {
+): Readonly<returnType<T, TProps>> {
   throw createSetupError();
 }
diff --git a/packages/react/src/css/index.js.flow b/packages/react/src/css/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { CSSProps, CssObject, CssFunction } from '../types';
diff --git a/packages/react/src/index.js.flow b/packages/react/src/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { CssFunction, CSSProps, CssType } from './types';
diff --git a/packages/react/src/keyframes/index.js.flow b/packages/react/src/keyframes/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
diff --git a/packages/react/src/runtime.js.flow b/packages/react/src/runtime.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index';
diff --git a/packages/react/src/runtime/ac.js.flow b/packages/react/src/runtime/ac.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ac
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**
diff --git a/packages/react/src/runtime/ax.js.flow b/packages/react/src/runtime/ax.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**
diff --git a/packages/react/src/runtime/cache.js.flow b/packages/react/src/runtime/cache.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**
diff --git a/packages/react/src/runtime/css-custom-property.js.flow b/packages/react/src/runtime/css-custom-property.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for css-custom-property
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**
diff --git a/packages/react/src/runtime/dev-warnings.js.flow b/packages/react/src/runtime/dev-warnings.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for dev-warnings
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export var analyzeCssInDev: (sheet: string) => void;
diff --git a/packages/react/src/runtime/index.js.flow b/packages/react/src/runtime/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export { default as CS } from './style';
diff --git a/packages/react/src/runtime/is-server-environment.js.flow b/packages/react/src/runtime/is-server-environment.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for is-server-environment
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**
diff --git a/packages/react/src/runtime/sheet.js.flow b/packages/react/src/runtime/sheet.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for sheet
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { Bucket, StyleSheetOpts } from './types';
diff --git a/packages/react/src/runtime/style-cache.js.flow b/packages/react/src/runtime/style-cache.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style-cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { ProviderComponent, UseCacheHook } from './types';
diff --git a/packages/react/src/runtime/style.js.flow b/packages/react/src/runtime/style.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { StyleSheetOpts } from './types';
diff --git a/packages/react/src/runtime/types.js.flow b/packages/react/src/runtime/types.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 export interface StyleSheetOpts {
diff --git a/packages/react/src/styled/index.js.flow b/packages/react/src/styled/index.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { ComponentType } from 'react';
diff --git a/packages/react/src/types.js.flow b/packages/react/src/types.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -19,11 +19,11 @@ export type CssType<TProps> = CssObject<TProps> | FunctionInterpolation<TProps>
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export type CssObject<TProps> = {
+export type CSSProps<TProps> = $ReadOnly<CSS.Properties<CssFunction<TProps>>>;
+export type CssObject<TProps> = $ReadOnly<{
   ...CSSProps<TProps>,
   [key: string]: CssFunction<TProps>,
-};
+}>;
 export type CssFunction<TProps = mixed> =
   | CssType<TProps>
   | BasicTemplateInterpolations
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -21,11 +21,11 @@ export type CssType<TProps> =
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CSSProps<TProps> = Readonly<CSS.Properties<CssFunction<TProps>>>;
 
-export type CssObject<TProps> = {
+export type CssObject<TProps> = Readonly<{
   [key: string]: CssFunction<TProps>;
-};
+}>;
 
 // CSS inside of a CSS expression
 export type CssFunction<TProps = unknown> =
diff --git a/packages/react/src/utils/error.js.flow b/packages/react/src/utils/error.js.flow
@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for error
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export var createSetupError: () => Error;
diff --git a/scripts/flow-types.sh b/scripts/flow-types.sh
@@ -46,6 +46,9 @@ generate() {
     # Use readonly array to handle flow strict mode
     sed -i.bak -E 's/css: CssObject<TProps> \| CssObject<TProps>\[\],/css: CssObject<TProps> \| \$ReadOnlyArray<CssObject<TProps>>,/g' "$file" && rm "$file.bak"
 
+    # Replace Readonly with $ReadOnly
+    sed -i.bak -E 's/Readonly</$ReadOnly</g' "$file" && rm "$file.bak"
+
     # Rename JSX.IntrinsicElements to existing flow type
     sed -i.bak -E 's/JSX.IntrinsicElements/$JSXIntrinsics/g' "$file" && rm "$file.bak"
 
diff --git a/yarn.lock b/yarn.lock
@@ -8965,10 +8965,10 @@ flow-parser@0.*:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.149.0.tgz#6e5749ad832ba211968429accdb6a3858706e4f8"
   integrity sha512-ruUVkZuM9oFQjhSsLO/OJYRYpGnuXJpTnIZmgzna6DyLFb3CLpeO27oJbWyeXaa830hmKf0JRzpcdFsFS8lmpg==
 
-flowgen@^1.20.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/flowgen/-/flowgen-1.20.1.tgz#336871d59a36980fbe2c3de553bd558f06a46e24"
-  integrity sha512-Wus3KAhsOF7CiZGkBKZawf0AJXe06Wot6UGQt7h9QS6MBtBkFgG30wTAgpy1byA3FKYb059vO341XtN8LUhenQ==
+flowgen@^1.21.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/flowgen/-/flowgen-1.21.0.tgz#f7ecb693892c4bd069492dbf77db561bbb451aa9"
+  integrity sha512-pFNFFyMLRmW6njhOIm5TrbGUDTv64aujmys2KrkRE2NYD8sXwJUyicQRwU5SPRBRJnFSD/FNlnHo2NnHI5eJSw==
   dependencies:
     "@babel/code-frame" "^7.16.7"
     "@babel/highlight" "^7.16.7"
