依赖更新 && 构建调整 (#60)

* upgrade dependencies

* 更改所有 saladcss 写法

* fix: 升级依赖导致的样式错误

* fix: build vant css

* use es module when pack && webpack scope hoisting

* fix: vue module version

* delete unused npm script

* fix: build:vant script not work

* fix: webpack config format

* fix: build minify vant.js

* fix: captain ui relative link

.babelrc

@@ -1,6 +1,9 @@
 {
   "presets": [
-    "es2015"
+    [
+      "es2015",
+      { "modules": false }
+    ]
   ],
   "plugins": [
     "transform-runtime",

build/bin/build-entry.js

@@ -3,18 +3,23 @@ var fs = require('fs');
 var render = require('json-templater/string');
 var uppercamelcase = require('uppercamelcase');
 var path = require('path');
-var chalk = require('chalk');
 
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
-var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
+var ISNTALL_COMPONENT_TEMPLATE = '  {{name}}';
 var MAIN_TEMPLATE = `{{include}}
 
+const version = '{{version}}';
+const components = [
+{{components}}
+];
+
 const install = function(Vue) {
-  /* istanbul ignore if */
   if (install.installed) return;
 
-{{install}}
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
 };
 
 /* istanbul ignore if */
@@ -22,9 +27,14 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export {
   install,
-  version: '{{version}}',
+  version,
+{{list}}
+};
+export default {
+  install,
+  version,
 {{list}}
 };
 `;
@@ -66,11 +76,11 @@ ComponentNames.forEach(name => {
 
 var template = render(MAIN_TEMPLATE, {
   include: includeComponentTemplate.join('\n'),
-  install: installTemplate.join('\n'),
+  list: listTemplate.join(',\n'),
-  version: process.env.VERSION || require('../../package.json').version,
+  components: installTemplate.join(',\n') || ' ',
-  list: listTemplate.join(',\n')
+  version: process.env.VERSION || require('../../package.json').version
 });
 
 fs.writeFileSync(OUTPUT_PATH, template);
-console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
+console.log('[build entry] DONE:' + OUTPUT_PATH);
 

build/genExamples.js

@@ -11,8 +11,6 @@ function extract(watch = false) {
   });
 }
 
-extract();
+module.exports = function watch(isProduction) {
-
+  extract(!isProduction);
-module.exports = function watch() {
-  extract(true);
 };

build/strip-tags.js

@@ -1,34 +0,0 @@
-/*!
- * strip-tags <https://github.com/jonschlinkert/strip-tags>
- *
- * Copyright (c) 2015 Jon Schlinkert, contributors.
- * Licensed under the MIT license.
- */
-
-'use strict';
-
-var cheerio = require('cheerio');
-
-exports.strip = function(str, tags) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-
-  if (!tags || tags.length === 0) {
-    return str;
-  }
-
-  tags = !Array.isArray(tags) ? [tags] : tags;
-  var len = tags.length;
-
-  while (len--) {
-    $(tags[len]).remove();
-  }
-
-  return $.html();
-};
-
-exports.fetch = function(str, tag) {
-  var $ = cheerio.load(str, {decodeEntities: false});
-  if (!tag) return str;
-
-  return $(tag).html();
-};

build/utils/postcss_pipe.js

@@ -1,29 +0,0 @@
-var config = {
-    'bem': {
-        'shortcuts': {'component': 'b', 'modifier': 'm', 'descendent': 'e'},
-        'separators': {'descendent': '__', 'modifier': '--'}
-    }
-};
-
-// https://github.com/trysound/postcss-easy-import
-var partialImport = require('postcss-easy-import')();
-
-// 这不是bem，虽然名字叫bem，其实它是suit
-// https://github.com/saladcss/saladcss-bem
-var bem = require('saladcss-bem')(config.bem);
-
-// https://github.com/jonathantneal/precss
-var precss = require('precss')();
-
-// https://github.com/postcss/autoprefixer
-var autoprefixer = require('autoprefixer')();
-
-module.exports = function (webpack) {
-  // 顺序很重要
-  return [
-    partialImport,
-    bem,
-    precss,
-    autoprefixer
-  ];
-};

build/webpack.build.js

@@ -1,13 +1,13 @@
-var webpack = require('webpack');
+const webpack = require('webpack');
-var getPostcssPlugin = require('./utils/postcss_pipe');
+const config = require('./webpack.config.dev.js');
-var config = require('./webpack.config.dev.js');
+const isMinify = process.argv.indexOf('-p') !== -1;
 
 config.entry = {
   'vant': './src/index.js'
 };
 
 config.output = {
-  filename: './lib/[name].js',
+  filename: isMinify ? './lib/[name].min.js' : './lib/[name].js',
   library: 'vant',
   libraryTarget: 'umd',
   umdNamedDefine: true
@@ -30,18 +30,13 @@ config.plugins = [
     minimize: true,
     debug: false,
     options: {
-      postcss: getPostcssPlugin,
-      babel: {
-        presets: ['es2015'],
-        plugins: ['transform-runtime', 'transform-vue-jsx']
-      },
       vue: {
         autoprefixer: false,
-        preserveWhitespace: false,
+        preserveWhitespace: false
-        postcss: getPostcssPlugin
       }
     }
-  })
+  }),
+  new webpack.optimize.ModuleConcatenationPlugin()
 ];
 
 delete config.devtool;

build/webpack.build.min.js

@@ -1,20 +0,0 @@
-var webpack = require('webpack');
-var config = require('./webpack.build.js');
-
-config.entry = {
-  'index': './src/index.js'
-};
-
-config.plugins = config.plugins.concat([
-  new webpack.optimize.UglifyJsPlugin({
-    compress: {
-      warnings: false
-    },
-    output: {
-      comments: false
-    },
-    sourceMap: false
-  })
-]);
-
-module.exports = config;

build/webpack.components.js

@@ -1,6 +1,7 @@
-var path = require('path');
+const path = require('path');
-var Components = require('../components.json');
+const Components = require('../components.json');
-var config = require('./webpack.build.js');
+const config = require('./webpack.build.js');
+const webpack = require('webpack');
 
 delete config.devtool;
 

build/webpack.config.dev.js

