Add position/grid style props + looser return value (#36744)

types/styled-system__css/index.d.ts

@@ -39,6 +39,11 @@ export interface CSSProperties extends CSS.StandardProperties<number | string>,
  */
 export type CSSPseudoSelectorProps<Properties> = { [Key in CSS.SimplePseudos]?: ResponsiveStyleProps<Properties> };
 
+/**
+ * CSS as POJO that is compatible with CSS-in-JS libaries.
+ */
+export type CSSObject = CSS.PropertiesFallback<number | string> & { [K in CSS.Pseudos]?: CSSObject };
+
 /**
  * Color system properties.
  * See: https://styled-system.com/api/#color
@@ -130,7 +135,6 @@ export type ShadowProps = ResponsiveStyleProps<{
  * See: https://styled-system.com/api/#layout
  */
 export type LayoutProps = ResponsiveStyleProps<{
-    zIndex: CSS.ZIndexProperty;
     width: CSS.WidthProperty<number>;
     minWidth: CSS.MinWidthProperty<number>;
     maxWidth: CSS.MaxWidthProperty<number>;
@@ -139,11 +143,43 @@ export type LayoutProps = ResponsiveStyleProps<{
     maxHeight: CSS.MaxHeightProperty<number>;
 }>;
 
+/**
+ * Position system properties.
+ * See: https://styled-system.com/api/#position
+ */
+export type PositionProps = ResponsiveStyleProps<{
+    zIndex: CSS.ZIndexProperty | string;
+    top: CSS.TopProperty<number>;
+    right: CSS.RightProperty<number>;
+    bottom: CSS.BottomProperty<number>;
+    left: CSS.LeftProperty<number>;
+}>;
+
+/**
+ * Grid system properties.
+ * See: https://styled-system.com/api/#grid-layout
+ */
+export type GridProps = ResponsiveStyleProps<{
+    gap: CSS.GapProperty<number>;
+    gridGap: CSS.GapProperty<number>;
+    columnGap: CSS.ColumnGapProperty<number>;
+    gridColumnGap: CSS.ColumnGapProperty<number>;
+    rowGap: CSS.RowGapProperty<number>;
+    gridRowGap: CSS.RowGapProperty<number>;
+}>;
+
 /**
  * All supported style props.
  * See: https://styled-system.com/css#theme-keys
  */
-export type StyleProps = ColorProps & SpaceProps & TypographyProps & BorderProps & ShadowProps & LayoutProps;
+export type StyleProps = ColorProps &
+    SpaceProps &
+    TypographyProps &
+    BorderProps &
+    ShadowProps &
+    LayoutProps &
+    PositionProps &
+    GridProps;
 
 /**
  * Helper to define theme values.
@@ -198,7 +234,7 @@ export type SystemStyleObject = StyleObject & CSSPseudoSelectorProps<StyleObject
  */
 export function css(
     input?: SystemStyleObject & { variant?: string } | ((theme: Theme) => SystemStyleObject & { variant?: string })
-): (props?: Theme | { theme: Theme }) => CSS.Properties;
+): (props?: Theme | { theme: Theme }) => CSSObject;
 export default css;
 
 /**

types/styled-system__css/styled-system__css-tests.ts

@@ -1,14 +1,31 @@
-import css, { Theme, TypographyProps, BorderProps } from '@styled-system/css';
+import css, { Theme, TypographyProps, BorderProps, StyleProps } from '@styled-system/css';
 
-export const typography: TypographyProps = {
+const typography: TypographyProps = {
     fontFamily: 'sans-serif',
     fontSize: [1, 2, 3],
 };
 
-export const border: BorderProps = {
+const border: BorderProps = {
     border: [1, 5],
 };
 
+const spacing: StyleProps = {
+    m: 'normal',
+    p: 5,
+
+    top: 0,
+    right: 1,
+    bottom: 4,
+    left: 6,
+
+    gridGap: 'gutter',
+    gridColumnGap: 'gutter',
+    gridRowGap: 'gutter',
+    gap: 'gutter',
+    columnGap: 'gutter',
+    rowGap: 0,
+};
+
 const theme: Theme = {
     colors: {
         primary: 'tomato',