fix: fix & optimize style sorting

Author: gregberge

packages/system/src/style.ts

@@ -245,22 +245,18 @@ function indexGeneratorsByProp(styles: StyleGenerator[]) {
   return index
 }
 
-function sortStyles(styles: Record<string | number, unknown>, props: IProps) {
-  const breakpoints = getBreakpoints(props)
-
-  const breakpointsStyles: Record<string | number, unknown> = {}
-
-  for (const key in breakpoints) {
-    const min = getBreakpointMin(breakpoints, key)
-    const mediaMin = mediaMinWidth(min)
-    if (!mediaMin) continue
-
-    const style = styles[mediaMin]
-    if (!style) continue
-    breakpointsStyles[mediaMin] = style
+function sortStyles(
+  styles: Record<string, unknown>,
+  medias: Record<string, string>,
+) {
+  for (const key in medias) {
+    const mediaValue = medias[key]
+    const s = styles[mediaValue]
+    if (!s) continue
+    delete styles[mediaValue]
+    styles[mediaValue] = s
   }
-
-  return assign(styles, breakpointsStyles)
+  return styles
 }
 
 export function compose(...generators: StyleGenerator[]): StyleGenerator {
@@ -277,17 +273,24 @@ export function compose(...generators: StyleGenerator[]): StyleGenerator {
 
   const generatorsByProp = indexGeneratorsByProp(flatGenerators)
 
-  function getStyle(props: IProps) {
+  function getStyle(props: IProps, sort = true) {
     const styles: IStyles = {}
+
     for (const key in props) {
       const generator = generatorsByProp[key]
       if (generator) {
-        const style = generator.meta.getStyle(props)
+        const style = generator.meta.getStyle(props, false)
         merge(styles, style)
       }
     }
 
-    return sortStyles(styles, props)
+    if (!sort) return styles
+
+    const medias = getCachedMedias(
+      props,
+      getCacheNamespace(props.theme, '__medias'),
+    )
+    return sortStyles(styles, medias)
   }
 
   const props = flatGenerators.reduce(

packages/system/src/styles/index.test.ts

@@ -18,10 +18,10 @@ describe('#system', () => {
     const keys = Object.keys(res)
     expect(keys).toEqual([
       'display',
+      '& > :not([hidden]) ~ :not([hidden])',
       '@media (min-width: 640px)',
-      '@media (min-width: 1024px)',
       '@media (min-width: 768px)',
-      '& > :not([hidden]) ~ :not([hidden])',
+      '@media (min-width: 1024px)',
     ])
   })
 })

packages/system/src/types.ts

@@ -59,7 +59,7 @@ export type SystemProp<TType, TTheme extends ITheme> =
   | BreakpointsProps<TType, TTheme>
 
 export interface StyleGenerator {
-  (props: IProps): any
+  (props: IProps, sort?: boolean): any
   meta: {
     props: string[]
     getStyle: StyleGenerator

packages/util/src/index.ts

@@ -102,7 +102,7 @@ export const merge = <TObject, TSource>(
     // @ts-ignore
     if (obj(a[key])) {
       // @ts-ignore
-      a[key] = merge(assign({}, a[key]), b[key])
+      a[key] = merge(a[key], b[key])
     } else {
       // @ts-ignore
       a[key] = b[key]