Fix stylelint issues

Reviewers: #reviewers

Subscribers: jenkins-user

Differential Revision: https://hub.sealcode.org/D1598

.arclint

@@ -2,8 +2,8 @@
 	"linters": {
 		"stylelint": {
 			"type": "script-and-regex",
-      "script-and-regex.script": "2>&1 npx stylelint",
-      "script-and-regex.regex": "/^(?P<message>.*)$/m",
+			"script-and-regex.script": "node stylelint-arcanist-formatter.mjs",
+			"script-and-regex.regex": "/^(?P<severity>[^|]*)\\|(?P<name>[^|]*)\\|(?P<line>[^|]*)\\|(?P<char>[^|]*)\\|(?P<message>[^|]*)$/m",
 			"include": ["(\\.css$)"],
 			"exclude": []
 		}

.stylelintrc.json

@@ -1,8 +1,34 @@
 {
 	"extends": ["stylelint-config-standard"],
+	"ignoreFiles": [
+		"./coverage/**",
+		"public/**",
+		"./node_modules",
+		"docker_node_modules/**"
+	],
+	"globbyOptions": { "gitignore": true },
 	"rules": {
 		"selector-class-pattern": null,
 		"import-notation": "string",
-		"color-hex-length": null
+		"color-hex-length": null,
+		"custom-property-empty-line-before": null,
+		"color-function-notation": null,
+		"hue-degree-notation": "number",
+		"value-keyword-case": null,
+		"length-zero-no-unit": null,
+		"declaration-empty-line-before": null,
+		"shorthand-property-no-redundant-values": null,
+		"alpha-value-notation": null,
+		"number-max-precision": 6,
+		"rule-empty-line-before": [
+			"always",
+			{
+				"except": ["after-single-line-comment", "first-nested"]
+			}
+		],
+		"declaration-block-no-redundant-longhand-properties": [
+			true,
+			{ "ignoreShorthands": ["place-self", "gap", "grid-gap"] }
+		]
 	}
 }

jenkins.sanity.sh

@@ -14,11 +14,66 @@ export SEALIOUS_BASE_URL
 
 ./npm.sh run lint-report
 
-node -e 'console.log(JSON.stringify(JSON.parse(fs.readFileSync("./.eslint-result.json")).map(fileResult => fileResult.messages.map(message=>({...message, path: fileResult.filePath.replace("/opt/sealious-app/", "")}))).flat().map(message=>({name: message.ruleId, code: message.ruleId, severity: message.severity==1 ? "warning" : "error", path: message.path, line: message.line, char: message.column, description: message.message}))))' \
-	>lint-report.json
+parse_command=$(cat << EOM
+console.log(
+  JSON.stringify([
+    ...JSON.parse(fs.readFileSync("./.eslint-result.json", "utf-8"))
+      .map((fileResult) =>
+        fileResult.messages.map((message) => ({
+          ...message,
+          path: fileResult.filePath.replace("/opt/sealious-app/", ""),
+        })),
+      )
+      .flat()
+      .map((message) => ({
+        name: message.ruleId,
+        code: message.ruleId,
+        severity: message.severity == 1 ? "warning" : "error",
+        path: message.path,
+        line: message.line,
+        char: message.column,
+        description: message.message,
+      })),
+    ...JSON.parse(fs.readFileSync("./.stylelint-result.json", "utf-8"))
+      .map((fileResult) =>
+        fileResult.warnings.map((message) => ({
+          ...message,
+          path: fileResult.source.replace("/opt/sealious-app/", ""),
+        })),
+      )
+      .flat()
+      .map((message) => ({
+        name: message.rule,
+        code: message.rule,
+        severity: message.severity,
+        path: message.path,
+        line: message.line,
+        char: message.column,
+        description: message.text,
+      })),
+  ]),
+);
+
+EOM
+)
+
+node -e "$parse_command" > lint-report.json
 
 docker-compose up -d meilisearch mailcatcher
 
+
+CONTAINER_ID=$(docker compose run -d --user="$UID" \
+	-e "SEALIOUS_MONGO_PORT=27017" \
+	-e "SEALIOUS_MONGO_HOST=db" \
+	-e "SEALIOUS_PORT=8080" \
+	-e "SEALIOUS_BASE_URL=$SEALIOUS_BASE_URL" \
+	-e "MEILISEARCH_HOST=http://meilisearch:7700" \
+	-e "SEALIOUS_MAILCATCHER_HOST=mailcatcher" \
+	-e "SEALIOUS_MAILCATCHER_API_PORT=1080" \
+	-e "SEALIOUS_MAILCATCHER_SMTP_PORT=1025" \
+	-e "FORCE_COLOR=0" \
+	test npx playwright install firefox)
+
 CONTAINER_ID=$(docker compose run -d --user="$UID" \
 	-e "SEALIOUS_MONGO_PORT=27017" \
 	-e "SEALIOUS_MONGO_HOST=db" \

package.json

@@ -18,9 +18,13 @@
 		"pretest": "npm run build && docker compose up -d",
 		"test": "node test.cjs",
 		"prepare": "husky",
-		"stylelint": "stylelint **/*.css",
-		"lint": "eslint src && npm run stylelint",
-		"lint-report": "npm run --silent lint -- --format json > .eslint-result.json",
+		"lint-css": "stylelint \"**/*.css\" --config ./.stylelintrc.json",
+		"lint-css-fix": "npm run lint-css -- --fix",
+		"lint-css-report": "npm run --silent lint-css -- --formatter json --output-file .stylelint-result.json",
+		"lint-js": "eslint src",
+		"lint-js-report": "npm run --silent lint-js -- --format json > .eslint-result.json",
+		"lint": "npm run lint-js && npm run lint-css",
+		"lint-report": "npm run lint-js-report && npm run lint-css-report",
 		"pretest-reports": "npm run build --ignore-scripts && rm -fr .xunit coverage",
 		"test-reports": "npx c8  --exclude \"\" ./node_modules/.bin/mocha --recursive --timeout=10000 --require source-map-support/register  'dist/**/*.test.js' --exit && c8 report --reporter cobertura --exclude \"\"",
 		"precover-html": "rm -rf coverage/lcov-report",

src/back/global_styles/vars.css

@@ -36,18 +36,19 @@
 	--white-bg-link: #404f6e;
 	--white-on-darker-bg-text: #fff;
 
-	/*px / 24 = N rem*/
+	/* px / 24 = N rem */
 	--container-width: 50rem;
 
 	/* Fonts */
-	--font-sans-serif: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont,
-		avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto,
-		helvetica, arial, sans-serif;
+	--font-sans-serif:
+		"Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, avenir next, avenir,
+		segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial,
+		sans-serif;
 
 	--font-slab-serif: "Zilla Slab", serif;
-	--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
-		Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji,
-		Segoe UI Symbol;
+	--font-serif:
+		Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times,
+		Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 	--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
 	--font-industrial: Anton;
 

src/back/jdd-components/autoscrolling-images/autoscrolling-images.css

@@ -10,10 +10,33 @@
 	gap: 24px;
 }
 
+.autoscrolling-images__img-wrapper {
+	width: 288px;
+	height: 150px;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+
 .autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
 	background-color: white;
 }
 
+.autoscrolling-images__carousel-container {
+	position: relative;
+	max-width: min(940px, calc(100dvw - 48px));
+
+	picture,
+	img {
+		max-height: 150px;
+		max-width: 288px;
+	}
+}
+
+.autoscrolling-images__arrow img {
+	max-width: 30px;
+}
+
 .autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper,
 .autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
 	img {
@@ -69,10 +92,6 @@
 	flex: 1 0 100%;
 }
 
-.autoscrolling-images__arrow img {
-	max-width: 30px;
-}
-
 .autoscrolling-images__arrow:hover {
 	cursor: pointer;
 }
@@ -81,17 +100,6 @@
 	transform: rotate(180deg);
 }
 
