Merge pull request #1042 from QingWei-Li/fix/autoprefixer-config

fix salad config, #1037

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [["es2015", { "loose": true }]],
-  "plugins": ["transform-vue-jsx", "transform-remove-strict-mode"],
+  "plugins": ["transform-vue-jsx"],
   "env": {
     "utils": {
       "plugins": [

FAQ.md

@@ -46,19 +46,6 @@
 请参考我们提供的 [starter kit](https://github.com/ElementUI/element-starter)，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 [cooking](https://github.com/ElementUI/element-cooking-starter) 和 [laravel](https://github.com/ElementUI/element-in-laravel-starter) 的项目模板。
 </details>
 
-<details>
-<summary>在项目中引入 Element，报 `Uncaught Error: Module build failed: SyntaxError: 'with' in strict mode` 是什么原因？</summary>
-
-请避免你使用的编译器处理 Element。比如，若是使用 webpack，请在 loaders 中配置：
-```javascript
-{
-  test: /\.js$/,
-  loader: 'babel',
-  exclude: /node_modules/
-}
-```
-</details>
-
 <details>
 <summary>将 Element 克隆至本地，运行时为何会报错/跑不起来？</summary>
 

build/config.js

@@ -1,7 +1,8 @@
-var Components = require('../components.json');
 var path = require('path');
-var dependencies = require('../package.json').dependencies;
 var fs = require('fs');
+var nodeExternals = require('webpack-node-externals');
+var Components = require('../components.json');
+var saladConfig = require('../packages/theme-default/salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));
@@ -10,11 +11,8 @@ var externals = {};
 Object.keys(Components).forEach(function(key) {
   externals[`element-ui/packages/${key}`] = `element-ui/lib/${key}`;
 });
-Object.keys(dependencies).forEach(function(key) {
-  externals[key] = key;
-});
-externals['element-ui/src/locale'] = 'element-ui/lib/locale';
 
+externals['element-ui/src/locale'] = 'element-ui/lib/locale';
 utilsList.forEach(function(file) {
   file = path.basename(file, '.js');
   externals[`element-ui/src/utils/${file}`] = `element-ui/lib/utils/${file}`;
@@ -24,9 +22,11 @@ mixinsList.forEach(function(file) {
   externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`;
 });
 
-exports.externals = Object.assign({
+externals = [Object.assign({
   vue: 'vue'
-}, externals);
+}, externals), nodeExternals()];
+
+exports.externals = externals;
 
 exports.alias = {
   main: path.resolve(__dirname, '../src'),
@@ -45,25 +45,10 @@ exports.vue = {
 exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date.\js/;
 
 exports.postcss = function(webapck) {
-  return [
+  saladConfig.features.partialImport = {
-    require('postcss-salad')({
-      browsers: ['ie > 8', 'last 2 versions'],
-      features: {
-        'partialImport': {
     addDependencyTo: webapck
-        },
+  };
-        'bem': {
+  return [
-          'shortcuts': {
+    require('postcss-salad')(saladConfig)
-            'component': 'b',
-            'modifier': 'm',
-            'descendent': 'e'
-          },
-          'separators': {
-            'descendent': '__',
-            'modifier': '--'
-          }
-        }
-      }
-    })
   ];
 };

package.json

@@ -58,7 +58,6 @@
     "babel-loader": "^6.2.5",
     "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.8.0",
-    "babel-plugin-transform-remove-strict-mode": "0.0.2",
     "babel-plugin-transform-vue-jsx": "^3.1.0",
     "babel-preset-es2015": "^6.14.0",
     "chai": "^3.5.0",
@@ -116,6 +115,7 @@
     "vue-markdown-loader": "^0.5.1",
     "vue-router": "^2.0.0",
     "webpack": "^1.13.2",
-    "webpack-dev-server": "^1.15.1"
+    "webpack-dev-server": "^1.15.1",
+    "webpack-node-externals": "^1.5.4"
   }
 }

packages/theme-default/README.md

@@ -21,13 +21,13 @@ import 'element-theme-default';
 
 Or
 ```html
-<link rel="stylesheet" href="path/to/node_modules/element-theme-default/dist/index.css">
+<link rel="stylesheet" href="path/to/node_modules/element-theme-default/lib/index.css">
 ```
 
 ##  Import your need
 ```javascript
-import 'element-theme-default/dist/input.css';
+import 'element-theme-default/lib/input.css';
-import 'element-theme-default/dist/select.css';
+import 'element-theme-default/lib/select.css';
 
 // ...
 ```

packages/theme-default/gulpfile.js

@@ -1,25 +1,9 @@
 'use strict';
 
-const gulp = require('gulp');
+var gulp = require('gulp');
-const postcss = require('gulp-postcss');
+var postcss = require('gulp-postcss');
-const cssmin = require('gulp-cssmin');
+var cssmin = require('gulp-cssmin');
-
+var salad = require('postcss-salad')(require('./salad.config.json'));
-const salad = require('postcss-salad')({
-  browser: ['ie > 9', 'last 2 version'],
-  features: {
-    'bem': {
-      'shortcuts': {
-        'component': 'b',
-        'modifier': 'm',
-        'descendent': 'e'
-      },
-      'separators': {
-        'descendent': '__',
-        'modifier': '--'
-      }
-    }
-  }
-});
 
 gulp.task('compile', function() {
   return gulp.src('./src/*.css')

packages/theme-default/salad.config.json

@@ -0,0 +1,16 @@
+{
+  "browsers": ["ie > 8", "last 2 versions"],
+  "features": {
+    "bem": {
+      "shortcuts": {
+        "component": "b",
+        "modifier": "m",
+        "descendent": "e"
+      },
+      "separators": {
+        "descendent": "__",
+        "modifier": "--"
+      }
+    }
+  }
+}