system-props - npm Package Compare versions

Comparing version 0.20.0 to 0.21.0

dist/core/createCss.d.ts

@@ -1,10 +0,10 @@
-import { PropConfigCollection, Theme, PrefixOptions } from '../types';
-import { CSSObject as SystemPropsCSSObject } from '../css-prop';
-import { CSSObject } from '../css-types';
+import { PropConfigCollection } from './types';
+import { Theme, PrefixOptions } from '../types/system-props';
+import { CSSObject } from '../types/css-prop';
 interface PropsWithTheme {
     theme: Theme;
 }
-declare type CSSFunctionArgs<T extends PrefixOptions> = SystemPropsCSSObject<T> | ((theme: Theme) => SystemPropsCSSObject<T>);
+export declare type CSSFunctionArgs<T extends PrefixOptions> = CSSObject<T> | ((theme: Theme) => CSSObject<T>);
 export interface CSSFunction<T extends PrefixOptions> {
-    (args?: CSSFunctionArgs<T>): (props: PropsWithTheme) => CSSObject | undefined;
+    (args?: CSSFunctionArgs<T>): (props: PropsWithTheme) => CSSObject;
 }
@@ -11,0 +11,0 @@ export declare const createCss: (propConfig: PropConfigCollection, options?: {

dist/core/createStyleFunction.d.ts

@@ -1,2 +0,2 @@
-import { StyleFunction } from '../types';
+import { StyleFunction } from './types';
 export declare const createStyleFunction: StyleFunction;

dist/core/createSystem.d.ts

@@ -1,2 +0,2 @@
-import { SystemConfig, PropConfigCollection, Cache } from '../types';
+import { SystemConfig, PropConfigCollection, Cache } from './types';
 export interface Parser {
@@ -3,0 +3,0 @@ (...args: any[]): any;

dist/core/get.d.ts

@@ -1,2 +0,2 @@
-import { Get } from '../types';
+import { Get } from './types';
 /**
@@ -3,0 +3,0 @@ * Generic "get" function

dist/core/index.d.ts

 export { get } from './get';
 export { createSystem } from './createSystem';
-export { createCss } from './createCss';
+export { createCss, CSSFunction, CSSFunctionArgs } from './createCss';

dist/core/parseResponsive.d.ts

@@ -1,2 +0,3 @@
-import { Cache, SystemConfig, Props, Theme } from '../types';
+import { Cache, SystemConfig, Props } from './types';
+import { Theme } from '../types/system-props';
 export declare const parseResponsiveStyle: ({ cache, systemConfig, scale, propValue, props, }: {
@@ -3,0 +4,0 @@ cache: Cache;

dist/index.d.ts

@@ -1,3 +0,3 @@
-export declare const css: import("./core/createCss").CSSFunction<import("./types").PrefixOptions>;
-export { createSystem, createCss } from './core';
+export declare const css: import("./core").CSSFunction<import("./types/system-props").PrefixOptions>;
+export { createSystem, createCss, CSSFunction, CSSFunctionArgs } from './core';
 export * from './props';
@@ -7,3 +7,4 @@ export * from './pseudos';
 export * from './shouldForwardProp';
-export { SystemProp, ColorProps, PaddingProps, MarginProps, SpaceProps, BorderProps, TypographyProps, LayoutProps, ShadowProps, PositionProps, GridItemProps, GridContainerProps, GridProps, FlexItemProps, FlexContainerProps, FlexboxProps, TransitionProps, AllSystemProps, PropConfigCollection, Theme, } from './types';
-export { CSSObject } from './css-prop';
+export { SystemProp, ColorProps, PaddingProps, MarginProps, SpaceProps, BorderProps, TypographyProps, LayoutProps, ShadowProps, PositionProps, GridItemProps, GridContainerProps, GridProps, FlexItemProps, FlexContainerProps, FlexboxProps, TransitionProps, AllSystemProps, Theme, } from './types/system-props';
+export { PropConfigCollection } from './core/types';
+export { CSSObject } from './types/css-prop';

dist/props/background/index.d.ts

@@ -1,3 +0,3 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const background: PropConfigCollection;
 export default background;

dist/props/border/borderShorthandTransform.d.ts

@@ -1,2 +0,2 @@
-import { Transform } from '../../types';
+import { Transform } from '../../core/types';
 export declare const borderShorthandTransform: Transform;

dist/props/border/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const border: PropConfigCollection;

dist/props/color/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const color: PropConfigCollection;

dist/props/flexbox/index.d.ts

@@ -1,7 +0,7 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const flexContainer: PropConfigCollection;
 export declare const flexItem: PropConfigCollection;
 export declare const flexbox: {
-    [x: string]: true | import("../../types").PropertyConfig;
+    [x: string]: true | import("../../core/types").PropertyConfig;
 };
 export default flexbox;

dist/props/grid/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const gridItem: PropConfigCollection;
@@ -3,0 +3,0 @@ export declare const gridContainer: PropConfigCollection;

dist/props/layout/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const layout: PropConfigCollection;

dist/props/position/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const position: PropConfigCollection;

dist/props/positiveOrNegative.d.ts

@@ -1,2 +0,2 @@
-import { Transform } from '../types';
+import { Transform } from '../core/types';
 export declare const positiveOrNegative: Transform;

dist/props/shadow/getShadow.d.ts

@@ -1,2 +0,2 @@
-import { Transform } from '../../types';
+import { Transform } from '../../core/types';
 export declare const getShadow: Transform;

dist/props/shadow/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const shadow: PropConfigCollection;

dist/props/space/index.d.ts

@@ -1,6 +0,6 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const margin: PropConfigCollection;
 export declare const padding: PropConfigCollection;
 export declare const space: {
-    [x: string]: true | import("../../types").PropertyConfig;
+    [x: string]: true | import("../../core/types").PropertyConfig;
 };

dist/props/styled-system-layout/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 import { Property } from 'csstype';
@@ -3,0 +3,0 @@ export declare const layout: PropConfigCollection;

dist/props/transition/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const transition: PropConfigCollection;

dist/props/typography/index.d.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 export declare const typography: PropConfigCollection;

package.json

 {
   "name": "system-props",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -11,18 +11,19 @@ "author": "Rogin Farrer",
   "repository": "github:system-props/system-props",
-  "module": "dist/system-props.esm.js",
+  "source": "src/index.ts",
+  "module": "dist/system-props.module.js",
+  "main": "dist/system-props.cjs",
+  "exports": "dist/system-props.modern.js",
+  "unpkg": "dist/system-props.umd.js",
+  "types": "dist/index.d.ts",
   "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.10",
     "csstype": "^3.0.7",
-    "eslint-plugin-no-only-tests": "^2.4.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "husky": "^4.3.0",
-    "np": "^6.5.0",
-    "prettier": "^2.3.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.0.1",
-    "typescript": "^4.1.0"
+    "jest": "^27.1.0",
+    "microbundle": "^0.13.3",
+    "np": "^7.5.0",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.3.0"
   },
   "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
   "files": [
@@ -33,15 +34,13 @@ "dist",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test",
-    "lint": "tsdx lint src",
-    "prepare": "tsdx build",
-    "format": "yarn lint --fix",
+    "watch": "microbundle watch",
+    "build": "microbundle",
+    "test": "jest",
+    "lint": "tsc --project tsconfig.json --noEmit",
+    "format": "prettier --write **/*.{js,ts,tsx,json}",
     "clean": "rm -rf node_modules example/node_modules dist",
     "release": "np"
   },
-  "peerDependencies": {},
   "prettier": {
@@ -55,8 +54,3 @@ "printWidth": 80,
     "registry": "https://registry.yarnpkg.com"
-  },
-  "resolutions": {
-    "**/typescript": "^4.1.0",
-    "**/@typescript-eslint/eslint-plugin": "^4.6.1",
-    "**/@typescript-eslint/parser": "^4.6.1"
   }
 }

src/__tests__/exports.test.ts

@@ -5,29 +5,53 @@ import * as AllExports from '..';
   expect(Object.keys(AllExports).sort()).toMatchInlineSnapshot(`
-    Array [
-      "background",
-      "border",
-      "color",
-      "createCss",
-      "createSystem",
-      "css",
-      "flexContainer",
-      "flexItem",
-      "flexbox",
-      "grid",
-      "gridContainer",
-      "gridItem",
-      "layout",
-      "margin",
-      "padding",
-      "position",
-      "propNames",
-      "pseudoSelectors",
-      "shadow",
-      "shouldForwardProp",
-      "space",
-      "styledSystemLayout",
-      "transition",
-      "typography",
-    ]
-  `);
+Array [
+  "AllSystemProps",
+  "BorderProps",
+  "CSSFunction",
+  "CSSFunctionArgs",
+  "CSSObject",
+  "ColorProps",
+  "FlexContainerProps",
+  "FlexItemProps",
+  "FlexboxProps",
+  "GridContainerProps",
+  "GridItemProps",
+  "GridProps",
+  "LayoutProps",
+  "MarginProps",
+  "PaddingProps",
+  "PositionProps",
+  "PropConfigCollection",
+  "ShadowProps",
+  "SpaceProps",
+  "SystemProp",
+  "Theme",
+  "TransitionProps",
+  "TypographyProps",
+  "background",
+  "border",
+  "color",
+  "createCss",
+  "createSystem",
+  "css",
+  "default",
+  "flexContainer",
+  "flexItem",
+  "flexbox",
+  "grid",
+  "gridContainer",
+  "gridItem",
+  "layout",
+  "margin",
+  "padding",
+  "position",
+  "propNames",
+  "pseudoSelectors",
+  "shadow",
+  "shouldForwardProp",
+  "space",
+  "styledSystemLayout",
+  "transition",
+  "typography",
+]
+`);
 });

src/core/createCss.ts

 import { get, memoizedGet } from './get';
-import {
-  PropConfigCollection,
-  Theme,
-  SystemConfig,
-  PrefixOptions,
-} from '../types';
-import { CSSObject as SystemPropsCSSObject } from '../css-prop';
+import { PropConfigCollection, SystemConfig } from './types';
+import { Theme, PrefixOptions } from '../types/system-props';
 import { merge } from './merge';
-import { CSSObject, CSSProperties } from '../css-types';
+import { CSSObject } from '../types/css-prop';
+import { CSSProperties } from '../types/css';
 import { createStyleFunction } from './createStyleFunction';
@@ -17,8 +13,8 @@
 
-type CSSFunctionArgs<T extends PrefixOptions> =
-  | SystemPropsCSSObject<T>
-  | ((theme: Theme) => SystemPropsCSSObject<T>);
+export type CSSFunctionArgs<T extends PrefixOptions> =
+  | CSSObject<T>
+  | ((theme: Theme) => CSSObject<T>);
 
 export interface CSSFunction<T extends PrefixOptions> {
-  (args?: CSSFunctionArgs<T>): (props: PropsWithTheme) => CSSObject | undefined;
+  (args?: CSSFunctionArgs<T>): (props: PropsWithTheme) => CSSObject;
 }
@@ -54,3 +50,3 @@
       if (typeof args === 'undefined') {
-        return;
+        return {};
       }
@@ -66,3 +62,3 @@
         if (x && typeof x === 'object') {
-          const nestedStyles = x as SystemPropsCSSObject<typeof tokenPrefix>;
+          const nestedStyles = x;
 
@@ -73,7 +69,11 @@ // If key is a mediaQueries token value
           if (typeof maybeQuery !== 'undefined') {
-            result[maybeQuery] = css(nestedStyles)({ theme });
+            Object.assign(result, {
+              [maybeQuery]: css(nestedStyles)({ theme }),
+            });
             continue;
           }
 
-          result[key] = css(nestedStyles)({ theme });
+          Object.assign(result, {
+            [key]: css(nestedStyles)({ theme }),
+          });
           continue;
@@ -86,3 +86,3 @@ }
         if (!systemConfig) {
-          result[key] = x;
+          Object.assign(result, { [key]: x });
           continue;
@@ -89,0 +89,0 @@ }

src/core/createStyleFunction.ts

@@ -8,3 +8,3 @@ import { memoizedGet } from './get';
   MaybeCSSProperty,
-} from '../types';
+} from './types';
 
@@ -11,0 +11,0 @@ const defaultTransform: Transform = ({ path, object, strict, get }) => {

src/core/createSystem.ts

@@ -5,3 +5,2 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';
 import {
-  SystemProp,
   SystemConfig,
@@ -12,3 +11,4 @@ PropConfigCollection,
   Cache,
-} from '../types';
+} from './types';
+import { SystemProp } from '../types/system-props';
 import { sort } from './sort';
@@ -15,0 +15,0 @@ import { merge } from './merge';

src/core/get.ts

@@ -1,2 +0,2 @@
-import { Get } from '../types';
+import { Get } from './types';
 
@@ -3,0 +3,0 @@ /**

src/core/index.ts

 export { get } from './get';
 export { createSystem } from './createSystem';
-export { createCss } from './createCss';
+export { createCss, CSSFunction, CSSFunctionArgs } from './createCss';

src/core/parseResponsive.ts

@@ -0,9 +1,7 @@
+import { Cache, SystemConfig, Props } from './types';
 import {
-  Cache,
-  SystemConfig,
+  ResponsiveArray,
   ResponsiveObject,
-  ResponsiveArray,
-  Props,
   Theme,
-} from '../types';
+} from '../types/system-props';
 
@@ -10,0 +8,0 @@ const createMediaQuery = (n: string) => `@media screen and (min-width: ${n})`;

src/index.ts

@@ -33,3 +33,3 @@ import {
 
-export { createSystem, createCss } from './core';
+export { createSystem, createCss, CSSFunction, CSSFunctionArgs } from './core';
 export * from './props';
@@ -58,5 +58,5 @@ export * from './pseudos';
   AllSystemProps,
-  PropConfigCollection,
   Theme,
-} from './types';
-export { CSSObject } from './css-prop';
+} from './types/system-props';
+export { PropConfigCollection } from './core/types';
+export { CSSObject } from './types/css-prop';

src/props/background/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 
@@ -3,0 +3,0 @@ export const background: PropConfigCollection = {

src/props/border/borderShorthandTransform.ts

@@ -1,2 +0,2 @@
-import { Transform } from '../../types';
+import { Transform } from '../../core/types';
 import { tokenizeValue } from '../tokenizeValue';
@@ -3,0 +3,0 @@

src/props/border/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 import { borderShorthandTransform } from './borderShorthandTransform';
@@ -3,0 +3,0 @@

src/props/color/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 
@@ -3,0 +3,0 @@ export const color: PropConfigCollection = {

src/props/flexbox/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 
@@ -3,0 +3,0 @@ export const flexContainer: PropConfigCollection = {

src/props/grid/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 
@@ -3,0 +3,0 @@ export const gridItem: PropConfigCollection = {

src/props/layout/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 
@@ -3,0 +3,0 @@ export const layout: PropConfigCollection = {

src/props/position/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 import { positiveOrNegative } from '../positiveOrNegative';
@@ -3,0 +3,0 @@

src/props/positiveOrNegative.ts

@@ -1,2 +0,2 @@
-import { Transform } from '../types';
+import { Transform } from '../core/types';
 
@@ -3,0 +3,0 @@ const isNumber = (n: unknown): boolean => typeof n === 'number' && !isNaN(n);

src/props/shadow/getShadow.ts

@@ -1,2 +0,2 @@
-import { Transform } from '../../types';
+import { Transform } from '../../core/types';
 import { tokenizeValue } from '../tokenizeValue';
@@ -3,0 +3,0 @@

src/props/shadow/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 import { getShadow } from './getShadow';
@@ -3,0 +3,0 @@

src/props/space/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection, Transform } from '../../types';
+import { PropConfigCollection, Transform } from '../../core/types';
 import { positiveOrNegative } from '../positiveOrNegative';
@@ -3,0 +3,0 @@

src/props/styled-system-layout/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection, Transform } from '../../types';
+import { PropConfigCollection, Transform } from '../../core/types';
 import { Property } from 'csstype';
@@ -3,0 +3,0 @@

src/props/transition/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection, Transform } from '../../types';
+import { PropConfigCollection, Transform } from '../../core/types';
 import { tokenizeValue } from '../tokenizeValue';
@@ -3,0 +3,0 @@

src/props/typography/index.ts

@@ -1,2 +0,2 @@
-import { PropConfigCollection } from '../../types';
+import { PropConfigCollection } from '../../core/types';
 
@@ -3,0 +3,0 @@ export const typography: PropConfigCollection = {

New alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

8

decreased by-20%

Number of package files

119

increased by23.96%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

410367

decreased by-3.15%

Lines of code

4624

decreased by-32.5%

Number of medium quality alerts

2

increased by100%

Number of lines in readme file

0

decreased by-100%

No dependency changes