feat(lint): add stylelint-config-standard and separate lint scripts (#493)

Author: clarkdo

.stylelintignore

@@ -0,0 +1,3 @@
+node_modules
+packages/cna-template/template/nuxt/pages/index.vue
+packages/cna-template/template/frameworks/iview/pages/index.vue

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

package.json

@@ -8,7 +8,9 @@
     "type": "git"
   },
   "scripts": {
-    "lint": "eslint --ext .js,.mjs,.vue .",
+    "lint": "yarn lint:js && yarn lint:style",
+    "lint:js": "eslint --ext .js,.mjs,.vue .",
+    "lint:style": "stylelint **/*.{vue,css}",
     "test": "ava --verbose",
     "test:snapshot": "ava --verbose --update-snapshots"
   },
@@ -17,7 +19,9 @@
     "@nuxtjs/eslint-config": "^2.0.2",
     "ava": "^3.7.1",
     "eslint": "^6.8.0",
-    "lerna": "^3.20.2"
+    "lerna": "^3.20.2",
+    "stylelint": "^13.3.3",
+    "stylelint-config-standard": "^20.0.0"
   },
   "name": "create-nuxt-app"
 }

packages/cna-template/template/_stylelint.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  extends: 'stylelint-config-standard',
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
   rules: {}

packages/cna-template/template/frameworks/framevuerk/components/FramevuerkLogo.vue

@@ -48,26 +48,31 @@ export default {
   vertical-align: middle;
   width: 43px;
 }
+
 .logo svg {
-    width: 100%;
-    height: auto;
-    max-height: 12em;
-    margin: 0 auto;
+  width: 100%;
+  height: auto;
+  max-height: 12em;
+  margin: 0 auto;
 }
+
 .logo svg polygon {
   transform: translateY(-100%);
   transition-duration: 2s;
 }
+
 .logo svg path {
   fill: transparent;
   transition-delay: 0.6s;
   transition-duration: 1s;
 }
+
 .logo.ready svg polygon {
   transform: translateY(0);
   fill: #fff;
 }
-.logo.ready svg  path {
+
+.logo.ready svg path {
   stroke: transparent;
   stroke-width: 0;
   fill: #fff;

packages/cna-template/template/frameworks/framevuerk/layouts/default.vue

@@ -4,8 +4,15 @@
 
 <style>
 html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   font-size: 15px;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
@@ -14,12 +21,14 @@ html {
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
 }
+
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
 }
+
 html,
 body,
 #__nuxt,
@@ -28,6 +37,7 @@ body,
   height: 100%;
   position: initial;
 }
+
 body .material-icons {
   vertical-align: middle;
 }

packages/cna-template/template/frameworks/framevuerk/pages/index.vue

@@ -177,6 +177,7 @@ export default {
   margin: 0 auto;
   max-width: 768px;
 }
+
 .sidebar {
   min-width: 300px;
 }

packages/cna-template/template/frameworks/iview/pages/index.vue

@@ -41,22 +41,33 @@ export default {
   align-items: center;
   text-align: center;
 }
+
 .title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Quicksand',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   display: block;
   font-weight: 300;
   font-size: 100px;
   color: #35495e;
   letter-spacing: 1px;
 }
+
 .subtitle {
   font-weight: 300;
   font-size: 42px;
   color: #526488;
   word-spacing: 5px;
   padding-bottom: 15px;
 }
+
 .links {
   padding-top: 15px;
 }

packages/cna-template/template/frameworks/vuesax/components/VuesaxLogo.vue

@@ -8,8 +8,9 @@
   width: 100%;
   max-width: 170px;
 }
+
 .vuesax-logo svg {
   width: 100%;
-  fill: #35495e
+  fill: #35495e;
 }
 </style>

packages/cna-template/template/frameworks/vuesax/pages/index.vue

@@ -84,15 +84,23 @@ export default {
 }
 
 .title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Quicksand',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   display: block;
   font-weight: 300;
   font-size: 55px;
   color: #35495e;
   letter-spacing: 1px;
   text-transform: capitalize;
