From cfa6b2cd5f10d60a4fdc25edb4eec6a3c7e45b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 26 Mar 2024 19:12:45 +0100
Subject: [PATCH] Add dollar-variables to order/order Stylelint rule

This way we've been able to detect a bug where we were assigning a value
to the `$global-left` variable instead of assigning it to either the
`left` or `right` properties. This, however, was the right behavior,
since adding a `left` indentation to the link wasn't correct because its
parent element already had padding on the sides.
---
 .stylelintrc.yml                                        | 1 +
 app/assets/stylesheets/layout/skip_to_main_content.scss | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index ff2e48c97..ab5fc95f9 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -40,6 +40,7 @@ rules:
   shorthand-property-no-redundant-values: true
   value-no-vendor-prefix: true
   order/order:
+    - dollar-variables
     - type: at-rule
       name: extend
     - type: at-rule
diff --git a/app/assets/stylesheets/layout/skip_to_main_content.scss b/app/assets/stylesheets/layout/skip_to_main_content.scss
index dcfc3db78..487990282 100644
--- a/app/assets/stylesheets/layout/skip_to_main_content.scss
+++ b/app/assets/stylesheets/layout/skip_to_main_content.scss
@@ -8,13 +8,11 @@
     }
 
     &:focus {
-      @include body-colors;
-
       $outline-size: $focus-inner-width + $focus-middle-width + $focus-outer-width;
+      @include body-colors;
 
       padding: 0.4rem;
       position: absolute;
-      $global-left: $outline-size;
       top: $outline-size;
       z-index: 1000;
     }