/**
 * css顺序数组
 */ const cssList = [ 'position' , 'top' , 'right' , 'bottom' , 'left' , 'z-index' , 'display' , 'float' , 'width' , 'height' , 'max-width' , 'max-height' , 'min-width' , 'min-height' , 'padding' , 'padding-top' , 'padding-right' , 'padding-bottom' , 'padding-left' , 'margin' , 'margin-top' , 'margin-right' , 'margin-bottom' , 'margin-left' , 'margin-collapse' , 'margin-top-collapse' , 'margin-right-collapse' , 'margin-bottom-collapse' , 'margin-left-collapse' , 'overflow' , 'overflow-x' , 'overflow-y' , 'clip' , 'clear' , 'font' , 'font-family' , 'font-size' , 'font-smoothing' , 'osx-font-smoothing' , 'font-style' , 'font-weight' , 'hyphens' , 'src' , 'line-height' , 'letter-spacing' , 'word-spacing' , 'color' , 'text-align' , 'text-decoration' , 'text-indent' , 'text-overflow' , 'text-rendering' , 'text-size-adjust' , 'text-shadow' , 'text-transform' , 'word-break' , 'word-wrap' , 'white-space' , 'vertical-align' , 'list-style' , 'list-style-type' , 'list-style-position' , 'list-style-image' , 'pointer-events' , 'cursor' , 'background' , 'background-attachment' , 'background-color' , 'background-image' , 'background-position' , 'background-repeat' , 'background-size' , 'border' , 'border-collapse' , 'border-top' , 'border-right' , 'border-bottom' , 'border-left' , 'border-color' , 'border-image' , 'border-top-color' , 'border-right-color' , 'border-bottom-color' , 'border-left-color' , 'border-spacing' , 'border-style' , 'border-top-style' , 'border-right-style' , 'border-bottom-style' , 'border-left-style' , 'border-width' , 'border-top-width' , 'border-right-width' , 'border-bottom-width' , 'border-left-width' , 'border-radius' , 'border-top-right-radius' , 'border-bottom-right-radius' , 'border-bottom-left-radius' , 'border-top-left-radius' , 'border-radius-topright' , 'border-radius-bottomright' , 'border-radius-bottomleft' , 'border-radius-topleft' , 'content' , 'quotes' , 'outline' , 'outline-offset' , 'opacity' , 'filter' , 'visibility' , 'size' , 'zoom' , 'transform' , 'box-align' , 'box-flex' , 'box-orient' , 'box-pack' , 'box-shadow' , 'box-sizing' , 'table-layout' , 'animation' , 'animation-delay' , 'animation-duration' , 'animation-iteration-count' , 'animation-name' , 'animation-play-state' , 'animation-timing-function' , 'animation-fill-mode' , 'transition' , 'transition-delay' , 'transition-duration' , 'transition-property' , 'transition-timing-function' , 'background-clip' , 'backface-visibility' , 'resize' , 'appearance' , 'user-select' , 'interpolation-mode' , 'direction' , 'marks' , 'page' , 'set-link-source' , 'unicode-bidi' , 'speak' ] ; const toKebabCase = ( str ) => str . replace ( /([A-Z])/g , '-$1' ) . toLowerCase ( ) ; /**
 * css 排序方法
 */ const order = ( item ) => { item = toKebabCase ( item ) ; let itemIndex = cssList . length ; if ( cssList . indexOf ( item ) > - 1 ) { itemIndex = cssList . indexOf ( item ) ; } return itemIndex ; } ; /**
 * css 格式化
 */ export default ( styleObj ) => { if ( styleObj instanceof Object && Object . keys ( styleObj ) . length > 0 ) { let styleKeysList = Object . keys ( styleObj ) ; styleKeysList . sort ( ( a , b ) => { return order ( a ) - order ( b ) ; } ) ; let styleOrderObj = { } ; for ( let i = 0 ; i < styleKeysList . length ; i ++ ) { styleOrderObj [ styleKeysList [ i ] ] = styleObj [ styleKeysList [ i ] ] ; } return styleOrderObj ; } else { return { } ; } } ;