Run stylelint with the version from package.json

Signed-off-by: Joas Schilling <coding@schilljs.com>

.github/workflows/lint.yml

@@ -28,12 +28,12 @@ jobs:
       - name: Lint
         run: "find . -name \\*.php -not -path './vendor/*' -exec php -l \"{}\" \\;"
 
-  eslint:
+  node:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-versions: ['12.x']
+        node-versions: [12.x]
 
     name: eslint node${{ matrix.node-versions }}
     steps:
@@ -55,20 +55,19 @@ jobs:
 
     strategy:
       matrix:
-        node-versions: ['12.x']
+        node-versions: [12.x]
 
     name: stylelint node${{ matrix.node-versions }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@master
+      - uses: actions/checkout@v2
 
-      - name: Set up Node
+      - name: Set up node ${{ matrix.node-versions }}
         uses: actions/setup-node@v1
         with:
-          node-version: ${{ matrix.node-versions }}
+          node-versions: ${{ matrix.node-versions }}
 
-      - name: Install stylelint 11.0
-        run: npm i -g stylelint@11.0.0
+      - name: Install dependencies
+        run: npm ci
 
       - name: Lint
-        run: $(which stylelint) -f verbose css
+        run: npm run stylelint

.stylelintrc

@@ -1,14 +0,0 @@
-{
-  "rules": {
-    "media-feature-name-no-unknown": true,
-    "property-no-unknown": true,
-    "selector-pseudo-class-no-unknown": true,
-    "selector-pseudo-element-no-unknown": [true, {
-      "ignorePseudoElements": ["v-deep"]
-    }],
-    "selector-type-no-unknown": true,
-    "string-no-newline": true,
-    "unit-case": "lower",
-    "unit-no-unknown": true
-  }
-}

package.json

@@ -11,8 +11,8 @@
 		"lint": "eslint --ext .js,.vue src",
 		"dev": "NODE_ENV=development webpack --config webpack.dev.js",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
-		"stylelint": "stylelint -f verbose --config .stylelintrc src",
-		"stylelint:fix": "stylelint --config .stylelintrc src --fix",
+		"stylelint": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue",
+		"stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue --fix",
 		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js"
 	},
 	"dependencies": {
@@ -79,10 +79,10 @@
 		"eslint-plugin-vue": "^5.2.3",
 		"node-sass": "^4.14.0",
 		"sass-loader": "^8.0.1",
-		"stylelint": "^8.4.0",
-		"stylelint-config-recommended-scss": "^3.3.0",
+		"stylelint": "^13.3.2",
+		"stylelint-config-recommended-scss": "^4.2.0",
 		"stylelint-scss": "^3.17.1",
-		"stylelint-webpack-plugin": "^0.10.5",
+		"stylelint-webpack-plugin": "^1.2.3",
 		"vue-loader": "^15.9.2",
 		"vue-template-compiler": "^2.6.11",
 		"webpack": "^4.43.0",

stylelint.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+	extends: 'stylelint-config-recommended-scss',
+	rules: {
+		indentation: 'tab',
+		'selector-type-no-unknown': null,
+		'number-leading-zero': null,
+		'rule-empty-line-before': [
+			'always',
+			{
+				ignore: ['after-comment', 'inside-block'],
+			},
+		],
+		'declaration-empty-line-before': [
+			'never',
+			{
+				ignore: ['after-declaration'],
+			},
+		],
+		'comment-empty-line-before': null,
+		'selector-type-case': null,
+		'selector-list-comma-newline-after': null,
+		'selector-pseudo-class-no-unknown': true,
+		'selector-pseudo-element-no-unknown': [true, {
+			ignorePseudoElements: ['v-deep'],
+		}],
+		'no-descending-specificity': null,
+		'string-quotes': 'single',
+	},
+	plugins: ['stylelint-scss'],
+}

webpack.common.js

@@ -76,7 +76,9 @@ module.exports = {
 	},
 	plugins: [
 		new VueLoaderPlugin(),
-		new StyleLintPlugin(),
+		new StyleLintPlugin({
+			files: ['**/*.vue'],
+		}),
 	],
 	resolve: {
 		extensions: ['*', '.js', '.vue'],