improve eslint and code

.eslintrc.json

@@ -25,7 +25,7 @@
     "@typescript-eslint/ban-ts-comment": "off",
     "react/prop-types": "off",
     "(@typescript-eslint/no-empty-interface": "off",
-    "no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
     "prefer-const": "error"
   },
   "settings": {

packages/lib/src/SX.ts

@@ -1,6 +1,6 @@
 import { InputStyle } from './css';
-import { Theme } from './theme';
 
+// import { Theme } from './theme';
 // type StyleObject = InputStyle | ((theme: Theme) => ThemeUICSSObject);
 
 export type SX = InputStyle | (SX | undefined)[];

packages/lib/src/css.ts

@@ -1,24 +1,7 @@
 import * as CSS from 'csstype';
 import get from 'lodash.get';
 
-import { SCALES } from './rules';
-
-const ALIASES = {
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mt: 'marginTop',
-  mb: 'marginBottom',
-  m: 'margin',
-  my: 'marginY',
-  mx: 'marginX',
-  pl: 'paddingLeft',
-  pr: 'paddingRight',
-  pt: 'paddingTop',
-  pb: 'paddingBottom',
-  p: 'padding',
-  py: 'paddingY',
-  px: 'paddingX',
-} as const;
+import { ALIASES, SCALES } from './rules';
 
 type CSSProperties = CSS.Properties<number, string>;
 
@@ -62,7 +45,6 @@ type CSS =
 export function css<
   R extends Record<
     string,
-    // eslint-disable-next-line no-unused-vars
     { transform: (value: never) => string | number | boolean | CSSProperties }
   >
 >({
@@ -76,7 +58,6 @@ export function css<
   >;
   SCALES: R;
   breakpoints?: string[];
-  // eslint-disable-next-line no-unused-vars
 }): (sx: InputStyle) => CSSProperties {
   return (sx: InputStyle) => {
     return computeProp(sx);
@@ -86,7 +67,6 @@ export function css<
         const resolvedKey =
           key in ALIASES ? ALIASES[key as keyof typeof ALIASES] : key;
         const value = style[key as keyof InputStyle];
-        // console.log(sx, resolvedKey, key, value);
         if (!value) return acc;
 
         if (Array.isArray(value)) {

packages/lib/src/rules.ts

@@ -37,3 +37,20 @@ export const SCALES = {
   marginTop: { transform: marginTransform },
   marginBottom: { transform: marginTransform },
 };
+
+export const ALIASES = {
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mt: 'marginTop',
+  mb: 'marginBottom',
+  m: 'margin',
+  my: 'marginY',
+  mx: 'marginX',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  pt: 'paddingTop',
+  pb: 'paddingBottom',
+  p: 'padding',
+  py: 'paddingY',
+  px: 'paddingX',
+} as const;