Skip to content

Commit 02fe886

Browse files
milanowiczmilanowicz
committed
Update dependencies to latest versions and modernize Sass syntax
 - Update all npm dependencies to current versions: * glob: ^9.3.5 → 11.0.3 * jest: ^29.7.0 → ^30.0.4 * sass: ^1.49 → ^1.89.2 * sass-true: ^6.1 → 9.0.0 * tough-cookie: ^4.1.3 → ^5.1.2 * Remove deprecated node-sass dependency - Modernize Sass syntax from @import to @use/@forward - Update test files to use sass-true 9.x API (true-* prefixed functions) - Fix typo in BackgroundIcon mixin (@inclue → @include) - Update Node.js CI workflow to test versions 20, 22, 24 (remove 18) - Update minimum Node.js engine requirement to >=20.0.0 - All 48 tests pass successfully on Node.js 20, 22, and 24
1 parent b297839 commit 02fe886

14 files changed

+1331
-2346
lines changed

‎.github/workflows/node.js.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ jobs:
1010
fail-fast: false
1111
matrix:
1212
node-version:
13-
- 18
1413
- 20
1514
- 22
15+
- 24
1616

1717
steps:
1818
- name: "Checkout"

‎CSSSassCollectionMixins.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// Author: Milanowicz
33
// Description: Sass Mixin Collection
44
@use "sass:math";
5+
@use "CSSSassCollectionDefinitions" as *;
56

67
//########################################################
78
//## Sass Mixin Toolkit File ##
@@ -151,7 +152,7 @@
151152
@mixin BackgroundIcon ($filename, $filename-big: '', $width: auto, $height: auto) {
152153
background-image: data-uri($filename);
153154
*background-image: url($filename);
154-
@inclue BackgroundSize($width $height);
155+
@include BackgroundSize($width $height);
155156

156157
@media #{$high-dpi} {
157158
background-image: data-uri($filename-big);

‎package.json‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"CSS Transform",
1212
"CSS Transistion"
1313
],
14-
"version": "1.1.1",
14+
"version": "1.1.2",
1515
"authors": [
1616
{
1717
"name": "milanowicz",
@@ -31,16 +31,15 @@
3131
"test": "jest"
3232
},
3333
"devDependencies": {
34-
"glob": "^9.3.5",
35-
"jest": "^29.7.0",
36-
"node-sass": "^7.0",
37-
"sass": "^1.49",
38-
"sass-true": "^6.1"
34+
"glob": "11.0.3",
35+
"jest": "^30.0.4",
36+
"sass": "^1.89.2",
37+
"sass-true": "9.0.0"
3938
},
4039
"dependencies": {
41-
"tough-cookie": "^4.1.3"
40+
"tough-cookie": "^5.1.2"
4241
},
4342
"engines": {
44-
"node": ">=18.0.0"
43+
"node": ">=20.0.0"
4544
}
4645
}

‎test/_animation.spec.scss‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@import 'sass-tests';
1+
@use 'sass-tests' as *;
22

