fix more type issues

system-props · Mar 30, 2021 · 6ff5574 · 6ff5574
1 parent 05d4ed5
commit 6ff5574
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "module": "dist/system-props.esm.js",
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.1",
-    "csstype": "^3.0.5",
+    "csstype": "^3.0.7",
     "eslint-plugin-no-only-tests": "^2.4.0",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.3.0",

diff --git a/src/core/createCss.ts b/src/core/createCss.ts
@@ -55,15 +55,17 @@ export const createCss = (
 
       // Nested selectors (pseudo selectors, media query)
       if (x && typeof x === 'object') {
+        const nestedStyles = x as CSSObject<typeof tokenPrefix>;
+
         // If key is a mediaQueries token value
         const _get = memoizedGet[tokenPrefix];
         const maybeQuery = _get(theme.mediaQueries, key);
         if (typeof maybeQuery !== 'undefined') {
-          result[maybeQuery] = css(x)({ theme });
+          result[maybeQuery] = css(nestedStyles)({ theme });
           continue;
         }
 
-        result[key] = css(x)({ theme });
+        result[key] = css(nestedStyles)({ theme });
         continue;
       }
 

diff --git a/src/css-prop.ts b/src/css-prop.ts
@@ -7,7 +7,11 @@ import {
   TokenScales,
 } from './types';
 
-interface PropertiesToScales extends Record<keyof CSS.Properties, TokenScales> {
+// Autocomplete string values, also allow raw numbers which
+// most libraries will convert to pixel values
+export type CSSProperties = CSS.Properties<(string & {}) | number>;
+
+interface PropertiesToScales extends Record<keyof CSSProperties, TokenScales> {
   color: 'colors';
   backgroundColor: 'colors';
   fill: 'colors';
@@ -121,36 +125,51 @@ interface AliasToProperties {
   marginY: 'marginTop';
 }
 
-export type CSSObject<
+type InternalCss<
   PrefixOption extends PrefixOptions = PrefixDefault,
   TTheme extends Theme = Theme
 > = {
   // All regular CSS Property Keys to theme values & csstype
-  [K in keyof CSS.Properties]?:
+  [K in keyof CSSProperties]?:
     | (PropertiesToScales[K] extends TokenScales
         ? PrefixToken<PropertiesToScales[K], PrefixOption, TTheme>
         : never)
-    | CSS.Properties[K];
+    | CSSProperties[K];
 } &
   // Alias properties to theme values & csstype
   {
     [K in keyof AliasPropertiesToScales]?:
       | (AliasPropertiesToScales[K] extends TokenScales
           ? PrefixToken<AliasPropertiesToScales[K], PrefixOption, TTheme>
           : never)
-      | CSS.Properties[AliasToProperties[K]];
-  } &
+      | CSSProperties[AliasToProperties[K]];
+  } & {
+    [k: string]:
+      | InternalCss<PrefixOption, TTheme>
+      | string
+      | undefined
+      | number;
+  };
+
+export type CSSObject<
+  PrefixOption extends PrefixOptions = PrefixDefault,
+  TTheme extends Theme = Theme
+> = InternalCss<PrefixOption, TTheme> &
   // Pseudo Selectors
   {
-    [K in CSS.Pseudos]?: CSSObject<PrefixOption, TTheme>;
+    [K in CSS.Pseudos]?:
+      | CSSObject<PrefixOption, TTheme>
+      | string
+      | number
+      | undefined;
   } &
   // Theme Media Queries
   {
-    [K in PrefixToken<'mediaQueries', PrefixOption, TTheme>]?: CSSObject<
-      PrefixOption,
-      TTheme
-    >;
+    [K in PrefixToken<'mediaQueries', PrefixOption, TTheme>]?:
+      | CSSObject<PrefixOption, TTheme>
+      | string
+      | number
+      | undefined;
   } & {
-    // Any unknown selectors or properties
     [k: string]: CSSObject<PrefixOption, TTheme> | string | number | undefined;
   };
diff --git a/yarn.lock b/yarn.lock
@@ -2373,10 +2373,10 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
-  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+csstype@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
+  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
 
 damerau-levenshtein@^1.0.6:
   version "1.0.6"