styles(lint): update and improve lint rules

.stylelintrc.json

@@ -1,10 +1,14 @@
 {
-	"extends": "stylelint-config-recommended-scss",
+	"extends": "stylelint-config-standard-scss",
 	"plugins": [
-		"stylelint-scss"
+		"stylelint-scss",
+		"stylelint-order"
 	],
 	"rules": {
 		"no-descending-specificity": null,
-		"scss/comment-no-empty": null
+		"number-max-precision": 12,
+		"custom-property-pattern": null,
+		"scss/comment-no-empty": null,
+		"order/properties-alphabetical-order": true
 	}
 }

_site/scss/styles.scss

@@ -1,8 +1,8 @@
 @use "sass:meta";
 
-/* ==================== */
-/* == Vendors
-/* ==================== */
+// ====================
+// == Vendors
+// ====================
 @layer sseeeedd {
 	@include meta.load-css("sseeeedd/src/sseeeedd");
 }

package.json

@@ -79,7 +79,8 @@
 		"servor": "^4.0.2",
 		"shx": "^0.3.4",
 		"stylelint": "^15.10.3",
-		"stylelint-config-recommended-scss": "^13.0.0",
+		"stylelint-config-standard-scss": "^11.0.0",
+		"stylelint-order": "^6.0.3",
 		"stylelint-scss": "^5.2.1",
 		"terser": "^5.20.0"
 	},

src/_chaarts-bar.scss

@@ -3,9 +3,10 @@
 @use "sass:list";
 @use "abstracts/variables";
 
-/* ==================== */
-/* == Bar Charts
- *
+// ====================
+// == Bar Charts
+
+/*
  * @note Grid charts based on:
  * @see https://css-tricks.com/css-charts-grid-custom-properties/
  * @author Miriam Suzanne
@@ -19,7 +20,7 @@
  * @see https://www.ffoodd.fr/le-web-en-kit/
  * @see http://dabblet.com/gist/08fddf3666c39ebc62ca
  * @author Gaël Poupard
-/* ==================== */
+// ==================== */
 
 .chaarts.bar {
 	caption {
@@ -53,6 +54,7 @@
 	td {
 		--size: calc(var(--scale, 100) * 100%);
 		--position: calc(var(--value, 0) / var(--scale, 100) * 100%);
+
 		background: linear-gradient(to right,
 			var(--chaarts-green),
 			var(--chaarts-gray),
@@ -69,7 +71,6 @@
 
 	span {
 		background: inherit;
-		-webkit-background-clip: text;
 		background-clip: text;
 		color: transparent;
 		font-weight: bold;

src/_chaarts-column.scss

@@ -3,18 +3,20 @@
 @use "sass:list";
 @use "abstracts/variables";
 
-/* ==================== */
-/* == Column Charts
- *
+// ====================
+// == Column Charts
+
+/*
  * @note Grid charts based on:
  * @see https://css-tricks.com/css-charts-grid-custom-properties/
  * @author Miriam Suzanne
-/* ==================== */
+// ==================== */
 
 .chaarts[class*="column"] {
 	--gap: #{variables.$gutter * 0.5};
 	--size: calc(var(--scale, 100) * 100%);
 	--width: calc(#{variables.$width} / var(--y) - #{variables.$gutter});
+
 	display: grid;
 	grid-column-gap: var(--gap);
 	max-block-size: variables.$width;
@@ -47,6 +49,7 @@
 
 	td {
 		--integer: calc(var(--value));
+
 		grid-row: list.slash(calc((var(--scale, 100) + 2) - var(--integer)), -2);
 		pointer-events: none;
 		position: relative;
@@ -61,16 +64,15 @@
 
 	span {
 		background: inherit;
-		-webkit-background-clip: text;
 		background-clip: text;
-		inset-block-end: 100%;
 		color: transparent;
 		font-weight: bold;
+		inset-block-end: 100%;
+		inset-inline-end: 0;
 		inset-inline-start: 0;
 		line-height: 1.5;
 		pointer-events: auto;
 		position: absolute;
-		inset-inline-end: 0;
 
 		@media (prefers-contrast: more) {
 			background: var(--background-lighter);
@@ -84,8 +86,8 @@
 		grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, .25rem)) minmax(min-content, 2rem);
 
 		tbody th {
-			grid-row: -6 / -3;
 			grid-column: 1;
+			grid-row: -6 / -3;
 			line-height: 1;
 		}
 
@@ -95,6 +97,7 @@
 
 		td {
 			--position: calc(var(--integer, 0) / var(--scale, 100) * 100%);
+
 			background: linear-gradient(to top,
 				var(--chaarts-green),
 				var(--chaarts-gray),
@@ -114,14 +117,14 @@
 			&::after {
 				background: var(--background) var(--stripes);
 				background-blend-mode: exclusion;
-				inset-block-end: #{variables.$gutter * 4};
 				content: "";
+				inline-size: var(--width);
+				inset-block-end: #{variables.$gutter * 4};
+				inset-block-start: variables.$gutter;
 				mix-blend-mode: color;
 				opacity: 0;
 				position: absolute;
 				transition: opacity .3s var(--move);
-				inset-block-start: variables.$gutter;
-				inline-size: var(--width);
 				z-index: 0;
 			}
 
@@ -158,8 +161,8 @@
 		}
 
 		thead tr * {
-			grid-row: -2;
 			grid-column: 1;
+			grid-row: -2;
 
 			@each $number in 2, 3, 4, 5, 6 {
 				&:nth-of-type(#{$number}) {
@@ -183,14 +186,14 @@
 			&:nth-child(even)::after {
 				background: var(--background) var(--stripes);
 				background-blend-mode: exclusion;
-				inset-block-end: #{variables.$gutter * 4};
 				content: "";
+				inline-size: calc((var(--width) * 2) + (var(--gap) / 2) + 1px);
+				inset-block-end: #{variables.$gutter * 4};
+				inset-block-start: calc(#{variables.$gutter} + 2ex);
 				mix-blend-mode: color;
 				opacity: .25;
 				position: absolute;
 				transition: opacity .3s var(--move);
-				inset-block-start: calc(#{variables.$gutter} + 2ex);
-				inline-size: calc((var(--width) * 2) + (var(--gap) / 2) + 1px);
 				z-index: 0;
 			}