Skip to content

Commit d33150e

Browse files
jackdomleo7jackdomleo7
authored
Merge pull request #124 from tannerdolby/123-migrate-import-to-use
Migrate from @import to @use at-rules
2 parents 05ca98a + b39ddb9 commit d33150e

35 files changed

Lines changed: 136 additions & 89 deletions

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,10 @@ In the below imports, replace `:file` with one of the options below:
123123
- `src/warnings/checka11y-warnings` <small>(warnings **only**)</small>
124124
```scss
125125
/* Webpack */
126-
@import '~checka11y-css/:file';
126+
@use '~checka11y-css/:file' as *;
127127

128128
/* Non-webpack */
129-
@import 'path/to/node_modules/checka11y-css/:file';
129+
@use 'path/to/node_modules/checka11y-css/:file' as *;
130130
```
131131

132132
### Using Angular?

‎checka11y-errors.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
21
:root {
32
--checka11y-text-error: #721c24;
43
--checka11y-bg-error: #ffc6c6;
@@ -622,3 +621,5 @@ iframe[tabindex="-1"] {
622621
border: 0.4rem solid var(--checka11y-border-error);
623622
background-color: var(--checka11y-bg-error);
624623
}
624+
625+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */

‎checka11y-warnings.css‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
21
:root {
32
--checka11y-text-warning: #856404;
43
--checka11y-bg-warning: #ffffd8;
@@ -87,6 +86,24 @@
8786
background-color: var(--checka11y-bg-warning);
8887
}
8988

89+
h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::after {
90+
display: block;
91+
font-size: 1rem;
92+
font-family: verdana, geneva, tahoma, sans-serif;
93+
font-weight: 700;
94+
font-style: initial;
95+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
96+
border-radius: 0.75rem;
97+
letter-spacing: initial;
98+
text-decoration: none;
99+
text-transform: initial;
100+
text-shadow: none;
101+
content: "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers" !important;
102+
color: var(--checka11y-text-warning);
103+
border: 0.4rem solid var(--checka11y-border-warning);
104+
background-color: var(--checka11y-bg-warning);
105+
}
106+
90107
img[alt^="logo for" i], img[alt^="logo of" i], img[alt^="image of" i], img[alt^=bullet i], img[alt^="graphic of" i], img[alt$=logo i], img[alt$=graphic i], img[alt$=image i], img[alt$=".ivaf" i], img[alt$=".webp" i], img[alt$=".bmp" i], img[alt$=".svg" i], img[alt$=",jpeg" i], img[alt$=".jpg" i], img[alt$=".gif" i], img[alt$=".png" i], img[alt=" " i], img[alt="*" i], img[alt=graph i], img[alt=diagram i], img[alt=table i], img[alt=chart i], img[alt=blank i], img[alt=spacer i], img[alt=more i], img[alt=arrow i], img[alt=button i], img[alt=bullet i], img[alt=logo i], img[alt=artwork i], img[alt=painting i], img[alt=drawing i], img[alt=photograph i], img[alt=photo i], img[alt=graphic i], img[alt=image i] {
91108
border: 0.4rem solid;
92109
border-color: var(--checka11y-border-warning);
@@ -263,20 +280,4 @@ u::after {
263280
background-color: var(--checka11y-bg-warning);
264281
}
265282

266-
h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::after {
267-
display: block;
268-
font-size: 1rem;
269-
font-family: verdana, geneva, tahoma, sans-serif;
270-
font-weight: 700;
271-
font-style: initial;
272-
padding: var(--checka11y-space-4) var(--checka11y-space-6);
273-
border-radius: 0.75rem;
274-
letter-spacing: initial;
275-
text-decoration: none;
276-
text-transform: initial;
277-
text-shadow: none;
278-
content: "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers" !important;
279-
color: var(--checka11y-text-warning);
280-
border: 0.4rem solid var(--checka11y-border-warning);
281-
background-color: var(--checka11y-bg-warning);
282-
}
283+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */

‎checka11y.css‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
2-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
31
:root {
42
--checka11y-text-error: #721c24;
53
--checka11y-bg-error: #ffc6c6;
@@ -624,21 +622,13 @@ iframe[tabindex="-1"] {
624622
background-color: var(--checka11y-bg-error);
625623
}
626624

627-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
625+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */
628626
:root {
629627
--checka11y-text-warning: #856404;
630628
--checka11y-bg-warning: #ffffd8;
631629
--checka11y-border-warning: #ff6;
632630
}
633631

634-
:root {
635-
--checka11y-space: 0.25rem;
636-
--checka11y-space-0: calc(var(--checka11y-space) * 0);
637-
--checka11y-space-2: calc(var(--checka11y-space) * 2);
638-
--checka11y-space-4: calc(var(--checka11y-space) * 4);
639-
--checka11y-space-6: calc(var(--checka11y-space) * 6);
640-
}
641-
642632
[accesskey]::after {
643633
display: block;
644634
font-size: 1rem;
@@ -713,6 +703,24 @@ iframe[tabindex="-1"] {
713703
background-color: var(--checka11y-bg-warning);
714704
}
715705

706+
h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::after {
707+
display: block;
708+
font-size: 1rem;
709+
font-family: verdana, geneva, tahoma, sans-serif;
710+
font-weight: 700;
711+
font-style: initial;
712+
padding: var(--checka11y-space-4) var(--checka11y-space-6);
713+
border-radius: 0.75rem;
714+
letter-spacing: initial;
715+
text-decoration: none;
716+
text-transform: initial;
717+
text-shadow: none;
718+
content: "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers" !important;
719+
color: var(--checka11y-text-warning);
720+
border: 0.4rem solid var(--checka11y-border-warning);
721+
background-color: var(--checka11y-bg-warning);
722+
}
723+
716724
img[alt^="logo for" i], img[alt^="logo of" i], img[alt^="image of" i], img[alt^=bullet i], img[alt^="graphic of" i], img[alt$=logo i], img[alt$=graphic i], img[alt$=image i], img[alt$=".ivaf" i], img[alt$=".webp" i], img[alt$=".bmp" i], img[alt$=".svg" i], img[alt$=",jpeg" i], img[alt$=".jpg" i], img[alt$=".gif" i], img[alt$=".png" i], img[alt=" " i], img[alt="*" i], img[alt=graph i], img[alt=diagram i], img[alt=table i], img[alt=chart i], img[alt=blank i], img[alt=spacer i], img[alt=more i], img[alt=arrow i], img[alt=button i], img[alt=bullet i], img[alt=logo i], img[alt=artwork i], img[alt=painting i], img[alt=drawing i], img[alt=photograph i], img[alt=photo i], img[alt=graphic i], img[alt=image i] {
717725
border: 0.4rem solid;
718726
border-color: var(--checka11y-border-warning);
@@ -889,20 +897,5 @@ u::after {
889897
background-color: var(--checka11y-bg-warning);
890898
}
891899

892-
h1[role=text]::after, h2[role=text]::after, h3[role=text]::after, h4[role=text]::after, h5[role=text]::after, h6[role=text]::after {
893-
display: block;
894-
font-size: 1rem;
895-
font-family: verdana, geneva, tahoma, sans-serif;
896-
font-weight: 700;
897-
font-style: initial;
898-
padding: var(--checka11y-space-4) var(--checka11y-space-6);
899-
border-radius: 0.75rem;
900-
letter-spacing: initial;
901-
text-decoration: none;
902-
text-transform: initial;
903-
text-shadow: none;
904-
content: "WARNING (W0010): Using role='text' on a heading element causes it to lose semantic meaning for screen readers" !important;
905-
color: var(--checka11y-text-warning);
906-
border: 0.4rem solid var(--checka11y-border-warning);
907-
background-color: var(--checka11y-bg-warning);
908-
}
900+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */
901+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */

‎src/checka11y.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
2-
@import "./errors/checka11y-errors.scss";
3-
@import "./warnings/checka11y-warnings.scss";
1+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */
2+
@use "./errors/checka11y-errors.scss";
3+
@use "./warnings/checka11y-warnings.scss";

‎src/errors/_customisation.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "./variables" as *;
2+
13
:root {
24
/* Colors */
35

‎src/errors/checka11y-errors.scss‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
/*! Checka11y.css v1.4.0 | MIT License | github.com/jackdomleo7/Checka11y.css */
2-
@import "./variables";
3-
@import "./customisation";
4-
@import "../shared/variables";
5-
@import "../shared/customisation";
6-
@import "../shared/helpers";
7-
@import "../shared/messages/content";
8-
@import "../shared/messages/vector";
9-
@import "./features/buttons";
10-
@import "./features/dir";
11-
@import "./features/headings";
12-
@import "./features/html";
13-
@import "./features/iframe";
14-
@import "./features/images";
15-
@import "./features/links";
16-
@import "./features/lists";
17-
@import "./features/navigation";
18-
@import "./features/tabindex";
1+
/*! Checka11y.css v1.3.3 | MIT License | github.com/jackdomleo7/Checka11y.css */
2+
@use "./variables" as *;
3+
@use "./customisation" as *;
4+
@use "../shared/variables" as *;
5+
@use "../shared/customisation" as *;
6+
@use "../shared/helpers" as *;
7+
@use "../shared/messages/" as *;
8+
@use "./features/" as *;

‎src/errors/features/_buttons.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../../shared/messages/" as *;
2+
13
/* E0000: Invalid HTML nested inside <button> */
24
button {
35
audio[controls] {

‎src/errors/features/_dir.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* E0002: The dir attribute can only have the values, ltr, rtl and auto */
2+
@use "../../shared/messages/" as *;
23

34
[dir]:not( [dir = "rtl"] ):not( [dir = "ltr"] ):not( [dir = "auto"] ) {
45
&::after {

‎src/errors/features/_headings.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../../shared/messages/" as *;
2+
13
h1,
24
h2,
35
h3,

0 commit comments

Comments
 (0)