chore: adjust styles for new stylelint config

- replace renamed `word-wrap` with new name `overflow-wrap` (CSS3)
- use extensions for `@use`

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/dav/src/components/AvailabilityForm.vue

@@ -151,8 +151,8 @@ async function save() {
 .grid-table {
 	display: grid;
 	margin-bottom: 32px;
-	grid-column-gap: 24px;
-	grid-row-gap: 6px;
+	column-gap: 24px;
+	row-gap: 6px;
 	grid-template-columns: min-content auto min-content;
 	max-width: 500px;
 }

apps/files/src/views/TemplatePicker.vue

@@ -351,7 +351,7 @@ export default defineComponent({
 
 	&__list {
 		display: grid;
-		grid-gap: calc(var(--margin) * 2);
+		gap: calc(var(--margin) * 2);
 		grid-auto-columns: 1fr;
 		// We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
 		max-width: calc(var(--fullwidth) * 6);

apps/oauth2/src/views/AdminSettings.vue

@@ -160,7 +160,7 @@ async function addClient() {
 		overflow: hidden;
 		padding: var(--default-grid-baseline);
 		text-wrap: wrap;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 	}
 
 	tbody tr {

apps/settings/css/settings.scss

@@ -3,9 +3,10 @@
  * SPDX-FileCopyrightText: 2011 Jan-Christoph Borchardt, http://jancborchardt.net
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
 @use 'sass:math';
-@use 'functions';
+@use 'variables.scss';
+@use 'functions.scss';
 
 input {
 	&#openid, &#webdav {
@@ -92,7 +93,7 @@ select {
 	padding: 20px;
 	max-width: 1700px;
 	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
-	grid-column-gap: 10px;
+	column-gap: 10px;
 
 	.section {
 		padding: 10px 10px;

apps/settings/src/components/UserList.vue

@@ -395,7 +395,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use './Users/shared/styles' as *;
+@use './Users/shared/styles.scss' as *;
 
 .empty {
 	:deep {

apps/settings/src/components/Users/UserListFooter.vue

@@ -86,7 +86,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@use './shared/styles';
+@use './shared/styles.scss';
 
 .footer {
 	@include styles.row;

apps/settings/src/components/Users/UserListHeader.vue

@@ -155,7 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@use './shared/styles';
+@use './shared/styles.scss';
 
 .header {
 	border-bottom: 1px solid var(--color-border);

apps/settings/src/components/Users/UserRow.vue

@@ -1035,7 +1035,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use './shared/styles';
+@use './shared/styles.scss';
 
 .user-list__row {
 	@include styles.row;

apps/theming/src/components/UserSectionBackground.vue

@@ -264,7 +264,7 @@ async function pickFile() {
 		width: 168px;
 		margin: var(--default-grid-baseline);
 		text-align: center;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 		hyphens: auto;
 		border: 2px solid var(--color-main-background);
 		border-radius: var(--border-radius-large);

apps/theming/src/components/UserSectionPrimaryColor.vue

@@ -146,7 +146,7 @@ function numberToHex(numeric: string): string {
 	height: 96px;
 	width: 168px;
 
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 	hyphens: auto;
 
 	border: 2px solid var(--color-main-background);

apps/workflowengine/src/components/Operation.vue

@@ -43,5 +43,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@use "./../styles/operation" as *;
+@use "./../styles/operation.scss" as *;
 </style>

apps/workflowengine/src/components/Workflow.vue

@@ -157,7 +157,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@use "./../styles/operation";
+	@use "./../styles/operation.scss";
 
 	#workflowengine {
 		border-bottom: 1px solid var(--color-border);

core/css/apps.scss

@@ -3,9 +3,10 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
 @use 'sass:math';
-@use 'functions';
+@use 'variables.scss';
+@use 'functions.scss';
 
 @media screen and (width < #{variables.$breakpoint-mobile}) {
 	// Make the body full width on mobile

core/css/exception.scss

@@ -4,10 +4,10 @@
  */
 
 li {
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 pre {
 	white-space: pre-wrap;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 }

core/css/guest.scss

@@ -3,7 +3,8 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'animations';
+
+@use 'animations.scss';
 
 /* Default and reset */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
@@ -570,7 +571,7 @@ form #selectDbType {
 	display: flex;
 	flex-direction: column;
 	text-align: start;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 	border-radius: 10px; /* --border-radius-large */
 	cursor: default;
 	-moz-user-select: text;

core/css/icons.scss

@@ -2,8 +2,9 @@
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
-@use 'functions';
+
+@use 'variables.scss';
+@use 'functions.scss';
 
 /* GLOBAL ------------------------------------------------------------------- */
 [class^='icon-'], [class*=' icon-'] {

core/css/inputs.scss

@@ -3,9 +3,10 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
 @use 'sass:color';
-@use 'functions';
+@use 'variables.scss';
+@use 'functions.scss';
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {

core/css/mobile.scss

@@ -2,7 +2,8 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
+
+@use 'variables.scss';
 
 @media only screen and (width < #{variables.$breakpoint-mobile}) {
 

core/css/server.scss

@@ -2,16 +2,18 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'styles';
-@use 'inputs';
-@use 'header';
-@use 'icons';
-@use 'apps';
-@use 'global';
-@use 'fixes';
-@use 'mobile';
-@use 'tooltip';
-@use 'public';
+
+@use 'styles.scss';
+@use 'inputs.scss';
+@use 'header.scss';
+@use 'icons.scss';
+@use 'apps.scss';
+@use 'global.scss';
+@use 'fixes.scss';
+@use 'mobile.scss';
+@use 'tooltip.scss';
+@use 'public.scss';
+
 // If you include .css, it will be imported as url
-@use '../../node_modules/@nextcloud/dialogs/dist/style' as *;
-@use '../../node_modules/@nextcloud/password-confirmation/dist/style' as *;
+@use '../../node_modules/@nextcloud/dialogs/dist/style.css' as *;
+@use '../../node_modules/@nextcloud/password-confirmation/dist/style.css' as *;

core/css/styles.scss

@@ -3,8 +3,9 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 @use 'sass:math';
-@use 'variables';
+@use 'variables.scss';
 
 :root {
 	font-size: var(--default-font-size);

core/css/toast.scss

@@ -2,8 +2,9 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
-@use 'functions';
+
+@use 'variables.scss';
+@use 'functions.scss';
 
 .toastify.toast {
 	min-width: 200px;

core/css/tooltip.scss

@@ -20,7 +20,6 @@
     white-space: normal;
     word-break: normal;
     word-spacing: normal;
-    word-wrap: normal;
     overflow-wrap: anywhere;
     font-size: 12px;
     opacity: 0;