Selector typing fix

packages/css-in-js/package.json

@@ -28,7 +28,8 @@
     "src"
   ],
   "dependencies": {
-    "@compiled/style": "0.2.14"
+    "@compiled/style": "0.2.14",
+    "csstype": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.12.0"

packages/css-in-js/src/class-names/__tests__/index.test.tsx

@@ -30,6 +30,52 @@ describe('class names component', () => {
     expect(getByText('hello world')).toHaveCompiledCss('font-size', '13px');
   });
 
+  it('should create css from template literal', () => {
+    const fontSize = 12;
+    const { getByText } = render(
+      <ClassNames>
+        {({ css, style }) => (
+          <div
+            style={style}
+            className={css`
+              font-size: ${fontSize}px;
+            `}>
+            hello world
+          </div>
+        )}
+      </ClassNames>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
+  });
+
+  it('should not type error with nested selectors', () => {
+    <ClassNames>
+      {({ css }) => (
+        <div
+          className={css({
+            color: 'currentColor',
+            textDecoration: 'none',
+            position: 'relative',
+            ':before': {
+              opacity: 0,
+              content: '⚓',
+              position: 'absolute',
+              left: '-5rem',
+              fontSize: '3rem',
+            },
+            ':hover': {
+              ':before': {
+                opacity: 1,
+              },
+            },
+          })}>
+          hello world
+        </div>
+      )}
+    </ClassNames>;
+  });
+
   it('should create css from string literal', () => {
     const { getByText } = render(
       <ClassNames>

packages/css-in-js/src/class-names/index.tsx

@@ -1,17 +1,12 @@
-import { ReactNode, CSSProperties } from 'react';
+import { ReactNode } from 'react';
 import { createSetupError } from '../utils/error';
-
-export type CSSFunction = (css: ObjectLiteralCSS) => string;
-
-export type ObjectLiteralCSS<TExtraProps = CSSProperties> =
-  | TemplateStringsArray
-  | CSSProperties
-  | string
-  | (CSSProperties | TemplateStringsArray | string)[]
-  | { [key: string]: TExtraProps | CSSProperties };
+import { CssFunction, TemplateInterpolations } from '../types';
 
 export interface ClassNamesProps {
-  children: (opts: { css: CSSFunction; style: { [key: string]: string } }) => ReactNode;
+  children: (opts: {
+    css: (css: CssFunction | CssFunction[], ...interpoltations: TemplateInterpolations[]) => string;
+    style: { [key: string]: string };
+  }) => ReactNode;
 }
 
 export function ClassNames(_: ClassNamesProps): JSX.Element {

packages/css-in-js/src/index.tsx

@@ -1,21 +1,18 @@
-import { CSSProperties } from 'react';
-
 export { default as Style } from '@compiled/style';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
-
-export type CSSProps = CSSProperties;
+import { CssFunction } from './types';
 
 declare module 'react' {
   interface DOMAttributes<T> {
-    css?: CSSProps | { [key: string]: CSSProps } | string | (string | CSSProps)[];
+    css?: CssFunction | CssFunction[];
   }
 }
 
 declare global {
   namespace JSX {
     interface IntrinsicAttributes {
-      css?: CSSProps;
+      css?: CssFunction | CssFunction[];
     }
   }
 }

packages/css-in-js/src/jsx/__tests__/index.test.tsx

@@ -9,6 +9,20 @@ describe('css prop', () => {
     expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
   });
 
+  it('should use string literal with identifier', () => {
+    const fontSize = 12;
+    const { getByText } = render(
+      <div
+        css={`
+          font-size: ${fontSize}px;
+        `}>
+        hello world
+      </div>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
+  });
+
   it('should create css from string literal', () => {
     const { getByText } = render(
       <div
@@ -22,6 +36,29 @@ describe('css prop', () => {
     expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
   });
 
+  it('should not type error with nested selectors', () => {
+    <div
+      css={{
+        color: 'currentColor',
+        textDecoration: 'none',
+        position: 'relative',
+        ':before': {
+          opacity: 0,
+          content: '⚓',
+          position: 'absolute',
+          left: '-5rem',
+          fontSize: '3rem',
+        },
+        ':hover': {
+          ':before': {
+            opacity: 1,
+          },
+        },
+      }}>
+      hello world
+    </div>;
+  });
+
   it('should create css from string', () => {
     const { getByText } = render(<div css="font-size: 12px">hello world</div>);
 

packages/css-in-js/src/styled/__tests__/index.test.tsx

@@ -106,6 +106,49 @@ describe('styled component', () => {
     expect(getByText('hello world').getAttribute('href')).toEqual('#');
   });
 
+  it('should not type error with nested selectors', () => {
+    styled.div({
+      color: 'currentColor',
+      textDecoration: 'none',
+      position: 'relative',
+      ':before': {
+        opacity: 0,
+        content: '⚓',
+        position: 'absolute',
+        left: '-5rem',
+        fontSize: '3rem',
+      },
+      ':hover': {
+        ':before': {
+          opacity: 1,
+        },
+      },
+    });
+  });
+
+  it('should not type error with nested arrow funcs', () => {
+    styled.div<{ fontSize: string }>({
+      color: 'currentColor',
+      textDecoration: 'none',
+      position: 'relative',
+      fontSize: props => props.fontSize,
+      ':before': {
+        fontSize: props => props.fontSize,
+        opacity: 0,
+        content: '⚓',
+        position: 'absolute',
+        left: '-5rem',
+      },
+      ':hover': {
+        fontSize: props => props.fontSize,
+        ':before': {
+          fontSize: props => props.fontSize,
+          opacity: 1,
+        },
+      },
+    });
+  });
+
   it('should forward ref', () => {
     let ref: HTMLAnchorElement | null = null;
     const Link = styled.a``;
@@ -162,6 +205,25 @@ describe('styled component', () => {
     expect(getByText('Hello world').getAttribute('href')).toEqual('/world');
   });
 
+  it('should compose from array', () => {
+    const extra = {
+      color: 'blue',
+    };
+    const StyledLink = styled.div([
+      {
+        fontSize: 12,
+      },
+      extra,
+    ]);
+
+    const { getByText } = render(<StyledLink>Hello world</StyledLink>);
+
+    expect(getByText('Hello world')).toHaveCompiledCss({
+      color: 'blue',
+      'font-size': '12px',
+    });
+  });
+
   it('should create css from string', () => {
     const StyledDiv = styled.div('font-size: 15px;');
 

packages/css-in-js/src/styled/index.tsx

@@ -1,18 +1,15 @@
-import { CSSProperties, ComponentType } from 'react';
+import { ComponentType } from 'react';
 import { createSetupError } from '../utils/error';
+import { CssFunction, TemplateInterpolations } from '../types';
 
-/**
- * Typing for the CSS object.
- */
-export type CssObject<TProps> =
-  | CSSProperties
-  | string
-  | Record<string, CSSProperties | ((props: TProps) => string | number) | string | number>;
+export interface FunctionIterpolation<TProps> {
+  (props: TProps): string | number;
+}
 
 /**
- * Typing for the interpolations.
+ * Typing for the CSS object.
  */
-export type Interpolations<TProps> = string | number | ((props: TProps) => string | number);
+export type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
 
 /**
  * Extra props added to the output Styled Component.
@@ -29,16 +26,16 @@ export interface StyledProps {
 export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
   <TProps extends {}>(
     // Allows either string or object (`` or ({}))
-    css: CssObject<TProps> | CssObject<TProps>[] | TemplateStringsArray,
-    ...interpoltations: Interpolations<TProps>[]
+    css: CssObject<TProps> | CssObject<TProps>[],
+    ...interpoltations: (TemplateInterpolations | FunctionIterpolation<TProps>)[]
   ): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
 }
 
 export interface StyledFunctionFromComponent<TInheritedProps extends {}> {
   <TProps extends {}>(
     // Allows either string or object (`` or ({}))
     css: CssObject<TProps> | TemplateStringsArray,
-    ...interpoltations: Interpolations<TProps>[]
+    ...interpoltations: (TemplateInterpolations | FunctionIterpolation<TProps>)[]
   ): React.ComponentType<TProps & StyledProps & TInheritedProps>;
 }
 

packages/css-in-js/src/types.tsx

@@ -1,4 +1,21 @@
-export type Unused = any;
+import * as CSS from 'csstype';
+
+/**
+ * Typing for the interpolations.
+ */
+export type TemplateInterpolations = string | number;
+
+export type CSSProps<TValue = void> = CSS.Properties<string | number | TValue>;
+
+export type AnyKeyCssProps<TValue> = {
+  [key: string]: AnyKeyCssProps<TValue> | CSSProps<TValue> | TValue;
+};
+
+export type CssFunction<TValue = void> =
+  | CSSProps<TValue>
+  | AnyKeyCssProps<TValue>
+  | TemplateStringsArray
+  | string;
 
 declare global {
   namespace jest {

yarn.lock

@@ -1868,13 +1868,14 @@
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
 
-"@types/styled-components@4.1.8", "@types/styled-components@^5.0.1":
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.8.tgz#15c8a53bb4b9066e528fafb7558963dee5690ae0"
-  integrity sha512-NrG0wmB9Rafy5i00GFxUM/uEge148bX2QPr+Q/MI2fXrew6WOp1hN2A3YEG0AeT45z47CMdJ3BEffPsdQCWayA==
+"@types/styled-components@^5.0.1":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6"
+  integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ==
   dependencies:
-    "@types/node" "*"
+    "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
+    "@types/react-native" "*"
     csstype "^2.2.0"
 
 "@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
@@ -3822,6 +3823,11 @@ csstype@^2.2.0, csstype@^2.5.7:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
 
+csstype@^2.6.10:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"