-.autoscrolling-images__carousel-container {
-	position: relative;
-	max-width: min(940px, calc(100dvw - 48px));
-
-	picture,
-	img {
-		max-height: 150px;
-		max-width: 288px;
-	}
-}
-
 .autoscrolling-images__imgs-carousel {
 	overflow-x: clip;
 }
@@ -133,14 +141,6 @@
 	right: 100%;
 }
 
-.autoscrolling-images__img-wrapper {
-	width: 288px;
-	height: 150px;
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-}
-
 .autoscrolling-images__radio {
 	display: none;
 }
@@ -165,10 +165,11 @@
 	background-color: var(--color-brand-accent-04);
 }
 
-@keyframes autoscrolling-images-infiniteScroll {
+@keyframes autoscrolling-images-infinite-scroll {
 	0% {
 		transform: translateX(0%);
 	}
+
 	100% {
 		transform: translateX(calc(-100% - var(--gap-between-horizontal-images)));
 	}
@@ -192,6 +193,10 @@
 	.autoscrolling-images__carousel {
 		max-width: none;
 		width: max-content;
+		animation-name: autoscrolling-images-infinite-scroll;
+		animation-duration: var(--animation-length);
+		animation-iteration-count: infinite;
+		animation-timing-function: linear;
 	}
 
 	.autoscrolling-images__carousel-container {
@@ -211,13 +216,6 @@
 		min-width: 288px;
 	}
 
-	.autoscrolling-images__carousel {
-		animation-name: autoscrolling-images-infiniteScroll;
-		animation-duration: var(--animation-length);
-		animation-iteration-count: infinite;
-		animation-timing-function: linear;
-	}
-
 	.autoscrolling-images__carousel-page--looping-head,
 	.autoscrolling-images__carousel-page--looping-tail {
 		display: flex;

src/back/jdd-components/countdown/countdown.css

@@ -2,12 +2,15 @@
 	0% {
 		opacity: 1;
 	}
+
 	49% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 0;
 	}

src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css

@@ -1,2 +0,0 @@
-.custom-css-wrapper {
-}

src/back/jdd-components/dynamic-grid/dynamic-grid.css

@@ -10,6 +10,7 @@
 		padding: 0;
 		border-bottom: 1px solid var(--color-brand-text-bg);
 		margin-bottom: 36px;
+
 		.tabs-menu-button {
 			display: flex;
 			margin-bottom: -1px;
@@ -17,13 +18,16 @@
 			background: var(--color-brand-text-bg);
 			color: var(--color-brand-text-fg);
 			font-size: 12px;
-			transition: border 200ms, color 200ms;
+			transition:
+				border 200ms,
+				color 200ms;
 
 			label {
 				padding: 12px 15px;
 				cursor: pointer;
 			}
 		}
+
 		.tabs-menu-button:hover {
 			border-top-color: var(--color-brand-text-fg);
 			color: var(--color-brand-text-fg);
@@ -71,6 +75,7 @@
 						line-height: 20px;
 						height: 103px;
 						overflow: hidden;
+
 						.tile-title {
 							font-weight: bold;
 							line-height: 20px;
@@ -91,6 +96,7 @@
 					z-index: 0;
 					width: 100%;
 					height: 100%;
+
 					picture {
 						height: 100%;
 						width: 100% !important;
@@ -173,10 +179,12 @@
 				min-width: 240px;
 				line-height: 23px;
 				font-size: 16px;
+
 				&.accent {
 					background-color: var(--color-brand-accent);
 					--text-color: var(--color-brand-text-on-accent);
 				}
+
 				&.accent2 {
 					background-color: var(--color-brand-accent2);
 					--text-color: var(--color-brand-text-on-accent2);
@@ -184,6 +192,7 @@
 			}
 		}
 	}
+
 	@container (max-width: 950px) {
 		.tab-container {
 			.tiles-container {

src/back/jdd-components/faq-component/faq-component.css

@@ -8,19 +8,27 @@
 		gap: 16px;
 	}
 
-	.title-container {
-		text-align: center;
-		display: grid;
-		gap: 16px;
-	}
-
 	.title {
 		font-size: 32px;
 		color: var(--color-brand-text-accent);
 		line-height: 38.3px;
 	}
 
+	.answer {
+		font-size: 16px;
+		line-height: 24px;
+	}
+
+	.answer p {
+		margin-top: 0;
+		white-space: pre-line;
+	}
+
 	.title-container {
+		text-align: center;
+		display: grid;
+		gap: 16px;
+
 		.content {
 			p {
 				display: inline;
@@ -60,7 +68,6 @@
 		display: grid;
 		border-radius: 10px;
 		padding: 0 16px;
-		/* padding: 16px; */
 		gap: 16px;
 
 		&.question-container--accent {
@@ -98,16 +105,6 @@
 		transform: rotate(90deg);
 	}
 
-	.answer {
-		font-size: 16px;
-		line-height: 24px;
-	}
-
-	.answer p {
-		margin-top: 0;
-		white-space: pre-line;
-	}
-
 	.button-container {
 		display: flex;
 		justify-content: center;
@@ -137,13 +134,16 @@
 			line-height: 21px;
 			padding: 10px 0;
 		}
+
 		.answer p {
 			font-size: 14px;
 			line-height: 21px;
 		}
+
 		.container {
 			gap: 24px;
 		}
+
 		.question-container {
 			gap: 8px;
 		}

src/back/jdd-components/header-with-image/header-with-image.css

@@ -29,6 +29,9 @@
 
 		picture {
 			max-width: 100cqw;
+			width: 100%;
+			border-radius: 10px;
+
 			img {
 				border-radius: 10px;
 			}
@@ -52,11 +55,6 @@
 		line-height: 48px;
 	}
 
-	.img-container picture {
-		width: 100%;
-		border-radius: 10px;
-	}
-
 	.content {
 		font-size: 20px;
 		line-height: 30px;
@@ -99,19 +97,17 @@
 			gap: 0;
 		}
 
-		.container {
-			grid-template-columns: 1fr;
-		}
-
 		.img-container {
 			grid-column: 1/1;
 			grid-row: auto;
 			order: 2;
+			margin-top: 16px;
 		}
 
 		.container > div {
 			grid-column: 1/1;
 			padding: 0 16px;
+			max-width: 650px;
 		}
 
 		.container > .img-container {
@@ -122,6 +118,7 @@
 			order: 3;
 			display: flex;
 			justify-content: center;
+			margin-top: 16px;
 		}
 
 		.title {
@@ -137,17 +134,5 @@
 			font-size: 18px;
 			line-height: 27px;
 		}
-
-		.img-container {
-			margin-top: 16px;
-		}
-
-		.button-container {
-			margin-top: 16px;
-		}
-
-		.container > div {
-			max-width: 650px;
-		}
 	}
 }

src/back/jdd-components/horizontal-gallery/horizontal-gallery.css

@@ -1,5 +1,6 @@
 .horizontal-gallery {
 	--max-image-width: 600px;
+
 	.horizontal-gallery__top-bar {
 		display: flex;
 		gap: 16px;
@@ -15,6 +16,7 @@
 			flex-grow: 1;
 			margin-top: 0;
 			margin-bottom: 0;
+
 			@container (max-width: 600px) {
 				font-size: 28px;
 				line-height: 34px;
@@ -54,6 +56,7 @@
 
 	.horizontal-scroller__element-container {
 		scrollbar-width: none;
+
 		&::-webkit-scrollbar {
 			width: 0px;
 			height: 0;

src/back/jdd-components/map-with-pins/map-with-pins.css

@@ -1,6 +1,20 @@
 .map-with-pins {
 	height: 534px;
 
+	.button {
+		display: inline-block;
+		margin: 0 auto;
+		text-align: center;
+		text-decoration: none;
+		border-radius: 25px;
+		text-transform: uppercase;
+		padding: 4px 25px;
+
+		min-width: 170px;
+		line-height: 18px;
+		font-size: 12px;
+	}
+
 	.popup {
 		.leaflet-popup-content-wrapper,
 		.leaflet-popup-tip {
@@ -10,6 +24,7 @@
 		.leaflet-popup-content {
 			margin: 0;
 		}
+
 		.leaflet-popup-content-wrapper {
 			padding: 22px;
 		}
@@ -21,13 +36,14 @@
 			background-color: var(--color-brand-accent);
 			color: var(--color-brand-text-on-accent);
 		}
+
 		.button {
 			background-color: var(--color-brand-accent);
-			color: var(--color-brand-text-on-accent);
 			border: 1px solid var(--color-brand-text-on-accent);
 			color: var(--color-brand-text-on-accent);
 		}
 	}
+
 	&.map-with-pins--theme-accent2 {
 		.leaflet-popup-content-wrapper,
 		.leaflet-popup-tip {
@@ -37,7 +53,6 @@
 
 		.button {
 			background-color: var(--color-brand-accent2);
-			color: var(--color-brand-text-on-accent2);
 			border: 1px solid var(--color-brand-text-on-accent2);
 			color: var(--color-brand-text-on-accent2);
 		}
@@ -58,18 +73,4 @@
 		font-size: 12px;
 		line-height: 21px;
 	}
-
-	.button {
-		display: inline-block;
-		margin: 0 auto;
-		text-align: center;
-		text-decoration: none;
-		border-radius: 25px;
-		text-transform: uppercase;
-		padding: 4px 25px;
-
-		min-width: 170px;
-		line-height: 18px;
-		font-size: 12px;
-	}
 }

src/back/jdd-components/ordered-pictogram-tiles/ordered-pictogram-tiles.css

@@ -21,6 +21,7 @@
 .pictogram-tiles__tile:nth-child(odd) {
 	grid-column: 2;
 }
+
 .pictogram-tiles__tile:only-child {
 	grid-column: 1 / span 2;
 	max-width: 23rem;
@@ -35,6 +36,7 @@
 	display: flex;
 	justify-content: space-between;
 }
+
 .pictogram-tiles__upperSection span {
 	font-family: var(--font-sans-serif);
 	font-weight: 800;
@@ -43,6 +45,7 @@
 	padding-bottom: 1rem;
 	position: relative;
 }
+
 .pictogram-tiles__upperSection span::after {
 	content: "";
 	position: absolute;
@@ -53,6 +56,7 @@
 	background-color: #000000;
 	opacity: 25%;
 }
+
 .pictogram-tiles__upperSection img {
 	align-self: flex-start;
 }
@@ -139,10 +143,12 @@
 		display: block;
 		grid-template-columns: auto;
 	}
+
 	.pictogram-tiles__tile {
 		max-width: 21rem;
 		margin: 0 auto;
 	}
+
 	.pictogram-tiles__tile:nth-child(odd) {
 		grid-column: auto;
 	}
@@ -156,6 +162,7 @@
 	.pictogram-tiles {
 		padding: 0;
 	}
+
 	.pictogram-tiles__content {
 		padding: 2rem 1rem;
 	}

src/back/jdd-components/photo/photo.css

@@ -1,6 +1,7 @@
 .image-jdd {
 	picture {
 		border-radius: 10px;
+
 		img {
 			width: auto;
 			border-radius: 10px;

src/back/jdd-components/table/table.css

@@ -1,2 +0,0 @@
-.table {
-}

src/back/jdd-components/text-image-block/text-image-block.css

@@ -50,6 +50,7 @@
 	justify-content: center;
 	gap: 1rem;
 }
+
 .tib__body--image-on-right {
 	flex-direction: row;
 }
@@ -57,6 +58,7 @@
 .tib__body--image-on-left {
 	flex-direction: row-reverse;
 }
+
 .tib__body-left,
 .tib__body-right {
 	padding: 1rem 1rem 0 1rem;
@@ -96,15 +98,19 @@
 	.tib__body--image-on-right {
 		flex-direction: column;
 	}
+
 	.tib__body--image-on-left {
 		flex-direction: column-reverse;
 	}
+
 	.tib__body-right {
 		width: 350px;
 	}
+
 	.tib__body-left {
 		width: 350px;
 	}
+
 	.tib picture {
 		margin: 0;
 	}
@@ -115,10 +121,12 @@
 		min-width: unset;
 		width: 100%;
 	}
+
 	.tib__body-left {
 		min-width: unset;
 		width: 100%;
 	}
+
 	.tib__body {
 		padding: 1rem;
 	}

src/back/routes/admin/forms.admin-forms.css

@@ -110,10 +110,12 @@ body:not(*:has(.jdd-container)) .form-container {
 		.form-input__wrapper--type--table {
 			ul {
 				padding-left: 0;
+
 				li {
 					list-style: none;
 				}
 			}
+
 			&.form-input__wrapper--options-count--5-or-more {
 				grid-row: span 2;
 			}

src/back/routes/common/sortable/sortable.css

@@ -7,6 +7,7 @@
 		transform: scale(1);
 	}
 }
+
 .sortable-wrapper {
 	.edge-detector {
 		height: 30px;
@@ -48,14 +49,20 @@
 			animation: sortable-enter 100ms;
 
 			&.is-dragged {
-				opacity: 0.2;
+				opacity: 20%;
 			}
 		}
 
+		.sortable__spacer {
+			grid-column: 1/2;
+			grid-row: calc((var(--index) + 1) * 3 + 3) / calc((var(--index) + 1) * 3 + 4);
+			transition: all 200ms;
+			height: 8px;
+		}
+
 		.sortable__hole {
 			grid-column: 1/2;
 			z-index: 1;
-			/* background-color: red; */
 			pointer-events: none;
 			grid-row: calc((var(--index) + 1) * 3 + 2) / calc((var(--index) + 1) * 3 + 5);
 
@@ -69,12 +76,5 @@
 				pointer-events: all;
 			}
 		}
-
-		.sortable__spacer {
-			grid-column: 1/2;
-			grid-row: calc((var(--index) + 1) * 3 + 3) / calc((var(--index) + 1) * 3 + 4);
-			transition: all 200ms;
-			height: 8px;
-		}
 	}
 }

src/back/routes/common/tabs/tabs.css

@@ -16,6 +16,7 @@
 			}
 		}
 	}
+
 	.tabs__tab {
 		display: none;
 	}

src/back/routes/common/ui/input.css

@@ -1,6 +1,3 @@
-.input {
-}
-
 .input__error {
 	color: red;
 }

stylelint-arcanist-formatter.mjs

@@ -0,0 +1,21 @@
+import { default as stylelint } from "stylelint";
+
+const result = await stylelint.lint({
+	files: [process.argv.at(-1)],
+});
+
+console.log(
+	result.results
+		.map((fileResult) =>
+			fileResult.warnings.map((message) => ({
+				...message,
+				path: fileResult.source.replace("/opt/sealious-app/", ""),
+			}))
+		)
+		.flat()
+		.map(
+			(message) =>
+				`${message.severity}|${message.rule}|${message.line}|${message.column}|${message.text}`
+		)
+		.join("\n")
+);