3-
@include describe('Animation') {
4-
@include it('check Animation output') {
5-
@include assert {
3+
@include true-describe('Animation') {
4+
@include true-it('check Animation output') {
5+
@include true-assert {
66
$arguments: ani 1s infinite;
7-
@include output {
7+
@include true-output {
88
@include Animation($arguments);
99
}
10-
@include expect {
10+
@include true-expect {
1111
-webkit-animation: $arguments;
1212
-moz-animation: $arguments;
1313
-o-animation:$arguments;
@@ -16,82 +16,82 @@
1616
}
1717
}
1818

19-
@include it('check AnimationDelay output') {
20-
@include assert {
19+
@include true-it('check AnimationDelay output') {
20+
@include true-assert {
2121
$arguments: 1s;
22-
@include output {
22+
@include true-output {
2323
@include AnimationDelay($arguments);
2424
}
25-
@include expect {
25+
@include true-expect {
2626
-webkit-animation-delay: $arguments;
2727
animation-delay: $arguments;
2828
}
2929
}
3030
}
3131

32-
@include it('check AnimationDirection output') {
33-
@include assert {
32+
@include true-it('check AnimationDirection output') {
33+
@include true-assert {
3434
$arguments: normal;
35-
@include output {
35+
@include true-output {
3636
@include AnimationDirection($arguments);
3737
}
38-
@include expect {
38+
@include true-expect {
3939
-webkit-animation-direction: $arguments;
4040
-moz-animation-direction: $arguments;
4141
animation-direction: $arguments;
4242
}
4343
}
4444
}
4545

46-
@include it('check AnimationDuration output') {
47-
@include assert {
46+
@include true-it('check AnimationDuration output') {
47+
@include true-assert {
4848
$arguments: 1s;
49-
@include output {
49+
@include true-output {
5050
@include AnimationDuration($arguments);
5151
}
52-
@include expect {
52+
@include true-expect {
5353
-webkit-animation-duration: $arguments;
5454
animation-duration: $arguments;
5555
}
5656
}
5757
}
5858

59-
@include it('check AnimationFillMode output') {
60-
@include assert {
59+
@include true-it('check AnimationFillMode output') {
60+
@include true-assert {
6161
$arguments: forwards;
62-
@include output {
62+
@include true-output {
6363
@include AnimationFillMode($arguments);
6464
}
65-
@include expect {
65+
@include true-expect {
6666
-webkit-animation-fill-mode: $arguments;
6767
animation-fill-mode: $arguments;
6868
}
6969
}
7070
}
7171

72-
@include it('check AnimationIterationCount output') {
73-
@include assert {
72+
@include true-it('check AnimationIterationCount output') {
73+
@include true-assert {
7474
$arguments: 2;
75-
@include output {
75+
@include true-output {
7676
@include AnimationIterationCount($arguments);
7777
}
78-
@include expect {
78+
@include true-expect {
7979
-webkit-animation-iteration-count: $arguments;
8080
animation-iteration-count: $arguments;
8181
}
8282
}
8383
}
8484

85-
@include it('check AnimationPlayState output') {
86-
@include assert {
85+
@include true-it('check AnimationPlayState output') {
86+
@include true-assert {
8787
$arguments: running;
88-
@include output {
88+
@include true-output {
8989
@include AnimationPlayState($arguments);
9090
}
91-
@include expect {
91+
@include true-expect {
9292
-webkit-animation-play-state: $arguments;
9393
animation-play-state: $arguments;
9494
}
9595
}
9696
}
97-
}
97+
}

‎test/_background.spec.scss‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
@import 'sass-tests';
1+
@use 'sass-tests' as *;
22

3-
@include describe('Background') {
4-
@include it('check BackgroundOpacity output') {
5-
@include assert {
3+
@include true-describe('Background') {
4+
@include true-it('check BackgroundOpacity output') {
5+
@include true-assert {
66
$Color: $background-color;
77
$opacity: $opacity;
88
$RGBColor: rgb(red($Color), green($Color), blue($Color));
99
$RGBAColor: rgba(red($Color), green($Color), blue($Color), $opacity);
10-
@include output {
10+
@include true-output {
1111
@include BackgroundOpacity($Color, $opacity);
1212
}
13-
@include expect {
13+
@include true-expect {
1414
background: $RGBColor;
1515
background: transparent\9;
1616
background: $RGBAColor;
1717
}
1818
}
1919
}
2020

21-
@include it('check BackgroundSize output') {
22-
@include assert {
21+
@include true-it('check BackgroundSize output') {
22+
@include true-assert {
2323
$arguments: cover;
24-
@include output {
24+
@include true-output {
2525
@include BackgroundSize($arguments);
2626
}
27-
@include expect {
27+
@include true-expect {
2828
-webkit-background-size: $arguments;
2929
-moz-background-size: $arguments;
3030
-ms-background-size: $arguments;
@@ -34,55 +34,55 @@
3434
}
3535
}
3636

37-
@include it('check BackgroundClip output') {
38-
@include assert {
37+
@include true-it('check BackgroundClip output') {
38+
@include true-assert {
3939
$argument: $background-clip-type;
40-
@include output {
40+
@include true-output {
4141
@include BackgroundClip($argument);
4242
}
43-
@include expect {
43+
@include true-expect {
4444
-moz-background-clip: $argument;
4545
-webkit-background-clip: $argument;
4646
background-clip: $argument;
4747
}
4848
}
4949
}
5050

51-
@include it('check BackgroundPosition output') {
52-
@include assert {
51+
@include true-it('check BackgroundPosition output') {
52+
@include true-assert {
5353
$x: 50%;
5454
$y: 50%;
55-
@include output {
55+
@include true-output {
5656
@include BackgroundPosition($x, $y);
5757
}
58-
@include expect {
58+
@include true-expect {
5959
background-position-x: $x;
6060
background-position-y: $y;
6161
background-position: $x $y;
6262
}
6363
}
6464
}
6565

66-
@include it('check BackgroundVisibility output') {
67-
@include assert {
66+
@include true-it('check BackgroundVisibility output') {
67+
@include true-assert {
6868
$arguments: visible;
69-
@include output {
69+
@include true-output {
7070
@include BackgroundVisibility($arguments);
7171
}
72-
@include expect {
72+
@include true-expect {
7373
-webkit-backface-visibility: $arguments;
7474
backface-visibility: $arguments;
7575
}
7676
}
7777
}
7878

79-
@include it('check BackgroundImage output') {
80-
@include assert {
81-
@include output {
79+
@include true-it('check BackgroundImage output') {
80+
@include true-assert {
81+
@include true-output {
8282
@include BackgroundImage('/test.img', '/testBig.img', 50px, 100px);
8383
@include BackgroundImage('/test.img');
8484
}
85-
@include expect {
85+
@include true-expect {
8686
background-image: url('/test.img');
8787
-webkit-background-size: 50px 100px;
8888
-moz-background-size: 50px 100px;
@@ -109,13 +109,13 @@
109109
}
110110

111111

112-
@include it('check BackgroundIconSize output') {
113-
@include assert {
114-
@include output {
112+
@include true-it('check BackgroundIconSize output') {
113+
@include true-assert {
114+
@include true-output {
115115
@include BackgroundIconSize();
116116
@include BackgroundIconSize(50px, 100px);
117117
}
118-
@include expect {
118+
@include true-expect {
119119
-webkit-background-size: auto auto;
120120
-moz-background-size: auto auto;
121121
-ms-background-size: auto auto;
@@ -144,13 +144,13 @@
144144
}
145145
}
146146

147-
@include it('check LinearGradient output') {
148-
@include assert {
147+
@include true-it('check LinearGradient output') {
148+
@include true-assert {
149149
$arguments: 15deg, transparent 12%, #000000 88%, transparent 99%;
150-
@include output {
150+
@include true-output {
151151
@include LinearGradient($arguments);
152152
}
153-
@include expect {
153+
@include true-expect {
154154
background: -webkit-gradient($arguments);
155155
background: -webkit-linear-gradient($arguments);
156156
background: -moz-linear-gradient($arguments);
@@ -160,14 +160,14 @@
160160
}
161161
}
162162

163-
@include it('check GradientVertical output') {
164-
@include assert {
163+
@include true-it('check GradientVertical output') {
164+
@include true-assert {
165165
$start-color: $gradient-start-color;
166166
$end-color: $gradient-end-color;
167-
@include output {
167+
@include true-output {
168168
@include GradientVertical($start-color, $end-color);
169169
}
170-
@include expect {
170+
@include true-expect {
171171
background-color: $start-color;
172172
background: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color));
173173
background: -webkit-linear-gradient(top, $start-color, $end-color);
@@ -178,14 +178,14 @@
178178
}
179179
}
180180

181-
@include it('check GradientHorizontal output') {
182-
@include assert {
181+
@include true-it('check GradientHorizontal output') {
182+
@include true-assert {
183183
$start-color: $gradient-start-color;
184184
$end-color: $gradient-end-color;
185-
@include output {
185+
@include true-output {
186186
@include GradientHorizontal($start-color, $end-color);
187187
}
188-
@include expect {
188+
@include true-expect {
189189
background-color: $start-color;
190190
background-image: -webkit-gradient(linear, left top, right top, from($start-color), to($end-color));
191191
background-image: -webkit-linear-gradient(left, $start-color, $end-color);
@@ -197,4 +197,4 @@
197197
}
198198

199199

200-
}
200+
}

0 commit comments

Comments
 (0)