Use sass-migrator to migrate division to math.div (https://github.com/woocommerce/woocommerce-admin/pull/7136)

This commit is contained in:
Sam Seay 2021-06-10 21:09:27 +12:00 committed by GitHub
parent 6175ad87c2
commit 77906db0ff
12 changed files with 64 additions and 19 deletions

View File

@ -139,9 +139,11 @@ async function buildScssFile( styleFile ) {
path.resolve( __dirname, '../../node_modules' ),
],
data:
'@forward "sass:math"; @use "sass:math";' +
[ 'colors', 'variables', 'breakpoints', 'mixins' ]
.map( ( imported ) => `@import "_${ imported }";` )
.join( ' ' ) + fs.readFileSync( styleFile, 'utf8' ),
.join( ' ' ) +
fs.readFileSync( styleFile, 'utf8' ),
} );
const postCSSConfig = require( '@wordpress/postcss-plugins-preset' );

View File

@ -1,9 +1,7 @@
.woocommerce-settings-historical-data__columns {
display: grid;
grid-column-gap: $gap-large;
grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
grid-template-columns: calc(50% - #{math.div($gap-large, 2)}) calc(50% - #{math.div($gap-large, 2)});
.woocommerce-settings-historical-data__column {
align-self: end;

View File

@ -5,7 +5,7 @@
.woocommerce-dashboard__columns {
display: grid;
grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
grid-template-columns: calc(50% - #{math.div($gap-large, 2)}) calc(50% - #{math.div($gap-large, 2)});
grid-column-gap: $gap-large;
// Auto-position fix for IE11.

View File

@ -37,10 +37,10 @@
}
.woocommerce-layout__inbox-badge {
margin-left: $gap-small / 2;
margin-left: math.div($gap-small, 2);
background-color: $gray-700;
border-radius: 13px;
padding: 0 $gap-small / 2;
padding: 0 math.div($gap-small, 2);
color: $white;
display: inline-block;
text-align: center;

View File

@ -43,7 +43,7 @@
}
.woocommerce-activity-card {
padding: $gap-largest/2 $gutter $gutter;
padding: math.div($gap-largest, 2) $gutter $gutter;
&:not(:last-of-type) {
border-bottom: 1px solid $gray-200;

View File

@ -1,7 +1,7 @@
// Rem output with px fallback
@mixin font-size( $sizeValue: 16, $lineHeight: false ) {
font-size: $sizeValue + px;
font-size: ( $sizeValue / 16 ) + rem;
font-size: math.div($sizeValue, 16) + rem;
@if ( $lineHeight ) {
line-height: $lineHeight;
}
@ -168,8 +168,8 @@
&:nth-child(#{$i}) {
grid-column-start: #{($i - 1) % $wrap-after + 1};
grid-column-end: #{($i - 1) % $wrap-after + 2};
grid-row-start: #{floor(( $i - 1 ) / $wrap-after) + 1};
grid-row-end: #{floor(( $i - 1 ) / $wrap-after) + 2};
grid-row-start: #{floor(math.div($i - 1, $wrap-after)) + 1};
grid-row-end: #{floor(math.div($i - 1, $wrap-after)) + 2};
}
}
}

View File

@ -9681,6 +9681,7 @@
"@wordpress/components": "10.2.0",
"@wordpress/compose": "3.23.1",
"@wordpress/date": "3.13.0",
"@wordpress/deprecated": "^3.1.1",
"@wordpress/dom": "2.16.0",
"@wordpress/element": "2.19.0",
"@wordpress/html-entities": "2.10.0",
@ -9781,6 +9782,18 @@
"rememo": "^3.0.0",
"tinycolor2": "^1.4.1",
"uuid": "^7.0.2"
},
"dependencies": {
"@wordpress/deprecated": {
"version": "2.12.3",
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.13.10",
"@wordpress/hooks": "^2.12.3"
}
}
}
},
"@wordpress/compose": {
@ -9805,6 +9818,16 @@
"use-memo-one": "^1.1.1"
},
"dependencies": {
"@wordpress/deprecated": {
"version": "2.12.3",
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.13.10",
"@wordpress/hooks": "^2.12.3"
}
},
"@wordpress/is-shallow-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-3.1.3.tgz",
@ -9816,6 +9839,27 @@
}
}
},
"@wordpress/deprecated": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-3.1.1.tgz",
"integrity": "sha512-0hILlCNhf0DukFo3hMWybf9q507cxnIHhC1GQ1crZtTqzKS2QY2C1/77V4YGPdBShUj5j1dPriYCzfB5jFFgqQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.13.10",
"@wordpress/hooks": "^3.1.1"
},
"dependencies": {
"@wordpress/hooks": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.1.1.tgz",
"integrity": "sha512-9f6H9WBwu6x/MM4ZCVLGGBuMiBcyaLapmAku5IwcWaeB2PtPduwjmk2NfGx35TuhBQD554DUg8WtTjIS019UAg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.13.10"
}
}
}
},
"@wordpress/hooks": {
"version": "2.12.3",
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.12.3.tgz",

View File

@ -77,7 +77,7 @@
order: 1;
margin-top: -8px;
margin-left: 0;
padding-left: $gap / 2;
padding-left: math.div($gap, 2);
border-right: 0;
min-height: 0;
}

View File

@ -54,8 +54,8 @@
}
.woocommerce-pagination__page-arrows-label {
margin-top: $spacing / 2;
margin-right: $spacing / 2;
margin-top: math.div($spacing, 2);
margin-right: math.div($spacing, 2);
}
.woocommerce-pagination__page-picker {
@ -66,7 +66,7 @@
margin-left: 0;
}
.woocommerce-pagination__page-picker-input {
margin-left: $spacing / 2;
margin-left: math.div($spacing, 2);
width: 60px;
height: 34px;
box-shadow: none;
@ -98,7 +98,7 @@
}
.components-base-control__label {
margin-right: $spacing / 2;
margin-right: math.div($spacing, 2);
}
}
}

View File

@ -191,7 +191,7 @@
.woocommerce-search-list__item-count {
flex: 0 1 auto;
padding: $gap-smallest/2 $gap-smaller;
padding: math.div($gap-smallest, 2) $gap-smaller;
border: 1px solid $gray-100;
border-radius: 12px;
font-size: 0.8em;

View File

@ -115,7 +115,7 @@
align-self: flex-start;
flex-grow: 1;
border-bottom: 1px solid $gray-100;
margin-top: $step-icon-size / 2 + $gap-smaller;
margin-top: math.div($step-icon-size, 2) + $gap-smaller;
&:last-child {
display: none;
@ -146,7 +146,7 @@
.woocommerce-stepper__step::after {
content: '';
position: absolute;
left: $step-icon-size / 2 + $gap-smaller;
left: math.div($step-icon-size, 2) + $gap-smaller;
top: $step-icon-size + ( $gap-smaller * 2 );
height: calc(100% - #{$step-icon-size} - #{$gap-smaller * 2});
border-left: 1px solid $gray-100;

View File

@ -143,6 +143,7 @@ const webpackConfig = {
},
webpackImporter: true,
additionalData:
'@use "sass:math";' +
'@import "_colors"; ' +
'@import "_variables"; ' +
'@import "_breakpoints"; ' +