[breaking change] rebuild style struct (#2021)

.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.

README.md

@@ -13,7 +13,7 @@
     <img src="https://travis-ci.org/youzan/vant.svg?branch=master" alt="Build Status" />
     <img src="https://img.shields.io/npm/dt/vant.svg" alt="downloads" />
     <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=JS%20gzip%20size" alt="JS Gzip Size" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant-css/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
     <img src="https://isitmaintained.com/badge/open/youzan/vant.svg" alt="issue" />
     <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg" alt="Coverage Status" />
 </p>
@@ -53,7 +53,7 @@ yarn add vant
 
 ```html
 <!-- import style -->
-<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css" />
 
 <!-- import script -->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -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/button/style';
-import 'vant/lib/vant-css/button.css';
 ```
 
 #### 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);
 ```

README.zh-CN.md

@@ -12,7 +12,7 @@
     <img src="https://travis-ci.org/youzan/vant.svg?branch=master" alt="Build Status" />
     <img src="https://img.shields.io/npm/dt/vant.svg" alt="downloads" />
     <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=JS%20gzip%20size" alt="JS Gzip Size" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant-css/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
     <img src="https://isitmaintained.com/badge/open/youzan/vant.svg" alt="issue" />
     <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg" alt="Coverage Status" />
 </p>
@@ -54,7 +54,7 @@ yarn add vant
 
 ```html
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">
 
 <!-- 引入组件 -->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -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/button/style';
-import 'vant/lib/vant-css/button.css';
 ```
 
 #### 方式三. 导入所有组件
@@ -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);
 ```

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) {
+// compile lib dir
-  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);
-    }
-  });
-}
-
 process.env.BABEL_MODULE = 'commonjs';
-
 fs.copySync(srcDir, libDir);
 compile(libDir);
-
-function isDir(dir) {
-  return fs.lstatSync(dir).isDirectory();
-}

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)
   );
 

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'
 ];

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 esContent = deps.map(dep => `import '${dep}';`).join('\n');
-  const libContent = deps.map(dep => `require('../../vant-css/${dep}.css');`).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) {
+function getStylePath(component) {
-  return fs.existsSync(
+  if (component === 'base') {
-    path.join(__dirname, `../es/vant-css/`, `${component}.css`)
+    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));
+}

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']);

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

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"

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'
         ]
       },
       {

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)
 

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)

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   # 样式入口
+├─ index.js       # 所有组件入口
-   └─ button.css  # 组件样式
+└─ index.less     # 所有组件样式
 ```
 
 ### 组件文档

docs/markdown/quickstart.en-US.md

@@ -41,7 +41,7 @@ yarn add vant
 
 ```html
 <!-- import style -->
-<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css" />
 
 <!-- import script -->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -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/button/style';
-import 'vant/lib/vant-css/button.css';
 ```
  
 #### 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);
 ```

docs/markdown/quickstart.zh-CN.md

@@ -47,7 +47,7 @@ yarn add vant
 
 ```html
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/index.css">
 
 <!-- 引入组件 -->
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
@@ -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/button/style';
-import 'vant/lib/vant-css/button.css';
 ```
  
 #### 方式三. 导入所有组件
