From 0e3ee3dc77b21aec21c342cf7602b35b3d3b4163 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 28 Sep 2018 15:18:24 +0800 Subject: [PATCH] [improvement] use less as css compiler (#664) --- build/compiler.js | 8 +- build/webpack.doc.dev.js | 5 +- dist/col/index.wxss | 2 +- dist/common/index.wxss | 1 - docs/src/App.vue | 2 +- docs/src/Preview.vue | 2 +- package.json | 5 +- .../action-sheet/{index.css => index.less} | 20 +- packages/area/{index.css => index.less} | 12 +- packages/badge-group/index.css | 6 - packages/badge-group/index.less | 6 + packages/badge/{index.css => index.less} | 20 +- packages/button/{index.css => index.less} | 44 +- packages/card/{index.css => index.less} | 14 +- packages/cell-group/index.css | 2 - packages/cell-group/index.less | 2 + packages/cell/{index.css => index.less} | 18 +- packages/col/index.css | 9 - packages/col/index.less | 11 + packages/common/index.css | 8 +- packages/common/style/clearfix.css | 5 - packages/common/style/clearfix.less | 5 + packages/common/style/ellipsis.css | 13 - packages/common/style/ellipsis.less | 13 + .../style/{hairline.css => hairline.less} | 4 +- .../mixins/{clearfix.css => clearfix.less} | 2 +- .../mixins/{ellipsis.css => ellipsis.less} | 6 +- .../mixins/{hairline.css => hairline.less} | 4 +- packages/common/style/var.css | 38 - packages/common/style/var.less | 38 + packages/dialog/{index.css => index.less} | 10 +- packages/field/{index.css => index.less} | 12 +- packages/icon/{index.css => index.less} | 4 +- packages/loading/{index.css => index.less} | 13 +- packages/nav-bar/{index.css => index.less} | 10 +- packages/notice-bar/{index.css => index.less} | 0 packages/notify/{index.css => index.less} | 4 +- packages/overlay/{index.css => index.less} | 0 packages/panel/index.css | 14 - packages/panel/index.less | 14 + packages/popup/{index.css => index.less} | 4 +- packages/progress/{index.css => index.less} | 6 +- .../radio-group/{index.css => index.less} | 14 +- packages/radio/{index.css => index.less} | 16 +- packages/row/{index.css => index.less} | 0 packages/search/{index.css => index.less} | 8 +- packages/slider/{index.css => index.less} | 8 +- packages/stepper/{index.css => index.less} | 22 +- packages/steps/{index.css => index.less} | 22 +- packages/submit-bar/{index.css => index.less} | 10 +- .../switch-cell/{index.css => index.less} | 2 +- packages/switch/{index.css => index.less} | 6 +- .../tabbar-item/{index.css => index.less} | 6 +- packages/tabbar/{index.css => index.less} | 2 +- packages/tabs/{index.css => index.less} | 44 +- packages/tag/{index.css => index.less} | 24 +- packages/toast/{index.css => index.less} | 4 +- packages/transition/{index.css => index.less} | 0 .../tree-select/{index.css => index.less} | 4 +- postcss.config.js | 2 - yarn.lock | 877 +++++++++--------- 61 files changed, 772 insertions(+), 715 deletions(-) delete mode 100644 dist/common/index.wxss rename packages/action-sheet/{index.css => index.less} (71%) rename packages/area/{index.css => index.less} (84%) delete mode 100644 packages/badge-group/index.css create mode 100644 packages/badge-group/index.less rename packages/badge/{index.css => index.less} (70%) rename packages/button/{index.css => index.less} (60%) rename packages/card/{index.css => index.less} (83%) delete mode 100644 packages/cell-group/index.css create mode 100644 packages/cell-group/index.less rename packages/cell/{index.css => index.less} (78%) delete mode 100644 packages/col/index.css create mode 100644 packages/col/index.less delete mode 100644 packages/common/style/clearfix.css create mode 100644 packages/common/style/clearfix.less delete mode 100644 packages/common/style/ellipsis.css create mode 100644 packages/common/style/ellipsis.less rename packages/common/style/{hairline.css => hairline.less} (90%) rename packages/common/style/mixins/{clearfix.css => clearfix.less} (80%) rename packages/common/style/mixins/{ellipsis.css => ellipsis.less} (68%) rename packages/common/style/mixins/{hairline.css => hairline.less} (78%) delete mode 100644 packages/common/style/var.css create mode 100644 packages/common/style/var.less rename packages/dialog/{index.css => index.less} (81%) rename packages/field/{index.css => index.less} (88%) rename packages/icon/{index.css => index.less} (98%) rename packages/loading/{index.css => index.less} (80%) rename packages/nav-bar/{index.css => index.less} (84%) rename packages/notice-bar/{index.css => index.less} (100%) rename packages/notify/{index.css => index.less} (77%) rename packages/overlay/{index.css => index.less} (100%) delete mode 100644 packages/panel/index.css create mode 100644 packages/panel/index.less rename packages/popup/{index.css => index.less} (96%) rename packages/progress/{index.css => index.less} (85%) rename packages/radio-group/{index.css => index.less} (74%) rename packages/radio/{index.css => index.less} (74%) rename packages/row/{index.css => index.less} (100%) rename packages/search/{index.css => index.less} (80%) rename packages/slider/{index.css => index.less} (81%) rename packages/stepper/{index.css => index.less} (73%) rename packages/steps/{index.css => index.less} (87%) rename packages/submit-bar/{index.css => index.less} (81%) rename packages/switch-cell/{index.css => index.less} (75%) rename packages/switch/{index.css => index.less} (88%) rename packages/tabbar-item/{index.css => index.less} (87%) rename packages/tabbar/{index.css => index.less} (79%) rename packages/tabs/{index.css => index.less} (62%) rename packages/tag/{index.css => index.less} (59%) rename packages/toast/{index.css => index.less} (93%) rename packages/transition/{index.css => index.less} (100%) rename packages/tree-select/{index.css => index.less} (91%) diff --git a/build/compiler.js b/build/compiler.js index 4d53495e..9a5d6bf1 100644 --- a/build/compiler.js +++ b/build/compiler.js @@ -1,6 +1,7 @@ const gulp = require('gulp'); const path = require('path'); const babel = require('gulp-babel'); +const less = require('gulp-less'); const postcss = require('gulp-postcss'); const cssmin = require('gulp-clean-css'); const rename = require('gulp-rename'); @@ -8,15 +9,16 @@ const rename = require('gulp-rename'); const isProduction = process.env.NODE_ENV === 'production'; const src = path.join(__dirname, '../packages'); const dist = path.join(__dirname, isProduction ? '../dist' : '../example/dist'); -const ext = ['js', 'ts', 'css', 'json', 'wxml']; +const ext = ['js', 'ts', 'less', 'json', 'wxml']; function copy(ext) { return gulp.src([src + '/**/*.' + ext]).pipe(gulp.dest(dist)); } -gulp.task('compile-css', () => { +gulp.task('compile-less', () => { return gulp - .src([src + '/**/*.css']) + .src([src + '/**/*.less']) + .pipe(less()) .pipe(postcss()) .pipe(cssmin()) .pipe( diff --git a/build/webpack.doc.dev.js b/build/webpack.doc.dev.js index 471130e9..9b39aa3e 100644 --- a/build/webpack.doc.dev.js +++ b/build/webpack.doc.dev.js @@ -52,11 +52,12 @@ module.exports = { use: 'babel-loader' }, { - test: /\.(css|postcss)$/, + test: /\.(css|less)$/, use: [ 'style-loader', 'css-loader', - 'postcss-loader' + 'postcss-loader', + 'less-loader' ] }, { diff --git a/dist/col/index.wxss b/dist/col/index.wxss index b33e9238..e45e6c0d 100644 --- a/dist/col/index.wxss +++ b/dist/col/index.wxss @@ -1 +1 @@ -.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16667%}.van-col--offset-1{margin-left:4.16667%}.van-col--2{width:8.33333%}.van-col--offset-2{margin-left:8.33333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66667%}.van-col--offset-4{margin-left:16.66667%}.van-col--5{width:20.83333%}.van-col--offset-5{margin-left:20.83333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16667%}.van-col--offset-7{margin-left:29.16667%}.van-col--8{width:33.33333%}.van-col--offset-8{margin-left:33.33333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66667%}.van-col--offset-10{margin-left:41.66667%}.van-col--11{width:45.83333%}.van-col--offset-11{margin-left:45.83333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16667%}.van-col--offset-13{margin-left:54.16667%}.van-col--14{width:58.33333%}.van-col--offset-14{margin-left:58.33333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66667%}.van-col--offset-16{margin-left:66.66667%}.van-col--17{width:70.83333%}.van-col--offset-17{margin-left:70.83333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16667%}.van-col--offset-19{margin-left:79.16667%}.van-col--20{width:83.33333%}.van-col--offset-20{margin-left:83.33333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66667%}.van-col--offset-22{margin-left:91.66667%}.van-col--23{width:95.83333%}.van-col--offset-23{margin-left:95.83333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%} \ No newline at end of file +.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%} \ No newline at end of file diff --git a/dist/common/index.wxss b/dist/common/index.wxss deleted file mode 100644 index 9d7524fc..00000000 --- a/dist/common/index.wxss +++ /dev/null @@ -1 +0,0 @@ -.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2}.van-multi-ellipsis--l3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3}.van-clearfix::after{content:'';display:table;clear:both}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{content:'';position:absolute;top:-50%;left:-50%;right:-50%;bottom:-50%;-webkit-transform:scale(.5);transform:scale(.5);pointer-events:none;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;border:0 solid #eee}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px} \ No newline at end of file diff --git a/docs/src/App.vue b/docs/src/App.vue index 220e3bc5..55693470 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -16,7 +16,7 @@ export default { }; -