style: unite and reorder CSS rules

.stylelintrc

@@ -1,10 +1,11 @@
 {
   "ignoreDisables": true,
-  "extends": "stylelint-config-standard-scss",
+  "extends": [
-  "plugins": [
+    "stylelint-config-standard-scss",
-    "stylelint-scss",
+    "stylelint-config-hudochenkov/order"
-    "stylelint-order"
   ],
+  "plugins": ["stylelint-scss"]
+  ,
   "rules": {
     "alpha-value-notation": "number",
     "at-rule-empty-line-before": null,
@@ -13,83 +14,9 @@
     "color-hex-case": "lower",
     "import-notation": null,
     "max-nesting-depth": 5,
+    "no-invalid-position-at-import-rule": null,
     "number-leading-zero": "never",
     "property-no-vendor-prefix": true,
-    "rule-empty-line-before": null,
+    "rule-empty-line-before": null
-    "order/properties-alphabetical-order": null,
-    "order/properties-order": [
-      "position",
-      "top",
-      "bottom",
-      "right",
-      "left",
-      "display",
-      "align-items",
-      "justify-content",
-      "float",
-      "clear",
-      "overflow",
-      "overflow-x",
-      "overflow-y",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bogttom",
-      "margin-left",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "width",
-      "min-width",
-      "max-width",
-      "height",
-      "min-height",
-      "max-height",
-      "font-size",
-      "font-family",
-      "font-weight",
-      "text-align",
-      "text-justify",
-      "text-indent",
-      "text-overflow",
-      "text-decoration",
-      "white-space",
-      "color",
-      "background",
-      "background-position",
-      "background-repeat",
-      "background-size",
-      "background-color",
-      "background-clip",
-      "border",
-      "border-style",
-      "border-width",
-      "border-color",
-      "border-top-style",
-      "border-top-width",
-      "border-top-color",
-      "border-right-style",
-      "border-right-width",
-      "border-right-color",
-      "border-bottom-style",
-      "border-bottom-width",
-      "border-bottom-color",
-      "border-left-style",
-      "border-left-width",
-      "border-left-color",
-      "border-radius",
-      "opacity",
-      "filter",
-      "list-style",
-      "outline",
-      "visibility",
-      "z-index",
-      "box-shadow",
-      "text-shadow",
-      "resize",
-      "transition"
-    ]
   }
 }

package-lock.json

@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "x-markdown-css",
-      "version": "0.0.0-20230229.1",
+      "version": "0.0.0-20230302.2",
       "license": "MIT",
       "dependencies": {
         "coffeescript": "^2.7.0",
@@ -23,8 +23,8 @@
         "postcss": "^8.4.21",
         "postcss-preset-env": "^8.0.1",
         "stylelint": "^15.2.0",
+        "stylelint-config-hudochenkov": "^9.0.0",
         "stylelint-config-standard-scss": "^7.0.1",
-        "stylelint-order": "^6.0.2",
         "stylelint-scss": "^4.4.0"
       },
       "engines": {
@@ -4170,6 +4170,7 @@
       "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.1.tgz",
       "integrity": "sha512-go9Zoxx7KQH+uLrJ9xa5wRErFeXu01ydA6O8m7koPXkmAN7Ts//eRcIqjo0stBR4+Nir2gMYDOWAOx7O5EPUZA==",
       "dev": true,
+      "peer": true,
       "peerDependencies": {
         "postcss": "^8.4.20"
       }
@@ -4828,6 +4829,16 @@
         "url": "https://opencollective.com/stylelint"
       }
     },
+    "node_modules/stylelint-config-hudochenkov": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-hudochenkov/-/stylelint-config-hudochenkov-9.0.0.tgz",
+      "integrity": "sha512-IOiSA2URkeIxEbn/Vl7OnkovjFci2o5n4qdC8gMuVkygeqCt7y3JJvagbRGgBoIvr3ldus/WBIEHRr+y8ZLXMw==",
+      "dev": true,
+      "peerDependencies": {
+        "stylelint": "^15.0.0",
+        "stylelint-order": "^6.0.2"
+      }
+    },
     "node_modules/stylelint-config-recommended": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
