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 { }; -