const formatTextShadowPxToRem = ( styleVal , remScale ) => { let styleValArr = styleVal . split ( 'px' ) ; const tailArr = styleValArr . splice ( 4 , styleValArr . length - 4 ) ; styleValArr = styleValArr . map ( item => { return `${ Math . round ( + item . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ; } ) ; styleValArr = styleValArr . concat ( tailArr ) ; return styleValArr . join ( ' ' ) ; } ; const formatBoxShadowPxToRem = ( styleVal , remScale ) => { let styleValArr = styleVal . split ( ' ' ) ; styleValArr = styleValArr . map ( item => { if ( item . endsWith ( 'px' ) ) { return `${ Math . round ( + item . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ; } return item ; } ) ; return styleValArr . join ( ' ' ) ; } ; const formatBGPxToRem = ( styleVal , remScale ) => { let styleValArr = styleVal . split ( ' ' ) ; styleValArr = styleValArr . map ( item => { return `${ Math . round ( + item . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ; } ) ; return styleValArr . join ( ' ' ) ; } ; const formatBGradientPxToRem = ( styleVal , remScale ) => { let stylePxArr = styleVal . split ( ',' ) ; const tailArr = stylePxArr . splice ( 1 , stylePxArr . length - 1 ) ; stylePxArr = stylePxArr [ 0 ] . split ( '(' ) [ 1 ] ; stylePxArr = stylePxArr . split ( ' ' ) ; stylePxArr = stylePxArr . map ( item => { if ( item . includes ( 'px' ) ) { return `${ Math . round ( + item . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ; } return item ; } ) ; stylePxArr [ 0 ] = `radial-gradient(${ stylePxArr [ 0 ] }` ; const styleRemArr = [ stylePxArr . join ( ' ' ) ] ; const styleValArr = styleRemArr . concat ( tailArr ) ; return styleValArr . join ( ',' ) ; } ; export const dslPxtoRem = ( styleObj , remScale ) => { for ( let styleKey in styleObj ) { let styleVal = styleObj [ styleKey ] ; if ( typeof styleVal == 'string' && styleVal . includes ( 'px' ) ) { if ( styleKey == 'width' || styleKey == 'height' || styleKey == 'line-height' || styleKey == 'font-size' || styleKey == 'text-indent' || styleKey == 'left' || styleKey == 'right' || styleKey == 'top' || styleKey == 'bottom' ) { styleVal = `${ Math . round ( + styleVal . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ; } if ( styleKey . includes ( 'margin' ) || styleKey . includes ( 'padding' ) ) { const styleValArr = styleVal . split ( ' ' ) ; const styleValList = [ ] ; styleValArr . forEach ( ( item ) => { styleValList . push ( `${ Math . round ( + item . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ) ; } ) ; styleVal = styleValList . join ( ' ' ) ; } if ( styleKey . includes ( 'border' ) ) { const styleValArr = styleVal . split ( ' ' ) ; styleValArr [ 0 ] = `${ Math . round ( + styleValArr [ 0 ] . split ( 'px' ) [ 0 ] * 100 / remScale ) / 100 }rem` ; styleVal = styleValArr . join ( ' ' ) ; } if ( styleKey . includes ( 'background-' ) ) { styleVal = formatBGPxToRem ( styleVal , remScale ) ; } if ( styleKey == 'background' ) { styleVal = formatBGradientPxToRem ( styleVal , remScale ) ; } if ( styleKey . includes ( 'text-shadow' ) ) { styleVal = formatTextShadowPxToRem ( styleVal , remScale ) ; } if ( styleKey . includes ( 'box-shadow' ) || styleKey . includes ( 'text-shadow' ) ) { styleVal = formatBoxShadowPxToRem ( styleVal , remScale ) ; } } styleObj [ styleKey ] = styleVal ; } return styleObj ; } ;