Feat/rpx (#21)

* chore(src): change @pixelsize to @rpx

* feat(src): support compilng to rpx

* fix(app): fix less compiler error

package.json

@@ -5,6 +5,7 @@
     "dev": "minidev dev --less --typescript --no-source-map",
     "build": "npm run build:component && npm run build:site",
     "build:component": "NODE_ENV=production node scripts/compile.js",
+    "build:component:rpx": "NODE_ENV=production node scripts/compile.js --rpx",
     "build:site": "dumi build",
     "build:demo": "minidev build --output=$PWD/dist --typescript --less --no-source-map",
     "deploy:docs": "echo 'mini.ant.design' > ./docs-dist/CNAME && gh-pages -d docs-dist",

scripts/compile.js

@@ -18,7 +18,8 @@ const env = { jsUnitRpx: isRpx };
 gulp.task('less', () => gulp.src(`${src}/**/index.less`)
   .pipe(less({
     modifyVars: {
-      '@pixelSize': isRpx ? '1rpx' : '0.5px',
+      '@rpx': isRpx ? '1rpx': '0.5px',
+      '@pixelSize': isRpx ? '1rpx': '0.5px',
     },
   }))
   // eslint-disable-next-line no-console

src/Loading/index.less

@@ -69,15 +69,15 @@
     align-items: center;
     width: @size-1;
     height: @size-1;
-    min-width: 66 * @pixelSize;
-    min-height: 66 * @pixelSize;
+    min-width: 66 * @rpx;
+    min-height: 66 * @rpx;
 
     &-item {
-        flex: 0 0 8 * @pixelSize;
-        min-width: 6 * @pixelSize;
-        min-height: 6 * @pixelSize;
-        max-width: 8 * @pixelSize;
-        max-height: 8 * @pixelSize;
+        flex: 0 0 8 * @rpx;
+        min-width: 6 * @rpx;
+        min-height: 6 * @rpx;
+        max-width: 8 * @rpx;
+        max-height: 8 * @rpx;
         overflow: hidden;
         margin-right: @h-spacing-standard;
         font-size: 0;

src/LoadingMini/index.less

@@ -6,15 +6,15 @@
     align-items: center;
     width: @size-1;
     height: @size-1;
-    min-width: 66 * @pixelSize;
-    min-height: 66 * @pixelSize;
+    min-width: 66 * @rpx;
+    min-height: 66 * @rpx;
   }
   &-item {
-    flex: 0 0 8 * @pixelSize;
-    min-width: 6 * @pixelSize;
-    min-height: 6 * @pixelSize;
-    max-width: 8 * @pixelSize;
-    max-height: 8 * @pixelSize;
+    flex: 0 0 8 * @rpx;
+    min-width: 6 * @rpx;
+    min-height: 6 * @rpx;
+    max-width: 8 * @rpx;
+    max-height: 8 * @rpx;
     overflow: hidden;
     margin-right: @h-spacing-standard;
     font-size: 0;

src/Tabs/index.less

@@ -24,7 +24,7 @@
       top: 0;
       bottom: 0;
       z-index: 9;
-      width: 72 * @pixelSize;
+      width: 72 * @rpx;
       background-color: @tabs-inverse-color;
       pointer-events: none;
       &-left {

src/VTabs/index.less

@@ -8,12 +8,12 @@
   display: flex;
   flex-direction: row;
   &-bar {
-    width: 210 * @pixelSize;
+    width: 210 * @rpx;
     overflow: hidden;
     &-scroll-view {
       display: flex;
       flex-direction: column;
-      width: 210 * @pixelSize;
+      width: 210 * @rpx;
       height: 100%;
       background-color: @color-divider-background;
       &::-webkit-scrollbar {
@@ -22,13 +22,13 @@
     }
     &-item {
       position: relative;
-      width: 210 * @pixelSize;
+      width: 210 * @rpx;
       padding: @size-4 @h-spacing-large;
       overflow: hidden;
       display: flex;
       align-items: center;
       font-size: @font-size-content;
-      line-height: 37 * @pixelSize;
+      line-height: 37 * @rpx;
       color: @color-text-title;
       background-color: @color-divider-background;
       box-sizing: border-box;