nextcloud · skjnldsv · Nov 19, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
diff --git a/.github/workflows/lint-stylelint.yml b/.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@eef61447b9ff4aafe5dcd4e0bbf5d482be7e7871 # v4.2.1
+
+      - 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@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        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
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
@@ -507,7 +507,6 @@ export default {
 .panel, .panels > div {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	width: 320px;
 	max-width: 100%;
 	margin: 16px;
@@ -532,7 +531,8 @@ export default {
 		padding: 16px;
 		cursor: grab;
 
-		&, ::v-deep * {
+		&,
+		:deep(*) {
 			-webkit-touch-callout: none;
 			-webkit-user-select: none;
 			-khtml-user-select: none;
@@ -618,11 +618,10 @@ export default {
 .button,
 .button-vue,
 .edit-panels,
-.statuses ::v-deep .action-item .action-item__menutoggle,
-.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+.statuses :deep(.action-item .action-item__menutoggle),
+.statuses :deep(.action-item.action-item--open .action-item__menutoggle) {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	background-color: var(--color-main-background-blur);
 	-webkit-backdrop-filter: var(--filter-background-blur);
 	backdrop-filter: var(--filter-background-blur);

diff --git a/apps/dashboard/src/components/ApiDashboardWidget.vue b/apps/dashboard/src/components/ApiDashboardWidget.vue
@@ -117,6 +117,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/apps/dav/src/components/AbsenceForm.vue b/apps/dav/src/components/AbsenceForm.vue
@@ -261,7 +261,7 @@ export default {
 		&__picker {
 			flex: 1 auto;
 
-			::v-deep .native-datetime-picker--input {
+			:deep(.native-datetime-picker--input) {
 				margin-bottom: 0;
 			}
 		}

diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue
@@ -139,30 +139,37 @@ export default {
 	padding: 0 10px 0 10px;
 	position: absolute;
 }
+
 :deep(.availability-slots) {
 	display: flex;
 	white-space: normal;
 }
+
 :deep(.availability-slot) {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	flex-wrap: wrap;
 }
+
 :deep(.availability-slot-group) {
 	display: flex;
 	flex-direction: column;
 }
+
 :deep(.mx-input-wrapper) {
 	width: 85px;
 }
+
 :deep(.mx-datepicker) {
 	width: 97px;
 }
+
 :deep(.multiselect) {
 	border: 1px solid var(--color-border-dark);
 	width: 120px;
 }
+
 .time-zone {
 	padding-block: 32px 12px;
 	padding-inline: 0 12px;
@@ -175,6 +182,7 @@ export default {
 		font-weight: bold;
 	}
 }
+
 .grid-table {
 	display: grid;
 	margin-bottom: 32px;
@@ -183,9 +191,11 @@ export default {
 	grid-template-columns: min-content auto min-content;
 	max-width: 500px;
 }
+
 .button {
 	align-self: flex-end;
 }
+
 :deep(.label-weekday) {
 	position: relative;
 	display: inline-flex;

diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
@@ -156,6 +156,7 @@ export default {
 	* :deep(a) {
 		text-decoration: underline;
 	}
+
 	.settings-hint {
 		margin-top: -.2em;
 		margin-bottom: 1em;

@@ -350,7 +350,6 @@ export default defineComponent({
 	--icon-preview-size: 32px;
 
 	--fixed-block-start-position: var(--default-clickable-area);
-
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;
@@ -453,7 +452,6 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			width: 100%;
-			user-select: none;
 			border-block-end: 1px solid var(--color-border);
 			box-sizing: border-box;
 			user-select: none;
@@ -764,7 +762,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
 	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
 	--checkbox-padding: 0px;
-
 	display: grid;
 	grid-template-columns: repeat(auto-fill, var(--row-width));
 
@@ -787,8 +784,8 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	.files-list__row-checkbox {
 		position: absolute;
 		z-index: 9;
-		top: calc(var(--item-padding)/2);
-		inset-inline-start: calc(var(--item-padding)/2);
+		top: calc(var(--item-padding) / 2);
+		inset-inline-start: calc(var(--item-padding) / 2);
 		overflow: hidden;
 		--checkbox-container-size: 44px;
 		width: var(--checkbox-container-size);

@@ -38,5 +38,3 @@ export default {
 	},
 }
 </script>
-<style>
-</style>
@@ -198,7 +198,7 @@ export default {
 	&__title {
 		overflow: hidden;
 		// also count preview border
-		max-width: calc(var(--width) + 2*2px);
+		max-width: calc(var(--width) + 2 * 2px);
 		padding: var(--margin);
 		white-space: nowrap;
 		text-overflow: ellipsis;

@@ -206,10 +206,12 @@ export default {
 .middle-align {
 	vertical-align: middle;
 }
+
 p {
 	margin-top: 12px;
 	margin-bottom: 12px;
 }
+
 .new-owner-row {
 	display: flex;
 	flex-wrap: wrap;
@@ -229,6 +231,7 @@ p {
 		max-width: 280px;
 	}
 }
+
 .transfer-select-row {
 	span {
 		margin-inline-end: 8px;

@@ -24,7 +24,7 @@
 		getters: {
 			/**
 			 * Get a file or folder by its source
 			 * @param state
 			 */
 			getNode: (state) => (source: FileSource): Node|undefined => state.files[source],

@@ -58,7 +58,7 @@
 			 *
 			 * @param service The service (files view)
 			 * @param path The path relative within the service
-			 * @returns Array of cached nodes within the path
+			 * @return Array of cached nodes within the path
 			 */
 			getNodesByPath(service: string, path?: string): Node[] {
 				const pathsStore = usePathsStore()

@@ -201,19 +201,15 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-// TODO: remove when https://github.com/nextcloud/nextcloud-vue/pull/3539 is in
-.app-navigation::v-deep .app-navigation-entry-icon {
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.app-navigation::v-deep .app-navigation-entry.active .button-vue.icon-collapse:not(:hover) {
-	color: var(--color-primary-element-text);
-}
+.app-navigation {
+	:deep(.app-navigation-entry.active .button-vue.icon-collapse:not(:hover)) {
+		color: var(--color-primary-element-text);
+	}
 
-.app-navigation > ul.app-navigation__list {
-	// Use flex gap value for more elegant spacing
-	padding-bottom: var(--default-grid-baseline, 4px);
+	> ul.app-navigation__list {
+		// Use flex gap value for more elegant spacing
+		padding-bottom: var(--default-grid-baseline, 4px);
+	}
 }
 
 .app-navigation-entry__settings {

@@ -612,7 +612,7 @@ export default {
 	}
 
 	.svg-icon {
-		::v-deep svg {
+		:deep(svg) {
 			width: 20px;
 			height: 20px;
 			fill: currentColor;

@@ -313,15 +313,15 @@ export default defineComponent({
 		padding: calc(var(--margin) * 2) var(--margin);
 		position: sticky;
 		bottom: 0;
-		background-image: linear-gradient(0, var(--gradient-main-background));
+		background-image: linear-gradient(0deg, var(--gradient-main-background));
 
 		button, input[type='submit'] {
 			height: 44px;
 		}
 	}
 
 	// Make sure we're relative for the loading emptycontent on top
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		position: relative;
 	}
 

diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css
diff --git a/apps/files_external/css/settings.css.map b/apps/files_external/css/settings.css.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,5 +38,3 @@ export default { @@
     	},
     }
     </script>
-    <style>
-    </style>