@@ -4893,6 +4904,7 @@
       "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.2.tgz",
       "integrity": "sha512-yuac0BE6toHd27wUPvYVVQicAJthKFIv1HPQFH3Q0dExiO3Z6Uam7geoO0tUd5Z9ddsATYK++1qWNDX4RxMH5Q==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "postcss": "^8.4.21",
         "postcss-sorting": "^8.0.1"

package.json

@@ -51,8 +51,8 @@
     "postcss": "^8.4.21",
     "postcss-preset-env": "^8.0.1",
     "stylelint": "^15.2.0",
+    "stylelint-config-hudochenkov": "^9.0.0",
     "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-order": "^6.0.2",
     "stylelint-scss": "^4.4.0"
   }
 }

src/scss/markdown.scss

@@ -1,6 +1,6 @@
 .markdown-body {
-  font-family: var(--xm-font-regular) !important;
   color: var(--xm-c-general);
+  font-family: var(--xm-font-regular) !important;
   pre {
     &:not(.shiki, .highlight) {
       margin: 0;
@@ -25,9 +25,9 @@
     width: 100%;
   }
   a {
+    border-bottom: 1px solid var(--xm-c-link-border);
     font-weight: inherit;
     text-decoration: none;
-    border-bottom: 1px solid var(--xm-c-link-border);
     transition: border .3s ease-in-out;
     &:hover {
       border-bottom: 1px solid var(--xm-c-general);
@@ -37,8 +37,8 @@
     }
   }
   hr {
-    margin: 2rem auto;
     width: 50px;
+    margin: 2rem auto;
   }
   blockquote,
   q {
@@ -83,9 +83,9 @@ html:not(.dark) .shiki-dark,
   margin-top: .125rem;
   margin-left: -1.2rem;
   padding-right: .5rem;
-  font-size: .85rem;
-  text-decoration: none;
   border: 0 !important;
+  font-size: .875rem;
+  text-decoration: none;
   opacity: 0;
   &:hover,
   &:focus {

src/scss/partial/_container.scss

@@ -1,6 +1,6 @@
 @mixin container {
   max-width: fit-content;
-  font-size: 1rem;
   color: var(--xm-c-general);
+  font-size: 1rem;
   line-height: 1.75;
 }

src/scss/partial/code.scss

@@ -1,8 +1,8 @@
 code {
-  font-size: .85rem;
-  font-weight: 600;
-  font-family: var(--xm-font-code);
   color: var(--xm-c-dark);
+  font-weight: 600;
+  font-size: .875rem;
+  font-family: var(--xm-font-code);
   &::before,
   &::after {
     content: '`';
@@ -11,21 +11,21 @@ code {
 pre {
   overflow-x: auto;
   margin-top: 1.75rem;
-  padding-top: .85rem, 1.15rem;
-  font-size: .85rem;
-  color: var(--xm-c-pre);
-  line-height: 1.75;
   margin-bottom: 1.75rem;
+  padding-top: .875rem, 1.15rem;
   border-radius: .375rem;
+  color: var(--xm-c-pre);
+  font-size: .875rem;
+  line-height: 1.75;
   code {
     padding: 0;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: 400;
-    color: inherit;
-    background: transparent;
     border-width: 0;
     border-radius: 0;
+    background: transparent;
+    color: inherit;
+    font-weight: 400;
+    font-size: inherit;
+    font-family: inherit;
     line-height: inherit;
     &::before,
     &::after {

src/scss/partial/figure.scss

@@ -2,9 +2,9 @@ figure {
   margin-top: 2rem;
   margin-bottom: 2rem;
   figcaption {
-    margin-top: .85rem;
+    margin-top: .875rem;
-    font-size: .85rem;
     color: var(--xm-c-figcaption);
+    font-size: .875rem;
     line-height: 1.45;
   }
   > * {

src/scss/partial/link.scss

@@ -1,7 +1,7 @@
 a {
+  color: var(--xm-c-darker);
   font-weight: 500;
   text-decoration: none;
-  color: var(--xm-c-darker);
   code {
     color: var(--xm-c-code);
   }

src/scss/partial/list.scss

@@ -13,8 +13,8 @@ ol {
       content: counter(list-item, decimal) '.';
       position: absolute;
       left: 0;
-      font-weight: 400;
       color: var(--xm-c-ol-counter);
+      font-weight: 400;
     }
   }
 }
@@ -28,12 +28,12 @@ ul {
     &::before {
       content: '';
       position: absolute;
-      top: .685rem;
+      top: .675rem;
       left: .25rem;
       width: .375rem;
       height: .375rem;
-      background-color: var(--xm-c-ul-counter);
       border-radius: 50%;
+      background-color: var(--xm-c-ul-counter);
     }
   }
 }

src/scss/partial/quote.scss

@@ -3,10 +3,10 @@ q {
   margin-top: 1.65rem;
   margin-bottom: 1.65rem;
   padding-left: 1rem;
+  border-left: .25rem solid var(--xm-c-blockquote-border);
+  color: inherit;
   font-weight: 500;
   font-style: italic;
-  color: inherit;
-  border-left: .25rem solid var(--xm-c-blockquote-border);
   quotes: '\201C''\201D''\2018''\2019';
   p {
     &:first-of-type::before {

src/scss/partial/table.scss

@@ -1,22 +1,20 @@
 table {
+  width: 100%;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  width: 100%;
   table-layout: auto;
-  font-size: .85rem;
+  font-size: .875rem;
-  text-align: left;
   line-height: 1.75;
+  text-align: left;
 }
 thead {
-  font-weight: 600;
-  color: var(--xm-c-thead);
   border-bottom-width: 1px;
   border-bottom-color: var(--xm-c-thead-border);
+  color: var(--xm-c-thead);
+  font-weight: 600;
   th {
     vertical-align: bottom;
-    padding-right: .575rem;
+    padding-left: auto .575rem .575rem;
-    padding-bottom: .575rem;
-    padding-left: .575rem;
     &:first-child {
       padding-left: 0;
     }

src/scss/partial/text.scss

@@ -3,8 +3,8 @@ p {
   margin-bottom: 1.25rem;
 }
 strong {
-  font-weight: 600;
   color: var(--xm-c-dark);
+  font-weight: 600;
 }
 b {
   color: var(--xm-c-dark);

src/scss/partial/title.scss

@@ -1,20 +1,20 @@
 h1 {
   margin-top: 0;
-  margin-bottom: .8889rem;
+  margin-bottom: .875rem;
-  font-size: 2.25rem;
-  font-weight: 800;
   color: var(--xm-c-darker);
+  font-weight: 800;
+  font-size: 2.25rem;
   line-height: 1.15;
 }
 h2 {
   margin-top: 2rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--xm-c-dark);
   margin-bottom: 1rem;
+  color: var(--xm-c-dark);
+  font-weight: 700;
+  font-size: 1.5rem;
   line-height: 1.35;
   code {
-    font-size: .85rem;
+    font-size: .875rem;
   }
   + * {
     margin-top: 0;
@@ -22,10 +22,10 @@ h2 {
 }
 h3 {
   margin-top: 1.6rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: inherit;
   margin-bottom: .6rem;
+  color: inherit;
+  font-weight: 600;
+  font-size: 1.25rem;
   line-height: 1.6;
   opacity: .7;
   code {
@@ -37,9 +37,9 @@ h3 {
 }
 h4 {
   margin-top: 1.5rem;
-  font-weight: 600;
-  color: inherit;
   margin-bottom: .5rem;
+  color: inherit;
+  font-weight: 600;
   line-height: 1.5;
   + * {
     margin-top: 0;
@@ -47,17 +47,17 @@ h4 {
 }
 h5,
 h6 {
-  text-transform: uppercase;
   margin-top: 20px;
   margin-bottom: 10px;
   font-weight: 500;
-  opacity: .5;
   letter-spacing: 2px;
+  text-transform: uppercase;
+  opacity: .5;
 }
 hr {
   margin-top: 3rem;
-  border-color: var(--xm-c-hr-border);
   margin-bottom: 3rem;
+  border-color: var(--xm-c-hr-border);
   + * {
     margin-top: 0;
   }