added scales

flodlc · Nov 20, 2022 · 666d0bf · 666d0bf
1 parent 09e5c03
commit 666d0bf
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -6,7 +6,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "packageManager": "yarn@3.2.1",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "scripts": {
     "dev": "run-p --continue-on-error watch:source watch:types",
     "watch:types": "npx tsc -w",
@@ -18,7 +18,6 @@
   },
   "dependencies": {
     "@emotion/react": "^11.10.4",
-    "lodash.get": "^4.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "stable-hash": "^0.0.2"
@@ -28,7 +27,6 @@
     "@emotion/babel-plugin": "^11.10.2",
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@types/jest": "^29.0.0",
-    "@types/lodash.get": "^4.4.7",
     "@types/node": "^18.7.16",
     "@types/react": "^18.0.19",
     "esbuild-jest": "^0.5.0",

diff --git a/packages/lib/src/css.ts b/packages/lib/src/css.ts
@@ -1,5 +1,4 @@
 import * as CSS from 'csstype';
-import get from 'lodash.get';
 
 import { Theme } from './index';
 import { ALIASES, TRANSFORMS } from './rules';
@@ -112,7 +111,6 @@ export function css({
             };
           }, acc);
         }
-        // if (!value) return acc;
 
         if (typeof value === 'object') {
           return { ...acc, [resolvedKey]: computeProp(value) };
@@ -131,33 +129,28 @@ export function css({
       }, {} as CSS);
     }
 
-    function computeValue<K extends keyof InputStyle>({
-      key,
-      value,
-    }: {
-      key: K;
-      value: string | boolean | number;
-    }) {
+    function computeValue<
+      K extends keyof typeof theme.scales | string | number
+    >({ key, value }: { key: K; value: string | boolean | number }) {
+      const scale: typeof theme.scales[keyof typeof theme.scales] | undefined =
+        //@ts-ignore
+        key in theme.scales ? theme.scales[key] : undefined;
+
       const themedValue =
         typeof value === 'string' || typeof value === 'number'
-          ? get(
-              theme,
-              `${
-                key in theme.scales
-                  ? `${theme.scales[key as keyof typeof theme.scales]}.`
-                  : ''
-              }${value}`,
-              value
-            )
+          ? scale
+            ? //@ts-ignore
+              theme[scale as keyof typeof theme][value] ?? value
+            : value
           : value;
 
-      const scale =
+      const transform =
         key in TRANSFORMS
           ? TRANSFORMS[key as keyof typeof TRANSFORMS]
           : undefined;
 
-      return scale
-        ? scale(themedValue as never)
+      return transform
+        ? transform(themedValue as never)
         : (themedValue as CSSProperties[keyof CSSProperties] | CSSProperties);
     }
   };

diff --git a/packages/lib/src/rules.ts b/packages/lib/src/rules.ts
@@ -22,6 +22,10 @@ export const THEME_KEYS = {
   backgroundColor: 'colors',
   background: 'colors',
   borderColor: 'colors',
+  borderTopColor: 'colors',
+  borderBottomColor: 'colors',
+  borderLeftColor: 'colors',
+  borderRightColor: 'colors',
   fontFamily: 'fonts',
   fontWeight: 'fontWeights',
   lineHeight: 'lineHeights',