ci: create stylelint workflow

.github/workflows/lint-stylelint.yml

@@ -0,0 +1,51 @@
+# This workflow is provided via the organization template repository
+#
+# https://github.com/nextcloud/.github
+# https://docs.github.com/en/actions/learn-github-actions/sharing-workflows-with-your-organization
+#
+# SPDX-FileCopyrightText: 2021-2024 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: MIT
+
+name: Lint stylelint
+
+on: pull_request
+
+permissions:
+  contents: read
+
+concurrency:
+  group: lint-stylelint-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    name: stylelint
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@06d6baf7d8f41934ab630e97d9e6c0bc9c9ac5e4 # v3
+        id: versions
+        with:
+          fallbackNode: '^20'
+          fallbackNpm: '^10'
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v3
+        with:
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g npm@"${{ steps.versions.outputs.npmVersion }}"
+
+      - name: Install dependencies
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+        run: npm ci
+
+      - name: Lint
+        run: npm run stylelint

.stylelintignore

@@ -1 +1,3 @@
-src/fonts
+src/fonts
+*.json
+*.orig

css/app-navigation.scss

@@ -189,7 +189,7 @@
 
 		.multiselect {
 			width: 100%;
-		  	border-radius: var(--border-radius-large);
+			border-radius: var(--border-radius-large);
 
 			&__content-wrapper {
 				z-index: 200 !important;

css/app-sidebar.scss

@@ -366,9 +366,6 @@
 				flex: 1 auto;
 			}
 
-			&--timed {
-			}
-
 			&--all-day {
 				flex-wrap: wrap;
 				margin-bottom: 5px;
@@ -518,6 +515,10 @@
 		}
 
 		&__icon {
+			flex-shrink: 0;
+			margin-left: -5px;
+			margin-right: 5px;
+
 			&--hidden {
 				visibility: hidden;
 			}
@@ -534,12 +535,6 @@
 			opacity: 1;
 		}
 
-		&__icon {
-			flex-shrink: 0;
-			margin-left: -5px;
-			margin-right: 5px;
-		}
-
 		&__input {
 			flex-grow: 2;
 
@@ -702,6 +697,7 @@
 
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 .event-popover .event-popover__inner {
 	.event-popover__response-buttons {
 		margin-top: 8px;
@@ -736,6 +732,7 @@
 		overflow: unset !important;
 	}
 
+	/* stylelint-disable-next-line no-duplicate-selectors */
 	.event-popover__inner {
 		text-align: left;
 		max-width: 480px;

css/calendar.scss

@@ -19,14 +19,14 @@
  * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-@import 'app-navigation.scss';
-@import 'app-sidebar.scss';
-@import 'app-settings.scss';
-@import 'app-modal.scss';
-@import 'freebusy.scss';
-@import 'fullcalendar.scss';
-@import 'global.scss';
-@import 'import.scss';
-@import 'print.scss';
-@import 'public.scss';
-@import 'props-linkify-links.scss';
+@import 'app-navigation';
+@import 'app-sidebar';
+@import 'app-settings';
+@import 'app-modal';
+@import 'freebusy';
+@import 'fullcalendar';
+@import 'global';
+@import 'import';
+@import 'print';
+@import 'public';
+@import 'props-linkify-links';

css/dashboard.css

@@ -1,4 +1,4 @@
 .app-icon-calendar {
 	background-image: url('../img/calendar-dark.svg');
-  filter: var(--background-invert-if-dark);
+	filter: var(--background-invert-if-dark);
 }

css/fullcalendar.scss

@@ -23,6 +23,8 @@
 
 /** Override some FullCalendar CSS vars: */
 .fc {
+	font-family: var(--font-face) !important;
+
 	--fc-small-font-size: 0.875em;
 	--fc-page-bg-color: var(--color-main-background) !important;
 	--fc-neutral-bg-color: var(--color-background-dark) !important;
@@ -49,10 +51,6 @@
 	--fc-list-event-hover-bg-color: var(--color-background-hover) !important;
 }
 
-.fc {
-	font-family: var(--font-face) !important;
-}
-
 // ### FullCalendar Grid adjustments
 // Make the labels lighter
 .fc-timegrid-axis-frame,
@@ -241,6 +239,9 @@
 .fc-col-header-cell {
 	word-break: break-word;
 	white-space: normal;
+
+	// Fix week button overlapping with the toggle
+	padding-top: 10px !important;
 }
 
 .fc-timeGridWeek-view {
@@ -276,14 +277,11 @@
 		min-height: 150px !important;
 	}
 }
+
 .fc-daygrid-day-events {
 	position:relative !important;
 }
 
-// Fix week button overlapping with the toggle
-.fc-col-header-cell {
-    padding-top: 10px !important;
-}
 .fc-timegrid-axis-cushion  {
 	margin-top: 44px;
 }

src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue

@@ -235,6 +235,6 @@ export default {
 <style lang="scss">
 .datepicker-widget{
 	width: 135px;
-    margin: 2px 5px 5px 5px;
+	margin: 2px 5px 5px 5px;
 }
 </style>

src/components/AppNavigation/EditCalendarModal/SharingSearch.vue

@@ -116,9 +116,9 @@
 		/**
 		 * Function to filter results in NcSelect
 		 *
 		 * @param {object} option
 		 * @param {string} label
 		 * @param {string} search
 		 */
 		filterResults(option, label, search) {
 			return true
@@ -283,8 +283,8 @@
 	gap: 10px;
 	width: 100%;
 
-&__group-icon,
-&__team-icon {
+	&__group-icon,
+	&__team-icon {
 		width: 32px;
 		height: 32px;
 		border-radius: 16px;

src/components/AppNavigation/Settings/SettingsAttachmentsFolder.vue

@@ -90,7 +90,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/AppointmentConfigModal.vue

@@ -331,8 +331,8 @@ export default {
 
 <style lang="scss" scoped>
 .appointment-config-modal {
-		&__talk-room-description {
-			color: var(--color-text-maxcontrast);
-		}
+	&__talk-room-description {
+		color: var(--color-text-maxcontrast);
+	}
 }
 </style>

src/components/CalendarGrid.vue

@@ -78,7 +78,7 @@
 			type: Boolean,
 			default: false,
 		},
 		url: {
 			type: String,
 			required: false,
 		},
@@ -178,7 +178,7 @@
 		/**
 		 * FullCalendar Plugins
 		 *
 		 * @return {(PluginDef)[]}
 		 */
 		plugins() {
 			return [
@@ -345,6 +345,7 @@
 	height: 16px;
 	width: 16px;
 }
+
 .fullcalendar-widget{
 	min-height: 500px;
 	:deep(.fc-col-header-cell-cushion){

src/components/Editor/Attachments/AttachmentsList.vue

@@ -236,7 +236,7 @@
 					type: 'primary',
 					callback: () => {
 						window.open(url.href, '_blank', 'noopener noreferrer')
 					}
 				},
 			]
 			this.showOpenConfirmation = true
@@ -249,6 +249,7 @@
 .attachments-input {
 	display: none;
 }
+
 .attachments-summary {
 	display:flex;
 	align-items: center;
@@ -300,6 +301,7 @@
 	margin-top: 1rem;
 	text-align: center;
 }
+
 .button-group {
 	display: flex;
 	align-content: center;
@@ -309,6 +311,7 @@
 		margin-right: 6px;
 	}
 }
+
 .attachment-icon {
 	width: 24px;
 	height: 24px;

src/components/Editor/FreeBusy/FreeBusy.vue

@@ -82,7 +82,7 @@
 								</template>
 							</NcButton>
 						</template>
 						<template>
 							<div class="freebusy-caption">
 								<div class="freebusy-caption__calendar-user-types" />
 								<div class="freebusy-caption__colors">
@@ -218,7 +218,7 @@
 			type: Date,
 			required: true,
 		},
 		eventTitle: {
 			type: String,
 			required: false,
 		},
@@ -527,6 +527,7 @@
 	display: block;
 	height: 100%;
 }
+
 .modal__content {
 	padding: 50px;
 	//when the calendar is open, it's cut at the bottom, adding a margin fixes it
@@ -574,9 +575,11 @@
 		}
 	}
 }
+
 :deep(.vs__search ) {
 	text-overflow: ellipsis;
 }
+
 :deep(.mx-input) {
 	height: 38px !important;
 }

src/components/Editor/Invitees/InviteesListItem.vue

@@ -254,6 +254,7 @@ export default {
 .invitees-list-item {
 	flex-wrap: wrap;
 }
+
 .invitees-list-item__actions {
 	display: flex;
 }

src/components/Editor/Resources/ResourceRoomType.vue

@@ -82,6 +82,6 @@ export default {
 
 <style scoped>
 :deep(#value) {
-  width: 0;
+	width: 0;
 }
 </style>

src/components/Shared/CalendarPicker.vue

@@ -138,7 +138,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .multiselect__tags {
+:deep(.multiselect__tags) {
 	margin: 3px 0;
 }
 

src/components/Shared/DatePicker.vue

@@ -427,9 +427,11 @@
 .highlighted-timezone-icon {
 	opacity: .7;
 }
+
 :deep(.mx-icon-calendar) {
 	right: 0;
 }
+
 :deep(.multiselect__content-wrapper) {
 	border: none !important;
 	position: relative !important;

src/components/Subscription/PublicCalendarSubscriptionPicker.vue

@@ -199,8 +199,6 @@ export default {
 				color: var(--color-text-maxcontrast)
 			}
 		}
-
-		&__subscribe {}
 	}
 }
 </style>

src/views/Appointments/Booking.vue

@@ -292,7 +292,7 @@ export default {
 	}
 
 	&__time-zone {
-	max-width: 250px;
+		max-width: 250px;
 	}
 
 	&__slot-selection .material-design-icon.loading-icon.animation-rotate {

src/views/Appointments/Overview.vue

@@ -188,11 +188,11 @@ export default {
 
 <style lang="scss">
 #content.app-calendar {
-  // Enable scrolling
-  overflow: auto;
+	// Enable scrolling
+	overflow: auto;
 
-  // Fix box being cutoff at the bottom
-  margin-bottom: 0;
-  height: calc(var(--body-height) + var(--body-container-margin));
+	// Fix box being cutoff at the bottom
+	margin-bottom: 0;
+	height: calc(var(--body-height) + var(--body-container-margin));
 }
 </style>