@@ -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);
 ```

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/button/index.css';
-import 'vant/packages/vant-css/src/checkbox.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
 ```

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/style/button/index.css';
-import 'vant/packages/vant-css/src/checkbox.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
 ```

docs/src/DocsApp.vue

@@ -46,7 +46,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .van-doc-intro {
   text-align: center;
   font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

docs/src/WapApp.vue

@@ -38,7 +38,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 body {
   color: #333;
   line-height: 1;

docs/src/components/DemoList.vue

@@ -56,8 +56,8 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
-@import '../../../packages/vant-css/src/common/var.css';
+@import '../../../packages/style/var';
 
 .side-nav {
   width: 100%;
@@ -103,9 +103,9 @@ export default {
   top: 15px;
   right: 15px;
   font-size: 11px;
-  border: 1px solid $blue;
+  border: 1px solid @blue;
   border-radius: 3px;
-  color: $blue;
+  color: @blue;
   cursor: pointer;
 
   span {
@@ -116,7 +116,7 @@ export default {
 
     &.active {
       color: #fff;
-      background-color: $blue;
+      background-color: @blue;
     }
   }
 }

docs/src/components/DemoPages.vue

@@ -84,7 +84,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .van-doc-demo-pages {
   &__gallery {
     margin-top: 30px;

docs/src/components/MobileNav.vue

@@ -28,7 +28,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .mobile-nav {
   &__item {
     margin-bottom: 20px;

docs/src/demo-entry.js

@@ -42,6 +42,7 @@ export default {
   'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
   'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),
   'steps': () => wrapper(import('../../packages/steps/demo'), 'steps'),
+  'style': () => wrapper(import('../../packages/style/demo'), 'style'),
   'submit-bar': () => wrapper(import('../../packages/submit-bar/demo'), 'submit-bar'),
   'swipe': () => wrapper(import('../../packages/swipe/demo'), 'swipe'),
   'swipe-cell': () => wrapper(import('../../packages/swipe-cell/demo'), 'swipe-cell'),
@@ -53,6 +54,5 @@ export default {
   'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'),
   'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'),
   'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader'),
-  'vant-css': () => wrapper(import('../../packages/vant-css/demo'), 'vant-css'),
   'waterfall': () => wrapper(import('../../packages/waterfall/demo'), 'waterfall')
 };

docs/src/doc.config.js

@@ -40,7 +40,7 @@ module.exports = {
                 title: '更新日志'
               },
               {
-                path: '/vant-css',
+                path: '/style',
                 title: '内置样式'
               },
               {
@@ -344,7 +344,7 @@ module.exports = {
                 title: 'Changelog'
               },
               {
-                path: '/vant-css',
+                path: '/style',
                 title: 'Built-in style'
               },
               {

docs/src/docs-entry.js

@@ -92,6 +92,8 @@ export default {
   'stepper.zh-CN': () => import('../../packages/stepper/zh-CN.md'),
   'steps.en-US': () => import('../../packages/steps/en-US.md'),
   'steps.zh-CN': () => import('../../packages/steps/zh-CN.md'),
+  'style.en-US': () => import('../../packages/style/en-US.md'),
+  'style.zh-CN': () => import('../../packages/style/zh-CN.md'),
   'submit-bar.en-US': () => import('../../packages/submit-bar/en-US.md'),
   'submit-bar.zh-CN': () => import('../../packages/submit-bar/zh-CN.md'),
   'swipe.en-US': () => import('../../packages/swipe/en-US.md'),
@@ -114,8 +116,6 @@ export default {
   'tree-select.zh-CN': () => import('../../packages/tree-select/zh-CN.md'),
   'uploader.en-US': () => import('../../packages/uploader/en-US.md'),
   'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md'),
-  'vant-css.en-US': () => import('../../packages/vant-css/en-US.md'),
-  'vant-css.zh-CN': () => import('../../packages/vant-css/zh-CN.md'),
   'waterfall.en-US': () => import('../../packages/waterfall/en-US.md'),
   'waterfall.zh-CN': () => import('../../packages/waterfall/zh-CN.md')
 };

docs/src/mobile.js

@@ -1,4 +1,4 @@
-import '../../packages/vant-css/src/index.css';
+import '../../packages/index.less';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './WapApp';

jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   collectCoverageFrom: [
     'packages/**/*.{js,vue}',
-    '!**/vant-css/**',
+    '!**/style/**',
     '!**/demo/**',
     '!**/locale/lang/**',
     '!**/sku/**',

package.json

@@ -4,7 +4,7 @@
   "description": "Lightweight Mobile UI Components built on Vue",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "style": "lib/vant-css/index.css",
+  "style": "lib/index.css",
   "typings": "types/index.d.ts",
   "files": [
     "es",
@@ -13,13 +13,13 @@
     "types"
   ],
   "scripts": {
-    "bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
+    "bootstrap": "yarn || npm i",
     "dev": "npm run build:entry && webpack-serve --config build/webpack.dev.js",
-    "lint": "eslint ./packages --ext .js,.vue && stylelint \"packages/vant-css/src/*.css\"",
+    "lint": "eslint ./packages --ext .js,.vue && stylelint \"packages/*.css\"",
     "build:entry": "node build/build-entry.js",
     "build:components": "node build/build-components.js --color",
-    "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color --silent",
     "build:vant": "cross-env NODE_ENV=production webpack --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --color --config build/webpack.build.js",
+    "build:style": "gulp --gulpfile ./build/build-style.js",
     "build:style-entry": "node build/build-style-entry.js",
     "build:changelog": "vant-doc changelog ./changelog.generated.md",
     "build:iconfont": "gulp --gulpfile ./build/build-iconfont.js",
@@ -72,38 +72,41 @@
     "@babel/preset-env": "^7.1.0",
     "@vue/server-test-utils": "^1.0.0-beta.25",
     "@vue/test-utils": "^1.0.0-beta.25",
-    "autoprefixer": "^9.3.0",
+    "autoprefixer": "^9.3.1",
     "babel-core": "^7.0.0-0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "codecov": "^3.1.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^1.0.1",
     "dependency-tree": "^6.2.1",
-    "eslint": "^5.7.0",
+    "eslint": "^5.8.0",
     "eslint-plugin-vue-libs": "^3.0.0",
     "fast-glob": "^2.2.3",
     "fast-vue-md-loader": "^1.0.3",
     "gh-pages": "^2.0.1",
     "gulp": "^3.9.1",
+    "gulp-clean-css": "^3.10.0",
     "gulp-iconfont": "^10.0.2",
     "gulp-iconfont-css": "^2.3.0",
+    "gulp-less": "^4.0.1",
+    "gulp-postcss": "^8.0.0",
     "html-webpack-plugin": "3.2.0",
-    "husky": "^1.1.2",
+    "husky": "^1.1.3",
     "jest": "^23.6.0",
     "jest-serializer-vue": "^2.0.2",
-    "lint-staged": "^7.3.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "lint-staged": "^8.0.4",
     "md5-file": "^4.0.0",
     "postcss": "^7.0.5",
-    "postcss-calc": "^7.0.0",
     "postcss-loader": "^3.0.0",
-    "precss": "3.1.2",
     "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "^2.5.4",
     "shelljs": "^0.8.1",
     "signale": "^1.3.0",
     "style-loader": "^0.23.1",
-    "stylelint": "^9.6.0",
+    "stylelint": "^9.7.1",
     "stylelint-config-standard": "^18.2.0",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.1.2",
@@ -116,7 +119,7 @@
     "vue-sfc-compiler": "^0.1.3",
     "vue-template-compiler": "2.5.17",
     "vue-template-es2015-compiler": "^1.6.0",
-    "webpack": "^4.22.0",
+    "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2",
     "webpack-serve": "^2.0.2"
   }

packages/actionsheet/demo/index.vue

@@ -81,7 +81,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-actionsheet {
   .van-button {
     margin-left: 15px;

packages/actionsheet/index.less

@@ -1,18 +1,18 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-actionsheet {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
-  color: $text-color;
+  color: @text-color;
   max-height: 90%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: $background-color;
+  background-color: @background-color;
 
   &--withtitle {
-    background-color: $white;
+    background-color: @white;
   }
 
   &__item,
@@ -21,24 +21,24 @@
     line-height: 50px;
     font-size: 16px;
     text-align: center;
-    background-color: $white;
+    background-color: @white;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
   &__item--disabled {
-    color: $gray;
+    color: @gray;
 
     &:active {
-      background-color: $white;
+      background-color: @white;
     }
   }
 
   &__subname {
     font-size: 12px;
-    color: $gray-darker;
+    color: @gray-darker;
     margin-left: 5px;
   }
 
@@ -60,7 +60,7 @@
       right: 0;
       padding: 0 15px;
       font-size: 18px;
-      color: $gray-dark;
+      color: @gray-dark;
       position: absolute;
       line-height: inherit;
     }

packages/address-edit/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-address-edit {
   &__buttons {
@@ -27,7 +27,7 @@
     padding: 0;
 
     &__finish {
-      color: $blue;
+      color: @blue;
       font-size: 12px;
       display: block;
     }

packages/address-list/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-address-list {
   height: 100%;
@@ -13,7 +13,7 @@
   }
 
   &__disabled-text {
-    color: $gray-dark;
+    color: @gray-dark;
     padding: 0 15px;
     font-size: 12px;
     line-height: 30px;
@@ -24,7 +24,7 @@
   padding: 15px;
 
   .van-cell__value {
-    color: $text-color;
+    color: @text-color;
     padding-right: 34px;
     position: relative;
   }
@@ -45,7 +45,7 @@
   }
 
   .van-icon-checked {
-    color: $red;
+    color: @red;
   }
 
   &__name {
@@ -58,7 +58,7 @@
   &__address {
     font-size: 12px;
     line-height: 16px;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &--unswitchable {
@@ -74,7 +74,7 @@
   &--disabled {
     .van-address-item__name,
     .van-address-item__address {
-      color: $gray-dark;
+      color: @gray-dark;
     }
   }
 

packages/badge-group/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.badge-group {
+  width: 85px;
+}

packages/badge/demo/index.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-badge {
   .van-badge-group {
     width: auto;

packages/badge/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-badge {
   display: block;
@@ -6,29 +6,25 @@
   font-size: 14px;
   line-height: 1.4;
   user-select: none;
-  color: $gray-darker;
+  color: @gray-darker;
   word-break: break-all;
   box-sizing: border-box;
   padding: 20px 12px 20px 9px;
-  background-color: $background-color;
+  background-color: @background-color;
   border-left: 3px solid transparent;
 
   &:active {
-    background-color: $active-color;
+    background-color: @active-color;
   }
 
   &:not(:last-child)::after {
     border-bottom-width: 1px;
   }
 
-  &-group {
-    width: 85px;
-  }
-
   &--select {
     font-weight: 500;
-    color: $text-color;
+    color: @text-color;
-    border-color: $red;
+    border-color: @red;
 
     &::after {
       border-right-width: 1px;
@@ -36,7 +32,7 @@
 
     &,
     &:active {
-      background-color: $white;
+      background-color: @white;
     }
   }
 

packages/button/demo/index.vue

@@ -79,7 +79,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-button {
   .van-button {
     user-select: none;

packages/button/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-button {
   position: relative;
@@ -22,8 +22,8 @@
     width: 100%;
     height: 100%;
     border: inherit;
-    border-color: $black;
+    border-color: @black;
-    background-color: $black;
+    background-color: @black;
     border-radius: inherit; /* inherit parent's border radius */
     transform: translate(-50%, -50%);
   }
@@ -37,42 +37,42 @@
   }
 
   &--default {
-    color: $button-default-color;
+    color: @button-default-color;
-    background-color: $button-default-background-color;
+    background-color: @button-default-background-color;
-    border: 1px solid $button-default-border-color;
+    border: 1px solid @button-default-border-color;
   }
 
   &--primary {
-    color: $button-primary-color;
+    color: @button-primary-color;
-    background-color: $button-primary-background-color;
+    background-color: @button-primary-background-color;
-    border: 1px solid $button-primary-border-color;
+    border: 1px solid @button-primary-border-color;
   }
 
   &--danger {
-    color: $button-danger-color;
+    color: @button-danger-color;
-    background-color: $button-danger-background-color;
+    background-color: @button-danger-background-color;
-    border: 1px solid $button-danger-border-color;
+    border: 1px solid @button-danger-border-color;
   }
 
   &--warning {
-    color: $button-warning-color;
+    color: @button-warning-color;
-    background-color: $button-warning-background-color;
+    background-color: @button-warning-background-color;
-    border: 1px solid $button-warning-border-color;
+    border: 1px solid @button-warning-border-color;
   }
 
   &--plain {
-    background-color: $white;
+    background-color: @white;
 
     &.van-button--primary {
-      color: $button-primary-background-color;
+      color: @button-primary-background-color;
     }
 
     &.van-button--danger {
-      color: $button-danger-background-color;
+      color: @button-danger-background-color;
     }
 
     &.van-button--warning {
-      color: $button-warning-background-color;
+      color: @button-warning-background-color;
     }
   }
 
@@ -126,11 +126,11 @@
     border: 0;
     border-radius: 0;
     font-size: 16px;
-    color: $button-bottom-action-default-color;
+    color: @button-bottom-action-default-color;
-    background-color: $button-bottom-action-default-background-color;
+    background-color: @button-bottom-action-default-background-color;
 
     &.van-button--primary {
-      background-color: $button-bottom-action-primary-background-color;
+      background-color: @button-bottom-action-primary-background-color;
     }
   }
 

packages/card/index.less

@@ -1,14 +1,14 @@
-@import './common/var.css';
+@import '../style/var';
-@import './mixins/ellipsis.css';
+@import '../style/mixins/ellipsis';
 
 .van-card {
-  color: $text-color;
+  color: @text-color;
   height: 100px;
   font-size: 12px;
   position: relative;
   box-sizing: border-box;
   padding: 5px 15px 5px 115px;
-  background-color: $background-color-light;
+  background-color: @background-color-light;
 
   &:not(:first-child) {
     margin-top: 10px;
@@ -53,11 +53,11 @@
   &__title {
     max-height: 40px;
 
-    @include multi-ellipsis(2);
+    .multi-ellipsis(2);
   }
 
   &__desc {
-    color: $gray-darker;
+    color: @gray-darker;
     max-height: 20px;
   }
 
@@ -74,12 +74,12 @@
   }
 
   &__origin-price {
-    color: $gray-darker;
+    color: @gray-darker;
     text-decoration: line-through;
   }
 
   &__num {
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__tag {

packages/cell-group/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.van-cell-group {
+  background-color: @white;
+}

packages/cell/demo/index.vue

@@ -63,7 +63,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-cell {
   .van-cell-text {
     margin-right: 5px;

packages/cell/index.less

@@ -1,5 +1,5 @@
-@import './common/var.css';
+@import '../style/var';
-@import "./mixins/hairline.css";
+@import "../style/mixins/hairline";
 
 .van-cell {
   width: 100%;
@@ -8,27 +8,23 @@
   box-sizing: border-box;
   line-height: 24px;
   position: relative;
-  background-color: $white;
+  background-color: @white;
-  color: $text-color;
+  color: @text-color;
   font-size: 14px;
   overflow: hidden;
 
   &:not(:last-child)::after {
-    @include hairline-bottom($border-color, 15px);
+    .hairline-bottom(@border-color, 15px);
   }
 
   &--borderless::after {
     display: none;
   }
 
-  &-group {
-    background-color: $white;
-  }
-
   &__label {
     font-size: 12px;
     line-height: 1.2;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__title,
@@ -55,7 +51,7 @@
   }
 
   &__right-icon {
-    color: $gray-dark;
+    color: @gray-dark;
     font-size: 12px;
     line-height: 24px;
     margin-left: 5px;
@@ -75,7 +71,7 @@
 
   &--clickable {
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -87,7 +83,7 @@
       position: absolute;
       left: 7px;
       font-size: 14px;
-      color: $red;
+      color: @red;
     }
   }
 

packages/checkbox/demo/index.vue

@@ -108,7 +108,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-checkbox {
   .van-checkbox {
     margin: 10px 0 0 20px;

packages/checkbox/index.less

@@ -1,6 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
-
-$van-checkbox-size: 20px;
 
 .van-checkbox {
   overflow: hidden;
@@ -10,7 +8,7 @@ $van-checkbox-size: 20px;
   &__label {
     display: inline-block;
     vertical-align: middle;
-    line-height: $van-checkbox-size;
+    line-height: @van-checkbox-size;
   }
 
   &__icon {
@@ -19,9 +17,9 @@ $van-checkbox-size: 20px;
       color: transparent;
       text-align: center;
       line-height: inherit;
-      border: 1px solid $gray-light;
+      border: 1px solid @gray-light;
-      width: $van-checkbox-size;
+      width: @van-checkbox-size;
-      height: $van-checkbox-size;
+      height: @van-checkbox-size;
       box-sizing: border-box;
       transition: .2s;
     }
@@ -34,24 +32,24 @@ $van-checkbox-size: 20px;
 
     &--checked {
       .van-icon {
-        color: $white;
+        color: @white;
-        border-color: $blue;
+        border-color: @blue;
-        background-color: $blue;
+        background-color: @blue;
       }
     }
 
     &--disabled {
       .van-icon {
-        color: $background-color;
+        color: @background-color;
-        border-color: $border-color;
+        border-color: @border-color;
         background-color: currentColor;
       }
     }
 
     &--disabled&--checked {
       .van-icon {
-        border-color: $border-color;
+        border-color: @border-color;
-        background-color: $border-color;
+        background-color: @border-color;
       }
     }
   }

packages/circle/demo/index.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-circle {
   .van-circle {
     margin-left: 15px;

packages/circle/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-circle {
   position: relative;
@@ -26,7 +26,7 @@
     top: 50%;
     left: 0;
     width: 100%;
-    color: $text-color;
+    color: @text-color;
     position: absolute;
     transform: translateY(-50%);
   }

packages/col/demo/index.vue

@@ -74,7 +74,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-col {
   .van-doc-demo-block {
     padding: 0 15px;

packages/col/index.less

@@ -0,0 +1,13 @@
+@import '../style/var';
+
+.van-col {
+  float: left;
+  box-sizing: border-box;
+}
+
+.generate-col(24);
+.generate-col(@n, @i: 1) when (@i =< @n) {
+  .van-col--@{i} { width: @i * 100% / 24; }
+  .van-col--offset-@{i} { margin-left: @i * 100% / 24; }
+  .generate-col(@n, (@i + 1));
+}

packages/collapse-item/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-collapse-item {
   &__title {
@@ -24,11 +24,11 @@
     &--disabled {
       &,
       & .van-cell__right-icon {
-        color: $gray;
+        color: @gray;
       }
 
       &:active {
-        background-color: $white;
+        background-color: @white;
       }
     }
   }
@@ -41,6 +41,6 @@
 
   &__content {
     padding: 15px;
-    background-color: $white;
+    background-color: @white;
   }
 }

packages/collapse/demo/index.vue

@@ -65,18 +65,18 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
-@import "../../../packages/vant-css/src/common/var.css";
+@import "../../../packages/style/var";
 
 .demo-collapse {
   .van-collapse-item__content {
     font-size: 13px;
     line-height: 1.5;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   .van-icon-question {
-    color: $blue;
+    color: @blue;
     vertical-align: -3px;
     margin-left: 5px;
     font-size: 15px;

packages/contact-card/demo/index.vue

@@ -124,7 +124,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-contact-card {
   .van-popup {
     height: 100%;

packages/contact-card/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-contact-card {
   padding: 15px;
@@ -16,7 +16,7 @@
     }
 
     .van-cell__left-icon {
-      color: $blue;
+      color: @blue;
       font-size: 40px;
     }
   }
@@ -34,8 +34,8 @@
       #ff6c6c 20%,
       transparent 0,
       transparent 25%,
-      $blue 0,
+      @blue 0,
-      $blue 45%,
+      @blue 45%,
       transparent 0,
       transparent 50%
     );

packages/contact-edit/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-contact-edit {
   &__buttons {

packages/contact-list/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-contact-list {
   height: 100%;
@@ -10,7 +10,7 @@
   }
 
   .van-cell__value {
-    color: $text-color;
+    color: @text-color;
     padding-right: 34px;
     position: relative;
   }
@@ -28,7 +28,7 @@
   }
 
   .van-icon-checked {
-    color: $red;
+    color: @red;
   }
 
   &__group {

packages/coupon-list/demo/index.vue

@@ -122,7 +122,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-coupon-list {
   .van-popup {
     height: 100%;

packages/coupon-list/index.less

@@ -1,11 +1,11 @@
-@import './common/var.css';
+@import '../style/var';
-@import './mixins/ellipsis.css';
+@import '../style/mixins/ellipsis';
 
 .van-coupon {
   &-list {
     height: 100%;
     position: relative;
-    background-color: $background-color;
+    background-color: @background-color;
 
     &__field {
       padding: 7px 15px;
@@ -35,7 +35,7 @@
       text-align: center;
 
       p {
-        color: $gray-dark;
+        color: @gray-dark;
         margin: 15px 0;
         font-size: 14px;
         line-height: 20px;
@@ -52,11 +52,11 @@
     overflow: hidden;
     border-radius: 4px;
     margin: 0 15px 15px;
-    background-color: $white;
+    background-color: @white;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
 
     &__content {
@@ -70,7 +70,7 @@
     h2 {
       margin: 0;
 
-      @include ellipsis;
+      .ellipsis();
     }
 
     h2 {
@@ -82,14 +82,14 @@
     p {
       font-size: 12px;
       line-height: 16px;
-      color: $gray-dark;
+      color: @gray-dark;
     }
 
     &__head {
       min-width: 90px;
 
       h2 {
-        color: $red;
+        color: @red;
         font-size: 24px;
 
         span {
@@ -114,20 +114,20 @@
       position: absolute;
 
       .van-icon {
-        border-color: $red;
+        border-color: @red;
-        background-color: $red;
+        background-color: @red;
       }
     }
 
     &__reason {
       padding: 7px 15px;
-      border-top: 1px dashed $border-color;
+      border-top: 1px dashed @border-color;
-      background-color: $background-color-light;
+      background-color: @background-color-light;
     }
 
     &--disabled {
       &:active {
-        background-color: $white;
+        background-color: @white;
       }
 
       .van-coupon-item__content {
@@ -137,7 +137,7 @@
       p,
       h2,
       span {
-        color: $gray-dark;
+        color: @gray-dark;
       }
     }
   }

packages/dialog/demo/index.vue

@@ -88,7 +88,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-dialog {
   .van-doc-demo-block > .van-button {
     margin-left: 15px;

packages/dialog/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-dialog {
   position: fixed;
@@ -9,7 +9,7 @@
   overflow: hidden;
   transition: .3s;
   border-radius: 4px;
-  background-color: $white;
+  background-color: @white;
   transform: translate3d(-50%, -50%, 0);
 
   &__header {
@@ -29,7 +29,7 @@
 
     &--has-title {
       padding-top: 12px;
-      color: $gray-darker;
+      color: @gray-darker;
     }
   }
 
@@ -53,7 +53,7 @@
   &__confirm {
     &,
     &:active {
-      color: $blue;
+      color: @blue;
     }
   }
 

packages/field/demo/index.vue

@@ -136,14 +136,14 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
-@import '../../vant-css/src/common/var.css';
+@import '../../style/var';
 
 .demo-field {
   padding-bottom: 30px;
 
   .van-field__icon .van-icon {
-    color: $blue;
+    color: @blue;
   }
 }
 </style>

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

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

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

packages/goods-action/demo/index.vue

@@ -58,7 +58,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-goods-action {
   .van-goods-action {
     position: relative;

packages/goods-action/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-goods-action {
   left: 0;
@@ -17,14 +17,14 @@
   }
 
   &-mini-btn {
-    color: $gray-darker;
+    color: @gray-darker;
     display: flex;
     height: 50px;
     font-size: 10px;
     min-width: 15%;
     line-height: 1;
     text-align: center;
-    background-color: $white;
+    background-color: @white;
     flex-direction: column;
     justify-content: center;
 
@@ -37,7 +37,7 @@
     }
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
 
     &__icon {

packages/icon/config/template-local.js

@@ -3,7 +3,7 @@ module.exports = (fontName, ttf) => {
   font-style: normal;
   font-weight: normal;
   font-family: '${fontName}';
-  src: url('../icon/${ttf}') format('truetype');
+  src: url('./${ttf}') format('truetype');
 }
 `;
 };

