Skip to content

Commit

Permalink
refactor: separate style properties
Browse files Browse the repository at this point in the history
juanrgm committed May 21, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent b918fc0 commit a7f65c4
Showing 26 changed files with 430 additions and 463 deletions.
6 changes: 6 additions & 0 deletions .changeset/healthy-snakes-join.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@suid/material": minor
"@suid/system": minor
---

Global refactoring for separating style properties into `StyleProps`, `StyledProps`, `SxProps` and `SystemProps`
10 changes: 5 additions & 5 deletions packages/material/src/Grid/Grid.tsx
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ import {
handleBreakpoints,
resolveBreakpointValues,
} from "@suid/system";
import { SxPropsObject } from "@suid/system/sxProps";
import StyledProps from "@suid/system/styledProps";
import { InPropsOf } from "@suid/types";
import clsx from "clsx";
import { JSXElement, useContext } from "solid-js";
@@ -97,7 +97,7 @@ export function generateGrid(input: {
const { theme, ownerState } = input;
let size: number | boolean | "auto";

return theme.breakpoints.keys.reduce<SxPropsObject>(
return theme.breakpoints.keys.reduce<StyledProps>(
(globalStyles, breakpoint) => {
// Use side effect over immutability for better performance.
let styles = {};
@@ -195,7 +195,7 @@ export function generateDirection(input: {
});

return handleBreakpoints({ theme }, directionValues, (propValue) => {
let output: SxPropsObject = {
let output: StyledProps = {
flexDirection: propValue,
};

@@ -235,7 +235,7 @@ export function generateRowGap(input: {
[`& > .${gridClasses.item}`]: {
paddingTop: getOffset(themeSpacing),
},
} as SxPropsObject;
} as StyledProps;
}

return {};
@@ -268,7 +268,7 @@ export function generateColumnGap(input: {
[`& > .${gridClasses.item}`]: {
paddingLeft: getOffset(themeSpacing),
},
} as SxPropsObject;
} as StyledProps;
}

return {};
8 changes: 4 additions & 4 deletions packages/material/src/Grow/Grow.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import useTheme from "../styles/useTheme";
import { reflow, getTransitionProps } from "../transitions/utils";
import Transition, { TransitionStatus } from "@suid/base/Transition";
import createComponentFactory from "@suid/base/createComponentFactory";
import { NativeStyleProps } from "@suid/system/sxProps";
import StyleProps from "@suid/system/styleProps";
import { children, onCleanup } from "solid-js";

const $ = createComponentFactory<GrowTypeMap>()({
@@ -20,7 +20,7 @@ function getScale(value: number) {
return `scale(${value}, ${value ** 2})`;
}

const styles: { [name in TransitionStatus]?: NativeStyleProps } = {
const styles: { [name in TransitionStatus]?: StyleProps } = {
entering: {
opacity: 1,
transform: getScale(1),
@@ -153,13 +153,13 @@ const Grow = $.component(function Grow({ props, otherProps }) {
element.style.removeProperty("visibility");
}

const style: NativeStyleProps = {
const style: StyleProps = {
...(styles[state] || {}),
...(otherProps.style || {}),
};

for (const name in style) {
const value = style[name as keyof NativeStyleProps] as any;
const value = style[name as keyof StyleProps] as any;
if (value === undefined) {
element.style.removeProperty(name);
} else {
4 changes: 2 additions & 2 deletions packages/material/src/Stack/Stack.tsx
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ import {
import { Breakpoint } from "@suid/system/createTheme/createBreakpoints";
import mergeSxObjects from "@suid/system/mergeSxObjects";
import { createUnarySpacing } from "@suid/system/spacing";
import { SxPropsObject } from "@suid/system/sxProps";
import StyledProps from "@suid/system/styledProps";
import { JSXElement, Show } from "solid-js";

const $ = createComponentFactory<StackTypeMap>()({
@@ -105,7 +105,7 @@ const StackRoot = styled("div", {
breakpoint ? directionValues[breakpoint] : ownerState.direction
)}` as any]: transformer(propValue),
},
} as SxPropsObject;
} as StyledProps;
};
styles = mergeSxObjects(
styles,
30 changes: 15 additions & 15 deletions packages/material/src/styles/createTypography.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NativeStyleProps, CSSProps } from "@suid/system/sxProps";
import StyledProps from "@suid/system/styledProps";
import { DeepPartial } from "@suid/types";
import merge from "@suid/utils/merge";

@@ -7,19 +7,19 @@ export type ThemeTypographyType = TypographyOptions & {
};

export type TypographyVariants = {
h1: CSSProps;
h2: CSSProps;
h3: CSSProps;
h4: CSSProps;
h5: CSSProps;
h6: CSSProps;
subtitle1: CSSProps;
subtitle2: CSSProps;
body1: CSSProps;
body2: CSSProps;
button: CSSProps;
caption: CSSProps;
overline: CSSProps;
h1: StyledProps;
h2: StyledProps;
h3: StyledProps;
h4: StyledProps;
h5: StyledProps;
h6: StyledProps;
subtitle1: StyledProps;
subtitle2: StyledProps;
body1: StyledProps;
body2: StyledProps;
button: StyledProps;
caption: StyledProps;
overline: StyledProps;
};

export type Variant = keyof TypographyVariants;
@@ -86,7 +86,7 @@ export function makeVariant(
lineHeight: `${lineHeight}`,
letterSpacing: `${round(letterSpacing / size)}em`,
...(casing ? { textTransform: "uppercase" } : {}),
} as NativeStyleProps;
} as StyledProps;
}

export function createTypography(
4 changes: 2 additions & 2 deletions packages/material/src/transitions/transition.ts
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import {
TransitionProps as _TransitionProps,
TransitionActions,
} from "@suid/base/Transition";
import { NativeStyleProps } from "@suid/system/sxProps";
import StyleProps from "@suid/system/styleProps";

export type TransitionHandlerKeys =
| "onEnter"
@@ -32,5 +32,5 @@ export type TransitionKeys =
export interface TransitionProps
extends TransitionActions,
Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>> {
style?: NativeStyleProps;
style?: StyleProps;
}
4 changes: 2 additions & 2 deletions packages/material/src/transitions/utils.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { NativeStyleProps } from "@suid/system/sxProps";
import StyleProps from "@suid/system/styleProps";

export const reflow = (node: Element) => node.scrollTop;

interface ComponentProps {
easing: string | { enter?: string; exit?: string } | undefined;
style:
| Pick<
NativeStyleProps,
StyleProps,
"transitionDuration" | "transitionTimingFunction" | "transitionDelay"
>
| undefined;
40 changes: 18 additions & 22 deletions packages/system/src/Box/Box.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { BoxSelfProps } from ".";
import Dynamic from "../Dynamic/Dynamic";
import createSxClass from "../createSxClass";
import createSxClass, { resolvedPropKey } from "../createSxClass";
import defineComponent from "../defineComponent";
import resolveStyleProps from "../resolveStyleProps";
import { SxPropsObject } from "../sxProps";
import sxPropsFactory from "../sxPropsFactory";
import resolveSxProps from "../resolveSxProps";
import useTheme from "../useTheme";
import { BoxTypeMap } from "./BoxProps";
import { mergeProps, splitProps } from "solid-js";
@@ -18,35 +16,33 @@ export const Box = defineComponent<BoxTypeMap>(function Box(inProps) {
},
inProps
);

const [props, otherProps] = splitProps(allProps, boxSelfProps);
const theme = useTheme();

const useInTheme = () => inProps.theme || useTheme();
const forwardSx = () =>
!!inProps.component && typeof inProps.component !== "string";

const dynamicProps = mergeProps(otherProps, {
get sx() {
return forwardSx() ? inProps.sx : undefined;
},
});

const sxClass = createSxClass(() => {
if (!props.sx || forwardSx()) return [];
const sxArray = Array.isArray(props.sx) ? props.sx : [props.sx];
const result = sxArray.map(
(object: SxPropsObject & { resolved?: boolean }) => {
if (object.resolved) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { resolved, ...restObject } = object;
return restObject;
} else {
return resolveStyleProps(
object,
props.theme || theme,
sxPropsFactory
);
}
}
const theme = useInTheme();
const haveStyles = !!props.sx;
if (!haveStyles || forwardSx()) return [];
const objects = Array.isArray(props.sx)
? props.sx
: props.sx
? [props.sx]
: [];
return objects.map((object) =>
(object as never)[resolvedPropKey]
? object
: resolveSxProps(object, theme)
);
return result;
});

const className = () => {
13 changes: 5 additions & 8 deletions packages/system/src/breakpoints.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Theme } from "./createTheme";
import { Breakpoint } from "./createTheme/createBreakpoints";
import { CSSProps, SxPropsObject } from "./sxProps";
import StyledProps from "./styledProps";

export type BreakpointValueType<T extends string> = {
[K in T]?: number | boolean | "auto";
@@ -32,7 +32,7 @@ export function handleBreakpoints(
theme: Theme;
},
propValue: any[],
styleFromPropValue: (value: any, breakpoint?: Breakpoint) => SxPropsObject
styleFromPropValue: (value: any, breakpoint?: Breakpoint) => StyledProps
) {
const theme = props.theme || ({} as Theme);

@@ -43,7 +43,7 @@ export function handleBreakpoints(
...acc,
...themeBreakpoints.up(
themeBreakpoints.keys[index],
styleFromPropValue(propValue[index]) as SxPropsObject
styleFromPropValue(propValue[index])
),
};
return acc;
@@ -53,7 +53,7 @@ export function handleBreakpoints(
if (typeof propValue === "object") {
const themeBreakpoints = theme.breakpoints;
const keys = Object.keys(propValue) as Breakpoint[];
return keys.reduce<SxPropsObject>((acc, breakpoint) => {
return keys.reduce<StyledProps>((acc, breakpoint) => {
// key is breakpoint
if (
Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !==
@@ -63,10 +63,7 @@ export function handleBreakpoints(
...acc,
...themeBreakpoints.up(
breakpoint,
styleFromPropValue(
propValue[breakpoint],
breakpoint
) as SxPropsObject
styleFromPropValue(propValue[breakpoint], breakpoint)
),
};
} else {
182 changes: 0 additions & 182 deletions packages/system/src/createStylePropsFactory.ts

This file was deleted.

20 changes: 0 additions & 20 deletions packages/system/src/createStyleStoreEffect.ts

This file was deleted.

78 changes: 47 additions & 31 deletions packages/system/src/createStyled.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { SxProps } from ".";
import Box, { BoxTypeMap } from "./Box";
import createSxMemo from "./createSxMemo";
import type { Theme } from "./createTheme/createTheme";
import resolveStyleProps from "./resolveStyleProps";
import { SxPropsObject } from "./sxProps";
import resolveStyledProps from "./resolveStyledProps";
import { StyledProps } from "./styledProps";
import { SxProps } from "./sxProps";
import useTheme from "./useTheme";
import {
ElementType,
@@ -12,25 +11,25 @@ import {
PropsOf,
} from "@suid/types";
import clsx from "clsx";
import { createMemo, Accessor } from "solid-js";
import { createMemo } from "solid-js";
import {
ComponentProps as _ComponentProps,
JSX,
splitProps,
Show,
} from "solid-js";

export interface StyledProps<T, O> {
export interface ComponentProps<T, O> {
ownerState: O;
theme: T;
sx?: SxProps<T>;
as?: ElementType;
}

type Style<T extends Theme<any>, P, O> =
| ((props: StyledProps<T, O> & { props: P }) => false | SxPropsObject)
| ((props: ComponentProps<T, O> & { props: P }) => false | StyledProps)
| false
| SxPropsObject;
| StyledProps;

type StyledOptions<N extends string> = {
name?: N;
@@ -43,13 +42,43 @@ type StyledOptions<N extends string> = {
) => (string | false)[];
};

export const skipProps: (keyof StyledProps<any, any>)[] = [
export const skipProps: (keyof ComponentProps<any, any>)[] = [
"ownerState",
"theme",
"sx",
"as",
];

function resolveStyles<T extends Theme<any>, P, O>(
theme: T,
className: string,
styles: Style<T, P, O>[],
inProps: ComponentProps<T, O>
) {
return createMemo(() =>
styles.reduce((result, style) => {
let styledProps: StyledProps | false | undefined;
if (typeof style === "function") {
styledProps = style({
ownerState: inProps.ownerState,
theme,
sx: inProps.sx,
as: inProps.as,
props: inProps as never as P,
});
} else if (style) {
styledProps = style;
}
if (styledProps)
result.push({
["name" as never]: className,
...resolveStyledProps(styledProps),
});
return result;
}, [] as StyledProps[])
);
}

function createStyled<
T extends Theme<any>,
CM extends Record<string, any> = {}
@@ -86,35 +115,22 @@ function createStyled<
O
>[]
) {
return function (inProps: _ComponentProps<C> & StyledProps<T, O>) {
return function (inProps: _ComponentProps<C> & ComponentProps<T, O>) {
const theme = config?.onUseTheme
? config.onUseTheme()
: (useTheme() as T);

const [, otherProps] = splitProps(
inProps,
options.skipProps ?? skipProps
);
const inStyles = createSxMemo(
className ?? "css",
() =>
styles
.map((v) => {
let object: SxPropsObject | false | undefined;
if (typeof v === "function") {
object = v({
ownerState: inProps["ownerState"],
theme,
sx: inProps.sx,
as: inProps.as,
props: inProps as any,
});
} else if (v) {
object = v;
}
if (object) return resolveStyleProps(object, theme);
})
.filter((v) => !!v) as SxPropsObject[]
) as Accessor<SxPropsObject[]>;

const inStyles = resolveStyles(
theme,
className || "css",
styles,
inProps
);

const inSx = createMemo(() =>
!options.skipSx && inProps.sx
3 changes: 3 additions & 0 deletions packages/system/src/createSxClass.ts
Original file line number Diff line number Diff line change
@@ -9,6 +9,8 @@ import {
} from "@suid/css/style-element";
import { createRenderEffect, createSignal, onCleanup } from "solid-js";

export const resolvedPropKey = "__resolved";

function createSxClass(value: () => SxProps | undefined) {
const [name, setName] = createSignal("");
let styleElement: HTMLStyleElement | undefined;
@@ -30,6 +32,7 @@ function createSxClass(value: () => SxProps | undefined) {
}, {});

delete css.name;
delete css[resolvedPropKey];

result = createStyle({
name: "css",
15 changes: 0 additions & 15 deletions packages/system/src/createSxMemo.ts

This file was deleted.

91 changes: 0 additions & 91 deletions packages/system/src/createSxPropsFactory.ts

This file was deleted.

204 changes: 204 additions & 0 deletions packages/system/src/createSystemProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
import { Theme } from "./createTheme";
import getThemeValue from "./getThemeValue";
import { StyledPropsBase } from "./styledProps";

const dirMap = {
x: ["Left", "Right"],
y: ["Top", "Bottom"],
};

type OnValue = (name: string, value: any, theme: Theme) => any;

type PropReturn<V> = (
value: Exclude<V, undefined>,
theme: Theme
) => Record<string, any>;

function asPx(value: unknown) {
return typeof value === "number" ? `${value}px` : value;
}

function customProp<V>(name: string, onValue: OnValue): PropReturn<V> {
return (value, theme) => onValue(name, value, theme);
}

function prop<N extends keyof StyledPropsBase>(
name: N,
onValue?: OnValue
): PropReturn<StyledPropsBase[N]> {
return onValue
? (value, theme) => ({
[name]: onValue(name, value, theme),
})
: (value) => ({ [name]: value });
}

function pxProp<N extends keyof StyledPropsBase>(name: N) {
return prop(name, (name, value) => asPx(value));
}

function mProp<V>(name: string, suffix: string[], onValue?: OnValue) {
const names = suffix.map((v) => `${name}${v}`);
return onValue
? (value: V, theme: Theme) =>
names.reduce((result, name) => {
result[name] = onValue(name, value, theme);
return result;
}, {} as Record<string, any>)
: (value: V) =>
names.reduce((result, name) => {
result[name] = value;
return result;
}, {} as Record<string, any>);
}

function createSystemProps() {
return {
...createSystemPositionProps(),
...createSystemPaletteProps(),
...createSystemSizingProps(),
...createSystemBorderProps(),
...createSystemSpacingProps(),
...createSystemTypographyProps(),
};
}

export function createSystemPositionProps() {
return {
position: prop("position"),
zIndex: prop(
"zIndex",
(name, value, theme) => theme.zIndex?.[name] ?? value
),
top: pxProp("top"),
right: pxProp("right"),
bottom: pxProp("bottom"),
left: pxProp("left"),
};
}

export function createSystemPaletteProps() {
const paletteValue: OnValue = (name, value, theme) =>
getThemeValue(theme, "palette", value);
return {
color: prop("color", paletteValue),
bgcolor: prop("backgroundColor", paletteValue),
backgroundColor: prop("backgroundColor", paletteValue),
};
}

export function createSystemSizingProps() {
const onValue: OnValue = (name, value, theme) => {
if (name === "maxWidth") {
value = theme.breakpoints.values[name as "xs"] ?? value;
}
if (typeof value === "number") {
value = value > 0 && value <= 1 ? `${value * 100}%` : `${value}px`;
}
return value;
};
return {
width: prop("width", onValue),
maxWidth: prop("maxWidth", onValue),
minWidth: prop("minWidth", onValue),
height: prop("height", onValue),
maxHeight: prop("maxHeight", onValue),
minHeight: prop("minHeight", onValue),
boxSizing: prop("boxSizing", onValue),
};
}

export function createSystemBorderProps() {
const borderValue: OnValue = (name, value) =>
typeof value === "number" ? `${value}px solid` : value;
const paletteValue: OnValue = (name, value, theme) =>
getThemeValue(theme, "palette", value);
return {
border: prop("border", borderValue),
borderTop: prop("borderTop", borderValue),
borderRight: prop("borderRight", borderValue),
borderBottom: prop("borderBottom", borderValue),
borderLeft: prop("borderLeft", borderValue),
borderColor: prop("borderColor", paletteValue),
borderTopColor: prop("borderTopColor", paletteValue),
borderRightColor: prop("borderRightColor", paletteValue),
borderBottomColor: prop("borderBottomColor", paletteValue),
borderLeftColor: prop("borderLeftColor", paletteValue),
borderRadius: prop("borderRadius", (name, value, theme) =>
typeof value === "number"
? `${theme.shape.borderRadius * value}px`
: value
),
};
}

export function createSystemTypographyProps() {
const typographyValue: OnValue = (name, value, theme) =>
getThemeValue(theme, "typography", value);

return {
typography: customProp<string>("typography", (name, value, theme) =>
getThemeValue(theme, "typography", value)
),
fontFamily: prop("fontFamily", typographyValue),
fontSize: prop("fontSize", (name, value, theme) =>
asPx(typographyValue(name, value, theme))
),
fontStyle: prop("fontStyle", typographyValue),
fontWeight: prop("fontWeight", typographyValue),
letterSpacing: pxProp("letterSpacing"),
lineHeight: prop("lineHeight"),
textAlign: prop("textAlign"),
textTransform: prop("textTransform"),
};
}

export function createSystemSpacingProps() {
const spacing: OnValue = (name, value, theme) => theme.spacing(value);
const m = "margin";
const p = "padding";
return {
m: prop(m, spacing),
mt: prop("marginTop", spacing),
mr: prop("marginRight", spacing),
mb: prop("marginBottom", spacing),
ml: prop("marginLeft", spacing),
mx: mProp(m, dirMap["x"], spacing),
my: mProp(m, dirMap["y"], spacing),
margin: prop(m, spacing),
marginTop: prop("marginTop", spacing),
marginRight: prop("marginRight", spacing),
marginBottom: prop("marginBottom", spacing),
marginLeft: prop("marginLeft", spacing),
marginX: mProp(m, dirMap["x"], spacing),
marginY: mProp(m, dirMap["y"], spacing),
marginInline: mProp(m, ["Inline", "InlineStart"], spacing),
marginInlineStart: prop("marginInlineStart", spacing),
marginInlineEnd: prop("marginInlineEnd", spacing),
marginBlock: mProp(m, ["BlockStart", "BlockEnd"], spacing),
marginBlockStart: prop("marginBlockStart", spacing),
marginBlockEnd: prop("marginBlockEnd", spacing),
p: prop(p, spacing),
pt: prop("paddingTop", spacing),
pr: prop("paddingRight", spacing),
pb: prop("paddingBottom", spacing),
pl: prop("paddingLeft", spacing),
px: mProp(p, dirMap["x"], spacing),
py: mProp(p, dirMap["y"], spacing),
padding: prop(p, spacing),
paddingTop: prop("paddingTop", spacing),
paddingRight: prop("paddingRight", spacing),
paddingBottom: prop("paddingBottom", spacing),
paddingLeft: prop("paddingLeft", spacing),
paddingX: mProp(p, dirMap["x"], spacing),
paddingY: mProp(p, dirMap["y"], spacing),
paddingInline: mProp(p, ["Inline", "InlineStart"], spacing),
paddingInlineStart: prop("paddingInlineStart", spacing),
paddingInlineEnd: prop("paddingInlineEnd", spacing),
paddingBlock: mProp(p, ["BlockStart", "BlockEnd"], spacing),
paddingBlockStart: prop("paddingBlockStart", spacing),
paddingBlockEnd: prop("paddingBlockEnd", spacing),
};
}

export default createSystemProps;
4 changes: 2 additions & 2 deletions packages/system/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export * from "./colorManipulator";
export * from "./styleFunctionSx";
export * from "./breakpoints";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export type SystemProps<Theme> = {};

export type { SxProps } from "./sxProps";
export type { SystemProps } from "./systemProps";
19 changes: 0 additions & 19 deletions packages/system/src/resolveStyleProps.ts

This file was deleted.

17 changes: 17 additions & 0 deletions packages/system/src/resolveStyledProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { resolvedPropKey } from "./createSxClass";
import { StyledProps } from "./styledProps";
import resolve from "@suid/css/resolve";

export const unitLess = new Set<string>([]);

export function resolveStyledPropsValue(name: string, value: unknown) {
if (typeof value === "number") {
return { [name]: unitLess.has(name) ? value.toString() : `${value}px` };
}
}

function resolveStyledProps(v: StyledProps): StyledProps {
return resolve(v, resolveStyledPropsValue, { [resolvedPropKey]: true });
}

export default resolveStyledProps;
28 changes: 28 additions & 0 deletions packages/system/src/resolveSxProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { resolvedPropKey } from "./createSxClass";
import { Theme } from "./createTheme";
import { resolveStyledPropsValue } from "./resolveStyledProps";
import { SxPropsObject } from "./sxProps";
import systemProps from "./systemProps";
import resolve from "@suid/css/resolve";

export function resolveSystemPropsValue(
name: string,
value: any,
theme: Theme
) {
return systemProps[name as keyof typeof systemProps](value, theme);
}

export function reslveSxPropsValue(name: string, value: unknown, theme: Theme) {
return name in systemProps
? resolveSystemPropsValue(name, value, theme)
: resolveStyledPropsValue(name, value);
}

function resolveSxProps(v: SxPropsObject, theme: Theme): SxPropsObject {
return resolve(v, (name, value) => reslveSxPropsValue(name, value, theme), {
[resolvedPropKey]: true,
});
}

export default resolveSxProps;
20 changes: 20 additions & 0 deletions packages/system/src/styleProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import {
StandardProperties,
SvgProperties,
VendorLonghandProperties,
} from "csstype";

export type StyleProps = StandardProperties &
SvgProperties &
VendorLonghandProperties;

export type StyleCascade<T> =
| {
[K in keyof T]?: T[K];
}
| {
[K: string]: StyleCascade<T>;
};

export {};
export default StyleProps;
12 changes: 0 additions & 12 deletions packages/system/src/stylePropsFactory.ts

This file was deleted.

15 changes: 15 additions & 0 deletions packages/system/src/styledProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { StyleCascade } from "./styleProps";
import {
StandardProperties,
SvgProperties,
VendorLonghandProperties,
} from "csstype";

export type StyledPropsBase = StandardProperties<string | number> &
SvgProperties<string | number> &
VendorLonghandProperties<string | number>;

export type StyledProps = StyleCascade<StyledPropsBase>;

export {};
export default StyledProps;
30 changes: 11 additions & 19 deletions packages/system/src/sxProps.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,16 @@
import { StyleProps } from "./createStylePropsFactory";
import { Theme } from "./createTheme";
import {
StandardProperties,
SvgProperties,
VendorLonghandProperties,
} from "csstype";
import { StyleCascade } from "./styleProps";
import { StyledPropsBase } from "./styledProps";
import { SystemProps } from "./systemProps";

export type NativeStyleProps = StandardProperties &
SvgProperties &
VendorLonghandProperties;
export type CSSProps = Omit<NativeStyleProps, keyof StyleProps> & StyleProps;
export type SxPropsObject =
| {
[K in keyof CSSProps]?: CSSProps[K];
}
| {
[K: string]: SxPropsObject;
};
export type SxPropsBase<T = Theme> = Omit<
StyledPropsBase,
keyof SystemProps<T>
> &
StyledPropsBase &
SystemProps<Theme>;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export type SxProps<T = Theme> = SxPropsObject[] | SxPropsObject;
export type SxPropsObject<T = Theme> = StyleCascade<SxPropsBase<T>>;
export type SxProps<T = Theme> = SxPropsObject<T>[] | SxPropsObject<T>;

export default SxProps;
12 changes: 0 additions & 12 deletions packages/system/src/sxPropsFactory.ts

This file was deleted.

24 changes: 24 additions & 0 deletions packages/system/src/systemProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import createSystemProps from "./createSystemProps";
import { Theme } from "./createTheme";
import { StyledPropsBase } from "./styledProps";

const systemProps = createSystemProps();

export type SystemPropName = keyof typeof systemProps;
export const systemPropNames = Object.keys(systemProps) as SystemPropName[];

type SystemStyledPropName = Extract<SystemPropName, keyof StyledPropsBase>;
export type SystemExtraPropName = Exclude<SystemPropName, SystemStyledPropName>;

export type SystemExtraPropsBase = Partial<{
[K in SystemExtraPropName]: Parameters<typeof systemProps[K]>[0];
}>;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export type SystemProps<T = Theme> = Pick<
StyledPropsBase,
SystemStyledPropName
> &
SystemExtraPropsBase;

export default systemProps;

0 comments on commit a7f65c4

Please sign in to comment.