Description

Fixes #119

The comment appearing thrice was because /*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */ appeared in a few separate sass files:

• src/warnings/checka11y-warnings.scss
• src/errors/checka11y-errors.scss
• src/checka11y.scss

Then we we compile all the SCSS together, those comments appear in the compiled CSS file based on the order of each @use rule in checka11y.scss.

Flow:

1. checka11y.scss is the main SCSS file that loads the /warnings/* and /errors/* files.

@use "./warnings/checka11y-warnings.scss";
@use "./errors/checka11y-errors.scss";

2. Since the warnings are loaded first, we can now look at the @use order in checka11y-warnings.scss.

@use "./variables" as *;
@use "./customisation" as *;
@use "../shared/variables" as *;
@use "../shared/customisation" as *;
@use "../shared/helpers" as *;
@use "../shared/messages/" as *;
@use "./features/" as *;

3. The _customisation.scss partial gets loaded first (after _variables) so that partial is what appears first when compiling checka11y.css. There isn't anything special about _customisation.scss, its just first in the @use "loading" order when compiling the main css file, if we put the comment instead into _variables, then we would have to make sure its not loaded in many files otherwise the comment would appear multiple times like the original state.
4. tldr; add the comment into the partial that gets loaded first into the main file, then it can appear once at the top of checka11y.css as expected.

/*! Checka11y.css v2.3.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
:root {
  --checka11y-text-warning: #856404;
  --checka11y-bg-warning: #ffffd8;
  --checka11y-border-warning: #ff6;
}

:root {
  --checka11y-space: 0.25rem;
...

8. I only added it to /warnings/* because if we add it to customisation.scss in /errors/* then we will see two comments in the compiled file like this:

/*! Checka11y.css v2.3.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
:root {
  --checka11y-text-warning: #856404;
  --checka11y-bg-warning: #ffffd8;
  --checka11y-border-warning: #ff6;
}

/*! Checka11y.css v2.3.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
:root {
  --checka11y-space: 0.25rem;
  --checka11y-space-0: calc(var(--checka11y-space) * 0);
...

Why is this important?

Fixes an annoying bug that was encountered awhile ago while working on another ticket.

Covered test cases

No test cases modified. Tests still pass as expected with npm run test.

Did you test on all major browsers?

• Chrome
• Firefox
• Edge
• Safari

Other details

T&Cs

• I confirm I have read and understand the contributing guidelines
• I understand the work in this pull request will not be released straight away and will appear in a future release (if approved)
• I confirm the work in this pull request is true and valid to the best of my knowledge
• I have updated the README, features.md and codes.md files where applicable