Added base stylelint configuration.

Author: blake-newman

docs/linter.md

@@ -1,6 +1,7 @@
 # Linter Configuration
 
-This boilerplate uses [ESLint](http://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
+## ESLint
+This boilerplate uses [ESLint](http://eslint.org/) for JavaScript linting, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations.
 
 If you are not happy with the default linting rules, you have several options:
 
@@ -13,3 +14,16 @@ If you are not happy with the default linting rules, you have several options:
 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb).
 
 3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](http://eslint.org/docs/rules/) for more details.
+
+## stylelint
+This boilerplate uses [stylelint](http://stylint.io/) as for style linting, and uses the [Standard](https://github.com/stylelint/stylelint-config-standard) preset.
+
+If you are not happy with the default linting rules, you have several options:
+
+1. Overwrite individual rules in `.stylelint.js`. For example, you can add the following rule to enforce tabs.
+
+  ``` js
+  "indentation": "tab",
+  ```
+
+2. Pick "none" for ESLint preset when generating the project and define your own rules. See [Stylelint documentation](http://stylelint.io/user-guide/rules/) for more details.

docs/structure.md

@@ -28,6 +28,7 @@
 ├── .babelrc                    # babel config
 ├── .editorconfig.js            # editor config
 ├── .eslintrc.js                # eslint config
+├── .stylelintrc.js             # stylelint config
 ├── index.html                  # index.html template
 └── package.json                # build scripts and dependencies
 ```

meta.json

@@ -15,12 +15,12 @@
       "type": "string",
       "message": "Author"
     },
-    "lint": {
+    "eslint": {
       "type": "confirm",
       "message": "Use ESLint to lint your code?"
     },
-    "lintConfig": {
-      "when": "lint",
+    "eslintConfig": {
+      "when": "eslint",
       "type": "list",
       "message": "Pick an ESLint preset",
       "choices": [
@@ -41,6 +41,27 @@
         }
       ]
     },
+    "stylelint": {
+      "type": "confirm",
+      "message": "Use ESLint to lint your code?"
+    },
+    "stylelintConfig": {
+      "when": "stylelint",
+      "type": "list",
+      "message": "Pick an ESLint preset",
+      "choices": [
+        {
+          "name": "Standard (https://github.com/stylelint/stylelint-config-standard)",
+          "value": "standard",
+          "short": "Standard"
+        },
+        {
+          "name": "none (configure it yourself)",
+          "value": "none",
+          "short": "none"
+        }
+      ]
+    },
     "unit": {
       "type": "confirm",
       "message": "Setup unit tests with Karma + Mocha?"
@@ -51,7 +72,8 @@
     }
   },
   "filters": {
-    ".eslintrc.js": "lint",
+    ".eslintrc.js": "eslint",
+    ".stylelint.js": "stylelint",
     "test/unit/**/*": "unit",
     "test/e2e/**/*": "e2e"
   },

template/.eslintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
   root: true,
-  {{#if_eq lintConfig "standard"}}
+  {{#if_eq eslintConfig "standard"}}
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
   extends: 'standard',
   {{/if_eq}}
-  {{#if_eq lintConfig "airbnb"}}
+  {{#if_eq eslintConfig "airbnb"}}
   extends: 'airbnb-base',
   {{/if_eq}}
   // required to lint *.vue files
@@ -13,11 +13,11 @@ module.exports = {
   ],
   // add your custom rules here
   'rules': {
-    {{#if_eq lintConfig "standard"}}
+    {{#if_eq eslintConfig "standard"}}
     // allow paren-less arrow functions
     'arrow-parens': 0,
     {{/if_eq}}
-    {{#if_eq lintConfig "airbnb"}}
+    {{#if_eq eslintConfig "airbnb"}}
     'import/no-unresolved': 0,
     {{/if_eq}}
     // allow debugger during development

template/.stylelintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  {{#if_eq eslintConfig "standard"}}
+  extends: 'stylelint-config-standard',
+  {{/if_eq}}
+  // add your custom rules here
+  rules: {
+  }
+};

template/build/webpack.dev.conf.js

@@ -29,6 +29,15 @@ module.exports = merge(baseWebpackConfig, {
       filename: 'index.html',
       template: 'index.html',
       inject: true
+    }),
+    // Stylelint for all imports
+    // https://github.com/vieron/stylelint-webpack-plugin
+    new StyleLintPlugin({
+      configFile: path.resolve(__dirname, '../.stylelintrc.js'),
+      context: 'inherits from webpack',
+      files: '../src/**/*.@(?(s)?(a|c)ss|vue|html)',
+      failOnError: false,
+      extractStyleTagsFromHtml: true,
     })
   ]
 })

template/package.json

@@ -13,8 +13,11 @@
     {{#e2e}}
     "e2e": "node test/e2e/runner.js",
     {{/e2e}}
-    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{#lint}},
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"{{/lint}}
+    "lint": "{{#eslint}}npm run lint:eslint{{/eslint}}{{#eslint}}{{#stylelint}} && {{/eslint}}{{/stylelint}}{{#stylelint}}npm run lint:stylelint{{/stylelint}}",
+    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}"{{#eslint}},
+    {{#eslint}}
+    "lint:eslint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"{{/eslint}}{{#stylelint}},
+    "lint:stylelint": "stylelint 'src/**/*.@(?(s)?(a|c)ss|vue|html)' --config ./.stylelintrc.js --extract"{{/stylelint}}
   },
   "dependencies": {
     "vue": "^1.0.21",
@@ -28,21 +31,21 @@
     "babel-preset-stage-2": "^6.0.0",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.23.0",
-    {{#lint}}
+    {{#eslint}}
     "eslint": "^2.10.2",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-html": "^1.3.0",
-    {{#if_eq lintConfig "standard"}}
+    {{#if_eq eslintConfig "standard"}}
     "eslint-config-standard": "^5.1.0",
     "eslint-plugin-promise": "^1.0.8",
     "eslint-plugin-standard": "^1.3.2",
     {{/if_eq}}
-    {{#if_eq lintConfig "airbnb"}}
+    {{#if_eq eslintConfig "airbnb"}}
     "eslint-config-airbnb-base": "^3.0.1",
     "eslint-plugin-import": "^1.8.1",
     {{/if_eq}}
-    {{/lint}}
+    {{/eslint}}
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -77,6 +80,13 @@
     {{/e2e}}
     "ora": "^0.2.0",
     "shelljs": "^0.6.0",
+    {{#stylelint}}
+    "stylelint": "^6.5.0",
+    "stylelint-webpack-plugin": "^0.2.0",
+    {{#if_eq stylelintConfig "standard"}}
+    "stylelint-config-standard": "^8.0.0",
+    {{/if_eq}}
+    {{/stylelint}}
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",

template/src/App.vue

@@ -23,13 +23,13 @@
 </template>
 
 <script>
-import Hello from './components/Hello'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import Hello from './components/Hello'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 
 export default {
   components: {
-    Hello{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-  }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+    Hello{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+  }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+}{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 </script>
 
 <style>
@@ -59,6 +59,6 @@ body {
 
 .logo {
   width: 100px;
-  height: 100px
+  height: 100px;
 }
 </style>

template/src/components/Hello.vue

@@ -12,10 +12,10 @@ export default {
       // with hot-reload because the reloaded component
       // preserves its current state and we are modifying
       // its initial state.
-      msg: 'Hello World!'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-    }{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-  }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-}{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+      msg: 'Hello World!'{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+    }{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
+  }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+}{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

template/src/main.js

@@ -1,8 +1,8 @@
-import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
-import App from './App'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import Vue from 'vue'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
+import App from './App'{{#if_eq eslintConfig "airbnb"}};{{/if_eq}}
 
 /* eslint-disable no-new */
 new Vue({
   el: 'body',
-  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
-}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+  components: { App }{{#if_eq eslintConfig "airbnb"}},{{/if_eq}}
+}){{#if_eq eslintConfig "airbnb"}};{{/if_eq}}