Merge pull request #2157 from nextcloud/build/webpack-shared-config

package-lock.json

@@ -5601,6 +5601,12 @@
 				}
 			}
 		},
+		"@nextcloud/webpack-vue-config": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-1.1.0.tgz",
+			"integrity": "sha512-3eDbH05tlkfM12syuM36QS+xU1r80iX21PZ5tN+/O9Ekto2psmt+vf7Vgs5JX20M97Uy89POQ09A8tQUj83Yuw==",
+			"dev": true
+		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -8126,6 +8132,25 @@
 			"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
 			"dev": true
 		},
+		"clone-deep": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+			"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+			"dev": true,
+			"requires": {
+				"is-plain-object": "^2.0.4",
+				"kind-of": "^6.0.2",
+				"shallow-clone": "^3.0.0"
+			},
+			"dependencies": {
+				"kind-of": {
+					"version": "6.0.3",
+					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+					"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+					"dev": true
+				}
+			}
+		},
 		"clone-regexp": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
@@ -19510,6 +19535,23 @@
 				"safe-buffer": "^5.0.1"
 			}
 		},
+		"shallow-clone": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+			"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+			"dev": true,
+			"requires": {
+				"kind-of": "^6.0.2"
+			},
+			"dependencies": {
+				"kind-of": {
+					"version": "6.0.3",
+					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+					"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+					"dev": true
+				}
+			}
+		},
 		"shebang-command": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -22829,12 +22871,13 @@
 			}
 		},
 		"webpack-merge": {
-			"version": "4.2.2",
+			"version": "5.0.9",
-			"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+			"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.0.9.tgz",
-			"integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+			"integrity": "sha512-P4teh6O26xIDPugOGX61wPxaeP918QOMjmzhu54zTVcLtOS28ffPWtnv+ilt3wscwBUCL2WNMnh97XkrKqt9Fw==",
 			"dev": true,
 			"requires": {
-				"lodash": "^4.17.15"
+				"clone-deep": "^4.0.1",
+				"wildcard": "^2.0.0"
 			}
 		},
 		"webpack-sources": {
@@ -22928,6 +22971,12 @@
 				"string-width": "^1.0.2 || 2"
 			}
 		},
+		"wildcard": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+			"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+			"dev": true
+		},
 		"word-wrap": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -17,13 +17,13 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"dev": "NODE_ENV=development webpack --config webpack.dev.js",
+		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.js",
-		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
+		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
-		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
-		"stylelint": "stylelint **/*.css **/*.scss **/*.vue",
+		"stylelint": "stylelint src",
-		"stylelint:fix": "stylelint **/*.css **/*.scss **/*.vue --fix",
+		"stylelint:fix": "stylelint src --fix",
 		"test": "jest",
 		"test:coverage": "jest --coverage"
 	},
@@ -72,6 +72,7 @@
 		"@nextcloud/browserslist-config": "^1.0.0",
 		"@nextcloud/eslint-config": "^2.1.0",
 		"@nextcloud/eslint-plugin": "^1.4.0",
+		"@nextcloud/webpack-vue-config": "^1.1.0",
 		"@vue/test-utils": "^1.0.3",
 		"acorn": "^7.3.1",
 		"babel-eslint": "^10.1.0",
@@ -107,7 +108,7 @@
 		"webpack": "^4.44.0",
 		"webpack-cli": "^3.3.12",
 		"webpack-dev-server": "^3.11.0",
