From 11ce2a602f6065507df2d5e8ead45d6adea27398 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 3 Nov 2018 21:08:06 +0800 Subject: [PATCH] [breaking change] rebuild style struct (#2021) --- .github/CONTRIBUTING.md | 1 - README.md | 9 +- README.zh-CN.md | 9 +- build/build-components.js | 79 +- build/build-iconfont.js | 7 +- build/build-lib.js | 2 +- build/build-style-entry.js | 41 +- build/build-style.js | 16 + build/get-components.js | 10 +- build/release.sh | 7 - build/webpack.dev.js | 5 +- docs/markdown/changelog.en-US.md | 6 +- docs/markdown/changelog.zh-CN.md | 6 +- docs/markdown/contribution.zh-CN.md | 8 +- docs/markdown/quickstart.en-US.md | 7 +- docs/markdown/quickstart.zh-CN.md | 7 +- docs/markdown/theme.en-US.md | 12 +- docs/markdown/theme.zh-CN.md | 14 +- docs/src/DocsApp.vue | 2 +- docs/src/WapApp.vue | 2 +- docs/src/components/DemoList.vue | 10 +- docs/src/components/DemoPages.vue | 2 +- docs/src/components/MobileNav.vue | 2 +- docs/src/demo-entry.js | 2 +- docs/src/doc.config.js | 4 +- docs/src/docs-entry.js | 4 +- docs/src/mobile.js | 2 +- jest.config.js | 2 +- package.json | 29 +- packages/actionsheet/demo/index.vue | 2 +- .../index.less} | 20 +- .../index.less} | 4 +- .../index.less} | 12 +- packages/badge-group/index.less | 5 + packages/badge/demo/index.vue | 2 +- .../src/badge.css => badge/index.less} | 18 +- packages/button/demo/index.vue | 2 +- .../src/button.css => button/index.less} | 44 +- .../src/card.css => card/index.less} | 16 +- packages/cell-group/index.less | 5 + packages/cell/demo/index.vue | 2 +- .../src/cell.css => cell/index.less} | 22 +- packages/checkbox/demo/index.vue | 2 +- .../src/checkbox.css => checkbox/index.less} | 26 +- packages/circle/demo/index.vue | 2 +- .../src/circle.css => circle/index.less} | 4 +- packages/col/demo/index.vue | 2 +- packages/col/index.less | 13 + .../collapse.css => collapse-item/index.less} | 8 +- packages/collapse/demo/index.vue | 8 +- packages/contact-card/demo/index.vue | 2 +- .../index.less} | 8 +- .../index.less} | 2 +- .../index.less} | 6 +- packages/coupon-list/demo/index.vue | 2 +- .../index.less} | 30 +- packages/dialog/demo/index.vue | 2 +- .../src/dialog.css => dialog/index.less} | 8 +- packages/field/demo/index.vue | 6 +- .../src/field.css => field/index.less} | 14 +- packages/goods-action-big-btn/index.less | 10 + packages/goods-action-mini-btn/index.less | 32 + packages/goods-action/demo/index.vue | 2 +- .../index.less} | 8 +- packages/icon/config/template-local.js | 2 +- .../config/{template.css => template.tpl} | 2 +- packages/icon/demo/index.vue | 2 +- packages/icon/en-US.md | 2 +- .../src/icon.css => icon/index.less} | 2 +- .../src/icon-local.css => icon/local.less} | 2 +- packages/icon/vant-icon-872dd0.ttf | Bin 25388 -> 25388 bytes packages/icon/zh-CN.md | 2 +- packages/image-preview/demo/index.vue | 2 +- .../index.less} | 4 +- packages/index.less | 70 + .../src/info.css => info/index.less} | 6 +- packages/lazyload/demo/index.vue | 2 +- packages/list/demo/index.vue | 2 +- .../src/list.css => list/index.less} | 4 +- packages/loading/demo/index.vue | 2 +- .../src/loading.css => loading/index.less} | 16 +- .../src/nav-bar.css => nav-bar/index.less} | 10 +- packages/notice-bar/demo/index.vue | 2 +- .../notice-bar.css => notice-bar/index.less} | 6 +- packages/number-keyboard/demo/index.vue | 2 +- .../index.less} | 38 +- packages/pagination/demo/index.vue | 2 +- .../pagination.css => pagination/index.less} | 20 +- packages/panel/demo/index.vue | 2 +- .../src/panel.css => panel/index.less} | 6 +- .../index.less} | 10 +- .../src/picker.css => picker/index.less} | 14 +- packages/popup/demo/index.vue | 2 +- .../src/popup.css => popup/index.less} | 4 +- packages/progress/demo/index.vue | 2 +- .../src/progress.css => progress/index.less} | 6 +- packages/pull-refresh/demo/index.vue | 2 +- .../index.less} | 4 +- packages/radio/demo/index.vue | 2 +- .../src/radio.css => radio/index.less} | 16 +- packages/rate/demo/index.vue | 2 +- .../src/rate.css => rate/index.less} | 2 +- .../{vant-css/src/row.css => row/index.less} | 2 +- .../src/search.css => search/index.less} | 8 +- packages/sku/demo/index.vue | 2 +- .../{vant-css/src/sku.css => sku/index.less} | 42 +- packages/slider/demo/index.vue | 2 +- .../src/slider.css => slider/index.less} | 8 +- .../src/steps.css => step/index.less} | 73 +- packages/stepper/demo/index.vue | 2 +- .../src/stepper.css => stepper/index.less} | 24 +- packages/steps/demo/index.vue | 6 +- packages/steps/index.less | 52 + .../animation.css => style/animation.less} | 0 packages/style/base.less | 16 + packages/style/clearfix.less | 5 + packages/{vant-css => style}/demo/index.vue | 6 +- packages/style/ellipsis.less | 5 + packages/{vant-css => style}/en-US.md | 0 .../hairline.css => style/hairline.less} | 4 +- .../mixins/clearfix.less} | 2 +- .../mixins/ellipsis.less} | 7 +- packages/style/mixins/hairline.less | 27 + .../normalize.css => style/normalize.less} | 0 .../src/reset.css => style/reset.less} | 6 +- packages/style/var.less | 54 + packages/{vant-css => style}/zh-CN.md | 0 packages/submit-bar/demo/index.vue | 6 +- .../submit-bar.css => submit-bar/index.less} | 8 +- packages/swipe-cell/demo/index.vue | 8 +- .../swipe-cell.css => swipe-cell/index.less} | 2 +- packages/swipe-item/index.less | 6 + packages/swipe/demo/index.vue | 2 +- .../src/swipe.css => swipe/index.less} | 20 +- .../index.less} | 2 +- packages/switch/demo/index.vue | 2 +- .../src/switch.css => switch/index.less} | 8 +- packages/tab/demo/index.vue | 2 +- packages/tab/index.less | 27 + packages/tabbar-item/index.less | 44 + packages/tabbar/demo/index.vue | 2 +- packages/tabbar/index.less | 14 + .../{vant-css/src/tab.css => tabs/index.less} | 59 +- packages/tag/demo/index.vue | 2 +- .../{vant-css/src/tag.css => tag/index.less} | 4 +- packages/toast/demo/index.vue | 2 +- .../src/toast.css => toast/index.less} | 4 +- .../index.less} | 10 +- packages/uploader/demo/index.vue | 2 +- .../src/uploader.css => uploader/index.less} | 2 +- packages/vant-css/gulpfile.js | 22 - packages/vant-css/package.json | 25 - packages/vant-css/src/base.css | 15 - packages/vant-css/src/col.css | 11 - packages/vant-css/src/common/clearfix.css | 5 - packages/vant-css/src/common/ellipsis.css | 5 - packages/vant-css/src/common/var.css | 38 - packages/vant-css/src/index.css | 63 - packages/vant-css/src/mixins/hairline.css | 27 - packages/vant-css/src/tabbar.css | 57 - packages/vant-css/src/vant-icon-243435.ttf | Bin 26116 -> 0 bytes packages/vant-css/yarn.lock | 3285 ----------------- packages/waterfall/demo/index.vue | 2 +- postcss.config.js | 2 - yarn.lock | 1018 +++-- 165 files changed, 1371 insertions(+), 4729 deletions(-) create mode 100644 build/build-style.js rename packages/{vant-css/src/actionsheet.css => actionsheet/index.less} (72%) rename packages/{vant-css/src/address-edit.css => address-edit/index.less} (89%) rename packages/{vant-css/src/address-list.css => address-list/index.less} (89%) create mode 100644 packages/badge-group/index.less rename packages/{vant-css/src/badge.css => badge/index.less} (69%) rename packages/{vant-css/src/button.css => button/index.less} (64%) rename packages/{vant-css/src/card.css => card/index.less} (83%) create mode 100644 packages/cell-group/index.less rename packages/{vant-css/src/cell.css => cell/index.less} (78%) rename packages/{vant-css/src/checkbox.css => checkbox/index.less} (62%) rename packages/{vant-css/src/circle.css => circle/index.less} (90%) create mode 100644 packages/col/index.less rename packages/{vant-css/src/collapse.css => collapse-item/index.less} (83%) rename packages/{vant-css/src/contact-card.css => contact-card/index.less} (88%) rename packages/{vant-css/src/contact-edit.css => contact-edit/index.less} (85%) rename packages/{vant-css/src/contact-list.css => contact-list/index.less} (92%) rename packages/{vant-css/src/coupon-list.css => coupon-list/index.less} (78%) rename packages/{vant-css/src/dialog.css => dialog/index.less} (89%) rename packages/{vant-css/src/field.css => field/index.less} (89%) create mode 100644 packages/goods-action-big-btn/index.less create mode 100644 packages/goods-action-mini-btn/index.less rename packages/{vant-css/src/goods-action.css => goods-action/index.less} (83%) rename packages/icon/config/{template.css => template.tpl} (94%) rename packages/{vant-css/src/icon.css => icon/index.less} (99%) rename packages/{vant-css/src/icon-local.css => icon/local.less} (58%) rename packages/{vant-css/src/image-preview.css => image-preview/index.less} (91%) create mode 100644 packages/index.less rename packages/{vant-css/src/info.css => info/index.less} (82%) rename packages/{vant-css/src/list.css => list/index.less} (85%) rename packages/{vant-css/src/loading.css => loading/index.less} (85%) rename packages/{vant-css/src/nav-bar.css => nav-bar/index.less} (85%) rename packages/{vant-css/src/notice-bar.css => notice-bar/index.less} (92%) rename packages/{vant-css/src/number-keyboard.css => number-keyboard/index.less} (71%) rename packages/{vant-css/src/pagination.css => pagination/index.less} (72%) rename packages/{vant-css/src/panel.css => panel/index.less} (60%) rename packages/{vant-css/src/password-input.css => password-input/index.less} (84%) rename packages/{vant-css/src/picker.css => picker/index.less} (85%) rename packages/{vant-css/src/popup.css => popup/index.less} (96%) rename packages/{vant-css/src/progress.css => progress/index.less} (86%) rename packages/{vant-css/src/pull-refresh.css => pull-refresh/index.less} (91%) rename packages/{vant-css/src/radio.css => radio/index.less} (73%) rename packages/{vant-css/src/rate.css => rate/index.less} (82%) rename packages/{vant-css/src/row.css => row/index.less} (94%) rename packages/{vant-css/src/search.css => search/index.less} (82%) rename packages/{vant-css/src/sku.css => sku/index.less} (84%) rename packages/{vant-css/src/slider.css => slider/index.less} (82%) rename packages/{vant-css/src/steps.css => step/index.less} (66%) rename packages/{vant-css/src/stepper.css => stepper/index.less} (73%) create mode 100644 packages/steps/index.less rename packages/{vant-css/src/common/animation.css => style/animation.less} (100%) create mode 100644 packages/style/base.less create mode 100644 packages/style/clearfix.less rename packages/{vant-css => style}/demo/index.vue (96%) create mode 100644 packages/style/ellipsis.less rename packages/{vant-css => style}/en-US.md (100%) rename packages/{vant-css/src/common/hairline.css => style/hairline.less} (87%) rename packages/{vant-css/src/mixins/clearfix.css => style/mixins/clearfix.less} (80%) rename packages/{vant-css/src/mixins/ellipsis.css => style/mixins/ellipsis.less} (63%) create mode 100644 packages/style/mixins/hairline.less rename packages/{vant-css/src/common/normalize.css => style/normalize.less} (100%) rename packages/{vant-css/src/reset.css => style/reset.less} (94%) create mode 100644 packages/style/var.less rename packages/{vant-css => style}/zh-CN.md (100%) rename packages/{vant-css/src/submit-bar.css => submit-bar/index.less} (86%) rename packages/{vant-css/src/swipe-cell.css => swipe-cell/index.less} (91%) create mode 100644 packages/swipe-item/index.less rename packages/{vant-css/src/swipe.css => swipe/index.less} (62%) rename packages/{vant-css/src/switch-cell.css => switch-cell/index.less} (78%) rename packages/{vant-css/src/switch.css => switch/index.less} (85%) create mode 100644 packages/tab/index.less create mode 100644 packages/tabbar-item/index.less create mode 100644 packages/tabbar/index.less rename packages/{vant-css/src/tab.css => tabs/index.less} (56%) rename packages/{vant-css/src/tag.css => tag/index.less} (91%) rename packages/{vant-css/src/toast.css => toast/index.less} (95%) rename packages/{vant-css/src/tree-select.css => tree-select/index.less} (84%) rename packages/{vant-css/src/uploader.css => uploader/index.less} (91%) delete mode 100644 packages/vant-css/gulpfile.js delete mode 100644 packages/vant-css/package.json delete mode 100644 packages/vant-css/src/base.css delete mode 100644 packages/vant-css/src/col.css delete mode 100644 packages/vant-css/src/common/clearfix.css delete mode 100644 packages/vant-css/src/common/ellipsis.css delete mode 100644 packages/vant-css/src/common/var.css delete mode 100644 packages/vant-css/src/index.css delete mode 100644 packages/vant-css/src/mixins/hairline.css delete mode 100644 packages/vant-css/src/tabbar.css delete mode 100644 packages/vant-css/src/vant-icon-243435.ttf delete mode 100644 packages/vant-css/yarn.lock diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 0b4b13558..dbf811bb7 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -38,6 +38,5 @@ npm run dev ## Component Developing Guidelines - Create new directory under `packages` for a new component. -- All the style code are located under `packages/vant-css/src`. - Refer to `Sku` for nested components. - Refer to `Button` for components that depend on other components. diff --git a/README.md b/README.md index 0dff553e1..db98cec38 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Build Status downloads JS Gzip Size - CSS Gzip Size + CSS Gzip Size issue Coverage Status

@@ -53,7 +53,7 @@ yarn add vant ```html - + @@ -95,8 +95,7 @@ import { Button } from 'vant'; ```js import Button from 'vant/lib/button'; -import 'vant/lib/vant-css/base.css'; -import 'vant/lib/vant-css/button.css'; +import 'vant/lib/button/style'; ``` #### 3. Import all components @@ -104,7 +103,7 @@ import 'vant/lib/vant-css/button.css'; ```js import Vue from 'vue'; import Vant from 'vant'; -import 'vant/lib/vant-css/index.css'; +import 'vant/lib/index.css'; Vue.use(Vant); ``` diff --git a/README.zh-CN.md b/README.zh-CN.md index ff93ce2ea..0a4148d9e 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -12,7 +12,7 @@ Build Status downloads JS Gzip Size - CSS Gzip Size + CSS Gzip Size issue Coverage Status

@@ -54,7 +54,7 @@ yarn add vant ```html - + @@ -100,8 +100,7 @@ import { Button } from 'vant'; ```js import Button from 'vant/lib/button'; -import 'vant/lib/vant-css/base.css'; -import 'vant/lib/vant-css/button.css'; +import 'vant/lib/button/style'; ``` #### 方式三. 导入所有组件 @@ -109,7 +108,7 @@ import 'vant/lib/vant-css/button.css'; ```js import Vue from 'vue'; import Vant from 'vant'; -import 'vant/lib/vant-css/index.css'; +import 'vant/lib/index.css'; Vue.use(Vant); ``` diff --git a/build/build-components.js b/build/build-components.js index 2e0a5ae1d..164ff0bc4 100644 --- a/build/build-components.js +++ b/build/build-components.js @@ -15,51 +15,56 @@ const compilerOption = { } }; -const whiteList = /(demo|vant-css|test|\.md)$/; +const isDir = dir => fs.lstatSync(dir).isDirectory(); +const isJs = path => /\.js$/.test(isJs); +const isSfc = path => /\.vue$/.test(path); +const isCode = path => !/(demo|test|\.md)$/.test(path); + +function compile(dir) { + const files = fs.readdirSync(dir); + + files.forEach(file => { + const filePath = path.join(dir, file); + + // reomve unnecessary files + if (!isCode(file)) { + return fs.removeSync(filePath); + } + + // scan dir + if (isDir(filePath)) { + return compile(filePath); + } + + // compile sfc + if (isSfc(file)) { + const source = fs.readFileSync(filePath, 'utf-8'); + fs.removeSync(filePath); + + const jsPath = filePath.replace('.vue', '.js'); + const vuePath = filePath + '.js'; + const output = fs.existsSync(jsPath) ? vuePath : jsPath; + + return fs.outputFileSync(output, compiler(source, compilerOption).js); + } + + // compile js + if (isJs(file)) { + const { code } = babel.transformFileSync(filePath, compilerOption.babel); + fs.outputFileSync(filePath, code); + } + }); +} // clear dir fs.emptyDirSync(esDir); fs.emptyDirSync(libDir); -// copy packages +// compile es dir fs.copySync(srcDir, esDir); - compile(esDir); -function compile(dir, jsOnly = false) { - const files = fs.readdirSync(dir); - - files.forEach(file => { - const absolutePath = path.join(dir, file); - - // reomve unnecessary files - if (whiteList.test(file)) { - fs.removeSync(absolutePath); - // scan dir - } else if (isDir(absolutePath)) { - return compile(absolutePath); - // compile sfc - } else if (/\.vue$/.test(file) && !jsOnly) { - const source = fs.readFileSync(absolutePath, 'utf-8'); - fs.removeSync(absolutePath); - - const outputVuePath = absolutePath + '.js'; - const outputJsPath = absolutePath.replace('.vue', '.js'); - const output = fs.existsSync(outputJsPath) ? outputVuePath : outputJsPath; - - fs.outputFileSync(output, compiler(source, compilerOption).js); - } else if (/\.js$/.test(file)) { - const { code } = babel.transformFileSync(absolutePath, compilerOption.babel); - fs.outputFileSync(absolutePath, code); - } - }); -} - +// compile lib dir process.env.BABEL_MODULE = 'commonjs'; - fs.copySync(srcDir, libDir); compile(libDir); - -function isDir(dir) { - return fs.lstatSync(dir).isDirectory(); -} diff --git a/build/build-iconfont.js b/build/build-iconfont.js index 0f8fce51b..5b242d709 100644 --- a/build/build-iconfont.js +++ b/build/build-iconfont.js @@ -13,10 +13,9 @@ const config = require('../packages/icon/config'); const local = require('../packages/icon/config/template-local'); const iconDir = path.join(__dirname, '../packages/icon'); -const cssDir = path.join(__dirname, '../packages/vant-css/src'); const svgDir = path.join(iconDir, 'svg'); const sketch = path.join(iconDir, 'assets/icons.sketch'); -const template = path.join(iconDir, 'config/template.css'); +const template = path.join(iconDir, 'config/template.tpl'); // get md5 from sketch const md5 = md5File.sync(sketch).slice(0, 6); @@ -49,7 +48,7 @@ gulp.task('ttf', () => { iconfontCss({ fontName: config.name, path: template, - targetPath: '../vant-css/src/icon.css', + targetPath: '../icon/index.css', normalize: true, firstGlyph: 0xf000, cssClass: ttf // this is a trick to pass ttf to template @@ -67,7 +66,7 @@ gulp.task('ttf', () => { gulp.task('default', ['ttf'], () => { // generate icon-local.css fs.writeFileSync( - path.join(cssDir, 'icon-local.css'), + path.join(iconDir, 'local.css'), local(config.name, ttf) ); diff --git a/build/build-lib.js b/build/build-lib.js index adbfb3bf3..6114ebc0d 100644 --- a/build/build-lib.js +++ b/build/build-lib.js @@ -9,7 +9,7 @@ const tasks = [ 'lint', 'build:entry', 'build:components', - 'build:vant-css', + 'build:style', 'build:style-entry', 'build:vant' ]; diff --git a/build/build-style-entry.js b/build/build-style-entry.js index 2fef42fcc..805cdddaf 100644 --- a/build/build-style-entry.js +++ b/build/build-style-entry.js @@ -6,15 +6,17 @@ const fs = require('fs-extra'); const path = require('path'); const components = require('./get-components')(); const dependencyTree = require('dependency-tree'); -const whiteList = ['info', 'icon', 'loading', 'cell', 'button']; +const whiteList = ['info', 'icon', 'loading', 'cell', 'cell-group', 'button']; const dir = path.join(__dirname, '../es'); components.forEach(component => { - const deps = analyzeDependencies(component); + const deps = analyzeDependencies(component).map(dep => + getStyleRelativePath(component, dep) + ); const esEntry = path.join(dir, component, 'style/index.js'); const libEntry = path.join(__dirname, '../lib', component, 'style/index.js'); - const esContent = deps.map(dep => `import '../../vant-css/${dep}.css';`).join('\n'); - const libContent = deps.map(dep => `require('../../vant-css/${dep}.css');`).join('\n'); + const esContent = deps.map(dep => `import '${dep}';`).join('\n'); + const libContent = deps.map(dep => `require('${dep}');`).join('\n'); fs.outputFileSync(esEntry, esContent); fs.outputFileSync(libEntry, libContent); @@ -45,17 +47,38 @@ function search(tree, component, checkList) { Object.keys(tree).forEach(key => { search(tree[key], component, checkList); components - .filter(item => key.replace(dir, '').split('/').includes(item)) + .filter(item => + key + .replace(dir, '') + .split('/') + .includes(item) + ) .forEach(item => { - if (!checkList.includes(item) && !whiteList.includes(item) && item !== component) { + if ( + !checkList.includes(item) && + !whiteList.includes(item) && + item !== component + ) { checkList.push(item); } }); }); } -function checkComponentHasStyle(component) { - return fs.existsSync( - path.join(__dirname, `../es/vant-css/`, `${component}.css`) +function getStylePath(component) { + if (component === 'base') { + return path.join(__dirname, '../es/style/base.css'); + } + return path.join(__dirname, `../es/${component}/index.css`); +} + +function getStyleRelativePath(component, style) { + return path.relative( + path.join(__dirname, `../es/${component}/style`), + getStylePath(style) ); } + +function checkComponentHasStyle(component) { + return fs.existsSync(getStylePath(component)); +} diff --git a/build/build-style.js b/build/build-style.js new file mode 100644 index 000000000..1621fbe95 --- /dev/null +++ b/build/build-style.js @@ -0,0 +1,16 @@ +const gulp = require('gulp'); +const less = require('gulp-less'); +const postcss = require('gulp-postcss'); +const cssmin = require('gulp-clean-css'); + +// compile component css +gulp.task('compile', () => { + return gulp + .src(['../es/**/*.less', '../lib/**/*.less']) + .pipe(less()) + .pipe(postcss()) + .pipe(cssmin()) + .pipe(gulp.dest(file => file.base.replace('.less', '.css'))); +}); + +gulp.task('default', ['compile']); diff --git a/build/get-components.js b/build/get-components.js index 62a7483a4..3476940b5 100644 --- a/build/get-components.js +++ b/build/get-components.js @@ -1,8 +1,16 @@ const fs = require('fs'); const path = require('path'); +const excludes = [ + 'index.js', + 'index.less', + 'style', + 'mixins', + 'utils', + '.DS_Store' +]; + module.exports = function() { const dirs = fs.readdirSync(path.resolve(__dirname, '../packages')); - const excludes = ['index.js', 'vant-css', 'mixins', 'utils', '.DS_Store']; return dirs.filter(dirName => excludes.indexOf(dirName) === -1); }; diff --git a/build/release.sh b/build/release.sh index 16dc48d66..98b9246b1 100644 --- a/build/release.sh +++ b/build/release.sh @@ -14,13 +14,6 @@ then npm version $VERSION --no-git-tag-version VERSION=$VERSION npm run build:lib - # publish vant-css - echo "Releasing vant-css $VERSION ..." - cd packages/vant-css - npm version $VERSION - npm publish - cd ../.. - # commit git tag v$VERSION git commit -am "[release] $VERSION" diff --git a/build/webpack.dev.js b/build/webpack.dev.js index e853a6434..41a5c9089 100644 --- a/build/webpack.dev.js +++ b/build/webpack.dev.js @@ -56,11 +56,12 @@ module.exports = { use: 'babel-loader' }, { - test: /\.(css|postcss)$/, + test: /\.less$/, use: [ 'style-loader', 'css-loader', - 'postcss-loader' + 'postcss-loader', + 'less-loader' ] }, { diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index 3e888def8..0babb1af0 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -339,7 +339,7 @@ - fix Progress text empty [\#1411](https://github.com/youzan/vant/pull/1411) - fix Tab random insert order [\#1429](https://github.com/youzan/vant/pull/1429) - fix error when use Vue.use in typescript [\#1410](https://github.com/youzan/vant/pull/1410) -- fix vant-css missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426) +- fix style missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426) ## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11) @@ -1332,7 +1332,7 @@ **Breaking changes** -* remove reset.css in vant-css [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) +* remove reset.css in style [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) * reconstruct Swipe component, adjust some API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200) * optimize Search component，adjust struct [\#198](https://github.com/youzan/vant/pull/198) @@ -1388,7 +1388,7 @@ * fix Button active border color [\#150](https://github.com/youzan/vant/issues/150) * fix Stepper input style [\#159](https://github.com/youzan/vant/pull/159) * fix Waterfall disable props not work when display none [\#166](https://github.com/youzan/vant/pull/166) -* fix vant-css not compile calc property after build +* fix style not compile calc property after build * fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152) * fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158) diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index c0433de99..377305ae7 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -339,7 +339,7 @@ - 修复 Progress 文字为空时样式错误的问题 [\#1411](https://github.com/youzan/vant/pull/1411) - 修复 Tab 同时进行插入和删除时顺序错误的问题 [\#1429](https://github.com/youzan/vant/pull/1429) - 修复 Vue.use 方法 TypeScript 类型错误 [\#1410](https://github.com/youzan/vant/pull/1410) -- 修复 vant-css 依赖丢失 [\#1426](https://github.com/youzan/vant/pull/1426) +- 修复 style 依赖丢失 [\#1426](https://github.com/youzan/vant/pull/1426) ## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11) @@ -1325,7 +1325,7 @@ **Breaking changes** -* 移除 vant-css 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) +* 移除 style 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) * 重写 Swipe 组件，调整部分 API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200) * 优化 Search 组件，修改原有结构 [\#198](https://github.com/youzan/vant/pull/198) @@ -1381,7 +1381,7 @@ * 修复 Button active 状态下边框样式问题 [\#150](https://github.com/youzan/vant/issues/150) * 修复 Stepper 组件输入框样式错误 [\#159](https://github.com/youzan/vant/pull/159) * 修复 Waterfall 未显示时 disable 属性无法生效的问题 [\#166](https://github.com/youzan/vant/pull/166) -* 修复 vant-css 构建过程中未编译 calc 属性的问题 +* 修复 style 构建过程中未编译 calc 属性的问题 * 修复 MacOS 下 npm run dev 报错的问题 [\#152](https://github.com/youzan/vant/issues/152) * 修复文档在部分低版本浏览器路由失效的问题 [\#158](https://github.com/youzan/vant/pull/158) * 修复文档中遗漏 SwipeItem 组件引入方式的问题 [\#167](https://github.com/youzan/vant/pull/167) diff --git a/docs/markdown/contribution.zh-CN.md b/docs/markdown/contribution.zh-CN.md index ebdc6e822..139922d60 100644 --- a/docs/markdown/contribution.zh-CN.md +++ b/docs/markdown/contribution.zh-CN.md @@ -34,7 +34,6 @@ npm run dev ### 目录结构 - 仓库的组件代码位于 packages 下，每个组件一个文件夹 -- 组件样式代码位于 packages/vant-css/src 下，vant-css 也会在发布时单独发包 - docs 目录下是文档网站的代码，本地开发时可以在目录下运行 npm run dev 开启文档网站 项目目录大致如下： @@ -59,10 +58,11 @@ packages | ├─ test # 单元测试 | ├─ zh-CN.md # 中文文档 | ├─ en-US.md # 英文文档 +| ├─ index.less # 组件样式 | └─ index.vue # 组件入口 -└─ vant-css - ├─ index.css # 样式入口 - └─ button.css # 组件样式 +| +├─ index.js # 所有组件入口 +└─ index.less # 所有组件样式 ``` ### 组件文档 diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md index 901edf0f6..73a9c0a1f 100644 --- a/docs/markdown/quickstart.en-US.md +++ b/docs/markdown/quickstart.en-US.md @@ -41,7 +41,7 @@ yarn add vant ```html - + @@ -94,8 +94,7 @@ import { Button } from 'vant'; ```js import Button from 'vant/lib/button'; -import 'vant/lib/vant-css/base.css'; -import 'vant/lib/vant-css/button.css'; +import 'vant/lib/button/style'; ``` #### 3. Import all components @@ -103,7 +102,7 @@ import 'vant/lib/vant-css/button.css'; ```js import Vue from 'vue'; import Vant from 'vant'; -import 'vant/lib/vant-css/index.css'; +import 'vant/lib/index.css'; Vue.use(Vant); ``` diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 273fcc10c..f1a4a7fb3 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -47,7 +47,7 @@ yarn add vant ```html - + @@ -104,8 +104,7 @@ import { Button, Cell } from 'vant'; ```js import Button from 'vant/lib/button'; -import 'vant/lib/vant-css/base.css'; -import 'vant/lib/vant-css/button.css'; +import 'vant/lib/button/style'; ``` #### 方式三. 导入所有组件 @@ -113,7 +112,7 @@ import 'vant/lib/vant-css/button.css'; ```js import Vue from 'vue'; import Vant from 'vant'; -import 'vant/lib/vant-css/index.css'; +import 'vant/lib/index.css'; Vue.use(Vant); ``` diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md index c144975e1..a1c310234 100644 --- a/docs/markdown/theme.en-US.md +++ b/docs/markdown/theme.en-US.md @@ -7,14 +7,14 @@ You can import the postcss source code in your own project, then use [postcss-th ```javascript // import base style -import 'vant/packages/vant-css/src/base.css'; +import 'vant/packages/style/base.css'; // import component style -import 'vant/packages/vant-css/src/button.css'; -import 'vant/packages/vant-css/src/checkbox.css'; +import 'vant/packages/button/index.css'; +import 'vant/packages/checkbox/index.css'; ``` -Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css). +Then require the plugin in the postcss.config.js, and configure the variables according to project needs, you can view all the available variables in [profile](https://github.com/youzan/vant/blob/dev/packages/style/var.less). ```javascript module.exports = { @@ -45,10 +45,10 @@ Vant also support local build to custom themes. ```bash # Clone the repository git clone git@github.com:youzan/vant.git -cd packages/vant-css +cd packages/style ``` -In the local vant-css repository, modify the variables in src/common/var.css, then execute the following build command to generate the style file. +In the local style repository, modify the variables in src/var.less, then execute the following build command to generate the style file. ```bash npm run build ``` diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md index cfdccdac2..398681b63 100644 --- a/docs/markdown/theme.zh-CN.md +++ b/docs/markdown/theme.zh-CN.md @@ -7,14 +7,14 @@ ```javascript // 引入基础样式 -import 'vant/packages/vant-css/src/base.css'; +import 'vant/packages/style/base.css'; // 引入组件对应的样式 -import 'vant/packages/vant-css/src/button.css'; -import 'vant/packages/vant-css/src/checkbox.css'; +import 'vant/packages/style/button/index.css'; +import 'vant/packages/style/checkbox/index.css'; ``` -接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css) +接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/style/var.less) ```javascript module.exports = { @@ -37,15 +37,15 @@ module.exports = { ``` ### 方案二. 本地构建 -可以通过在本地构建 vant-css 的方式生成所需的主题 +可以通过在本地构建 style 的方式生成所需的主题 ```bash # 克隆仓库 git clone git@github.com:youzan/vant.git -cd packages/vant-css +cd packages/style ``` -在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件 +在本地 style 仓库中，修改 src/var.less 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件 ```bash npm run build ``` diff --git a/docs/src/DocsApp.vue b/docs/src/DocsApp.vue index 6a8059bae..394bd9b91 100644 --- a/docs/src/DocsApp.vue +++ b/docs/src/DocsApp.vue @@ -46,7 +46,7 @@ export default { }; - diff --git a/packages/vant-css/src/field.css b/packages/field/index.less similarity index 89% rename from packages/vant-css/src/field.css rename to packages/field/index.less index f5f4beddf..a0cbbe671 100644 --- a/packages/vant-css/src/field.css +++ b/packages/field/index.less @@ -1,4 +1,4 @@ -@import './common/var.css'; +@import '../style/var'; .van-field { .van-cell__title { @@ -22,7 +22,7 @@ &:disabled { opacity: 1; - color: $gray-darker; + color: @gray-darker; background-color: transparent; } @@ -55,14 +55,14 @@ } &__clear { - color: $gray; + color: @gray; font-size: 16px; } &__icon .van-icon { display: block; font-size: 16px; - color: $gray-dark; + color: @gray-dark; line-height: inherit; } @@ -71,14 +71,14 @@ } &__error-message { - color: $red; + color: @red; font-size: 12px; text-align: left; } &--disabled { .van-field__control { - color: $gray-dark; + color: @gray-dark; } } @@ -86,7 +86,7 @@ .van-field__control { &, &::placeholder { - color: $red; + color: @red; } } } diff --git a/packages/goods-action-big-btn/index.less b/packages/goods-action-big-btn/index.less new file mode 100644 index 000000000..3b69930be --- /dev/null +++ b/packages/goods-action-big-btn/index.less @@ -0,0 +1,10 @@ +@import '../style/var'; + +.van-goods-action-big-btn { + flex: 1; + padding: 0; + + @media (max-width: 321px) { + font-size: 15px; + } +} diff --git a/packages/goods-action-mini-btn/index.less b/packages/goods-action-mini-btn/index.less new file mode 100644 index 000000000..ae350ffd4 --- /dev/null +++ b/packages/goods-action-mini-btn/index.less @@ -0,0 +1,32 @@ +@import '../style/var'; + +.van-goods-action-mini-btn { + color: @gray-darker; + display: flex; + height: 50px; + font-size: 10px; + min-width: 15%; + line-height: 1; + text-align: center; + background-color: @white; + flex-direction: column; + justify-content: center; + + &::after { + border-width: 1px 0 0 1px; + } + + &:first-child::after { + border-left-width: 0; + } + + &:active { + background-color: @active-color; + } + + &__icon { + width: 1em; + font-size: 20px; + margin: 0 auto 5px; + } +} diff --git a/packages/goods-action/demo/index.vue b/packages/goods-action/demo/index.vue index 0ca7cee42..d97c0683f 100644 --- a/packages/goods-action/demo/index.vue +++ b/packages/goods-action/demo/index.vue @@ -58,7 +58,7 @@ export default { }; -