-  margin: 25px 0px
+  margin: 25px 0;
 }
 
 .subtitle {
@@ -106,12 +114,12 @@ export default {
 
 .subtitle a {
   font-weight: 500;
-  color: inherit
+  color: inherit;
 }
 
 .links {
   padding-top: 15px;
-  margin-bottom: 20px
+  margin-bottom: 20px;
 }
 
 .content-logos {
@@ -120,14 +128,24 @@ export default {
   justify-content: center;
   min-width: 500px;
 }
+
 .plus {
   font-size: 2.5rem;
   margin: 15px;
-  color: #35495e
+  color: #35495e;
 }
+
 .h3 {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Quicksand',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   font-weight: 400;
   margin: 10px;
 }

packages/cna-template/template/frameworks/vuetify/components/VuetifyLogo.vue

@@ -8,7 +8,7 @@
 
 <style>
 .VuetifyLogo {
-  height:180px;
+  height: 180px;
   width: 180px;
   transform: rotateY(560deg);
   animation: turn 3.5s ease-out forwards 1s;

packages/cna-template/template/nuxt/components/Logo.vue

@@ -27,6 +27,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

packages/cna-template/template/nuxt/layouts/default.vue

@@ -6,8 +6,15 @@
 
 <style>
 html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   font-size: 16px;
   word-spacing: 1px;
   -ms-text-size-adjust: 100%;
@@ -18,8 +25,8 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
 }

packages/cna-template/template/nuxt/package.js

@@ -16,9 +16,14 @@ module.exports = {
     const lintStaged = eslint && linter.includes('lintStaged')
     const stylelint = linter.includes('stylelint')
     const prettier = linter.includes('prettier')
+    const lintScripts = {
+      eslint: '<%= pmRun %> lint:js',
+      stylelint: '<%= pmRun %> lint:style'
+    }
 
     if (!eslint) {
-      delete pkg.scripts.lint
+      delete lintScripts.eslint
+      delete pkg.scripts['lint:js']
       delete pkg.devDependencies['@nuxtjs/eslint-config']
       delete pkg.devDependencies['@nuxtjs/eslint-module']
       delete pkg.devDependencies['babel-eslint']
@@ -32,16 +37,24 @@ module.exports = {
       delete pkg.devDependencies['lint-staged']
     }
     if (!stylelint) {
-      lintStaged && delete pkg['lint-staged']['*.{css,vue']
+      lintStaged && delete pkg['lint-staged']['*.{css,vue}']
+      delete lintScripts.stylelint
+      delete pkg.scripts['lint:style']
       delete pkg.devDependencies['@nuxtjs/stylelint-module']
       delete pkg.devDependencies.stylelint
+      delete pkg.devDependencies['stylelint-config-standard']
     }
     if (!prettier) {
       delete pkg.devDependencies['eslint-config-prettier']
       delete pkg.devDependencies['eslint-plugin-prettier']
       delete pkg.devDependencies.prettier
     }
 
+    const lintScript = Object.values(lintScripts).join(' && ')
+    if (lintScript) {
+      pkg.scripts.lint = lintScript
+    }
+
     // Modules
     if (!features.includes('axios')) {
       delete pkg.dependencies['@nuxtjs/axios']

packages/cna-template/template/nuxt/package.json

@@ -4,7 +4,8 @@
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
+    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore"
   },
   "lint-staged": {
     "*.{js,vue}": "eslint",
@@ -36,6 +37,7 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.1.7",
     "@nuxtjs/stylelint-module": "^3.2.2",
-    "stylelint": "^13.3.3"
+    "stylelint": "^13.3.3",
+    "stylelint-config-standard": "^20.0.0"
   }
 }

packages/cna-template/template/nuxt/pages/index.vue

@@ -52,10 +52,11 @@ export default {
 <%_ if (ui === 'tailwind') { _%>
 /* Sample `apply` at-rules with Tailwind CSS
 .container {
-  @apply min-h-screen flex justify-center items-center text-center mx-auto;
+@apply min-h-screen flex justify-center items-center text-center mx-auto;
 }
 */
-<%_ } _%>
+<%_ }
+_%>
 .container {
   margin: 0 auto;
   min-height: 100vh;
@@ -66,8 +67,16 @@ export default {
 }
 
 .title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Quicksand',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   display: block;
   font-weight: 300;
   font-size: 100px;