-		"webpack-merge": "^4.2.2"
+		"webpack-merge": "^5.0.9"
 	},
 	"jest": {
 		"moduleFileExtensions": [

src/components/ActivityEntry.vue

@@ -154,6 +154,7 @@ export default {
 	.visualdiff ins {
 		color: green;
 	}
+
 	.visualdiff del {
 		color: darkred;
 	}

src/components/Controls.vue

@@ -291,6 +291,8 @@ export default {
 
 <style lang="scss" scoped>
 	.controls {
+		display: flex;
+
 		.board-title {
 			display: flex;
 			align-items: center;
@@ -318,20 +320,12 @@ export default {
 	}
 
 	#app-navigation-toggle-custom {
+		position: static;
 		width: 44px;
 		height: 44px;
 		cursor: pointer;
 		opacity: 1;
 		display: inline-block !important;
-		position: fixed;
-	}
-
-	.controls {
-		display: flex;
-	}
-
-	#app-navigation-toggle-custom {
-		position: static;
 	}
 
 	.board-actions {
@@ -350,6 +344,7 @@ export default {
 			background-color: transparent;
 		}
 	}
+
 	.filter--item {
 		input + label {
 			display: block;
@@ -366,11 +361,13 @@ export default {
 			}
 		}
 	}
+
 	.filter {
 		width: 250px;
 		max-height: 80vh;
 		overflow: auto;
 	}
+
 	.filter h3 {
 		margin-top: 0px;
 		margin-bottom: 5px;

src/components/List.vue

@@ -1,35 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div />
-</template>
-
-<script>
-export default {
-	name: 'List',
-}
-</script>
-
-<style scoped>
-
-</style>

src/components/board/Board.vue

@@ -131,7 +131,7 @@ export default {
 
 <style lang="scss" scoped>
 
-	@import "../../css/animations.scss";
+	@import '../../css/animations.scss';
 
 	$board-spacing: 15px;
 	$stack-spacing: 10px;

src/components/board/DeletedTabSidebar.vue

@@ -89,6 +89,12 @@ export default {
 		li {
 			display: flex;
 			height: 44px;
+
+			&:hover, &:active, &.focus {
+				button {
+					opacity: 1;
+				}
+			}
 		}
 
 		span {
@@ -119,12 +125,5 @@ export default {
 			background-color: transparent;
 			opacity: 0.5;
 		}
-		li {
-			&:hover, &:active, &.focus {
-				button {
-					opacity: 1;
-				}
-			}
-		}
 	}
 </style>

src/components/board/SharingTabSidebar.vue

@@ -178,20 +178,25 @@ export default {
 	#shareWithList {
 		margin-bottom: 20px;
 	}
+
 	#shareWithList li {
 		display: flex;
 		align-items: center;
 	}
+
 	.username {
 		padding: 12px 9px;
 		flex-grow: 1;
 	}
+
 	.board-owner-label {
 		opacity: .7;
 	}
+
 	.avatarLabel {
 		padding: 6px
 	}
+
 	.avatardiv {
 		background-color: #f5f5f5;
 		border-radius: 16px;

src/components/board/Stack.vue

@@ -295,6 +295,7 @@ export default {
 			border: none;
 		}
 	}
+
 	.stack .smooth-dnd-container.vertical {
 		margin-top: 3px;
 	}
@@ -307,6 +308,7 @@ export default {
 	.slide-top-leave-active {
 		transition: all 100ms ease;
 	}
+
 	.slide-top-enter, .slide-top-leave-to {
 		transform: translateY(-10px);
 		opacity: 0;

src/components/card/CardSidebar.vue

@@ -501,12 +501,14 @@ export default {
 </script>
 
 <style>
-	@import "~easymde/dist/easymde.min.css";
+	@import '~easymde/dist/easymde.min.css';
+
 	.vue-easymde, .CodeMirror {
 		border: none;
 		margin: 0;
 		padding: 0;
 	}
+
 	.editor-preview,
 	.editor-statusbar {
 		display: none;
@@ -615,7 +617,7 @@ export default {
 		min-height: 100px;
 
 		&::v-deep {
-			@import "./../../css/markdown";
+			@import './../../css/markdown';
 		}
 
 		&::v-deep input {

src/components/card/CardSidebarTabComments.vue

@@ -115,5 +115,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "../../css/comments";
+	@import '../../css/comments';
 </style>

src/components/card/CommentForm.vue

@@ -173,7 +173,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "../../css/comments";
+	@import '../../css/comments';
 
 	.atwho-wrap {
 		width: 100%;

src/components/card/CommentItem.vue

@@ -172,7 +172,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "../../css/comments";
+	@import '../../css/comments';
 
 	.reply {
 		border-left: 3px solid var(--color-primary-element);
@@ -195,6 +195,7 @@ export default {
 			margin: 0;
 		}
 	}
+
 	.comment--content::v-deep a {
 		text-decoration: underline;
 	}

src/components/cards/AvatarList.vue

@@ -143,6 +143,7 @@ export default {
 			}
 		}
 	}
+
 	.avatar-list {
 		float: right;
 		display: inline-flex;
@@ -153,6 +154,9 @@ export default {
 			width: 36px;
 			height: 36px;
 			box-sizing: content-box !important;
+			margin-right: -12px;
+			transition: margin-right 0.2s ease-in-out;
+
 			&.icon-more {
 				width: 32px;
 				height: 32px;
@@ -160,15 +164,12 @@ export default {
 				background-color: var(--color-background-dark) !important;
 				cursor: pointer;
 			}
-			& {
-				margin-right: -12px;
-				transition: margin-right 0.2s ease-in-out;
-			}
 		}
 		&:hover div:nth-child(n+2) /deep/ .avatardiv {
 			margin-right: 1px;
 		}
 	}
+
 	.popovermenu {
 		display: block;
 		margin: 40px -6px;

src/components/cards/CardBadges.vue

@@ -127,6 +127,7 @@ export default {
 	.fade-enter-active, .fade-leave-active {
 		transition: opacity .125s;
 	}
+
 	.fade-enter, .fade-leave-to {
 		opacity: 0;
 	}

src/components/cards/CardItem.vue

@@ -259,9 +259,11 @@ export default {
 			}
 		}
 	}
+
 	.duedate {
 		margin-right: 9px;
 	}
+
 	.right {
 		display: flex;
 		align-items: flex-start;

src/components/navigation/AppNavigation.vue

@@ -158,6 +158,7 @@ export default {
 			color: var(--color-text-light);
 		}
 	}
+
 	::v-deep .app-navigation-toggle {
 		display: none;
 	}

src/components/navigation/AppNavigationAddBoard.vue

@@ -87,7 +87,7 @@ export default {
 			display: flex;
 			flex-grow: 1;
 
-			input[type="text"] {
+			input[type='text'] {
 				flex-grow: 1;
 			}
 		}

src/components/navigation/AppNavigationBoard.vue

@@ -248,7 +248,7 @@ export default {
 			display: flex;
 			flex-grow: 1;
 
-			input[type="text"] {
+			input[type='text'] {
 				flex-grow: 1;
 			}
 		}

src/css/animations.scss

@@ -1,6 +1,7 @@
 .fade-enter-active {
 	transition: opacity 250ms;
 }
+
 .fade-enter, .fade-leave-to {
 	opacity: 0;
 }
@@ -9,6 +10,7 @@
 .zoom-enter-active {
 	animation: zoom-in var(--animation-quick);
 }
+
 .zoom-leave-active {
 	animation: zoom-in var(--animation-quick) reverse;
 	will-change: transform;

src/css/comments.scss

@@ -12,7 +12,7 @@
 		}
 	}
 
-	input[type="submit"] {
+	input[type='submit'] {
 		width: 44px;
 		height: 44px;
 		margin: 0;
@@ -25,9 +25,11 @@
 		right: 0;
 	}
 }
+
 .comment {
 	margin-bottom: 10px;
 }
+
 .comment--header {
 	display: flex;
 	align-items: center;

src/css/markdown.scss

@@ -74,17 +74,19 @@ input[type=checkbox] {
 	min-height: 12px;
 }
 
-li 	input[type="checkbox"].checkbox + label::before {
+li 	input[type='checkbox'].checkbox + label::before {
 	margin-left: -15px;
 
 }
-input[type="checkbox"].checkbox + label::before {
+
+input[type='checkbox'].checkbox + label::before {
 	position: relative;
 	z-index: 100;
 	margin-right: 10px;
 	margin-top: 0;
 }
-li input[type="checkbox"].checkbox:not(:checked) + label::before {
+
+li input[type='checkbox'].checkbox:not(:checked) + label::before {
 	background-color: var(--color-main-background);
 }
 

stylelint.config.js

@@ -20,7 +20,13 @@ module.exports = {
 		'selector-type-case': null,
 		'selector-list-comma-newline-after': null,
 		'no-descending-specificity': null,
-		'string-quotes': 'single'
+		'string-quotes': 'single',
+		'selector-pseudo-element-no-unknown': [
+			true,
+			{
+				ignorePseudoElements: ['v-deep']
+			}
+		]
 	},
 	plugins: ['stylelint-scss']
 }

webpack.common.js

@@ -1,59 +0,0 @@
-const path = require('path');
-const { VueLoaderPlugin } = require('vue-loader');
-
-module.exports = {
-	entry: {
-		deck: path.join(__dirname, 'src', 'main.js'),
-		collections: path.join(__dirname, 'src', 'init-collections.js'),
-	},
-	output: {
-		filename: '[name].js',
-		path: __dirname + '/js',
-		publicPath: '/js/',
-		jsonpFunction: 'webpackJsonpOCADeck',
-		chunkFilename: '[name].js?v=[contenthash]',
-	},
-	module: {
-		rules: [
-			{
-				test: /\.css$/,
-				use: ['vue-style-loader', 'css-loader']
-			},
-            {
-                test: /\.scss$/,
-                use: [
-                    'vue-style-loader',
-                    'css-loader',
-                    'sass-loader'
-                ]
-            },
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader'
-			},
-			{
-				test: /\.js$/,
-				loader: 'babel-loader',
-				exclude: /node_modules/
-			},
-			{
-				test: /\.(png|jpg|gif|svg)$/,
-				loader: 'url-loader',
-				options: {
-					name: '[name].[ext]?[hash]'
-				}
-			}
-		]
-	},
-	plugins: [new VueLoaderPlugin()],
-	resolve: {
-		alias: {
-			vue$: 'vue/dist/vue.esm.js'
-		},
-		extensions: ['*', '.js', '.vue', '.json'],
-		modules: [
-			path.resolve(__dirname, 'node_modules'),
-			'node_modules'
-		]
-	}
-};

webpack.dev.js

@@ -1,11 +0,0 @@
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devServer: {
-    historyApiFallback: true,
-    overlay: true
-  },
-  devtool: 'source-map',
-})

webpack.js

@@ -0,0 +1,36 @@
+const webpackConfig = require('@nextcloud/webpack-vue-config')
+const path = require('path');
+const { merge } = require('webpack-merge')
+
+const config = {
+	entry: {
+		deck: path.join(__dirname, 'src', 'main.js'),
+		collections: path.join(__dirname, 'src', 'init-collections.js'),
+	},
+	output: {
+		filename: '[name].js',
+		jsonpFunction: 'webpackJsonpOCADeck',
+		chunkFilename: '[name].js?v=[contenthash]',
+	},
+	module: {
+		rules: [
+			{
+				test: /\.(png|jpg|gif|svg)$/,
+				loader: 'url-loader',
+				options: {
+					name: '[name].[ext]?[hash]'
+				}
+			}
+		]
+	},
+	resolve: {
+		extensions: ['*', '.js', '.vue', '.json'],
+		modules: [
+			path.resolve(__dirname, 'node_modules'),
+			'node_modules'
+		]
+	}
+};
+
+module.exports = merge(config, webpackConfig)
+

webpack.prod.js

@@ -1,7 +0,0 @@
-const merge = require('webpack-merge')
-const common = require('./webpack.common.js')
-
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: '#source-map'
-})