@@ -1,44 +1,20 @@
-var webpack = require('webpack');
+const webpack = require('webpack');
-var path = require('path');
+const path = require('path');
-var slugify = require('transliteration').slugify;
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
-var striptags = require('./strip-tags');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-var getPostcssPlugin = require('./utils/postcss_pipe');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const isProduction = process.env.NODE_ENV === 'production';
-const watchExample = require('./genExamples');
+const styleLoaders = [
-
+  { loader: 'css-loader' },
-if (!isProduction) {
+  { loader: 'postcss-loader', options: { sourceMap: true } }
-  watchExample();  
+];
-}
+require('./genExamples')(isProduction);
-
-var StyleExtractPlugin;
-if (process.env.NODE_ENV === 'production') {
-  StyleExtractPlugin = new ExtractTextPlugin('[name].[hash:8].css');
-} else {
-  StyleExtractPlugin = new ExtractTextPlugin('[name].css');
-}
-
-function convert(str) {
-  str = str.replace(/(&#x)(\w{4});/gi, function($0) {
-    return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
-  });
-  return str;
-}
-
-function wrap(render) {
-  return function() {
-    return render.apply(this, arguments)
-      .replace(/\<code v-pre class=\"/, '<code v-pre class="hljs ');
-  };
-};
 
 module.exports = {
   entry: {
-    'vendor': ['vue', 'vue-router', 'zan-doc'],
+    vendor: ['vue', 'vue-router', 'zan-doc'],
     'vant-docs': './docs/src/index.js',
     'vant-examples': './docs/src/examples.js'
   },
@@ -54,37 +30,41 @@ module.exports = {
         { from: /^\/zanui\/vue\/examples/, to: '/examples.html' },
         { from: /^\/zanui\/vue/, to: '/index.html' }
       ]
-    }
+    },
+    stats: 'errors-only'
   },
   resolve: {
-    modules: [
+    modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
-      path.join(__dirname, '../node_modules'),
-      'node_modules'
-    ],
     extensions: ['.js', '.vue', '.css'],
     alias: {
-      'vue$': 'vue/dist/vue.runtime.common.js',
+      vue$: 'vue/dist/vue.esm.js',
-      'src': path.join(__dirname, '../src'),
+      src: path.join(__dirname, '../src'),
-      'packages': path.join(__dirname, '../packages'),
+      packages: path.join(__dirname, '../packages'),
-      'lib': path.join(__dirname, '../lib'),
+      lib: path.join(__dirname, '../lib'),
-      'components': path.join(__dirname, '../docs/src/components')
+      components: path.join(__dirname, '../docs/src/components')
     }
   },
   module: {
     loaders: [
       {
         test: /\.vue$/,
-        use: [{
+        use: [
-          loader: 'vue-loader',
+          {
-          options: {
+            loader: 'vue-loader',
-            loaders: {
+            options: {
-              css: ExtractTextPlugin.extract({
+              loaders: {
-                use: 'css-loader!postcss-loader',
+                postcss: ExtractTextPlugin.extract({
-                fallback: 'vue-style-loader'
+                  use: styleLoaders,
-              })
+                  fallback: 'vue-style-loader'
+                }),
+                css: ExtractTextPlugin.extract({
+                  use: styleLoaders,
+                  fallback: 'vue-style-loader'
+                })
+              }
             }
           }
-        }]
+        ]
       },
       {
         test: /\.js$/,
@@ -93,9 +73,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
+        use: ExtractTextPlugin.extract({ use: styleLoaders })
-          use: 'css-loader!postcss-loader'
-        })
       },
       {
         test: /\.md/,
@@ -113,34 +91,29 @@ module.exports = {
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
-        postcss: getPostcssPlugin,
-        babel: {
-          presets: ['es2015'],
-          plugins: ['transform-runtime', 'transform-vue-jsx']
-        },
         vue: {
-          autoprefixer: false,
+          autoprefixer: false
-          postcss: getPostcssPlugin
         },
         vueMarkdown: {
           use: [
-            [require('markdown-it-container'), 'demo', {
+            [
-              validate: function(params) {
+              require('markdown-it-container'),
-                return params.trim().match(/^demo\s*(.*)$/);
+              'demo',
-              },
+              {
+                validate: function(params) {
+                  return params.trim().match(/^demo\s*(.*)$/);
+                },
 
-              render: function(tokens, idx) {
+                render: function(tokens, idx) {
-                if (tokens[idx].nesting === 1) {
+                    return tokens[idx].nesting === 1 
-                  return `<demo-block class="demo-box"><div class="highlight" slot="highlight">`;
+                      ? `<demo-block class="demo-box"><div class="highlight" slot="highlight"å>`
+                      :`</div></demo-block>\n`;
                 }
-                return `</div></demo-block>\n`;
               }
-            }]
+            ]
           ],
           preprocess: function(MarkdownIt, source) {
-            MarkdownIt.renderer.rules.table_open = function() {
+            MarkdownIt.renderer.rules.table_open = () => '<table class="zan-doc-table">';
-              return '<table class="zan-doc-table">';
-            };
             return source;
           }
         }
@@ -160,7 +133,10 @@ module.exports = {
     }),
     new webpack.HotModuleReplacementPlugin(),
     new OptimizeCssAssetsPlugin(),
-    StyleExtractPlugin,
+    new ExtractTextPlugin({
+      filename: isProduction ? '[name].[hash:8].css' : '[name].css',
+      allChunks: true
+    }),
     new FriendlyErrorsPlugin()
   ]
 };

docs/examples-docs/actionsheet.md

@@ -1,17 +1,15 @@
 <style>
-@component-namespace demo {
+.demo-actionsheet {
-  @b actionsheet {
+  .actionsheet-wx {
-    .actionsheet-wx {
+    color: #06BF04;
-      color: #06BF04;
+  }
-    }
 
-    .van-button {
+  .van-button {
-      margin-left: 15px;
+    margin-left: 15px;
-    }
+  }
 
-    .title-actionsheet p {
+  .title-actionsheet p {
-      padding: 20px;
+    padding: 20px;
-    }
   }
 }
 </style>

docs/examples-docs/badge.md

@@ -1,14 +1,12 @@
 <style>
-@component-namespace demo {
+.demo-badge {
-  @b badge {
+  .badge-group-wrapper {
-    .badge-group-wrapper {
+    padding: 30px 20px;
-      padding: 30px 20px;
+    background-color: #fff;
-      background-color: #fff;
+  }
-    }
 
-    .van-badge-group {
+  .van-badge-group {
-      margin: 0 auto;
+    margin: 0 auto;
-    }
   }
 }
 </style>

docs/examples-docs/button.md

@@ -1,20 +1,18 @@
 <style>
-@component-namespace demo {
+.demo-button {
-  @b button {
+  .van-button {
-    .van-button {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    user-select: none;
-      user-select: none;
+  }
-    }
+  .van-row {
-    .van-row {
+    padding: 0 15px;
-      padding: 0 15px;
+    margin-bottom: 20px;
-      margin-bottom: 20px;
+  }
-    }
+  .van-col-24 {
-    .van-col-24 {
+    margin-bottom: 20px;
-      margin-bottom: 20px;
 
-      &:last-child {
+    &:last-child {
-        margin-bottom: 0;
+      margin-bottom: 0;
-      }
     }
   }
 }

docs/examples-docs/checkbox.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-checkbox {
-  @b checkbox {
+  .van-checkbox-wrapper {
-    .van-checkbox-wrapper {
+    padding: 0 20px;
-      padding: 0 20px;
 
-      .van-checkbox {
+    .van-checkbox {
-        margin: 10px 0;
+      margin: 10px 0;
-      }
     }
   }
 }

docs/examples-docs/dialog.md

@@ -1,9 +1,7 @@
 <style>
-@component-namespace demo {
+.demo-dialog {
-  @b dialog {
+  .van-button {
-    .van-button {
+    margin: 15px;
-      margin: 15px;
-    }
   }
 }
 </style>

docs/examples-docs/field.md

@@ -1,9 +1,7 @@
 <style>
-@component-namespace demo {
+.demo-field {
-  @b field {
+  .van-field-wrapper {
-    .van-field-wrapper {
+    padding: 0 10px;
-      padding: 0 10px;
-    }
   }
 }
 </style>

docs/examples-docs/icon.md

@@ -1,20 +1,18 @@
 <style>
-@component-namespace demo {
+.demo-icon {
-  @b icon {
+  .examples {
-    .examples {
+    max-height: none;
-      max-height: none;
+  }
-    }
 
-    .van-col {
+  .van-col {
-      text-align: center;
+    text-align: center;
-      height: 120px;
+    height: 120px;
-    }
+  }
 
-    .van-icon {
+  .van-icon {
-      font-size: 45px;
+    font-size: 45px;
-      display: block;
+    display: block;
-      margin: 15px 0;
+    margin: 15px 0;
-    }
   }
 } 
 </style>

docs/examples-docs/image-preview.md

@@ -1,9 +1,7 @@
 <style>
-@component-namespace demo {
+.demo-image-preview {
-  @b image-preview {
+  .van-button {
-    .van-button {
+    margin-left: 15px;
-      margin-left: 15px;
-    }
   }
 }
 </style>

docs/examples-docs/layout.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-layout {
-  @b layout {
+  .van-row {
-    .van-row {
+    padding: 0 20px;
-      padding: 0 20px;
+  }
-    }
+  .van-col {
-    .van-col {
+    margin-bottom: 10px;
-      margin-bottom: 10px;
-    }
   }
 }
 

docs/examples-docs/lazyload.md

@@ -1,17 +1,15 @@
 <style>
-@component-namespace demo {
+.demo-lazyload {
-  @b lazyload {
+  .lazy-img {
-    .lazy-img {
+    display: block;
-      display: block;
+    width: 100%;
-      width: 100%;
+    height: auto;
-      height: auto;
+  }
-    }
 
-    .lazy-background {
+  .lazy-background {
-      height: 300px;
+    height: 300px;
-      background-size: cover;
+    background-size: cover;
-      background-repeat: no-repeat;
+    background-repeat: no-repeat;
-    }
   }
 }
 </style>

docs/examples-docs/loading.md

@@ -1,21 +1,19 @@
 <style>
-@component-namespace demo {
+.demo-loading {
-  @b loading {
+  .van-loading {
-    .van-loading {
+    margin: 0 auto;
-      margin: 0 auto;
+  }
-    }
 
-    .circle-loading {
+  .circle-loading {
-      margin: 20px auto;
+    margin: 20px auto;
-    }
+  }
 
-    .demo-loading__example--with-bg {
+  .demo-loading__example--with-bg {
-      background-color: rgba(17, 17, 17, 0.7);
+    background-color: rgba(17, 17, 17, 0.7);
-      margin: 0 auto;
+    margin: 0 auto;
-      width: 120px;
+    width: 120px;
-      padding: 45px 0;
+    padding: 45px 0;
-      border-radius: 10px;
+    border-radius: 10px;
-    }
   }
 }
 </style>

docs/examples-docs/panel.md

@@ -1,30 +1,28 @@
 <style>
-@component-namespace demo {
+.demo-panel {
-  @b panel {
+  .van-panel-sum {
-    .van-panel-sum {
+    background: #fff;
-      background: #fff;
+    text-align: right;
-      text-align: right;
+    font-size: 14px;
-      font-size: 14px;
+    color: #333;
-      color: #333;
+    line-height: 30px;
-      line-height: 30px;
+    padding-right: 15px;
-      padding-right: 15px;
 
-      span {
+    span {
-        color: red;
+      color: red;
-      }
     }
+  }
 
-    .van-panel-buttons {
+  .van-panel-buttons {
-      text-align: right;
+    text-align: right;
 
-      .van-button {
+    .van-button {
-        margin-left: 5px;
+      margin-left: 5px;
-      }
     }
+  }
 
-    .panel-content {
+  .panel-content {
-      padding: 20px;
+    padding: 20px;
-    }
   }
 }
 </style>

docs/examples-docs/popup.md

@@ -1,37 +1,35 @@
 <style>
-@component-namespace demo {
+.demo-popup {
-  @b popup {
+  .van-button {
-    .van-button {
+    margin: 10px 15px;
-      margin: 10px 15px;
+  }
-    }
 
-    .van-popup-1 {
+  .van-popup-1 {
-      width: 60%;
+    width: 60%;
-      box-sizing: border-box;
+    box-sizing: border-box;
-      padding: 20px;
+    padding: 20px;
-      border-radius: 5px;
+    border-radius: 5px;
-      text-align: center;
+    text-align: center;
-    }
+  }
 
-    .van-popup-2 {
+  .van-popup-2 {
-      width: 100%;
+    width: 100%;
-      height: 200px;
+    height: 200px;
-      box-sizing: border-box;
+    box-sizing: border-box;
-      padding: 20px;
+    padding: 20px;
-    }
+  }
 
-    .van-popup-3 {
+  .van-popup-3 {
-      line-height: 50px;
+    line-height: 50px;
-      text-align: center;
+    text-align: center;
-      background-color: rgba(0, 0, 0, 0.701961);
+    background-color: rgba(0, 0, 0, 0.701961);
-      color: #fff;
+    color: #fff;
-    }
+  }
 
-    .van-popup-4,
+  .van-popup-4,
-    .van-popup-5 {
+  .van-popup-5 {
-      width: 100%;
+    width: 100%;
-      height: 100%;
+    height: 100%;
-    }
   }
 }
 </style>

docs/examples-docs/progress.md

@@ -1,12 +1,10 @@
 <style>
-  @component-namespace demo {
+.demo-progress {
-    @b progress {
+  &__wrapper {
-      @e wrapper {
+    padding: 5px;
-        padding: 5px;
+    margin: 20px 10px;
-        margin: 20px 10px;
-      }
-    }
   }
+} 
 </style>
 
 

docs/examples-docs/quantity.md

@@ -1,13 +1,11 @@
 <style>
-@component-namespace demo {
+.demo-quantity {
-  @b quantity {
+  .van-quantity {
-    .van-quantity {
+    margin-left: 15px;
-      margin-left: 15px;
+  }
-    }
 
-    .curr-quantity {
+  .curr-quantity {
-      margin: 15px;
+    margin: 15px;
-    }
   }
 }
 </style>

docs/examples-docs/quickstart.md

@@ -2,7 +2,7 @@
 
 一套基于`Vue.js 2.0`的 Mobile 组件库
 
-[查看业务组件库 Captain-UI](https://www.youzanyun.com/zanui/captain/component/quickstart)
+[查看业务组件库 Captain-UI](/zanui/captain/component/quickstart)
 
 ### 安装
 

docs/examples-docs/radio.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-radio {
-  @b radio {
+  .van-radios {
-    .van-radios {
+    padding: 0 20px;
-      padding: 0 20px;
 
-      .van-radio {
+    .van-radio {
-        margin: 10px 0;
+      margin: 10px 0;
-      }
     }
   }
 }

docs/examples-docs/steps.md

@@ -1,13 +1,11 @@
 <style>
-@component-namespace demo {
+.demo-steps {
-  @b steps {
+  .steps-success {
-    .steps-success {
+    color: #06bf04;
-      color: #06bf04;
+  }
-    }
 
-    .van-button {
+  .van-button {
-      margin: 15px 0 0 15px;
+    margin: 15px 0 0 15px;
-    }
   }
 }
 </style>

docs/examples-docs/swipe.md

@@ -1,12 +1,10 @@
 <style>
-@component-namespace demo {
+.demo-swipe {
-  @b swipe {
+  .van-swipe {
-    .van-swipe {
+    height: 200px;
-      height: 200px;
 
-      img {
+    img {
-        width: 100%;
+      width: 100%;
-      }
     }
   }
 }

docs/examples-docs/switch.md

@@ -1,20 +1,18 @@
 <style>
-  @component-namespace demo {
+.demo-switch {
-    @b switch {
+  .van-switch {
-      .van-switch {
+    float: left;
-        float: left;
+    margin: 0 15px;
-        margin: 0 15px;
-      }
-
-      @e text {
-        display: inline-block;
-        line-height: 32px;
-        float: left;
-        font-size: 14px;
-        color: #333;
-      }
-    }
   }
+
+  &__text {
+    display: inline-block;
+    line-height: 32px;
+    float: left;
+    font-size: 14px;
+    color: #333;
+  }
+}
 </style>
 
 <script>

docs/examples-docs/tab.md

@@ -1,26 +1,24 @@
 <style>
-@component-namespace demo {
+.demo-tab {
-  @b tab {
+  .van-tab__pane {
-    .van-tab__pane {
+    background-color: #fff;
-      background-color: #fff;
+    padding: 20px;
-      padding: 20px;
+  }
-    }
 
-    .van-tabs--card .van-tab__pane {
+  .van-tabs--card .van-tab__pane {
-      background-color: transparent;
+    background-color: transparent;
-    }
+  }
 
-    .custom-tabwrap .van-tab-active {
+  .custom-tabwrap .van-tab-active {
-      color: #20a0ff;
+    color: #20a0ff;
-    }
+  }
-    .custom-tabwrap .van-tabs-nav-bar {
+  .custom-tabwrap .van-tabs-nav-bar {
-      background: #20a0ff;
+    background: #20a0ff;
-    }
+  }
-    .custom-pane {
+  .custom-pane {
-      text-align: center;
+    text-align: center;
-      height: 50px;
+    height: 50px;
-      line-height: 50px;
+    line-height: 50px;
-    }
   }
 }
 </style>

docs/examples-docs/toast.md

@@ -1,9 +1,7 @@
 <style>
-@component-namespace demo {
+.demo-toast {
-  @b toast {
+  .van-button {
-    .van-button {
+    margin: 15px;
-      margin: 15px;
-    }
   }
 }
 </style>

docs/examples-docs/waterfall.md

@@ -66,28 +66,26 @@ export default {
 </script>
 
 <style>
-@component-namespace demo {
+.demo-waterfall {
-  @b waterfall {
+  .waterfall {
-    .waterfall {
+    max-height: 360px;
-      max-height: 360px;
+    overflow: scroll;
-      overflow: scroll;
+    border-top: 1px solid #e5e5e5;
-      border-top: 1px solid #e5e5e5;
+  }
-    }
+  .waterfall-item {
-    .waterfall-item {
+    line-height: 50px;
-      line-height: 50px;
+    border-bottom: 1px solid #e5e5e5;
-      border-bottom: 1px solid #e5e5e5;
+    background: #fff;
-      background: #fff;
+  }
-    }
+  .page-desc {
-    .page-desc {
+    padding: 5px 0;
-      padding: 5px 0;
+    line-height: 1.4;
-      line-height: 1.4;
+    font-size: 14px;
-      font-size: 14px;
+    text-align: center;
-      text-align: center;
+    color: #666;
-      color: #666;
+  }
-    }
+  .van-loading {
-    .van-loading {
+    margin: 10px auto;
-      margin: 10px auto;
-    }
   }
 }
 </style>

docs/src/components/mobile-nav.vue

@@ -62,82 +62,79 @@ export default {
 };
 </script>
 
-<style>
+<style lang="postcss">
-@component-namespace mobile {
+.mobile-nav-group {
-  @b nav-group {
+  border-radius: 2px;
-    border-radius: 2px;
+  margin-bottom: 15px;
-    margin-bottom: 15px;
+  background-color: #fff;
-    background-color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
-    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
 
-    @e basetitle {
+  &__basetitle {
-      padding-left: 20px;
+    padding-left: 20px;
+  }
+
+  &__title {
+    font-size: 16px;
+    color: #333;
+    line-height: 56px;
+    position: relative;
+    user-select: none;
+
+    &--open {
+      color: #999;
     }
 
-    @e title {
+    a {
-      font-size: 16px;
       color: #333;
-      line-height: 56px;
+      display: block;
-      position: relative;
       user-select: none;
+      padding-left: 20px;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-      @m open {
+      &:active {
-        color: #999;
+        background: #ECECEC;
       }
 
-      a {
+      > p {
-        color: #333;
+        border-top: 1px solid #e5e5e5;
-        display: block;
-        user-select: none;
-        padding-left: 20px;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-        &:active {
-          background: #ECECEC;
-        }
-
-        > p {
-          border-top: 1px solid #e5e5e5;
-        }
-      }
-
-      .van-icon-arrow {
-        position: absolute;
-        font-size: 12px;
-        line-height: 1;
-        top: 24px;
-        right: 20px;
       }
     }
 
-    @e list-wrapper {
+    .van-icon-arrow {
-      height: 0;
+      position: absolute;
-      overflow: hidden;
+      font-size: 12px;
-
+      line-height: 1;
-      @m open {
+      top: 24px;
-        height: auto;
+      right: 20px;
-      }
-    }
-
-    @e list {
-      transform: translateY(-50%);
-      transition: transform .2s ease-out;
-
-      @m open {
-        transform: translateY(0);
-      }
-    }
-
-    li {
-      list-style: none;
-    }
-
-    ul {
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
     }
   }
-}
 
+  &__list-wrapper {
+    height: 0;
+    overflow: hidden;
+
+    &--open {
+      height: auto;
+    }
+  }
+
+  &__list {
+    transform: translateY(-50%);
+    transition: transform .2s ease-out;
+
+    &--open {
+      transform: translateY(0);
+    }
+  }
+
+  li {
+    list-style: none;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+}
 </style>

package.json

@@ -12,16 +12,15 @@
   ],
   "scripts": {
     "bootstrap": "yarn || npm i",
-    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.dev.js --content-base ./",
+    "dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js --content-base ./",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
-    "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
+    "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp -R packages/vant-css/lib/ lib/vant-css",
-    "build:components": "webpack --progress --hide-modules --config build/webpack.components.js",
+    "build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js",
-    "build:vant": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
+    "build:vant": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --progress --hide-modules --config build/webpack.build.js",
-    "build:example": "node build/genExamples.js",
     "deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
     "deploy:cdn": "superman cdn /zanui/vue docs/dist/*.js docs/dist/*.css",
-    "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",
+    "deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",
     "dist": "npm run clean && npm run build:file && npm run lint && npm run build:vant && npm run build:components && npm run build:utils && npm run build:vant-css",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "lint": "felint lint src/**/*.js packages/**/*.{js,vue} build/**/*.js",
@@ -43,98 +42,79 @@
   "license": "ISC",
   "dependencies": {
     "raf.js": "0.0.4",
-    "vue-lazyload": "^1.0.3"
+    "vue-lazyload": "^1.0.6"
   },
   "peerDependencies": {
     "vue": "2.3.4"
   },
   "devDependencies": {
-    "autoprefixer": "^6.7.5",
+    "autoprefixer": "^7.1.2",
-    "avoriaz": "^2.0.0",
+    "avoriaz": "2.0.0",
     "babel-cli": "^6.14.0",
-    "babel-core": "^6.17.0",
+    "babel-core": "^6.25.0",
-    "babel-eslint": "^6.1.2",
+    "babel-loader": "^7.1.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
+    "babel-plugin-module-resolver": "^2.7.1",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-plugin-transform-vue-jsx": "^3.3.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.16.0",
-    "babel-runtime": "^6.11.0",
+    "babel-runtime": "^6.25.0",
-    "chai": "^3.5.0",
+    "chai": "^4.1.0",
-    "chalk": "^1.1.3",
     "cheerio": "^0.22.0",
-    "codecov": "^2.1.0",
+    "codecov": "^2.2.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^5.0.1",
-    "cp-cli": "^1.0.2",
+    "css-loader": "^0.28.4",
-    "cross-env": "^3.1.3",
+    "eslint-plugin-vue": "^2.1.0",
-    "css-loader": "^0.24.0",
+    "extract-text-webpack-plugin": "2.1.2",
-    "decamelize": "^1.2.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-vue": "^2.0.1",
-    "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "felint": "^0.5.0-alpha.3",
-    "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
-    "gh-pages": "^0.12.0",
+    "gh-pages": "^1.0.0",
     "gulp": "^3.9.1",
     "gulp-util": "^3.0.8",
-    "highlight.js": "^9.8.0",
+    "highlight.js": "^9.12.0",
-    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.29.0",
-    "html-webpack-plugin": "^2.22.0",
-    "inject-loader": "^3.0.0-beta2",
     "isparta-loader": "^2.0.0",
-    "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
-    "karma": "^1.5.0",
+    "karma": "^1.7.0",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sinon-chai": "^1.2.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.30",
+    "karma-spec-reporter": "^0.0.31",
-    "karma-webpack": "^2.0.2",
+    "karma-webpack": "^2.0.4",
-    "lerna": "2.0.0-beta.31",
+    "lerna": "^2.0.0",
-    "lolex": "^1.5.1",
+    "markdown-it": "^8.3.1",
-    "markdown-it": "^6.1.1",
-    "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
-    "mocha": "^3.2.0",
+    "mocha": "^3.4.2",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "optimize-css-assets-webpack-plugin": "^3.0.0",
-    "postcss": "^5.1.2",
+    "postcss": "^6.0.8",
-    "postcss-easy-import": "^2.0.0",
+    "postcss-easy-import": "^2.1.0",
-    "postcss-loader": "^1.3.3",
+    "postcss-loader": "^2.0.6",
-    "precss": "^1.4.0",
+    "precss": "^2.0.0",
-    "prismjs": "^1.5.1",
+    "progress-bar-webpack-plugin": "^1.10.0",
-    "progress-bar-webpack-plugin": "^1.9.3",
     "rimraf": "^2.5.4",
-    "run-sequence": "^1.2.2",
+    "run-sequence": "^2.1.0",
-    "saladcss-bem": "^0.0.1",
+    "sinon": "^2.4.1",
-    "sinon": "^1.17.7",
+    "sinon-chai": "^2.12.0",
-    "sinon-chai": "^2.8.0",
+    "style-loader": "^0.18.2",
-    "style-loader": "^0.13.1",
+    "uppercamelcase": "^3.0.0",
-    "theaterjs": "^3.0.0",
+    "url-loader": "^0.5.9",
-    "transliteration": "^1.1.11",
+    "vue": "^2.4.2",
-    "uppercamelcase": "^1.1.0",
-    "url-loader": "^0.5.7",
-    "vue": "2.3.4",
     "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^12.0.0",
+    "vue-loader": "^13.0.2",
     "vue-markdown-loader": "^1.0.0",
-    "vue-router": "^2.5.0",
+    "vue-router": "^2.7.0",
     "vue-style-loader": "^3.0.0",
-    "vue-template-compiler": "2.3.4",
+    "vue-template-compiler": "^2.4.2",
-    "vue-template-es2015-compiler": "^1.4.2",
+    "vue-template-es2015-compiler": "^1.5.3",
-    "webpack": "^2.2.1",
+    "webpack": "^3.4.1",
-    "webpack-dev-server": "^1.16.3",
+    "webpack-dev-server": "^2.6.1",
-    "webpack-merge": "^2.0.0",
+    "webpack-merge": "^4.1.0",
-    "webpack-node-externals": "^1.5.4",
-    "webpack-vendor-chunk-plugin": "^1.0.0",
     "zan-doc": "^0.1.0"
   }
 }

packages/toast/src/toast.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import merge from 'src/utils/merge';
+import ToastComponent from './toast.vue';
 
-const ToastConstructor = Vue.extend(require('./toast.vue'));
+const ToastConstructor = Vue.extend(ToastComponent);
 let instance;
 
 const getInstance = () => {
@@ -24,6 +25,7 @@ var Toast = (options = {}) => {
   const duration = options.duration || 3000;
 
   const instance = getInstance();
+
   instance.closed = false;
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';

packages/toast/src/toast.vue

@@ -1,24 +1,18 @@
 <template>
   <transition name="van-toast-fade">
     <div class="van-toast-wrapper" v-show="visible">
-      <div class="van-toast" :class="['van-toast--' + displayStyle]">
+      <div :class="['van-toast', 'van-toast--' + displayStyle]">
         <!-- 只显示文字 -->
-        <template v-if="displayStyle === 'text'" >
+        <div v-if="displayStyle === 'text'" class="van-toast__text">{{ message }}</div>
-          <div class="van-toast__text">{{message}}</div>
-        </template>
         <!-- 加载中 -->
-        <template v-if="displayStyle === 'loading'">
+        <van-loading v-if="displayStyle === 'loading' && type === 'loading'" type="gradient-circle" color="white"></van-loading>
-            <van-loading v-if="type === 'loading'" type="gradient-circle" color="white"></van-loading>
-        </template>
         <!-- 图案加文字 -->
         <template v-if="displayStyle === 'default'">
           <van-icon class="van-toast__icon" :name="type"></van-icon>
-          <div class="van-toast__text">{{message}}</div>
+          <div class="van-toast__text">{{ message }}</div>
         </template>
         <!-- 传入html -->
-        <template v-if="displayStyle === 'html'">
+        <div v-if="displayStyle === 'html'" class="van-toast__text" v-html="message"></div>
-          <div class="van-toast__text" v-html="message"></div>
-        </template>
       </div>
       <div class="van-toast__overlay" v-if="forbidClick"></div>
     </div>

packages/vant-css/gulpfile.js

@@ -1,11 +1,10 @@
 var gulp = require('gulp');
 var postcss = require('gulp-postcss');
 var cssmin = require('gulp-cssmin');
-var postcssPlugin = require('../../build/utils/postcss_pipe')();
 
 gulp.task('compile', function() {
   return gulp.src('./src/*.css')
-    .pipe(postcss(postcssPlugin))
+    .pipe(postcss())
     .pipe(cssmin())
     .pipe(gulp.dest('./lib'));
 });

packages/vant-css/package.json

@@ -14,13 +14,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^6.7.5",
+    "autoprefixer": "^7.1.2",
     "gulp": "^3.9.1",
-    "gulp-cssmin": "^0.1.7",
+    "gulp-cssmin": "^0.2.0",
-    "gulp-postcss": "^6.1.1",
+    "gulp-postcss": "^7.0.0",
-    "postcss-easy-import": "^2.0.0",
+    "postcss-easy-import": "^2.1.0",
-    "precss": "^1.4.0",
+    "precss": "^2.0.0"
-    "saladcss-bem": "^0.0.1"
   },
   "dependencies": {}
 }

packages/vant-css/src/actionsheet.css

@@ -2,74 +2,72 @@
 @import './mixins/border_retina.css';
 @import './popup.css';
 
-@component-namespace van {
+.van-actionsheet {
-  @b actionsheet {
+  position: fixed;
-    position: fixed;
+  width: 100%;
-    width: 100%;
+  top: auto;
-    top: auto;
+  bottom: 0;
-    bottom: 0;
+  right: auto;
-    right: auto;
+  left: 50%;
-    left: 50%;
+  transform: translate3d(-50%, 0, 0);
-    transform: translate3d(-50%, 0, 0);
+  backface-visibility: hidden;
-    backface-visibility: hidden;
+  transition: .2s ease-out;
-    transition: .2s ease-out;
+  background-color: #e0e0e0;
-    background-color: #e0e0e0;
 
-    @m withtitle {
+  &--withtitle {
-      background-color: $c-white;
+    background-color: $c-white;
+  }
+
+  &__item {
+    line-height: 50px;
+    height: 50px;
+    text-align: center;
+    color: $c-black;
+    font-size: 16px;
+    position: relative;
+    background-color: $c-white;
+
+    &::after {
+      @mixin border-retina (top);
+    }
+  }
+
+  &__subname {
+    color: $c-gray-darker;
+    font-size: 12px;
+  }
+
+  &__loading {
+    margin: 0 auto;
+    display: inline-block;
+  }
+
+  &__button {
+    display: block;
+    margin-top: 5px;
+    line-height: 50px;
+    color: $c-black;
+    font-size: 16px;
+    text-align: center;
+    background-color: $c-white;
+  }
+
+  &__header {
+    line-height: 44px;
+    color: $c-black;
+    text-align: center;
+    position: relative;
+
+    &::after {
+      @mixin border-retina (top, bottom);
     }
 
-    @e item {
+    .van-icon-close {
-      line-height: 50px;
+      position: absolute;
-      height: 50px;
+      font-size: 22px;
-      text-align: center;
+      line-height: 22px;
-      color: $c-black;
+      top: 11px;
-      font-size: 16px;
+      right: 15px;
-      position: relative;
-      background-color: $c-white;
-
-      &::after {
-        @mixin border-retina (top);
-      }
-    }
-
-    @e subname {
-      color: $c-gray-darker;
-      font-size: 12px;
-    }
-
-    @e loading {
-      margin: 0 auto;
-      display: inline-block;
-    }
-
-    @e button {
-      display: block;
-      margin-top: 5px;
-      line-height: 50px;
-      color: $c-black;
-      font-size: 16px;
-      text-align: center;
-      background-color: $c-white;
-    }
-
-    @e header {
-      line-height: 44px;
-      color: $c-black;
-      text-align: center;
-      position: relative;
-
-      &::after {
-        @mixin border-retina (top, bottom);
-      }
-
-      .van-icon-close {
-        position: absolute;
-        font-size: 22px;
-        line-height: 22px;
-        top: 11px;
-        right: 15px;
-      }
     }
   }
 }

packages/vant-css/src/badge.css

@@ -1,77 +1,77 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-badge {
-  @b badge-group {
+
+  display: block;
+  overflow: hidden;
+  position: relative;
+  padding: 20px 12px;
+  box-sizing: border-box;
+  line-height: 1.4;
+  background-color: $c-background;
+  color: $c-gray-darker;
+  font-size: 14px;
+  text-decoration: none;
+  word-break: break-all;
+
+  &-group {
     position: relative;
     width: 85px;
+
     &::after {
       @mixin border-retina (top);
     }
   }
 
-  @b badge {
+  &--select {
-    display: block;
+    font-weight: bold;
-    overflow: hidden;
+    color: $c-black;
-    position: relative;
+    background-color: $c-white;
-    padding: 20px 12px;
+    .van-badge__active {
-    box-sizing: border-box;
+      display: block;
-    line-height: 1.4;
-    background-color: $c-background;
-    color: $c-gray-darker;
-    font-size: 14px;
-    text-decoration: none;
-    word-break: break-all;
-
-    @m select {
-      font-weight: bold;
-      color: $c-black;
-      background-color: $c-white;
-      .van-badge__active {
-        display: block;
-      }
-      &::after {
-        @mixin border-retina (top);
-        @mixin border-retina (right);
-        @mixin border-retina (left);
-      }
     }
-
-    @e active {
-      display: none;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 3px;
-      height: 100%;
-      background-color: #FF4444;
-    }
-
-    @e info {
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      font-size: 10px;
-      transform:scale(0.8);
-      text-align: center;
-      box-sizing: border-box;
-      padding: 0 6px;
-      min-width: 18px;
-      height: 18px;
-      line-height: 18px;
-      border-radius: 9px;
-      background-color: #FF4444;
-      color: $c-white;
-    }
-
     &::after {
-      @mixin border-retina (bottom);
+      @mixin border-retina (top);
+      @mixin border-retina (right);
+      @mixin border-retina (left);
     }
+  }
 
-    &:last-child {
+  &__active {
-      &::after {
+    display: none;
-        border-bottom: 0;
+    position: absolute;
-      }
+    left: 0;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    background-color: #FF4444;
+  }
+
+  &__info {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    font-size: 10px;
+    transform:scale(0.8);
+    text-align: center;
+    box-sizing: border-box;
+    padding: 0 6px;
+    min-width: 18px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 9px;
+    background-color: #FF4444;
+    color: $c-white;
+  }
+
+  &::after {
+    @mixin border-retina (bottom);
+  }
+
+  &:last-child {
+    &::after {
+      border-bottom: 0;
     }
   }
 }

packages/vant-css/src/button.css

@@ -1,154 +1,152 @@
 @import './common/var.css';
 @import './loading.css';
 
-@component-namespace van {
+.van-button {
-  @b button {
+  position: relative;
-    position: relative;
+  padding: 0;
-    padding: 0;
+  display: inline-block;
+  height: 45px;
+  line-height: 43px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 16px;
+  text-align: center;
+  appearance: none;
+  outline: 0;
+  overflow: hidden;
+
+  &::after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0;
+  }
+
+  &:not(.is-disabled):active::after {
+    opacity: .3;
+  }
+
+  &__icon-loading {
     display: inline-block;
-    height: 45px;
+    width: 16px;
-    line-height: 43px;
+    height: 16px;
-    border-radius: 4px;
+    vertical-align: middle;
-    box-sizing: border-box;
+  }
+
+  &--default {
+    color: $button-default-color;
+    background-color: $button-default-background-color;
+    border: 1px solid $button-default-border-color;
+
+    &:active {
+      border-color: #cacaca;
+      background-color: $c-gray-light;
+      color: $c-gray-dark;
+    }
+  }
+
+  &--primary {
+    color: $button-primary-color;
+    background-color: $button-primary-background-color;
+    border: 1px solid $button-primary-border-color;
+
+    &:active {
+      border-color: #00AA00;
+      background-color: #00AA00;
+      color: #66CC66;
+    }
+  }
+
+  &--danger {
+    color: $button-danger-color;
+    background-color: $button-danger-background-color;
+    border: 1px solid $button-danger-border-color;
+
+    &:active {
+      border-color: #D43333;
+      background-color: #D43333;
+    }
+  }
+
+  &--large {
+    width: 100%;
+    height: 50px;
+    line-height: 48px;
     font-size: 16px;
-    text-align: center;
+  }
-    appearance: none;
-    outline: 0;
-    overflow: hidden;
 
-    &::after {
+  &--normal {
-      content: " ";
+    padding: 0 15px;
-      position: absolute;
+    font-size: 14px;
-      top: 0;
+  }
-      left: 0;
+
-      right: 0;
+  &--small {
-      bottom: 0;
+    min-width: 60px;
-      background-color: #000;
+    height: 30px;
-      opacity: 0;
+    line-height: 28px;
+    font-size: 12px;
+  }
+
+  /*
+    mini图标默认宽度50px，文字不能超过4个
+  */
+  &--mini {
+    display: inline-block;
+    width: 50px;
+    height: 22px;
+    line-height: 20px;
+    font-size: 10px;
+
+    & + .van-button--mini {
+      margin-left: 5px;
+    }
+  }
+
+  &--disabled {
+    color: $button-disabled-color;
+    background-color: $button-disabled-background-color;
+    border: 1px solid $button-disabled-border-color;
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--loading {
+    .van-button__text {
+      display: none;
+    }
+  }
+
+  &--bottom-action {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    border: 0;
+    border-radius: 0;
+    background-color: $bottom-action-button-default-background-color;
+    color: $bottom-action-button-default-color;
+    font-size: 16px;
+
+    &:active {
+      border-color: #DD6F44;
+      background-color: #DD6F44;
+      color: #fff;
     }
 
-    &:not(.is-disabled):active::after {
+    &.van-button--primary {
-      opacity: .3;
+      background-color: $bottom-action-button-primary-background-color;
-    }
+      color: $bottom-action-button-primary-color;
-
-    @e icon-loading {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      vertical-align: middle;
-    }
-
-    @m default {
-      color: $button-default-color;
-      background-color: $button-default-background-color;
-      border: 1px solid $button-default-border-color;
-
-      &:active {
-        border-color: #cacaca;
-        background-color: $c-gray-light;
-        color: $c-gray-dark;
-      }
-    }
-
-    @m primary {
-      color: $button-primary-color;
-      background-color: $button-primary-background-color;
-      border: 1px solid $button-primary-border-color;
-
-      &:active {
-        border-color: #00AA00;
-        background-color: #00AA00;
-        color: #66CC66;
-      }
-    }
-
-    @m danger {
-      color: $button-danger-color;
-      background-color: $button-danger-background-color;
-      border: 1px solid $button-danger-border-color;
 
       &:active {
         border-color: #D43333;
         background-color: #D43333;
       }
     }
-
-    @m large {
-      width: 100%;
-      height: 50px;
-      line-height: 48px;
-      font-size: 16px;
-    }
-
-    @m normal {
-      padding: 0 15px;
-      font-size: 14px;
-    }
-
-    @m small {
-      min-width: 60px;
-      height: 30px;
-      line-height: 28px;
-      font-size: 12px;
-    }
-
-    /*
-      mini图标默认宽度50px，文字不能超过4个
-     */
-    @m mini {
-      display: inline-block;
-      width: 50px;
-      height: 22px;
-      line-height: 20px;
-      font-size: 10px;
-
-      & + .van-button--mini {
-        margin-left: 5px;
-      }
-    }
-
-    @m disabled {
-      color: $button-disabled-color;
-      background-color: $button-disabled-background-color;
-      border: 1px solid $button-disabled-border-color;
-    }
-
-    @m block {
-      display: block;
-      width: 100%;
-    }
-
-    @m loading {
-      .van-button__text {
-        display: none;
-      }
-    }
-
-    @m bottom-action {
-      width: 100%;
-      height: 50px;
-      line-height: 50px;
-      border: 0;
-      border-radius: 0;
-      background-color: $bottom-action-button-default-background-color;
-      color: $bottom-action-button-default-color;
-      font-size: 16px;
-
-      &:active {
-        border-color: #DD6F44;
-        background-color: #DD6F44;
-        color: #fff;
-      }
-
-      &.van-button--primary {
-        background-color: $bottom-action-button-primary-background-color;
-        color: $bottom-action-button-primary-color;
-
-        &:active {
-          border-color: #D43333;
-          background-color: #D43333;
-        }
-      }
-    }
   }
 }

packages/vant-css/src/cell-swipe.css

@@ -1,27 +1,30 @@
-
+.van-cell {
-.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right {
+  &-swipe {
-    -webkit-transition: -webkit-transform 150ms ease-in-out;
-    transition: -webkit-transform 150ms ease-in-out;
-    transition: transform 150ms ease-in-out;
-    transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-}
-
-.van-cell-swipe{
     position: relative;
     min-height: 48px;
     overflow: hidden;
-}
+
-.van-cell-right{
+    .van-cell-wrapper,
+    .van-cell-left,
+    .van-cell-right {
+      transition: transform 150ms ease-in-out;
+    }
+  }
+
+  &-left,
+  &-right {
     position: absolute;
     height: 100%;
-    right: 0;
     top: 0;
-    transform: translate3d(100%,0,0);
+  }
-}
+
-.van-cell-left {
+  &-left {
-    position: absolute;
-    height: 100%;
     left: 0;
-    top: 0;
+    transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%,0,0);
+  }
+
+  &-right {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
 }

packages/vant-css/src/cell.css

@@ -2,8 +2,30 @@
 @import './mixins/border_retina.css';
 @import './icon.css';
 
-@component-namespace van {
+.van-cell {
-  @b cell-group {
+  width: 100%;
+  display: table;
+  position: relative;
+  padding: 10px 15px 10px 0;
+  box-sizing: border-box;
+  line-height: 24px;
+  background-color: $c-white;
+  color: $c-black;
+  font-size: 14px;
+  text-decoration: none;
+  overflow: hidden;
+
+  &::after {
+    @mixin border-retina (bottom);
+  }
+
+  &:last-child {
+    &::after {
+      border-bottom: 0;
+    }
+  }
+
+  &-group {
     padding-left: 15px;
     position: relative;
     background-color: #fff;
@@ -13,79 +35,55 @@
     }
   }
 
-  @b cell {
+  &__title {
-    width: 100%;
+    display: table-cell;
-    display: table;
+  }
-    position: relative;
+
-    padding: 10px 15px 10px 0;
+  &__label {
-    box-sizing: border-box;
+    display: block;
-    line-height: 24px;
+    font-size: 12px;
-    background-color: $c-white;
+    line-height: 1.2;
-    color: $c-black;
+    color: $c-gray-darker;
-    font-size: 14px;
+  }
-    text-decoration: none;
+
+  &__value {
+    display: table-cell;
+    text-align: right;
+    vertical-align: middle;
     overflow: hidden;
 
-    &::after {
+    &--link {
-      @mixin border-retina (bottom);
+      padding-right: 20px;
     }
 
-    &:last-child {
+    &--alone {
-      &::after {
+      text-align: left;
-        border-bottom: 0;
-      }
-    }
-
-    @e title {
-      display: table-cell;
-    }
-
-    @e label {
-      display: block;
-      font-size: 12px;
-      line-height: 1.2;
-      color: $c-gray-darker;
-    }
-
-    @e value {
-      display: table-cell;
-      text-align: right;
-      vertical-align: middle;
-      overflow: hidden;
-
-      @m link {
-        padding-right: 20px;
-      }
-
-      @m alone {
-        text-align: left;
-      }
-    }
-
-    @m required {
-      overflow: visible;
-
-      &::before {
-        content: '*';
-        position: absolute;
-        left: -7px;
-        font-size: 14px;
-        color: #f44;
-      }
-
-      .van-cell__title {
-        float: none;
-        display: inline-block;
-      }
-    }
-
-    @e right-icon {
-      position: absolute;
-      top: 50%;
-      right: 15px;
-      transform: translateY(-50%);
-      color: $c-gray-dark;
-      font-size: 12px;
     }
   }
+
+  &--required {
+    overflow: visible;
+
+    &::before {
+      content: '*';
+      position: absolute;
+      left: -7px;
+      font-size: 14px;
+      color: #f44;
+    }
+
+    .van-cell__title {
+      float: none;
+      display: inline-block;
+    }
+  }
+
+  &__right-icon {
+    position: absolute;
+    top: 50%;
+    right: 15px;
+    transform: translateY(-50%);
+    color: $c-gray-dark;
+    font-size: 12px;
+  }
 }

packages/vant-css/src/checkbox.css

@@ -1,51 +1,49 @@
 @import './common/var.css';
 
-@component-namespace van {
+.van-checkbox {
-  @b checkbox {
+  overflow: hidden;
-    overflow: hidden;
 
-    @m disabled {
+  .van-icon {
-      .van-icon {
+    font-size: 22px;
-        color: #d1dbe5;
+    line-height: 1;
-      }
+  }
-    }
 
-    @e input {
+  .van-icon-checked {
-      position: relative;
+    color: $c-green;
-      height: 22px;
+  }
-      margin-right: 15px;
-      float: left;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
 
-    @e control {
+  .van-icon-check {
-      position: absolute;
+    color: $c-gray-dark;
-      top: 0;
+  }
-      left: 0;
-      width: 22px;
-      height: 22px;
-      opacity: 0;
-      margin: 0;
-    }
-
-    @e label {
-      line-height: 22px;
-      margin-left: 37px;
-      display: block;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);      
-    }
 
+  &--disabled {
     .van-icon {
-      font-size: 22px;
+      color: #d1dbe5;
-      line-height: 1;
-    }
-
-    .van-icon-checked {
-      color: $c-green;
-    }
-
-    .van-icon-check {
-      color: $c-gray-dark;
     }
   }
+
+  &__input {
+    position: relative;
+    height: 22px;
+    margin-right: 15px;
+    float: left;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &__control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 22px;
+    height: 22px;
+    opacity: 0;
+    margin: 0;
+  }
+
+  &__label {
+    line-height: 22px;
+    margin-left: 37px;
+    display: block;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);      
+  }
 }

packages/vant-css/src/col.css

@@ -2,51 +2,8 @@
   float: left;
   box-sizing: border-box;
 }
-.van-col-1 { width: 4.166666666666667%; }
+
-.van-col-2 { width: 8.333333333333334%; }
+@for $i from 1 to 24 {
-.van-col-3 { width: 12.5%; }
+  .van-col-$i { width: calc($i * 100% / 24); }
-.van-col-4 { width: 16.666666666666668%; }
+  .van-col-offset-$i { margin-left: calc($i * 100% / 24); }
-.van-col-5 { width: 20.833333333333336%; }
+}
-.van-col-6 { width: 25%; }
-.van-col-7 { width: 29.166666666666668%; }
-.van-col-8 { width: 33.333333333333336%; }
-.van-col-9 { width: 37.5%; }
-.van-col-10 { width: 41.66666666666667%; }
-.van-col-11 { width: 45.833333333333336%; }
-.van-col-12 { width: 50%; }
-.van-col-13 { width: 54.16666666666667%; }
-.van-col-14 { width: 58.333333333333336%; }
-.van-col-15 { width: 62.50000000000001%; }
-.van-col-16 { width: 66.66666666666667%; }
-.van-col-17 { width: 70.83333333333334%; }
-.van-col-18 { width: 75%; }
-.van-col-19 { width: 79.16666666666667%; }
-.van-col-20 { width: 83.33333333333334%; }
-.van-col-21 { width: 87.5%; }
-.van-col-22 { width: 91.66666666666667%; }
-.van-col-23 { width: 95.83333333333334%; }
-.van-col-24 { width: 100%; }
-.van-col-offset-1 { margin-left: 4.166666666666667%; }
-.van-col-offset-2 { margin-left: 8.333333333333334%; }
-.van-col-offset-3 { margin-left: 12.5%; }
-.van-col-offset-4 { margin-left: 16.666666666666668%; }
-.van-col-offset-5 { margin-left: 20.833333333333336%; }
-.van-col-offset-6 { margin-left: 25%; }
-.van-col-offset-7 { margin-left: 29.166666666666668%; }
-.van-col-offset-8 { margin-left: 33.333333333333336%; }
-.van-col-offset-9 { margin-left: 37.5%; }
-.van-col-offset-10 { margin-left: 41.66666666666667%; }
-.van-col-offset-11 { margin-left: 45.833333333333336%; }
-.van-col-offset-12 { margin-left: 50%; }
-.van-col-offset-13 { margin-left: 54.16666666666667%; }
-.van-col-offset-14 { margin-left: 58.333333333333336%; }
-.van-col-offset-15 { margin-left: 62.50000000000001%; }
-.van-col-offset-16 { margin-left: 66.66666666666667%; }
-.van-col-offset-17 { margin-left: 70.83333333333334%; }
-.van-col-offset-18 { margin-left: 75%; }
-.van-col-offset-19 { margin-left: 79.16666666666667%; }
-.van-col-offset-20 { margin-left: 83.33333333333334%; }
-.van-col-offset-21 { margin-left: 87.5%; }
-.van-col-offset-22 { margin-left: 91.66666666666667%; }
-.van-col-offset-23 { margin-left: 95.83333333333334%; }
-.van-col-offset-24 { margin-left: 100%; }

packages/vant-css/src/dialog.css

@@ -1,94 +1,92 @@
 @import './mixins/border_retina.css';
 @import './popup.css';
 
-@component-namespace van {
+.van-dialog {
-  @b dialog-wrapper {
+  position: fixed;
-    position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  background-color: #fff;
+  width: 85%;
+  border-radius: 4px;
+  font-size: 16px;
+  overflow: hidden;
+  backface-visibility: hidden;
+  transition: .2s;
+
+  &__header {
+    padding: 15px 0 0;
   }
 
-  @b dialog {
+  &__content {
-    position: fixed;
+    padding: 15px 20px;
-    top: 50%;
+    position: relative;
-    left: 50%;
+
-    transform: translate3d(-50%, -50%, 0);
+    &::after {
-    background-color: #fff;
+      @mixin border-retina (bottom);
-    width: 85%;
+    }
-    border-radius: 4px;
+  }
+
+  &__title {
+    text-align: center;
+    padding-left: 0;
+    margin-bottom: 0;
     font-size: 16px;
+    color: #333;
+  }
+
+  &__message {
+    color: #999;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+
+    &--notitle {
+      color: #333;
+      font-size: 16px;
+    }
+  }
+
+  &__footer {
+    font-size: 14px;
     overflow: hidden;
-    backface-visibility: hidden;
-    transition: .2s;
 
-    @e header {
+    &.is-twobtn {
-      padding: 15px 0 0;
+      .van-dialog__btn {
-    }
+        width: 50%;
-
-    @e content {
-      padding: 15px 20px;
-      position: relative;
-
-      &::after {
-        @mixin border-retina (bottom);
       }
-    }
 
-    @e title {
+      .van-dialog__cancel {
-      text-align: center;
+        &::after {
-      padding-left: 0;
+          @mixin border-retina (right);
-      margin-bottom: 0;
-      font-size: 16px;
-      color: #333;
-    }
-
-    @e message {
-      color: #999;
-      margin: 0;
-      font-size: 14px;
-      line-height: 1.5;
-
-      @m notitle {
-        color: #333;
-        font-size: 16px;
-      }
-    }
-
-    @e footer {
-      font-size: 14px;
-      overflow: hidden;
-
-      @when twobtn {
-        .van-dialog__btn {
-          width: 50%;
-        }
-
-        .van-dialog__cancel {
-          &::after {
-            @mixin border-retina (right);
-          }
         }
       }
     }
+  }
 
-    @e btn {
+  &__btn {
-      font-size: 16px;
+    font-size: 16px;
-      line-height: 52px;
+    line-height: 52px;
-      border: 0;
+    border: 0;
-      padding: 0;
+    padding: 0;
-      background-color: #fff;
+    background-color: #fff;
-      float: left;
+    float: left;
-      box-sizing: border-box;
+    box-sizing: border-box;
-      text-align: center;
+    text-align: center;
-      position: relative;
+    position: relative;
-    }
+  }
 
-    @e cancel {
+  &__cancel {
-      color: #333;
+    color: #333;
-    }
+  }
 
-    @e confirm {
+  &__confirm {
-      color: #00C000;
+    color: #00C000;
-      width: 100%;
+    width: 100%;
-    }
+  }
+
+  &-wrapper {
+    position: absolute;
   }
 }
 
@@ -96,6 +94,7 @@
   opacity: 0;
   transform: translate3d(-50%, -50%, 0) scale(0.7);
 }
+
 .dialog-bounce-leave-active {
   opacity: 0;
   transform: translate3d(-50%, -50%, 0) scale(0.9);

packages/vant-css/src/field.css

@@ -3,96 +3,95 @@
 @import './cell.css';
 @import './icon.css';
 
-@component-namespace van {
+.van-field {
-  @b field {
+
+  width: 100%;
+
+  .van-cell__title,
+  .van-cell__value {
+    float: none;
+    box-sizing: border-box;
+  }
+
+  .van-cell__title {
+    width: 90px;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
+
+  .van-cell__value {
     width: 100%;
+    padding-left: 90px;
+  }
 
-    @m hastextarea {
+  &--hastextarea {
-      .van-field__control {
+    .van-field__control {
-        min-height: 60px;
+      min-height: 60px;
-      }
-    }
-
-    @m nolabel {
-      .van-cell__title {
-        display: none;
-      }
-
-      .van-cell__value {
-        width: 100%;
-        padding-left: 0;
-      }
-    }
-
-    @m disabled {
-      .van-field__control {
-        color: $c-gray-dark;
-      }
-    }
-
-    @m error {
-      .van-field__control {
-        color: $c-red;
-      }
-    }
-
-    @m border {
-      .van-field__control {
-        padding-left: 10px;
-      }
-
-      &::after {
-        border-radius: 2px;
-        @mixin border-retina (top, right, bottom, left);
-      }
-
-      &:last-child::after {
-        @mixin border-retina (bottom);
-      }
-    }
-
-    @m autosize {
-      .van-field__control {
-        min-height: 0px;
-      }
-    }
-
-    .van-cell__title,
-    .van-cell__value {
-      float: none;
-      box-sizing: border-box;
-    }
-
-    .van-cell__title {
-      width: 90px;
-      position: absolute;
-      top: 10px;
-      left: 0;
-    }
-
-    .van-cell__value {
-      width: 100%;
-      padding-left: 90px;
-    }
-
-    @e control {
-      border: 0;
-      font-size: 14px;
-      line-height: 24px;
-      height: 24px;
-      padding: 0;
-      display: block;
-      width: 100%;
-      resize: none;
-      outline: 0;
-    }
-
-    @e icon {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-      padding: 10px;
     }
   }
+
+  &--nolabel {
+    .van-cell__title {
+      display: none;
+    }
+
+    .van-cell__value {
+      width: 100%;
+      padding-left: 0;
+    }
+  }
+
+  &--disabled {
+    .van-field__control {
+      color: $c-gray-dark;
+    }
+  }
+
+  &--error {
+    .van-field__control {
+      color: $c-red;
+    }
+  }
+
+  &--border {
+    .van-field__control {
+      padding-left: 10px;
+    }
+
+    &::after {
+      border-radius: 2px;
+      @mixin border-retina (top, right, bottom, left);
+    }
+
+    &:last-child::after {
+      @mixin border-retina (bottom);
+    }
+  }
+
+  &--autosize {
+    .van-field__control {
+      min-height: 0px;
+    }
+  }
+
+  &__control {
+    border: 0;
+    font-size: 14px;
+    line-height: 24px;
+    height: 24px;
+    padding: 0;
+    display: block;
+    width: 100%;
+    resize: none;
+    outline: 0;
+  }
+
+  &__icon {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    padding: 10px;
+  }
 }

packages/vant-css/src/image_preview.css

@@ -1,36 +1,34 @@
 @import './swipe.css';
 
-@component-namespace van {
+.van-image-preview {
-  @b image-preview {
+  position: fixed;
-    position: fixed;
+  top: 0;
-    top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  &__image {
+    display: block;
+    position: absolute;
     left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
 
-    @e image {
+    &--center {
-      display: block;
+      width: 100%;
-      position: absolute;
+      height: auto;
-      left: 0;
+      top: 50%;
-
+      transform: translate3d(0, -50%, 0);
-      @m center {
-        width: 100%;
-        height: auto;
-        top: 50%;
-        transform: translate3d(0, -50%, 0);
-      }
-    }
-
-    .van-image-preview__image--big {
-      height: 100%;
-      width: auto;
-      left: 50%;
-      transform: translate3d(-50%, 0, 0);
-    }
-
-    .van-swipe {
-      height: 100%;
     }
   }
+
+  .van-image-preview__image--big {
+    height: 100%;
+    width: auto;
+    left: 50%;
+    transform: translate3d(-50%, 0, 0);
+  }
+
+  .van-swipe {
+    height: 100%;
+  }
 }

packages/vant-css/src/panel.css

@@ -1,47 +1,45 @@
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-panel {
-  @b panel {
+  background: #fff;
-    background: #fff;
+  position: relative;
+
+  &::after {
+    @mixin border-retina (top, bottom);
+  }
+
+  &__header {
+    padding: 10px 15px;
+    position: relative;
+    &::after {
+      @mixin border-retina (bottom);
+    }
+  }
+
+  &__title {
+    font-size: 14px;
+    color: #333;
+  }
+
+  &__desc {
+    font-size: 12px;
+    color: #666;
+  }
+
+  &__status {
+    font-size: 14px;
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    color: #FF4444;
+  }
+
+  &__footer {
+    padding: 10px 15px;
     position: relative;
 
     &::after {
-      @mixin border-retina (top, bottom);
+      @mixin border-retina (top);
-    }
-
-    @e header {
-      padding: 10px 15px;
-      position: relative;
-      &::after {
-        @mixin border-retina (bottom);
-      }
-    }
-
-    @e title {
-      font-size: 14px;
-      color: #333;
-    }
-
-    @e desc {
-      font-size: 12px;
-      color: #666;
-    }
-
-    @e status {
-      font-size: 14px;
-      position: absolute;
-      top: 10px;
-      right: 15px;
-      color: #FF4444;
-    }
-
-    @e footer {
-      padding: 10px 15px;
-      position: relative;
-
-      &::after {
-        @mixin border-retina (top);
-      }
     }
   }
 }

packages/vant-css/src/picker.css

@@ -1,75 +1,73 @@
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-picker {
-  @b picker {
+  overflow: hidden;
+  background-color: #fff;
+
+  &__toolbar {
+    height: 40px;
+    line-height: 40px;
     overflow: hidden;
-    background-color: #fff;
+    padding: 0 15px;
+    position: relative;
 
-    @e toolbar {
+    &::after {
-      height: 40px;
+      @mixin border-retina (top, bottom);
-      line-height: 40px;
+    }
-      overflow: hidden;
+  }
-      padding: 0 15px;
-      position: relative;
 
-      &::after {
+  &__cancel {
-        @mixin border-retina (top, bottom);
+    color: #3388FF;
+    float: left;
+  }
+
+  &__confirm {
+    color: #3388FF;
+    float: right;
+  }
+
+  &__title {
+    height: 40px;
+    padding: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+    word-break: break-all;
+    text-align: center;
+  }
+
+  &__columns {
+    position: relative;
+    overflow: hidden;
+
+    &--1 {
+      .van-picker-column {
+        width: 100%;
       }
     }
 
-    @e cancel {
+    &--2 {
-      color: #3388FF;
+      .van-picker-column {
-      float: left;
+        width: 50%;
+      }
     }
 
-    @e confirm {
+    &--3 {
-      color: #3388FF;
+      .van-picker-column {
-      float: right;
+        width: 33.333%;
+      }
     }
 
-    @e title {
+    &--4 {
-      height: 40px;
+      .van-picker-column {
-      padding: 0 10px;
+        width: 25%;
-      overflow: hidden;
+      }
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      word-wrap: normal;
-      word-break: break-all;
-      text-align: center;
     }
 
-    @e columns {
+    &--5 {
-      position: relative;
+      .van-picker-column {
-      overflow: hidden;
+        width: 20%;
-
-      @m 1 {
-        .van-picker-column {
-          width: 100%;
-        }
-      }
-
-      @m 2 {
-        .van-picker-column {
-          width: 50%;
-        }
-      }
-
-      @m 3 {
-        .van-picker-column {
-          width: 33.333%;
-        }
-      }
-
-      @m 4 {
-        .van-picker-column {
-          width: 25%;
-        }
-      }
-
-      @m 5 {
-        .van-picker-column {
-          width: 20%;
-        }
       }
     }
   }
@@ -92,7 +90,6 @@
     width: 100%;
     background-color: #eaeaea;
     display: block;
-    van-index: 15;
     transform: scaleY(0.5);
   }
 
@@ -110,7 +107,7 @@
     top: auto;
   }
 
-  @b picker-column {
+  &-column {
     font-size: 18px;
     overflow: hidden;
     position: relative;
@@ -118,7 +115,7 @@
     float: left;
     text-align: center;
 
-    @e item {
+    &__item {
       height: 44px;
       line-height: 44px;
       padding: 0 10px;
@@ -134,7 +131,7 @@
       transition-duration: .3s;
       backface-visibility: hidden;
 
-      @m selected {
+      &--selected {
         color: #000;
         transform: translate3d(0, 0, 0) rotateX(0);
       }

packages/vant-css/src/popup.css

@@ -1,5 +1,5 @@
-@component-namespace van {
+.van {
-  @b modal {
+  &-modal {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -9,7 +9,7 @@
     transition: all .5s ease-out;
   }
 
-  @b popup {
+  &-popup {
     position: fixed;
     background-color: #fff;
     top: 50%;
@@ -18,7 +18,7 @@
     backface-visibility: hidden;
     transition: .2s ease-out;
 
-    @m top {
+    &--top {
       width: 100%;
       top: 0;
       right: auto;
@@ -27,7 +27,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @m right {
+    &--right {
       top: 50%;
       right: 0;
       bottom: auto;
@@ -35,7 +35,7 @@
       transform: translate3d(0, -50%, 0);
     }
 
-    @m bottom {
+    &--bottom {
       width: 100%;
       top: auto;
       bottom: 0;
@@ -44,7 +44,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @m left {
+    &--left {
       top: 50%;
       right: auto;
       bottom: auto;

packages/vant-css/src/progress.css

@@ -1,33 +1,32 @@
 @import './common/var.css';
 
-@component-namespace van {
+.van-progress {
-  @b progress {
+  &__bar {
-    @e bar {
+    height: 4px;
-      height: 4px;
+    border-radius: 4.5px;
-      border-radius: 4.5px;
+    width: 100%;
-      width: 100%;
+    background: $c-gray-light;
-      background: $c-gray-light;
+    position: relative;
-      position: relative;
 
-      @e finished-portion {
+    &__finished-portion {
-        border-radius: 4.5px;
+      border-radius: 4.5px;
-        height: 100%;
+      height: 100%;
-        position: absolute;
+      position: absolute;
-        left: 0;
+      left: 0;
-        display: inline-block;
+      display: inline-block;
-      }
+    }
-      @e pivot {
+
-        padding: 2px 0;
+    &__pivot {
-        font-size: 8px;
+      padding: 2px 0;
-        position: absolute;
+      font-size: 8px;
-        border-radius: 6px;
+      position: absolute;
-        width: 28px;
+      border-radius: 6px;
-        background-color: $c-gray-light;
+      width: 28px;
-        line-height: 8px;
+      background-color: $c-gray-light;
-        text-align: center;
+      line-height: 8px;
-        top: 50%;
+      text-align: center;
-        transform: translate3d(0, -50%, 0);
+      top: 50%;
-      }
+      transform: translate3d(0, -50%, 0);
     }
   }
 }

packages/vant-css/src/quantity.css

@@ -1,87 +1,85 @@
 @import './common/var.css';
 
-@component-namespace van {
+.van-quantity {
-  @b quantity {
+  font-size: 0;
-    font-size: 0;
 
-    @m disabled {
+  &--disabled {
-      .van-quantity__input,
+    .van-quantity__input,
-      .van-quantity__minus,
+    .van-quantity__minus,
-      .van-quantity__plus {
+    .van-quantity__plus {
-        border-color: #e8e8e8;
+      border-color: #e8e8e8;
-      }
-    }
-
-    @e stepper {
-      width: 40px;
-      height: 30px;
-      box-sizing: border-box;
-      background-color: $c-white;
-      border: 1px solid $c-gray-dark;
-      position: relative;
-      outline: 0;
-      padding: 5px;
-      vertical-align: middle;
-
-      &::before {
-        width: 9px;
-        height: 1px;
-      }
-
-      &::after {
-        width: 1px;
-        height: 9px;
-      }
-
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        margin: auto;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #6c6c6c;
-      }
-    }
-
-    @e minus {
-      border-radius: 2px 0 0 2px;
-
-      &::after {
-        display: none;
-      }
-
-      @m disabled {
-        background-color: #f8f8f8;
-        border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
-      }
-    }
-
-    @e plus {
-      border-radius: 0 2px 2px 0;
-
-      @m disabled {
-        background-color: #f8f8f8;
-        border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
-      }
-    }
-
-    @e input {
-      width: 33px;
-      height: 26px;
-      padding: 1px;
-      border: 1px solid $c-gray-dark;
-      border-width: 1px 0;
-      border-radius: 0;
-      box-sizing: content-box;
-      color: $c-gray-darker;
-      font-size: 14px;
-      outline: 0;
-      vertical-align: middle;
-      text-align: center;
-      -webkit-appearance: none;
     }
   }
+
+  &__stepper {
+    width: 40px;
+    height: 30px;
+    box-sizing: border-box;
+    background-color: $c-white;
+    border: 1px solid $c-gray-dark;
+    position: relative;
+    outline: 0;
+    padding: 5px;
+    vertical-align: middle;
+
+    &::before {
+      width: 9px;
+      height: 1px;
+    }
+
+    &::after {
+      width: 1px;
+      height: 9px;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #6c6c6c;
+    }
+  }
+
+  &__minus {
+    border-radius: 2px 0 0 2px;
+
+    &::after {
+      display: none;
+    }
+
+    &--disabled {
+      background-color: #f8f8f8;
+      border-color: #e8e8e8 #999 #e8e8e8 #e8e8e8;
+    }
+  }
+
+  &__plus {
+    border-radius: 0 2px 2px 0;
+
+    &--disabled {
+      background-color: #f8f8f8;
+      border-color: #e8e8e8 #e8e8e8 #e8e8e8 #999;
+    }
+  }
+
+  &__input {
+    width: 33px;
+    height: 26px;
+    padding: 1px;
+    border: 1px solid $c-gray-dark;
+    border-width: 1px 0;
+    border-radius: 0;
+    box-sizing: content-box;
+    color: $c-gray-darker;
+    font-size: 14px;
+    outline: 0;
+    vertical-align: middle;
+    text-align: center;
+    -webkit-appearance: none;
+  }
 }

packages/vant-css/src/radio.css

@@ -1,50 +1,48 @@
 @import "./common/var.css";
 
-@component-namespace van {
+.van-radio {
-  @b radio {
+  overflow: hidden;
-    overflow: hidden;
 
-    @m disabled {
+  &__input {
-      .van-icon {
+    position: relative;
-        color: #d1dbe5;
+    height: 22px;
-      }
+    float: left;
-    }
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
 
-    @e input {
+  &__control {
-      position: relative;
+    position: absolute;
-      height: 22px;
+    top: 0;
-      float: left;
+    left: 0;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    width: 22px;
-    }
+    height: 22px;
+    opacity: 0;
+    margin: 0;
+  }
 
-    @e control {
+  &__label {
-      position: absolute;
+    line-height: 22px;
-      top: 0;
+    display: block;
-      left: 0;
+    margin-left: 37px;
-      width: 22px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      height: 22px;
+  }
-      opacity: 0;
-      margin: 0;
-    }
 
-    @e label {
+  .van-icon {
-      line-height: 22px;
+    font-size: 22px;
-      display: block;
+    line-height: 1;
-      margin-left: 37px;
+  }
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
 
+  .van-icon-checked {
+    color: $c-green;
+  }
+
+  .van-icon-check {
+    color: $c-gray-dark;
+  }
+
+  &--disabled {
     .van-icon {
-      font-size: 22px;
+      color: #d1dbe5;
-      line-height: 1;
-    }
-
-    .van-icon-checked {
-      color: $c-green;
-    }
-
-    .van-icon-check {
-      color: $c-gray-dark;
     }
   }
 }

packages/vant-css/src/search.css

@@ -1,73 +1,71 @@
 @import './common/var.css';
 @import './icon.css';
 
-@component-namespace van {
+.van-search {
-  @b search {
+  position: relative;
-    position: relative;
+  box-sizing: border-box;
-    box-sizing: border-box;
+  padding: 4px 15px;
-    padding: 4px 15px;
+  background-color: #F2F2F2;
-    background-color: #F2F2F2;
 
-    @m focus {
+  &--focus {
-      padding-right: 50px;
+    padding-right: 50px;
-    }
+  }
 
-    @m showcase {
+  &--showcase {
-      padding: 10px;
+    padding: 10px;
-      background-color: #f8f8f8;
+    background-color: #f8f8f8;
 
-      .van-search__input-wrap {
+    .van-search__input-wrap {
-        border-color: $c-gray-light;
+      border-color: $c-gray-light;
-      }
-    }
-
-    @e input-wrap {
-      position: relative;
-      padding: 8px 24px 8px 35px;
-      border: 1px solid $c-gray-light;
-      border-radius: 4px;
-      background-color: $c-white;
-    }
-
-    @e input {
-      display: block;
-      width: 100%;
-      height: 14px;
-      font-size: 14px;
-      color: $c-gray-dark;
-      border: none;
-      outline: none;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-
-    @e cancel {
-      position: absolute;
-      line-height: 34px;
-      padding: 4px 0;
-      top: 0;
-      right: 10px;
-      font-size: 14px;
-      color: $c-green;
-    }
-
-    .van-icon-search {
-      color: $c-gray-darker;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 10px;
-      font-size: 16px;
-      line-height: 1;
-    }
-
-    .van-icon-clear {
-      font-size: 14px;
-      line-height: 16px;
-      position: absolute;
-      right: 5px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #888;
     }
   }
+
+  &__input-wrap {
+    position: relative;
+    padding: 8px 24px 8px 35px;
+    border: 1px solid $c-gray-light;
+    border-radius: 4px;
+    background-color: $c-white;
+  }
+
+  &__input {
+    display: block;
+    width: 100%;
+    height: 14px;
+    font-size: 14px;
+    color: $c-gray-dark;
+    border: none;
+    outline: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &__cancel {
+    position: absolute;
+    line-height: 34px;
+    padding: 4px 0;
+    top: 0;
+    right: 10px;
+    font-size: 14px;
+    color: $c-green;
+  }
+
+  .van-icon-search {
+    color: $c-gray-darker;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 10px;
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  .van-icon-clear {
+    font-size: 14px;
+    line-height: 16px;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #888;
+  }
 }

packages/vant-css/src/steps.css

@@ -3,223 +3,221 @@
 @import './icon.css';
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-steps {
-  @b steps {
+  overflow: hidden;
-    overflow: hidden;
+  background-color: #fff;
-    background-color: #fff;
 
-    @m horizontal {
+  &--horizontal {
-      padding: 0 10px;
+    padding: 0 10px;
 
-      .van-steps__items {
+    .van-steps__items {
-        margin: 0 0 10px;
+      margin: 0 0 10px;
-        overflow: hidden;
+      overflow: hidden;
-        position: relative;
+      position: relative;
-        padding-bottom: 22px;
+      padding-bottom: 22px;
 
-        &.van-steps__items--alone {
+      &.van-steps__items--alone {
-          padding-top: 10px;
+        padding-top: 10px;
-        }
       }
     }
-
-    @m vertical {
-      padding: 0 0 0 35px;
-    }
-
-    @m 4 {
-      .van-step {
-        width: 33.2%;
-      }
-    }
-
-    @m 3 {
-      .van-step {
-        width: 50%;
-      }
-    }
-
-    @e icon {
-      float: left;
-      margin-right: 10px;
-    }
-
-    .van-icon {
-      font-size: 40px;
-      line-height: 1;
-    }
-
-    @e message {
-      display: table;
-      height: 40px;
-      margin: 15px 0;
-
-      .van-steps__message-wrapper {
-        display: table-cell;
-        vertical-align: middle;
-      }
-    }
-
-    @e title {
-      font-size: 14px;
-      color: $c-black;
-    }
-
-    @e desc {
-      font-size: 12px;
-      line-height: 1.5;
-      color: $c-gray-dark;
-      max-height: 18px;
-      @mixin multi-ellipsis 1;
-    }
   }
 
-  @b step {
+  &--vertical {
+    padding: 0 0 0 35px;
+  }
+
+  &--4 {
+    .van-step {
+      width: 33.2%;
+    }
+  }
+
+  &--3 {
+    .van-step {
+      width: 50%;
+    }
+  }
+
+  &__icon {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .van-icon {
+    font-size: 40px;
+    line-height: 1;
+  }
+
+  &__message {
+    display: table;
+    height: 40px;
+    margin: 15px 0;
+
+    .van-steps__message-wrapper {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+
+  &__title {
     font-size: 14px;
-    position: relative;
+    color: $c-black;
+  }
+
+  &__desc {
+    font-size: 12px;
+    line-height: 1.5;
     color: $c-gray-dark;
+    max-height: 18px;
+    @mixin multi-ellipsis 1;
+  }
+}
 
-    @m horizontal {
+.van-step {
-      float: left;
+  font-size: 14px;
+  position: relative;
+  color: $c-gray-dark;
   
-      &:first-child {
+  &--horizontal {
-        .van-step__title {
+    float: left;
-          transform: none;
+
-          margin-left: 0;
+    &:first-child {
-        }
+      .van-step__title {
+        transform: none;
+        margin-left: 0;
       }
+    }
 
-      &:last-child {
+    &:last-child {
-        position: absolute;
+      position: absolute;
-        right: 10px;
+      right: 10px;
-        width: auto;
+      width: auto;
 
-        .van-step__title {
+      .van-step__title {
-          transform: none;
+        transform: none;
-          margin-left: 0;
+        margin-left: 0;
-        }
-
-        .van-step__circle-container {
-          left: auto;
-          right: -9px;
-        }
-
-        .van-step__line {
-          width: 0;
-        }
       }
 
       .van-step__circle-container {
-        position: absolute;
+        left: auto;
-        top: 28px;
+        right: -9px;
-        left: -8px;
-        padding: 0 8px;
-        background-color: #fff;
-        z-index: 1;
-      }
-
-      .van-step__title {
-        font-size: 12px;
-        transform: translate3d(-50%, 0, 0);
-        display: inline-block;
-        margin-left: 3px;
       }
 
       .van-step__line {
-        position: absolute;
+        width: 0;
-        left: 0px;
-        top: 30px;
-        width: 100%;
-        height: 1px;
-        background-color: $c-gray-light;
-      }
-
-      &.van-step--finish {
-        color: $c-black;
-
-        .van-step__circle,
-        .van-step__line {
-          background-color: $c-green;
-        }
-      }
-
-      &.van-step--process {
-        color: $c-black;
-
-        .van-step__circle-container {
-          top: 24px;
-        }
-
-        .van-icon {
-          font-size: 12px;
-          color: $c-green;
-          line-height: 1;
-          display: block;
-        }
       }
     }
 
-    .van-step__circle {
+    .van-step__circle-container {
-      display: block;
+      position: absolute;
-      width: 5px;
+      top: 28px;
-      height: 5px;
+      left: -8px;
-      background-color: #888;
+      padding: 0 8px;
-      border-radius: 50%;
+      background-color: #fff;
+      z-index: 1;
     }
 
-    @m vertical {
+    .van-step__title {
-      float: none;
+      font-size: 12px;
-      display: block;
+      transform: translate3d(-50%, 0, 0);
-      font-size: 14px;
+      display: inline-block;
-      line-height: 18px;
+      margin-left: 3px;
-      padding: 10px 10px 10px 0;
+    }
 
-      &::after {
+    .van-step__line {
-        @mixin border-retina (bottom);
+      position: absolute;
+      left: 0px;
+      top: 30px;
+      width: 100%;
+      height: 1px;
+      background-color: $c-gray-light;
+    }
+
+    &.van-step--finish {
+      color: $c-black;
+
+      .van-step__circle,
+      .van-step__line {
+        background-color: $c-green;
+      }
+    }
+
+    &.van-step--process {
+      color: $c-black;
+
+      .van-step__circle-container {
+        top: 24px;
       }
 
-      &:first-child {
+      .van-icon {
-        &::before {
+        font-size: 12px;
-          content: '';
+        color: $c-green;
-          position: absolute;
-          width: 1px;
-          height: 20px;
-          background-color: #fff;
-          top: 0;
-          left: -15px;
-          z-index: 1;
-        }
-      }
-
-      &:last-child::after {
-        display: none;
-      }
-
-      .van-step__circle-container > i {
-        position: absolute;
-        z-index: 2;
-      }
-
-      .van-icon-checked {
-        top: 12px;
-        left: -20px;
         line-height: 1;
-        font-size: 12px;
+        display: block;
-      }
-
-      .van-step__circle {
-        top: 16px;
-        left: -17px;
-      }
-
-      .van-step__line {
-        position: absolute;
-        top: 0;
-        left: -15px;
-        width: 1px;
-        height: 100%;
-        background-color: $c-gray-light;
       }
     }
   }
+
+  .van-step__circle {
+    display: block;
+    width: 5px;
+    height: 5px;
+    background-color: #888;
+    border-radius: 50%;
+  }
+
+  &--vertical {
+    float: none;
+    display: block;
+    font-size: 14px;
+    line-height: 18px;
+    padding: 10px 10px 10px 0;
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:first-child {
+      &::before {
+        content: '';
+        position: absolute;
+        width: 1px;
+        height: 20px;
+        background-color: #fff;
+        top: 0;
+        left: -15px;
+        z-index: 1;
+      }
+    }
+
+    &:last-child::after {
+      display: none;
+    }
+
+    .van-step__circle-container > i {
+      position: absolute;
+      z-index: 2;
+    }
+
+    .van-icon-checked {
+      top: 12px;
+      left: -20px;
+      line-height: 1;
+      font-size: 12px;
+    }
+
+    .van-step__circle {
+      top: 16px;
+      left: -17px;
+    }
+
+    .van-step__line {
+      position: absolute;
+      top: 0;
+      left: -15px;
+      width: 1px;
+      height: 100%;
+      background-color: $c-gray-light;
+    }
+  }
 }

packages/vant-css/src/swipe.css

@@ -1,44 +1,42 @@
 @import './common/var.css';
 
-@component-namespace van {
+.van-swipe {
-  @b swipe {
+  position: relative;
-    position: relative;
+  overflow: hidden;
-    overflow: hidden;
+  width: 100%;
-    width: 100%;
+  height: 100%;
-    height: 100%;
 
-    @e indicators {
+  &__indicators {
-      position: absolute;
+    position: absolute;
-      bottom: 10px;
+    bottom: 10px;
-      left: 50%;
+    left: 50%;
-      transform: translateX(-50%);
+    transform: translateX(-50%);
-    }
+  }
 
-    @e indicator {
+  &__indicator {
-      width: 5px;
+    width: 5px;
-      height: 5px;
+    height: 5px;
-      display: inline-block;
+    display: inline-block;
-      border-radius: 100%;
+    border-radius: 100%;
-      background: #999;
+    background: #999;
-      opacity: .8;
+    opacity: .8;
-      margin: 0 3px;
+    margin: 0 3px;
-      z-index: 1;
+    z-index: 1;
 
-      @m active {
+    &--active {
-        background: $c-orange;
+      background: $c-orange;
-        opacity: 1;
+      opacity: 1;
-      }
-    }
-
-    @e items {
-      position: relative;
-      overflow: hidden;
-      position: relative;
-      height: 100%;
     }
   }
 
-  @b swipe-item {
+  &__items {
+    position: relative;
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+  }
+
+  &-item {
     display: none;
     height: 100%;
     width: 100%;

packages/vant-css/src/switch.css

@@ -1,61 +1,59 @@
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-switch {
-  @b switch {
+  height: 31px;
-    height: 31px;
+  width: 51px;
-    width: 51px;
+  display: inline-block;
-    display: inline-block;
+  position: relative;
-    position: relative;
+  background: #fff;
-    background: #fff;
+  border-radius: 16px;
-    border-radius: 16px;
+  &::after{
-    &::after{
+    @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+    border-width: 3px;
+    border-radius: 32px;
+  }
+
+  &__node {
+    width: 28px;
+    height: 28px;
+    border-radius: 13.5px;
+    background-color: #fff;
+    position: absolute;
+    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+    left: 1px;
+    top: 1px;
+    z-index: 2;
+    transition: transform .3s;
+    &::after {
       @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
-      border-width: 3px;
+      border-radius: 27px;
-      border-radius: 32px;
-    }
-
-    @e node {
-      width: 28px;
-      height: 28px;
-      border-radius: 13.5px;
-      background-color: #fff;
-      position: absolute;
-      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
-      left: 1px;
-      top: 1px;
-      z-index: 2;
-      transition: transform .3s;
-      &::after {
-        @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
-        border-radius: 27px;
-      }
-    }
-
-    @e loading {
-      width: 16px;
-      height: 16px;
-      position: relative;
-      left: 50%;
-      top: 50%;
-      transform: translate3d(-50%, -50%, 0);
-      margin: 0;
-    }
-
-    @m on {
-      background-color: #44db5e;
-      &::after { border-color: #44db5e; }
-      .van-switch__node {
-        transform: translateX(20px);
-      }
-    }
-
-    @m off {
-      background-color: #fff;
-      border-color: rgba(0, 0, 0, .1);
-    }
-
-    @m disabled {
-      opacity: .4;
     }
   }
+
+  &__loading {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    margin: 0;
+  }
+
+  &--on {
+    background-color: #44db5e;
+    &::after { border-color: #44db5e; }
+    .van-switch__node {
+      transform: translateX(20px);
+    }
+  }
+
+  &--off {
+    background-color: #fff;
+    border-color: rgba(0, 0, 0, .1);
+  }
+
+  &--disabled {
+    opacity: .4;
+  }
 }

packages/vant-css/src/tab.css

@@ -1,104 +1,102 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-tabs {
-  @b tabs {
+  position: relative;
-    position: relative;
 
-    @e nav-wrap {
+  &__nav-wrap {
-      overflow: hidden;
+    overflow: hidden;
+  }
+
+  &__swipe {
+    user-select: none;
+    transition: transform ease .3s;
+
+    .van-tab {
+      flex: 0 0 22%;
     }
 
-    @e swipe {
+    .van-tabs__nav {
-      user-select: none;
+      overflow: visible;
-      transition: transform ease .3s;
-
-      .van-tab {
-        flex: 0 0 22%;
-      }
-
-      .van-tabs__nav {
-        overflow: visible;
-      }
-    }
-
-    @e nav {
-      overflow: hidden;
-      transition: transform .5s cubic-bezier(.645, .045, .355, 1);
-      position: relative;
-      display: flex;
-
-      @m line {
-        height: 44px;
-
-        .van-tab {
-          &::after {
-            @mixin border-retina (top, bottom);
-          }
-        }
-      }
-
-      @m card {
-        height: 28px;
-        margin: 0 15px;
-        background-color: $c-white;
-        border-radius: 2px;
-        border: 1px solid #666666;
-        overflow: hidden;
-
-        .van-tab {
-          color: #666;
-          line-height: 28px;
-          border-right: 1px solid #666;
-
-          &:last-child {
-            border-right: none;
-          }
-
-          &.van-tab--active {
-            background-color: #666;
-            color: $c-white;
-          }
-        }
-      }
-    }
-
-    @e nav-bar {
-      z-index: 1;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      height: 2px;
-      background-color: #f13e3a;
-      transition: transform .3s cubic-bezier(.645, .045, .355, 1);
-      transform-origin: 0 0;
     }
   }
 
-  @b tab {
+  &__nav {
+    overflow: hidden;
+    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
     position: relative;
-    color: $c-black;
+    display: flex;
-    background-color: $c-white;
-    font-size: 14px;
-    line-height: 44px;
-    box-sizing: border-box;
-    cursor: pointer;
-    text-align: center;
-    flex: 1;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
 
-    @m active {
+    &--line {
-      color: #FF4444;
+      height: 44px;
+
+      .van-tab {
+        &::after {
+          @mixin border-retina (top, bottom);
+        }
+      }
     }
 
-    @e pane {
+    &--card {
-      display: none;
+      height: 28px;
+      margin: 0 15px;
+      background-color: $c-white;
+      border-radius: 2px;
+      border: 1px solid #666666;
+      overflow: hidden;
 
-      @m select {
+      .van-tab {
-        display: block;
+        color: #666;
+        line-height: 28px;
+        border-right: 1px solid #666;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        &.van-tab--active {
+          background-color: #666;
+          color: $c-white;
+        }
       }
     }
   }
+
+  &__nav-bar {
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    background-color: #f13e3a;
+    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
+    transform-origin: 0 0;
+  }
+}
+
+.van-tab {
+  position: relative;
+  color: $c-black;
+  background-color: $c-white;
+  font-size: 14px;
+  line-height: 44px;
+  box-sizing: border-box;
+  cursor: pointer;
+  text-align: center;
+  flex: 1;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  &--active {
+    color: #FF4444;
+  }
+
+  &__pane {
+    display: none;
+
+    &--select {
+      display: block;
+    }
+  }
 }
 
 

packages/vant-css/src/tag.css

@@ -1,69 +1,67 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
 
-@component-namespace van {
+.van-tag {
-  @b tag {
+  position: relative;
-    position: relative;
+  display: inline-block;
-    display: inline-block;
+  line-height: 14px;
-    line-height: 14px;
+  padding: 1px 5px;
-    padding: 1px 5px;
+  border-radius: 2px;
-    border-radius: 2px;
+  font-size: 10px;
-    font-size: 10px;
+  background: $c-gray;
-    background: $c-gray;
+  color: $c-white;
-    color: $c-white;
+
+  &::after {
+    @mixin border-retina (top, right, bottom, left), $c-gray;
+    border-radius: 4px;
+  }
+
+  &.is-plain {
+    background: $c-white;
+    color: $c-gray;
+  }
+
+  &.is-mark {
+    border-radius: 0 8px 8px 0;
 
     &::after {
-      @mixin border-retina (top, right, bottom, left), $c-gray;
+      border-radius: 0 16px 16px 0;
-      border-radius: 4px;
+    }
+  }
+
+  &--success {
+    background: $c-green;
+
+    &::after {
+      border-color: $c-green;
     }
 
-    @m success {
+    &.is-plain {
-      background: $c-green;
+      color: $c-green;
+    }
+  }
 
-      &::after {
+  &--danger {
-        border-color: $c-green;
+    background: $button-danger-background-color;
-      }
 
-      @when plain {
+    &::after {
-        color: $c-green;
+      border-color: $button-danger-background-color;
-      }
     }
 
-    @m danger {
+    &.is-plain {
-      background: $button-danger-background-color;
+      color: $button-danger-background-color;
+    }
+  }
 
-      &::after {
+  &--primary {
-        border-color: $button-danger-background-color;
+    background: $c-blue;
-      }
 
-      @when plain {
+    &::after {
-        color: $button-danger-background-color;
+      border-color: $c-blue;
-      }
     }
 
-    @m primary {
+    &.is-plain {
-      background: $c-blue;
+      color: $c-blue;
-
-      &::after {
-        border-color: $c-blue;
-      }
-
-      @when plain {
-        color: $c-blue;
-      }
-    }
-
-    @when plain {
-      background: $c-white;
-      color: $c-gray;
-    }
-
-    @when mark {
-      border-radius: 0 8px 8px 0;
-
-      &::after {
-        border-radius: 0 16px 16px 0;
-      }
     }
   }
 }

packages/vant-css/src/toast.css

@@ -1,53 +1,51 @@
 @import './common/var.css';
 
-@component-namespace van {
+.van-toast {
-  @b toast {
+  position: fixed;
+  z-index: 3001;
+  border-radius: 5px;
+  background-color: #272727;
+  opacity: .7;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  font-size: 12px;
+  color: $c-white;
+  text-align: center;
+  line-height: 12px;
+
+  &__overlay {
     position: fixed;
-    z-index: 3001;
+    left: 0;
-    border-radius: 5px;
+    top: 0;
-    background-color: #272727;
+    background: transparent;
-    opacity: .7;
+    height: 100vh;
-    top: 50%;
+    width: 100vh;
-    left: 50%;
+    z-index: 3000;
-    transform: translate3d(-50%, -50%, 0);
+  }
-    font-size: 12px;
-    color: $c-white;
-    text-align: center;
-    line-height: 12px;
 
-    @e overlay {
+  &--loading {
-      position: fixed;
+    padding: 45px;
-      left: 0;
+  }
-      top: 0;
+
-      background: transparent;
+  &--text, html {
-      height: 100vh;
+    padding: 12px;
-      width: 100vh;
+    min-width: 200px;
-      z-index: 3000;
+  }
+
+  &--default {
+    width: 120px;
+    height: 120px;
+
+    .van-toast__icon {
+      padding-top: 20px;
+      font-size: 50px;
     }
 
-    @m loading {
+    .van-toast__text {
-      padding: 45px;
+      padding: 15px 0 20px;
-    }
+      font-size: 14px;
-
+      line-height: 1.2;
-    @m text, html {
-      padding: 12px;
-      min-width: 200px;
-    }
-
-    @m default {
-      width: 120px;
-      height: 120px;
-
-      .van-toast__icon {
-        padding-top: 20px;
-        font-size: 50px;
-      }
-
-      .van-toast__text {
-        padding: 15px 0 20px;
-        font-size: 14px;
-        line-height: 1.2;
-      }
     }
   }
 }

packages/vant-css/src/uploader.css

@@ -1,23 +1,21 @@
-@component-namespace van {
+.van-uploader {
-  @b uploader {
+  position: relative;
-    position: relative;
+  display: inline-block;
-    display: inline-block;
 
-    @e input {
+  &__input {
-      position: absolute;
+    position: absolute;
-      top: 0;
+    top: 0;
-      right: 0;
+    right: 0;
-      bottom: 0;
+    bottom: 0;
-      left: 0;
+    left: 0;
-      display: block;
+    display: block;
-      width: 100%;
+    width: 100%;
-      height: 100%;
+    height: 100%;
-      opacity: 0;
+    opacity: 0;
-      cursor:pointer;
+    cursor:pointer;
-    }
+  }
 
-    input[type="file" i]::-webkit-file-upload-button {
+  input[type="file" i]::-webkit-file-upload-button {
-      cursor:pointer;
+    cursor:pointer;
-    }
   }
 }

packages/vant-css/yarn.lock

@@ -22,7 +22,13 @@ ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "http://registry.npm.qima-inc.com/ansi-styles/download/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
-any-promise@^0.1.0, any-promise@~0.1.0:
+ansi-styles@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+  dependencies:
+    color-convert "^1.9.0"
+
+any-promise@^0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.qima-inc.com/any-promise/download/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
 
@@ -68,33 +74,29 @@ array-unique@^0.2.1:
   version "0.2.1"
   resolved "http://registry.npm.qima-inc.com/array-unique/download/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
 
-arrify@^1.0.0:
+autoprefixer@^7.1.2:
-  version "1.0.1"
+  version "7.1.2"
-  resolved "http://registry.npm.qima-inc.com/arrify/download/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
-
-autoprefixer@^6.7.5:
-  version "6.7.7"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
   dependencies:
-    browserslist "^1.7.6"
+    browserslist "^2.1.5"
-    caniuse-db "^1.0.30000634"
+    caniuse-lite "^1.0.30000697"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.16"
+    postcss "^6.0.6"
     postcss-value-parser "^3.2.3"
 
 balanced-match@0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.qima-inc.com/balanced-match/download/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
 
-balanced-match@^0.2.0:
-  version "0.2.1"
-  resolved "http://registry.npm.qima-inc.com/balanced-match/download/balanced-match-0.2.1.tgz#7bc658b4bed61eee424ad74f75f5c3e2c4df3cc7"
-
 balanced-match@^0.4.1, balanced-match@^0.4.2:
   version "0.4.2"
   resolved "http://registry.npm.qima-inc.com/balanced-match/download/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
 
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+
 beeper@^1.0.0:
   version "1.1.1"
   resolved "http://registry.npm.qima-inc.com/beeper/download/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
@@ -114,12 +116,12 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-browserslist@^1.7.6:
+browserslist@^2.1.5:
-  version "1.7.7"
+  version "2.2.2"
-  resolved "http://registry.npm.qima-inc.com/browserslist/download/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.2.2.tgz#e9b4618b8a01c193f9786beea09f6fd10dbe31c3"
   dependencies:
-    caniuse-db "^1.0.30000639"
+    caniuse-lite "^1.0.30000704"
-    electron-to-chromium "^1.2.7"
+    electron-to-chromium "^1.3.16"
 
 buffer-shims@~1.0.0:
   version "1.0.0"
@@ -129,6 +131,10 @@ builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "http://registry.npm.qima-inc.com/builtin-modules/download/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
+camelcase-css@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-1.0.1.tgz#157c4238265f5cf94a1dffde86446552cbf3f705"
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "http://registry.npm.qima-inc.com/camelcase-keys/download/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -140,9 +146,9 @@ camelcase@^2.0.0:
   version "2.1.1"
   resolved "http://registry.npm.qima-inc.com/camelcase/download/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
 
-caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000704:
-  version "1.0.30000656"
+  version "1.0.30000706"
-  resolved "http://registry.npm.qima-inc.com/caniuse-db/download/caniuse-db-1.0.30000656.tgz#127c8c6e655e7464e58f039558f1e878fcca3c45"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000706.tgz#bc59abc41ba7d4a3634dda95befded6114e1f24e"
 
 chalk@^0.5.0:
   version "0.5.1"
@@ -164,6 +170,14 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.0.1.tgz#dbec49436d2ae15f536114e76d14656cdbc0f44d"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 clean-css@^3.1.9:
   version "3.4.25"
   resolved "http://registry.npm.qima-inc.com/clean-css/download/clean-css-3.4.25.tgz#9e9a52d5c1e6bc5123e1b2783fa65fe958946ede"
@@ -183,7 +197,7 @@ clone@^1.0.0, clone@^1.0.2:
   version "1.0.2"
   resolved "http://registry.npm.qima-inc.com/clone/download/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
 
-color-convert@^1.3.0:
+color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.0"
   resolved "http://registry.npm.qima-inc.com/color-convert/download/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
   dependencies:
@@ -232,9 +246,9 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
 
-css-color-function@^1.2.0:
+css-color-function@^1.3.0:
   version "1.3.0"
-  resolved "http://registry.npm.qima-inc.com/css-color-function/download/css-color-function-1.3.0.tgz#72c767baf978f01b8a8a94f42f17ba5d22a776fc"
+  resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.0.tgz#72c767baf978f01b8a8a94f42f17ba5d22a776fc"
   dependencies:
     balanced-match "0.1.0"
     color "^0.11.0"
@@ -288,9 +302,9 @@ duplexer2@0.0.2:
   dependencies:
     readable-stream "~1.1.9"
 
-electron-to-chromium@^1.2.7:
+electron-to-chromium@^1.3.16:
-  version "1.3.4"
+  version "1.3.16"
-  resolved "http://registry.npm.qima-inc.com/electron-to-chromium/download/electron-to-chromium-1.3.4.tgz#e51769c0cf550e0cf5aedf6aa2b803a264b3a900"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.16.tgz#d0e026735754770901ae301a21664cba45d92f7d"
 
 end-of-stream@~0.1.5:
   version "0.1.5"
@@ -304,7 +318,7 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
-escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2:
+escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "http://registry.npm.qima-inc.com/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -405,6 +419,10 @@ flagged-respawn@^0.3.2:
   version "0.3.2"
   resolved "http://registry.npm.qima-inc.com/flagged-respawn/download/flagged-respawn-0.3.2.tgz#ff191eddcd7088a675b2610fffc976be9b8074b5"
 
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "http://registry.npm.qima-inc.com/for-in/download/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -419,21 +437,6 @@ fs-exists-sync@^0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.qima-inc.com/fs-exists-sync/download/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
 
-fs-extra@^0.24.0:
-  version "0.24.0"
-  resolved "http://registry.npm.qima-inc.com/fs-extra/download/fs-extra-0.24.0.tgz#d4e4342a96675cb7846633a6099249332b539952"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
-
-fs-promise@^0.3.1:
-  version "0.3.1"
-  resolved "http://registry.npm.qima-inc.com/fs-promise/download/fs-promise-0.3.1.tgz#bf34050368f24d6dc9dfc6688ab5cead8f86842a"
-  dependencies:
-    any-promise "~0.1.0"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.qima-inc.com/fs.realpath/download/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -493,17 +496,7 @@ glob@^4.3.1:
     minimatch "^2.0.1"
     once "^1.3.0"
 
-glob@^5.0.3:
+glob@^7.0.3, glob@^7.1.1:
-  version "5.0.15"
-  resolved "http://registry.npm.qima-inc.com/glob/download/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
-  dependencies:
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "2 || 3"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.0.3, glob@^7.0.5:
   version "7.1.1"
   resolved "http://registry.npm.qima-inc.com/glob/download/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
   dependencies:
@@ -538,17 +531,6 @@ global-prefix@^0.1.4:
     is-windows "^0.2.0"
     which "^1.2.12"
 
-globby@^3.0.1:
-  version "3.0.1"
-  resolved "http://registry.npm.qima-inc.com/globby/download/globby-3.0.1.tgz#2094af8421e19152150d5893eb6416b312d9a22f"
-  dependencies:
-    array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^5.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^1.0.0"
-
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -579,7 +561,7 @@ graceful-fs@^3.0.0:
   dependencies:
     natives "^1.1.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+graceful-fs@^4.1.2, graceful-fs@~4.1.4:
   version "4.1.11"
   resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -595,24 +577,24 @@ graceful-fs@~2.0.0:
   version "1.0.1"
   resolved "http://registry.npm.qima-inc.com/graceful-readlink/download/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-gulp-cssmin@^0.1.7:
+gulp-cssmin@^0.2.0:
-  version "0.1.7"
+  version "0.2.0"
-  resolved "http://registry.npm.qima-inc.com/gulp-cssmin/download/gulp-cssmin-0.1.7.tgz#f576fe5211d107baa9401504249bf87aed1556bd"
+  resolved "https://registry.yarnpkg.com/gulp-cssmin/-/gulp-cssmin-0.2.0.tgz#87ab3c69dd39b20d5d96355c6504ad6a447b1e72"
   dependencies:
     clean-css "^3.1.9"
     filesize "~2.0.0"
-    graceful-fs "~2.0.0"
+    graceful-fs "~4.1.4"
     gulp-rename "~1.1.0"
     gulp-util "~2.2.0"
     map-stream "0.0.4"
     temp-write "~0.1.0"
 
-gulp-postcss@^6.1.1:
+gulp-postcss@^7.0.0:
-  version "6.4.0"
+  version "7.0.0"
-  resolved "http://registry.npm.qima-inc.com/gulp-postcss/download/gulp-postcss-6.4.0.tgz#78a32e3c87aa6cdcec5ae1c905e196d478e8c5d5"
+  resolved "https://registry.yarnpkg.com/gulp-postcss/-/gulp-postcss-7.0.0.tgz#cfb62a19fa947f8be67ce9ecae89ceb959f0cf93"
   dependencies:
     gulp-util "^3.0.8"
-    postcss "^5.2.12"
+    postcss "^6.0.0"
     postcss-load-config "^1.2.0"
     vinyl-sourcemaps-apply "^0.2.1"
 
@@ -698,6 +680,10 @@ has-flag@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.qima-inc.com/has-flag/download/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
 
+has-flag@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
+
 has-gulplog@^0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.qima-inc.com/has-gulplog/download/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
@@ -720,6 +706,10 @@ indent-string@^2.1.0:
   dependencies:
     repeating "^2.0.0"
 
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "http://registry.npm.qima-inc.com/inflight/download/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -867,12 +857,6 @@ js-yaml@^3.4.3:
     argparse "^1.0.7"
     esprima "^3.1.1"
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "http://registry.npm.qima-inc.com/jsonfile/download/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 kind-of@^3.0.2:
   version "3.1.0"
   resolved "http://registry.npm.qima-inc.com/kind-of/download/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -1341,22 +1325,12 @@ pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "http://registry.npm.qima-inc.com/pify/download/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
-pinkie-promise@^1.0.0:
-  version "1.0.0"
-  resolved "http://registry.npm.qima-inc.com/pinkie-promise/download/pinkie-promise-1.0.0.tgz#d1da67f5482563bb7cf57f286ae2822ecfbf3670"
-  dependencies:
-    pinkie "^1.0.0"
-
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "http://registry.npm.qima-inc.com/pinkie-promise/download/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
   dependencies:
     pinkie "^2.0.0"
 
-pinkie@^1.0.0:
-  version "1.0.0"
-  resolved "http://registry.npm.qima-inc.com/pinkie/download/pinkie-1.0.0.tgz#5a47f28ba1015d0201bda7bf0f358e47bec8c7e4"
-
 pinkie@^2.0.0:
   version "2.0.4"
   resolved "http://registry.npm.qima-inc.com/pinkie/download/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
@@ -1367,45 +1341,44 @@ postcss-advanced-variables@1.2.2:
   dependencies:
     postcss "^5.0.10"
 
-postcss-atroot@^0.1.2:
+postcss-atroot@^0.1.3:
   version "0.1.3"
-  resolved "http://registry.npm.qima-inc.com/postcss-atroot/download/postcss-atroot-0.1.3.tgz#6752c0230c745140549345b2b0e30ebeda01a405"
+  resolved "https://registry.yarnpkg.com/postcss-atroot/-/postcss-atroot-0.1.3.tgz#6752c0230c745140549345b2b0e30ebeda01a405"
   dependencies:
     postcss "^5.0.5"
 
-postcss-color-function@^2.0.0:
+postcss-color-function@^4.0.0:
-  version "2.0.1"
+  version "4.0.0"
-  resolved "http://registry.npm.qima-inc.com/postcss-color-function/download/postcss-color-function-2.0.1.tgz#9ad226f550e8a7c7f8b8a77860545b6dd7f55241"
+  resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-4.0.0.tgz#7e0106f4f6a1ecb1ad5b3a8553ace5e828aae187"
   dependencies:
-    css-color-function "^1.2.0"
+    css-color-function "^1.3.0"
-    postcss "^5.0.4"
+    postcss "^6.0.1"
     postcss-message-helpers "^2.0.0"
     postcss-value-parser "^3.3.0"
 
-postcss-custom-media@^5.0.0:
+postcss-custom-media@^6.0.0:
-  version "5.0.1"
+  version "6.0.0"
-  resolved "http://registry.npm.qima-inc.com/postcss-custom-media/download/postcss-custom-media-5.0.1.tgz#138d25a184bf2eb54de12d55a6c01c30a9d8bd81"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737"
   dependencies:
-    postcss "^5.0.0"
+    postcss "^6.0.1"
 
-postcss-custom-properties@^5.0.0:
+postcss-custom-properties@^6.1.0:
-  version "5.0.2"
+  version "6.1.0"
-  resolved "http://registry.npm.qima-inc.com/postcss-custom-properties/download/postcss-custom-properties-5.0.2.tgz#9719d78f2da9cf9f53810aebc23d4656130aceb1"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-6.1.0.tgz#9caf1151ac41b1e9e64d3a2ff9ece996ca18977d"
   dependencies:
-    balanced-match "^0.4.2"
+    balanced-match "^1.0.0"
-    postcss "^5.0.0"
+    postcss "^6.0.3"
 
-postcss-custom-selectors@^3.0.0:
+postcss-custom-selectors@^4.0.1:
-  version "3.0.0"
+  version "4.0.1"
-  resolved "http://registry.npm.qima-inc.com/postcss-custom-selectors/download/postcss-custom-selectors-3.0.0.tgz#8f81249f5ed07a8d0917cf6a39fe5b056b7f96ac"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-4.0.1.tgz#781382f94c52e727ef5ca4776ea2adf49a611382"
   dependencies:
-    balanced-match "^0.2.0"
+    postcss "^6.0.1"
-    postcss "^5.0.0"
+    postcss-selector-matches "^3.0.0"
-    postcss-selector-matches "^2.0.0"
 
-postcss-easy-import@^2.0.0:
+postcss-easy-import@^2.1.0:
-  version "2.0.0"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-2.0.0.tgz#a874d4de054b9242545bf553e438c1823c108512"
+  resolved "https://registry.yarnpkg.com/postcss-easy-import/-/postcss-easy-import-2.1.0.tgz#1d49f8a7c404415cfee4e5cb7a15fdf866c13022"
   dependencies:
     globby "^6.1.0"
     is-glob "^3.1.0"
@@ -1416,12 +1389,22 @@ postcss-easy-import@^2.0.0:
     postcss-import "^9.1.0"
     resolve "^1.1.7"
 
-postcss-extend@^1.0.1:
+postcss-extend@^1.0.5:
   version "1.0.5"
-  resolved "http://registry.npm.qima-inc.com/postcss-extend/download/postcss-extend-1.0.5.tgz#5ea98bf787ba3cacf4df4609743f80a833b1d0e7"
+  resolved "https://registry.yarnpkg.com/postcss-extend/-/postcss-extend-1.0.5.tgz#5ea98bf787ba3cacf4df4609743f80a833b1d0e7"
   dependencies:
     postcss "^5.0.4"
 
+postcss-import@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-10.0.0.tgz#4c85c97b099136cc5ea0240dc1dfdbfde4e2ebbe"
+  dependencies:
+    object-assign "^4.0.1"
+    postcss "^6.0.1"
+    postcss-value-parser "^3.2.3"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-import@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-9.1.0.tgz#95fe9876a1e79af49fbdc3589f01fe5aa7cc1e80"
@@ -1433,6 +1416,13 @@ postcss-import@^9.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
+postcss-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-1.0.0.tgz#ccee5aa3b1970dd457008e79438165f66919ba30"
+  dependencies:
+    camelcase-css "^1.0.1"
+    postcss "^6.0.1"
+
 postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "http://registry.npm.qima-inc.com/postcss-load-config/download/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -1456,79 +1446,87 @@ postcss-load-plugins@^2.3.0:
     cosmiconfig "^2.1.1"
     object-assign "^4.1.0"
 
-postcss-media-minmax@^2.1.0:
+postcss-media-minmax@^3.0.0:
-  version "2.1.2"
+  version "3.0.0"
-  resolved "http://registry.npm.qima-inc.com/postcss-media-minmax/download/postcss-media-minmax-2.1.2.tgz#444c5cf8926ab5e4fd8a2509e9297e751649cdf8"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-3.0.0.tgz#675256037a43ef40bc4f0760bfd06d4dc69d48d2"
   dependencies:
-    postcss "^5.0.4"
+    postcss "^6.0.1"
 
 postcss-message-helpers@^2.0.0:
   version "2.0.0"
   resolved "http://registry.npm.qima-inc.com/postcss-message-helpers/download/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
 
-postcss-mixins@^2.1.0:
+postcss-mixins@^6.0.1:
-  version "2.1.1"
+  version "6.0.1"
-  resolved "http://registry.npm.qima-inc.com/postcss-mixins/download/postcss-mixins-2.1.1.tgz#b141a0803efa8e2d744867f8d91596890cf9241b"
+  resolved "https://registry.yarnpkg.com/postcss-mixins/-/postcss-mixins-6.0.1.tgz#f5c9726259a6103733b43daa6a8b67dd0ed7aa47"
   dependencies:
-    globby "^3.0.1"
+    globby "^6.1.0"
-    postcss "^5.0.10"
+    postcss "^6.0.3"
-    postcss-simple-vars "^1.0.1"
+    postcss-js "^1.0.0"
+    postcss-simple-vars "^4.0.0"
+    sugarss "^1.0.0"
 
-postcss-nested@^1.0.0:
+postcss-nested@^2.0.2:
-  version "1.0.1"
+  version "2.1.0"
-  resolved "http://registry.npm.qima-inc.com/postcss-nested/download/postcss-nested-1.0.1.tgz#91f28f4e6e23d567241ac154558a0cfab4cc0d8f"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-2.1.0.tgz#72661d79463f5894a8c4b890479baec689d1c693"
   dependencies:
-    postcss "^5.2.17"
+    postcss "^6.0.8"
+    postcss-selector-parser "^2.2.3"
 
-postcss-nesting@^2.0.6:
+postcss-nesting@^4.0.1:
-  version "2.3.1"
+  version "4.0.1"
-  resolved "http://registry.npm.qima-inc.com/postcss-nesting/download/postcss-nesting-2.3.1.tgz#94a6b6a4ef707fbec20a87fee5c957759b4e01cf"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-4.0.1.tgz#8fc2ce40cbfcfab7ee24e7b68fb6ebe84b641469"
   dependencies:
-    postcss "^5.0.19"
+    postcss "^6.0.1"
 
-postcss-partial-import@^1.3.0:
+postcss-partial-import@^4.1.0:
-  version "1.3.0"
+  version "4.1.0"
-  resolved "http://registry.npm.qima-inc.com/postcss-partial-import/download/postcss-partial-import-1.3.0.tgz#2f4b773a76c7b0a69b389dcf475c4d362d0d2576"
+  resolved "https://registry.yarnpkg.com/postcss-partial-import/-/postcss-partial-import-4.1.0.tgz#f6c3e78e7bbeda4d9dab96d360367b90b353f9a4"
   dependencies:
-    fs-extra "^0.24.0"
+    glob "^7.1.1"
-    fs-promise "^0.3.1"
+    postcss-import "^10.0.0"
-    object-assign "^4.0.1"
-    postcss "^5.0.5"
-    string-hash "^1.1.0"
 
-postcss-property-lookup@^1.1.3:
+postcss-property-lookup@^1.2.1:
   version "1.2.1"
-  resolved "http://registry.npm.qima-inc.com/postcss-property-lookup/download/postcss-property-lookup-1.2.1.tgz#30450a1361b7aae758bbedd5201fbe057bb8270b"
+  resolved "https://registry.yarnpkg.com/postcss-property-lookup/-/postcss-property-lookup-1.2.1.tgz#30450a1361b7aae758bbedd5201fbe057bb8270b"
   dependencies:
     object-assign "^4.0.1"
     postcss "^5.0.4"
     tcomb "^2.5.1"
 
-postcss-selector-matches@^2.0.0:
+postcss-selector-matches@^3.0.0, postcss-selector-matches@^3.0.1:
-  version "2.0.5"
+  version "3.0.1"
-  resolved "http://registry.npm.qima-inc.com/postcss-selector-matches/download/postcss-selector-matches-2.0.5.tgz#fa0f43be57b68e77aa4cd11807023492a131027f"
+  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-3.0.1.tgz#e5634011e13950881861bbdd58c2d0111ffc96ab"
   dependencies:
     balanced-match "^0.4.2"
-    postcss "^5.0.0"
+    postcss "^6.0.1"
 
-postcss-selector-not@^2.0.0:
+postcss-selector-not@^3.0.1:
-  version "2.0.0"
+  version "3.0.1"
-  resolved "http://registry.npm.qima-inc.com/postcss-selector-not/download/postcss-selector-not-2.0.0.tgz#c73ad21a3f75234bee7fee269e154fd6a869798d"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-3.0.1.tgz#2e4db2f0965336c01e7cec7db6c60dff767335d9"
   dependencies:
-    balanced-match "^0.2.0"
+    balanced-match "^0.4.2"
-    postcss "^5.0.0"
+    postcss "^6.0.1"
 
-postcss-simple-vars@^1.0.1:
+postcss-selector-parser@^2.2.3:
-  version "1.2.0"
+  version "2.2.3"
-  resolved "http://registry.npm.qima-inc.com/postcss-simple-vars/download/postcss-simple-vars-1.2.0.tgz#2e6689921144b74114e765353275a3c32143f150"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
-    postcss "^5.0.13"
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-simple-vars@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-4.0.0.tgz#d49e082897d9a4824f2268fa91d969d943e2ea76"
+  dependencies:
+    postcss "^6.0.1"
 
 postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
   version "3.3.0"
   resolved "http://registry.npm.qima-inc.com/postcss-value-parser/download/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.19, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.12, postcss@^5.2.16, postcss@^5.2.17:
+postcss@^5.0.10, postcss@^5.0.14, postcss@^5.0.15, postcss@^5.0.4, postcss@^5.0.5:
   version "5.2.17"
   resolved "http://registry.npm.qima-inc.com/postcss/download/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b"
   dependencies:
@@ -1537,26 +1535,34 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-precss@^1.4.0:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.8:
-  version "1.4.0"
+  version "6.0.8"
-  resolved "http://registry.npm.qima-inc.com/precss/download/precss-1.4.0.tgz#8d7c3ae70f10a00a3955287f85a66e0f8b31cda3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
   dependencies:
-    postcss "^5.0.10"
+    chalk "^2.0.1"
+    source-map "^0.5.6"
+    supports-color "^4.2.0"
+
+precss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/precss/-/precss-2.0.0.tgz#7f567e3318e06d44c8fdbf9e58452e8358bf4b71"
+  dependencies:
+    postcss "^6.0.3"
     postcss-advanced-variables "1.2.2"
-    postcss-atroot "^0.1.2"
+    postcss-atroot "^0.1.3"
-    postcss-color-function "^2.0.0"
+    postcss-color-function "^4.0.0"
-    postcss-custom-media "^5.0.0"
+    postcss-custom-media "^6.0.0"
-    postcss-custom-properties "^5.0.0"
+    postcss-custom-properties "^6.1.0"
-    postcss-custom-selectors "^3.0.0"
+    postcss-custom-selectors "^4.0.1"
-    postcss-extend "^1.0.1"
+    postcss-extend "^1.0.5"
-    postcss-media-minmax "^2.1.0"
+    postcss-media-minmax "^3.0.0"
-    postcss-mixins "^2.1.0"
+    postcss-mixins "^6.0.1"
-    postcss-nested "^1.0.0"
+    postcss-nested "^2.0.2"
-    postcss-nesting "^2.0.6"
+    postcss-nesting "^4.0.1"
-    postcss-partial-import "^1.3.0"
+    postcss-partial-import "^4.1.0"
-    postcss-property-lookup "^1.1.3"
+    postcss-property-lookup "^1.2.1"
-    postcss-selector-matches "^2.0.0"
+    postcss-selector-matches "^3.0.1"
-    postcss-selector-not "^2.0.0"
+    postcss-selector-not "^3.0.1"
 
 preserve@^0.2.0:
   version "0.2.0"
@@ -1697,18 +1703,6 @@ rgb@~0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.qima-inc.com/rgb/download/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
 
-rimraf@^2.2.8:
-  version "2.6.1"
-  resolved "http://registry.npm.qima-inc.com/rimraf/download/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
-  dependencies:
-    glob "^7.0.5"
-
-saladcss-bem@^0.0.1:
-  version "0.0.1"
-  resolved "http://registry.npm.qima-inc.com/saladcss-bem/download/saladcss-bem-0.0.1.tgz#72070014ff3f6a49a6872cfcb3946c7758f40fc2"
-  dependencies:
-    postcss "^5.0.8"
-
 "semver@2 || 3 || 4 || 5", semver@^4.1.0:
   version "4.3.6"
   resolved "http://registry.npm.qima-inc.com/semver/download/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
@@ -1761,10 +1755,6 @@ stream-consume@~0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.qima-inc.com/stream-consume/download/stream-consume-0.1.0.tgz#a41ead1a6d6081ceb79f65b061901b6d8f3d1d0f"
 
-string-hash@^1.1.0:
-  version "1.1.3"
-  resolved "http://registry.npm.qima-inc.com/string-hash/download/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-
 string_decoder@~0.10.x:
   version "0.10.31"
   resolved "http://registry.npm.qima-inc.com/string_decoder/download/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
@@ -1806,6 +1796,12 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+sugarss@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.0.tgz#65e51b3958432fb70d5451a68bb33e32d0cf1ef7"
+  dependencies:
+    postcss "^6.0.0"
+
 supports-color@^0.2.0:
   version "0.2.0"
   resolved "http://registry.npm.qima-inc.com/supports-color/download/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
@@ -1820,6 +1816,12 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^4.0.0, supports-color@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
+  dependencies:
+    has-flag "^2.0.0"
+
 tcomb@^2.5.1:
   version "2.7.0"
   resolved "http://registry.npm.qima-inc.com/tcomb/download/tcomb-2.7.0.tgz#10d62958041669a5d53567b9a4ee8cde22b1c2b0"
@@ -1876,6 +1878,10 @@ unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "http://registry.npm.qima-inc.com/unc-path-regex/download/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+
 unique-stream@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npm.qima-inc.com/unique-stream/download/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"

postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    require("postcss-easy-import")({
+      extensions: ['pcss', 'css']
+    }),
+    require("precss")(),
+    require("autoprefixer")({
+      browsers: ["Android >= 4.0", "iOS >= 7"]
+    })
+  ]
+};

src/index.js

@@ -37,43 +37,49 @@ import Swipe from '../packages/swipe/index.js';
 import SwipeItem from '../packages/swipe-item/index.js';
 import DatetimePicker from '../packages/datetime-picker/index.js';
 
+const version = '0.6.6';
+const components = [
+  Button,
+  Switch,
+  Field,
+  Radio,
+  Cell,
+  Icon,
+  CellGroup,
+  CellSwipe,
+  Popup,
+  Picker,
+  RadioGroup,
+  Loading,
+  Panel,
+  Card,
+  Steps,
+  Tag,
+  Checkbox,
+  CheckboxGroup,
+  BadgeGroup,
+  Badge,
+  Search,
+  Step,
+  Tabs,
+  Tab,
+  Col,
+  Row,
+  Actionsheet,
+  Quantity,
+  Progress,
+  Uploader,
+  Swipe,
+  SwipeItem,
+  DatetimePicker
+];
+
 const install = function(Vue) {
-  /* istanbul ignore if */
   if (install.installed) return;
 
-  Vue.component(Button.name, Button);
+  components.forEach(component => {
-  Vue.component(Switch.name, Switch);
+    Vue.component(component.name, component);
-  Vue.component(Field.name, Field);
+  });
-  Vue.component(Radio.name, Radio);
-  Vue.component(Cell.name, Cell);
-  Vue.component(Icon.name, Icon);
-  Vue.component(CellGroup.name, CellGroup);
-  Vue.component(CellSwipe.name, CellSwipe);
-  Vue.component(Popup.name, Popup);
-  Vue.component(Picker.name, Picker);
-  Vue.component(RadioGroup.name, RadioGroup);
-  Vue.component(Loading.name, Loading);
-  Vue.component(Panel.name, Panel);
-  Vue.component(Card.name, Card);
-  Vue.component(Steps.name, Steps);
-  Vue.component(Tag.name, Tag);
-  Vue.component(Checkbox.name, Checkbox);
-  Vue.component(CheckboxGroup.name, CheckboxGroup);
-  Vue.component(BadgeGroup.name, BadgeGroup);
-  Vue.component(Badge.name, Badge);
-  Vue.component(Search.name, Search);
-  Vue.component(Step.name, Step);
-  Vue.component(Tabs.name, Tabs);
-  Vue.component(Tab.name, Tab);
-  Vue.component(Col.name, Col);
-  Vue.component(Row.name, Row);
-  Vue.component(Actionsheet.name, Actionsheet);
-  Vue.component(Quantity.name, Quantity);
-  Vue.component(Progress.name, Progress);
-  Vue.component(Uploader.name, Uploader);
-  Vue.component(Swipe.name, Swipe);
-  Vue.component(SwipeItem.name, SwipeItem);
-  Vue.component(DatetimePicker.name, DatetimePicker);
 };
 
 /* istanbul ignore if */
@@ -81,9 +87,51 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-module.exports = {
+export {
   install,
-  version: '0.6.6',
+  version,
+  Button,
+  Switch,
+  Field,
+  Radio,
+  Cell,
+  Icon,
+  CellGroup,
+  CellSwipe,
+  Popup,
+  Dialog,
+  Picker,
+  RadioGroup,
+  Waterfall,
+  Loading,
+  Panel,
+  Card,
+  Steps,
+  Tag,
+  Checkbox,
+  CheckboxGroup,
+  BadgeGroup,
+  Badge,
+  Search,
+  Step,
+  Tabs,
+  Tab,
+  Lazyload,
+  ImagePreview,
+  Col,
+  Row,
+  Actionsheet,
+  Quantity,
+  Progress,
+  Toast,
+  Uploader,
+  Swipe,
+  SwipeItem,
+  DatetimePicker
+};
+export default {
+  install,
+  version,
   Button,
   Switch,
   Field,

test/unit/get-webpack-conf.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-const getPostcssPlugin = require('../../build/utils/postcss_pipe');
 
 const webpackConfig = {
   output: {
@@ -16,15 +15,13 @@ const webpackConfig = {
     new webpack.LoaderOptionsPlugin({
       minimize: true,
       options: {
-        postcss: getPostcssPlugin,
         babel: {
           presets: ['es2015'],
           plugins: ['transform-runtime', 'transform-vue-jsx']
         },
         vue: {
           autoprefixer: false,
-          preserveWhitespace: false,
+          preserveWhitespace: false
-          postcss: getPostcssPlugin
         }
       }
     })