packages/icon/config/template.tpl

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 @font-face {
   font-style: normal;

packages/icon/demo/index.vue

@@ -29,7 +29,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-icon {
   font-size: 0;
 

packages/icon/en-US.md

@@ -20,7 +20,7 @@ View all usable icons on the right.
 Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
 
 ```js
-import 'vant/lib/vant-css/icon-local.css';
+import 'vant/lib/icon/local.css';
 ```
 
 #### Add custom iconfont

packages/icon/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 @font-face {
   font-style: normal;

packages/icon/local.less

@@ -2,5 +2,5 @@
   font-style: normal;
   font-weight: normal;
   font-family: 'vant-icon';
-  src: url('../icon/vant-icon-872dd0.ttf') format('truetype');
+  src: url('./vant-icon-872dd0.ttf') format('truetype');
 }

packages/icon/zh-CN.md

@@ -22,7 +22,7 @@ Vue.use(Icon);
 Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件
 
 ```js
-import 'vant/lib/vant-css/icon-local.css';
+import 'vant/lib/icon/local.css';
 ```
 
 #### 自定义图标

packages/image-preview/demo/index.vue

@@ -55,7 +55,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-image-preview {
   .van-button {
     margin-left: 15px;

packages/image-preview/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-image-preview {
   top: 0;
@@ -22,7 +22,7 @@
     position: absolute;
     top: 10px;
     left: 50%;
-    color: $white;
+    color: @white;
     font-size: 14px;
     letter-spacing: 2px;
     transform: translate(-50%, 0);

packages/index.less

@@ -0,0 +1,70 @@
+/**
+ * Entry of all component's style
+ */
+
+/* base */
+@import './style/base';
+
+// /* common components */
+@import './col/index';
+@import './row/index';
+@import './badge/index';
+@import './badge-group/index';
+@import './circle/index';
+@import './collapse-item/index';
+@import './list/index';
+@import './nav-bar/index';
+@import './notice-bar/index';
+@import './popup/index';
+@import './search/index';
+@import './pagination/index';
+@import './panel/index';
+@import './rate/index';
+@import './steps/index';
+@import './step/index';
+@import './tag/index';
+@import './tab/index';
+@import './tabs/index';
+@import './tabbar/index';
+@import './tabbar-item/index';
+@import './image-preview/index';
+@import './stepper/index';
+@import './progress/index';
+@import './swipe/index';
+@import './swipe-item/index';
+@import './slider/index';
+
+/* form components */
+@import './checkbox/index';
+@import './field/index';
+@import './radio/index';
+@import './switch/index';
+@import './uploader/index';
+@import './password-input/index';
+@import './number-keyboard/index';
+
+/* action components */
+@import './actionsheet/index';
+@import './dialog/index';
+@import './picker/index';
+@import './pull-refresh/index';
+@import './toast/index';
+
+/* high order components */
+@import './swipe-cell/index';
+@import './switch-cell/index';
+@import './tree-select/index';
+
+/* business components */
+@import './address-edit/index';
+@import './address-list/index';
+@import './card/index';
+@import './contact-card/index';
+@import './contact-list/index';
+@import './contact-edit/index';
+@import './coupon-list/index';
+@import './goods-action/index';
+@import './goods-action-big-btn/index';
+@import './goods-action-mini-btn/index';
+@import './submit-bar/index';
+@import './sku/index';

packages/info/index.less

@@ -1,9 +1,9 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-info {
   left: 100%;
   top: -.5em;
-  color: $white;
+  color: @white;
   font-size: .6em;
   font-weight: 500;
   padding: 0 .25em;
@@ -13,7 +13,7 @@
   position: absolute;
   border-radius: .7em;
   box-sizing: border-box;
-  background-color: $red;
+  background-color: @red;
   transform: translateX(-50%);
   font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
 }

packages/lazyload/demo/index.vue

@@ -56,7 +56,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-lazyload {
   padding: 0 15px;
 

packages/list/demo/index.vue

@@ -62,7 +62,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-list {
   .van-cell {
     text-align: center;

packages/list/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-list {
   &__loading {
@@ -18,7 +18,7 @@
 
     &-text {
       font-size: 13px;
-      color: $gray-dark;
+      color: @gray-dark;
       line-height: 50px;
     }
   }

packages/loading/demo/index.vue

@@ -27,7 +27,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-loading {
   .van-loading {
     display: inline-block;

packages/loading/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-loading {
   width: 30px;
@@ -26,8 +26,8 @@
     &--circle {
       border-radius: 100%;
       border: 3px solid transparent;
-      border-color: $gray;
+      border-color: @gray;
-      border-top-color: $gray-darker;
+      border-top-color: @gray-darker;
     }
 
     &--gradient-circle {
@@ -103,9 +103,11 @@
   }
 }
 
-@for $i from 1 to 12 {
+.generate-spinner(@n, @i: 1) when (@i =< @n) {
-  .van-loading__spinner--spinner i:nth-of-type($i) {
+  .van-loading__spinner--spinner i:nth-of-type(@{i}) {
-    opacity: calc(1 - (0.75 / 12) * ($i - 1));
+    opacity: 1 - (0.75 / 12) * (@i - 1);
-    transform: rotate(calc($i * 30deg));
+    transform: rotate(@i * 30deg);
   }
+  .generate-spinner(@n, (@i + 1));
 }
+.generate-spinner(12);

packages/nav-bar/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-nav-bar {
   height: 46px;
@@ -6,10 +6,10 @@
   user-select: none;
   text-align: center;
   line-height: 46px;
-  background-color: $white;
+  background-color: @white;
 
   .van-icon {
-    color: $blue;
+    color: @blue;
     vertical-align: middle;
   }
 
@@ -52,14 +52,14 @@
   }
 
   &__text {
-    color: $blue;
+    color: @blue;
     margin: 0 -15px;
     padding: 0 15px;
     display: inline-block;
     vertical-align: middle;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 }

packages/notice-bar/demo/index.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-notice-bar {
   .van-notice-bar:not(:first-of-type) {
     margin-top: 15px;

packages/notice-bar/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-notice-bar {
   display: flex;
@@ -8,8 +8,8 @@
   line-height: 24px;
   position: relative;
   align-items: center;
-  color: $orange-dark;
+  color: @orange-dark;
-  background-color: $orange-light;
+  background-color: @orange-light;
 
   &--withicon {
     position: relative;

packages/number-keyboard/demo/index.vue

@@ -69,7 +69,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-number-keyboard {
   .van-button {
     margin-left: 15px;

packages/number-keyboard/index.less

@@ -1,6 +1,4 @@
-@import "./common/var.css";
+@import '../style/var';
-
-$van-number-keyboard-key-height: 54px;
 
 .van-number-keyboard {
   left: 0;
@@ -8,7 +6,7 @@ $van-number-keyboard-key-height: 54px;
   width: 100%;
   position: fixed;
   user-select: none;
-  background-color: $white;
+  background-color: @white;
   animation-timing-function: ease-out;
 
   &__title {
@@ -17,7 +15,7 @@ $van-number-keyboard-key-height: 54px;
     line-height: 30px;
     text-align: center;
     position: relative;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &__body {
@@ -26,13 +24,13 @@ $van-number-keyboard-key-height: 54px;
 
   &__close {
     right: 0;
-    color: $blue;
+    color: @blue;
     font-size: 14px;
     padding: 0 15px;
     position: absolute;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -41,7 +39,7 @@ $van-number-keyboard-key-height: 54px;
     bottom: 0;
     width: 25%;
     position: absolute;
-    height: calc($van-number-keyboard-key-height * 4);
+    height: @van-number-keyboard-key-height * 4;
   }
 
   &--custom {
@@ -52,40 +50,40 @@ $van-number-keyboard-key-height: 54px;
 }
 
 .van-key {
-  width: calc(100% / 3);
+  width: 100% / 3;
   font-size: 24px;
   font-style: normal;
   text-align: center;
   display: inline-block;
   vertical-align: middle;
-  height: $van-number-keyboard-key-height;
+  height: @van-number-keyboard-key-height;
-  line-height: $van-number-keyboard-key-height;
+  line-height: @van-number-keyboard-key-height;
 
   &::after {
     border-width: 1px 1px 0 0;
   }
 
   &--middle {
-    width: calc(200% / 3);
+    width: 200% / 3;
   }
 
   &--big {
     width: 100%;
-    height: calc($van-number-keyboard-key-height * 2);
+    height: @van-number-keyboard-key-height * 2;
-    line-height: calc($van-number-keyboard-key-height * 2);
+    line-height: @van-number-keyboard-key-height * 2;
   }
 
   &--blue {
     font-size: 20px;
-    color: $white;
+    color: @white;
-    background-color: $blue;
+    background-color: @blue;
 
     &.van-key--active {
-      background-color: $blue;
+      background-color: @blue;
     }
 
     &::after {
-      border-color: $blue;
+      border-color: @blue;
     }
   }
 
@@ -96,10 +94,10 @@ $van-number-keyboard-key-height: 54px;
   }
 
   &--gray {
-    background-color: $background-color;
+    background-color: @background-color;
   }
 
   &--active {
-    background-color: $active-color;
+    background-color: @active-color;
   }
 }

packages/pagination/demo/index.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-pagination {
   .van-pagination {
     margin: 5px 0;

packages/pagination/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-pagination {
   display: flex;
@@ -8,16 +8,16 @@
 
   &__item {
     flex: 1;
-    color: $blue;
+    color: @blue;
     height: 40px;
     min-width: 36px;
-    background-color: $white;
+    background-color: @white;
     box-sizing: border-box;
     user-select: none;
 
     &:active {
-      color: $white;
+      color: @white;
-      background-color: $blue;
+      background-color: @blue;
     }
 
     &::after {
@@ -30,14 +30,14 @@
 
     &--disabled,
     &--disabled:active {
-      background-color: $background-color;
+      background-color: @background-color;
-      color: $gray-darker;
+      color: @gray-darker;
       opacity: 0.6;
     }
 
     &--active {
-      color: $white;
+      color: @white;
-      background-color: $blue;
+      background-color: @blue;
     }
   }
 
@@ -53,7 +53,7 @@
   &__page-desc {
     flex: 1;
     height: 40px;
-    color: $gray-darker;
+    color: @gray-darker;
   }
 
   &--simple {

packages/panel/demo/index.vue

@@ -22,7 +22,7 @@
 export default {};
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-panel {
   .van-panel__footer {
     text-align: right;

packages/panel/index.less

@@ -1,11 +1,11 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-panel {
-  background: $white;
+  background: @white;
 
   &__header {
     .van-cell__value {
-      color: $red;
+      color: @red;
     }
   }
 

packages/password-input/index.less

@@ -1,4 +1,4 @@
-@import "./common/var.css";
+@import '../style/var';
 
 .van-password-input {
   margin: 0 15px;
@@ -17,18 +17,18 @@
   }
 
   &__info {
-    color: $gray-dark;
+    color: @gray-dark;
   }
 
   &__error-info {
-    color: $red;
+    color: @red;
   }
 
   &__security {
     width: 100%;
     height: 50px;
     display: flex;
-    background-color: $white;
+    background-color: @white;
 
     &::after {
       border-radius: 6px;
@@ -53,7 +53,7 @@
       margin: -5px 0 0 -5px;
       visibility: hidden;
       border-radius: 100%;
-      background-color: $black;
+      background-color: @black;
     }
   }
 }

packages/picker/index.less

@@ -1,10 +1,10 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-picker {
   overflow: hidden;
   user-select: none;
   position: relative;
-  background-color: $white;
+  background-color: @white;
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
 
   &__toolbar {
@@ -16,12 +16,12 @@
 
   &__cancel,
   &__confirm {
-    color: $blue;
+    color: @blue;
     padding: 0 15px;
     font-size: 14px;
 
     &:active {
-      background-color: $active-color;
+      background-color: @active-color;
     }
   }
 
@@ -47,7 +47,7 @@
     background-color: rgba(255, 255, 255, .9);
 
     circle {
-      stroke: $blue;
+      stroke: @blue;
     }
   }
 
@@ -70,11 +70,11 @@
 
     &__item {
       padding: 0 5px;
-      color: $gray-dark;
+      color: @gray-dark;
 
       &--selected {
         font-weight: 500;
-        color: $text-color;
+        color: @text-color;
       }
 
       &--disabled {

packages/popup/demo/index.vue

@@ -90,7 +90,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-popup {
   .van-button {
     margin: 10px 0 10px 15px;

packages/popup/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van {
   &-modal {
@@ -20,7 +20,7 @@
     left: 50%;
     max-height: 100%;
     overflow-y: auto;
-    background-color: $white;
+    background-color: @white;
     transition: .3s ease-out;
     -webkit-overflow-scrolling: touch;
     transform: translate3d(-50%, -50%, 0);

packages/progress/demo/index.vue

@@ -36,7 +36,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-progress {
   .van-progress {
     margin: 20px;

packages/progress/index.less

@@ -1,10 +1,10 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-progress {
   height: 4px;
   position: relative;
   border-radius: 4px;
-  background: $gray-light;
+  background: @gray-light;
 
   &__portion {
     left: 0;
@@ -30,7 +30,7 @@
     border-radius: 1em;
     word-break: keep-all;
     box-sizing: border-box;
-    background-color: $gray-light;
+    background-color: @gray-light;
     transform: translate(100%, -50%);
   }
 }

packages/pull-refresh/demo/index.vue

@@ -40,7 +40,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-pull-refresh {
   .van-pull-refresh {
     &,

packages/pull-refresh/index.less

@@ -1,4 +1,4 @@
-@import './common/var.css';
+@import '../style/var';
 
 .van-pull-refresh {
   user-select: none;
@@ -17,7 +17,7 @@
     text-align: center;
     top: -50px;
     font-size: 14px;
-    color: $gray-dark;
+    color: @gray-dark;
     line-height: 50px;
   }
 

packages/radio/demo/index.vue

@@ -56,7 +56,7 @@ export default {
 };
 </script>
 
-<style lang="postcss">
+<style lang="less">
 .demo-radio {
   &-group {
     padding: 0 17px;

packages/radio/index.less

@@ -1,6 +1,4 @@
-@import "./common/var.css";
+@import '../style/var';
-
-$van-radio-size: 20px;
 
 .van-radio {
   overflow: hidden;
@@ -15,7 +13,7 @@ $van-radio-size: 20px;
   &__input {
     height: 1em;
     position: relative;
-    font-size: $van-radio-size;
+    font-size: @van-radio-size;
   }
 
   &__control {
@@ -29,7 +27,7 @@ $van-radio-size: 20px;
   }
 
   &__label {
-    line-height: $van-radio-size;
+    line-height: @van-radio-size;
     margin-left: 10px;
 
     &--left {
@@ -44,18 +42,18 @@ $van-radio-size: 20px;
   }
 
   .van-icon-checked {
-    color: $green;
+    color: @green;
   }
 
   .van-icon-check {
-    color: $gray-dark;
+    color: @gray-dark;
   }
 
   &--disabled {
     .van-icon {
-      color: $gray-light;
+      color: @gray-light;
       border-radius: 100%;
-      background-color: $background-color;
+      background-color: @background-color;
     }
   }
 }