[breaking change] rebuild style struct (#2021)

build/build-components.js

@@ -15,51 +15,56 @@ const compilerOption = {
   }
 };
 
-const whiteList = /(demo|vant-css|test|\.md)$/;
+const isDir = dir => fs.lstatSync(dir).isDirectory();
+const isJs = path => /\.js$/.test(isJs);
+const isSfc = path => /\.vue$/.test(path);
+const isCode = path => !/(demo|test|\.md)$/.test(path);
+
+function compile(dir) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+
+    // reomve unnecessary files
+    if (!isCode(file)) {
+      return fs.removeSync(filePath);
+    }
+
+    // scan dir
+    if (isDir(filePath)) {
+      return compile(filePath);
+    }
+
+    // compile sfc
+    if (isSfc(file)) {
+      const source = fs.readFileSync(filePath, 'utf-8');
+      fs.removeSync(filePath);
+
+      const jsPath = filePath.replace('.vue', '.js');
+      const vuePath = filePath + '.js';
+      const output = fs.existsSync(jsPath) ? vuePath : jsPath;
+
+      return fs.outputFileSync(output, compiler(source, compilerOption).js);
+    }
+
+    // compile js
+    if (isJs(file)) {
+      const { code } = babel.transformFileSync(filePath, compilerOption.babel);
+      fs.outputFileSync(filePath, code);
+    }
+  });
+}
 
 // clear dir
 fs.emptyDirSync(esDir);
 fs.emptyDirSync(libDir);
 
-// copy packages
+// compile es dir
 fs.copySync(srcDir, esDir);
-
 compile(esDir);
 
-function compile(dir, jsOnly = false) {
-  const files = fs.readdirSync(dir);
-
-  files.forEach(file => {
-    const absolutePath = path.join(dir, file);
-
-    // reomve unnecessary files
-    if (whiteList.test(file)) {
-      fs.removeSync(absolutePath);
-      // scan dir
-    } else if (isDir(absolutePath)) {
-      return compile(absolutePath);
-      // compile sfc
-    } else if (/\.vue$/.test(file) && !jsOnly) {
-      const source = fs.readFileSync(absolutePath, 'utf-8');
-      fs.removeSync(absolutePath);
-
-      const outputVuePath = absolutePath + '.js';
-      const outputJsPath = absolutePath.replace('.vue', '.js');
-      const output = fs.existsSync(outputJsPath) ? outputVuePath : outputJsPath;
-
-      fs.outputFileSync(output, compiler(source, compilerOption).js);
-    } else if (/\.js$/.test(file)) {
-      const { code } = babel.transformFileSync(absolutePath, compilerOption.babel);
-      fs.outputFileSync(absolutePath, code);
-    }
-  });
-}
-
+// compile lib dir
 process.env.BABEL_MODULE = 'commonjs';
-
 fs.copySync(srcDir, libDir);
 compile(libDir);
-
-function isDir(dir) {
-  return fs.lstatSync(dir).isDirectory();
-}

build/build-iconfont.js

@@ -13,10 +13,9 @@ const config = require('../packages/icon/config');
 const local = require('../packages/icon/config/template-local');
 
 const iconDir = path.join(__dirname, '../packages/icon');
-const cssDir = path.join(__dirname, '../packages/vant-css/src');
 const svgDir = path.join(iconDir, 'svg');
 const sketch = path.join(iconDir, 'assets/icons.sketch');
-const template = path.join(iconDir, 'config/template.css');
+const template = path.join(iconDir, 'config/template.tpl');
 
 // get md5 from sketch
 const md5 = md5File.sync(sketch).slice(0, 6);
