Inspired by styled-system, a responsive, theme-based style props for building design systems with React. 

roginfarrer

system-props

import { SystemConfig, PropConfigCollection, Cache, PrefixDefault, PrefixOptions } from '../types';

import { CSSFunction } from './createCss';

export interface Parser<TokenPrefix extends PrefixOptions = PrefixDefault> {

export declare const createParser: (config: {

}, strict?: boolean) => Parser<"prefix">;

export declare const createSystem: ({ strict, pseudoSelectors, tokenPrefix, }?: {

    pseudoSelectors?: Record<string, string> | undefined;

    tokenPrefix?: "all" | "prefix" | "noprefix" | undefined;

}) => (arg: PropConfigCollection) => Required<Parser<PrefixOptions>>;

}) => (arg: PropConfigCollection) => Parser<"prefix">;

  "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",

  "homepage": "https://github.com/system-props/system-props#readme",

    "url": "https://github.com/system-props/system-props/issues"

  "repository": "github:system-props/system-props",

    "eslint-plugin-no-only-tests": "^2.4.0",

    "lint:examples": "tsdx lint examples/styled-components/{index,Box}.tsx",

    "start-sc": "yarn --cwd ./examples/styled-components start",

    "clean": "rm -rf node_modules && rm -rf examples/**/node_modules && rm -rf dist",

    "registry": "https://registry.yarnpkg.com"

    "**/@typescript-eslint/eslint-plugin": "^4.6.1",

    "**/@typescript-eslint/parser": "^4.6.1"

import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';

import { createStyleFunction } from './createStyleFunction';

import { pseudoSelectors as defaultPseudos } from '../pseudos';

import { createCss, CSSFunction } from './createCss';

  config: { [key: string]: SystemConfig };

const createMediaQuery = (n: string) => `@media screen and (min-width: ${n})`;

function parseBreakpoints(breakpoints: SystemProp<string | number>) {

  return (bps as string[]).map(createMediaQuery);

  pseudoSelectors: { [x: string]: string } = {},

  const cache: Cache = { strict, key: '__systemprops__' };

  const parse: Parser = (props: Props) => {

    let styles: Record<string, any> = {};

      typeof props.theme?.systemPropsCacheKey !== 'undefined' &&

      props.theme.systemPropsCacheKey !== cache.key

      cache.key = props.theme.systemPropsCacheKey;

    const parseEntry = (obj: SomeObject, key: string) => {

      const scale = get(props.theme, systemConfig.scale);

      if (typeof propValue === 'function') {

        // <Box border={t => `1px solid ${t.colors.primary}`} />

        propValue = propValue(props.theme);

      if (typeof propValue === 'object') {

          (!isCacheBusted && cache.breakpoints) || props?.theme?.breakpoints;

          if (typeof cache.breakpoints === 'undefined') {

              'The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.'

          cache.media = (!isCacheBusted && cache.media) || [

            ...parseBreakpoints(cache.breakpoints),

    return parser as Required<Parser<typeof tokenPrefix>>;

		{
		"name": "system-props",
		"version": "0.19.0-3",
		"version": "0.19.0-4",
		"description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
		@@ -5,0 +5,0 @@ "author": "Rogin Farrer",

		@@ -193,3 +193,3 @@ import { parseResponsiveStyle, parseResponsiveObject } from './parseResponsive';
		parser.css = cssFunction;
		return parser as Required<Parser<typeof tokenPrefix>>;
		return parser;
		};
		@@ -196,0 +196,0 @@

		@@ -21,2 +21,2 @@ import { SystemConfig, PropConfigCollection, Cache, PrefixDefault, PrefixOptions } from '../types';
		tokenPrefix?: "all" \| "prefix" \| "noprefix" \| undefined;
		}) => (arg: PropConfigCollection) => Required<Parser<PrefixOptions>>;
		}) => (arg: PropConfigCollection) => Parser<"prefix">;

Worsened metrics