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

…493)
nuxt · Apr 27, 2020 · 8034d68 · 8034d68
1 parent af164a7
commit 8034d68
Show file tree

Hide file tree

Showing 21 changed files with 1,451 additions and 55 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -0,0 +1,3 @@
+node_modules
+packages/cna-template/template/nuxt/pages/index.vue
+packages/cna-template/template/frameworks/iview/pages/index.vue
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,3 @@
+{
+ "extends": "stylelint-config-standard"
+}
diff --git a/package.json b/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"
 }
diff --git a/packages/cna-template/template/_stylelint.config.js b/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: {}

diff --git a/packages/cna-template/template/frameworks/framevuerk/components/FramevuerkLogo.vue b/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;

diff --git a/packages/cna-template/template/frameworks/framevuerk/layouts/default.vue b/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;
 }

diff --git a/packages/cna-template/template/frameworks/framevuerk/pages/index.vue b/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;
 }

diff --git a/packages/cna-template/template/frameworks/iview/pages/index.vue b/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;
 }

diff --git a/packages/cna-template/template/frameworks/vuesax/components/VuesaxLogo.vue b/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>
diff --git a/packages/cna-template/template/frameworks/vuesax/pages/index.vue b/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;
 }

diff --git a/packages/cna-template/template/frameworks/vuetify/components/VuetifyLogo.vue b/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;

diff --git a/packages/cna-template/template/nuxt/components/Logo.vue b/packages/cna-template/template/nuxt/components/Logo.vue
@@ -27,6 +27,7 @@
  0% {
  opacity: 0;
  }
+
  100% {
  opacity: 1;
  }

diff --git a/packages/cna-template/template/nuxt/layouts/default.vue b/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;
 }

diff --git a/packages/cna-template/template/nuxt/package.js b/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']

diff --git a/packages/cna-template/template/nuxt/package.json b/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"
  }
 }
diff --git a/packages/cna-template/template/nuxt/pages/index.vue b/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;