@@ -49,7 +48,7 @@ gulp.task('ttf', () => {
       iconfontCss({
         fontName: config.name,
         path: template,
-        targetPath: '../vant-css/src/icon.css',
+        targetPath: '../icon/index.css',
         normalize: true,
         firstGlyph: 0xf000,
         cssClass: ttf // this is a trick to pass ttf to template
@@ -67,7 +66,7 @@ gulp.task('ttf', () => {
 gulp.task('default', ['ttf'], () => {
   // generate icon-local.css
   fs.writeFileSync(
-    path.join(cssDir, 'icon-local.css'),
+    path.join(iconDir, 'local.css'),
     local(config.name, ttf)
   );
 

build/build-lib.js

@@ -9,7 +9,7 @@ const tasks = [
   'lint',
   'build:entry',
   'build:components',
-  'build:vant-css',
+  'build:style',
   'build:style-entry',
   'build:vant'
 ];

build/build-style-entry.js

@@ -6,15 +6,17 @@ const fs = require('fs-extra');
 const path = require('path');
 const components = require('./get-components')();
 const dependencyTree = require('dependency-tree');
-const whiteList = ['info', 'icon', 'loading', 'cell', 'button'];
+const whiteList = ['info', 'icon', 'loading', 'cell', 'cell-group', 'button'];
 const dir = path.join(__dirname, '../es');
 
 components.forEach(component => {
-  const deps = analyzeDependencies(component);
+  const deps = analyzeDependencies(component).map(dep =>
+    getStyleRelativePath(component, dep)
+  );
   const esEntry = path.join(dir, component, 'style/index.js');
   const libEntry = path.join(__dirname, '../lib', component, 'style/index.js');
-  const esContent = deps.map(dep => `import '../../vant-css/${dep}.css';`).join('\n');
-  const libContent = deps.map(dep => `require('../../vant-css/${dep}.css');`).join('\n');
+  const esContent = deps.map(dep => `import '${dep}';`).join('\n');
+  const libContent = deps.map(dep => `require('${dep}');`).join('\n');
 
   fs.outputFileSync(esEntry, esContent);
   fs.outputFileSync(libEntry, libContent);
@@ -45,17 +47,38 @@ function search(tree, component, checkList) {
   Object.keys(tree).forEach(key => {
     search(tree[key], component, checkList);
     components
-      .filter(item => key.replace(dir, '').split('/').includes(item))
+      .filter(item =>
+        key
+          .replace(dir, '')
+          .split('/')
+          .includes(item)
+      )
       .forEach(item => {
-        if (!checkList.includes(item) && !whiteList.includes(item) && item !== component) {
+        if (
+          !checkList.includes(item) &&
+          !whiteList.includes(item) &&
+          item !== component
+        ) {
           checkList.push(item);
         }
       });
   });
 }
 
-function checkComponentHasStyle(component) {
-  return fs.existsSync(
-    path.join(__dirname, `../es/vant-css/`, `${component}.css`)
+function getStylePath(component) {
+  if (component === 'base') {
+    return path.join(__dirname, '../es/style/base.css');
+  }
+  return path.join(__dirname, `../es/${component}/index.css`);
+}
+
+function getStyleRelativePath(component, style) {
+  return path.relative(
+    path.join(__dirname, `../es/${component}/style`),
+    getStylePath(style)
   );
 }
+
+function checkComponentHasStyle(component) {
+  return fs.existsSync(getStylePath(component));
+}

build/build-style.js

@@ -0,0 +1,16 @@
+const gulp = require('gulp');
+const less = require('gulp-less');
+const postcss = require('gulp-postcss');
+const cssmin = require('gulp-clean-css');
+
+// compile component css
+gulp.task('compile', () => {
+  return gulp
+    .src(['../es/**/*.less', '../lib/**/*.less'])
+    .pipe(less())
+    .pipe(postcss())
+    .pipe(cssmin())
+    .pipe(gulp.dest(file => file.base.replace('.less', '.css')));
+});
+
+gulp.task('default', ['compile']);

build/get-components.js

@@ -1,8 +1,16 @@
 const fs = require('fs');
 const path = require('path');
 
+const excludes = [
+  'index.js',
+  'index.less',
+  'style',
+  'mixins',
+  'utils',
+  '.DS_Store'
+];
+
 module.exports = function() {
   const dirs = fs.readdirSync(path.resolve(__dirname, '../packages'));
-  const excludes = ['index.js', 'vant-css', 'mixins', 'utils', '.DS_Store'];
   return dirs.filter(dirName => excludes.indexOf(dirName) === -1);
 };

build/release.sh

@@ -14,13 +14,6 @@ then
   npm version $VERSION --no-git-tag-version
   VERSION=$VERSION npm run build:lib
 
-  # publish vant-css
-  echo "Releasing vant-css $VERSION ..."
-  cd packages/vant-css
-  npm version $VERSION
-  npm publish
-  cd ../..
-
   # commit
   git tag v$VERSION
   git commit -am "[release] $VERSION"

build/webpack.dev.js

@@ -56,11 +56,12 @@ module.exports = {
         use: 'babel-loader'
       },
       {
-        test: /\.(css|postcss)$/,
+        test: /\.less$/,
         use: [
           'style-loader',
           'css-loader',
-          'postcss-loader'
+          'postcss-loader',
+          'less-loader'
         ]
       },
       {