Skip to content

Commit 9a2b5ab

Browse files
fpbraultfpbrault
committed
remove postcss mixins
https://coveord.atlassian.net/browse/KIT-3925
1 parent 4952f14 commit 9a2b5ab

File tree

47 files changed

+1511
-1314
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1511
-1314
lines changed

‎package-lock.json

+929-791
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/atomic/package.json

-5
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@
118118
"@types/puppeteer": "7.0.4",
119119
"@vitest/browser": "2.1.8",
120120
"@whitespace/storybook-addon-html": "6.1.1",
121-
"autoprefixer": "10.4.20",
122121
"axe-core": "4.10.2",
123122
"cypress": "13.7.3",
124123
"cypress-axe": "1.5.0",
@@ -136,11 +135,7 @@
136135
"natural-orderby": "5.0.0",
137136
"playwright": "1.50.0",
138137
"postcss": "8.5.1",
139-
"postcss-focus-visible": "10.0.1",
140-
"postcss-import": "16.1.0",
141138
"postcss-load-config": "6.0.1",
142-
"postcss-map": "0.11.0",
143-
"postcss-mixins": "11.0.3",
144139
"postcss-nested": "7.0.2",
145140
"puppeteer": "24.1.1",
146141
"react": "18.3.1",

‎packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.pcss

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
@import '../../../global/global.pcss';
2-
@import '../../../global/mixins.pcss';
32
@import '../../common/item-list/styles/placeholders.pcss';
43
@import '../../common/item-list/styles/table-display.pcss';
54
@import '../../common/item-list/styles/list-display.pcss';
65
@import '../../common/item-list/styles/grid-display.pcss';
76

87
:host {
98
.result-link {
10-
@mixin link-style;
9+
@apply link-style;
1110
}
1211
.result-grid {
1312
grid-template-columns: repeat(5, minmax(0, 1fr));

‎packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.pcss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
@import '../../common/item-list/styles/mixins.pcss';
33
@import '../../common/item-list/styles/placeholders.pcss';
44

5-
@mixin atomic-grid-clickable-elements;
6-
@mixin atomic-grid-display-common;
5+
@apply atomic-grid-clickable-elements;
6+
@apply atomic-grid-display-common;
77

88
/**
99
* @prop --atomic-recs-number-of-columns: Number of columns for the recommendation list.
1010
*/
1111
.list-root {
12-
@mixin atomic-grid-with-cards;
12+
@apply atomic-grid-with-cards;
1313
grid-template-columns: repeat(var(--atomic-recs-number-of-columns, 1), minmax(0, 1fr));
1414
}
1515

‎packages/atomic/src/components/commerce/atomic-product/atomic-product.pcss

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../common/template-system/template-system.pcss';
22

3-
@mixin atomic-template-system map(post-css-map-for-sections, commerce);
3+
@apply atomic-template-system;
44

55
:host {
66
@apply relative;
@@ -20,22 +20,21 @@
2020
&.image-none {
2121
atomic-product-section-name {
2222
min-height: calc(var(--line-height) * 2);
23-
-webkit-line-clamp: 2;
24-
line-clamp: 2;
23+
@apply line-clamp-2;
2524
}
2625
}
2726

2827
@media (min-width: 1024px) {
2928
&.image-large {
3029
atomic-product-section-children .product-child {
31-
@mixin aspect-ratio-h 1 / 1, auto;
30+
@apply aspect-square;
3231
width: 16.65%;
3332
}
3433
}
3534

3635
&.image-small {
3736
atomic-product-section-children .product-child {
38-
@mixin aspect-ratio-h 1 / 1, auto;
37+
@apply aspect-square;
3938
width: 16.65%;
4039
}
4140
}
@@ -52,13 +51,13 @@
5251
@media (max-width: 1023px) {
5352
&.image-large {
5453
atomic-product-section-children .product-child {
55-
@mixin aspect-ratio-h 1 / 1, auto;
54+
@apply aspect-square;
5655
width: 16.65%;
5756
}
5857
}
5958
&.image-small {
6059
atomic-product-section-children .product-child {
61-
@mixin aspect-ratio-h 1 / 1, auto;
60+
@apply aspect-square;
6261
width: 16.65%;
6362
max-width: 4.75rem;
6463
}
@@ -129,7 +128,7 @@
129128
@media (max-width: 1023px) {
130129
&.image-large {
131130
atomic-product-section-children .product-child {
132-
@mixin aspect-ratio-h 1 / 1, auto;
131+
@apply aspect-square;
133132
width: 16.65%;
134133
}
135134
}

‎packages/atomic/src/components/commerce/product-template-components/atomic-product-image/atomic-product-image.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
@import '../../../common/item-list/styles/mixins.pcss';
33
@import '../../../common/item-list/styles/placeholders.pcss';
44

5-
@mixin atomic-grid-clickable-elements;
6-
@mixin atomic-grid-display-common;
5+
@apply atomic-grid-clickable-elements;
6+
@apply atomic-grid-display-common;
77

88
:host {
99
display: grid;

‎packages/atomic/src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.pcss

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
@import '../../../../global/mixins.pcss';
2-
1+
@import '../../../../global/global.pcss';
32
atomic-product-link {
43
a {
5-
@mixin link-style;
4+
@apply link-style;
65
}
76
}

‎packages/atomic/src/components/common/atomic-icon/atomic-icon.pcss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
@import '../../../global/polyfills.pcss';
1+
@import '../../../global/global.pcss';
22

33
atomic-icon {
4+
@apply inline-block;
45
fill: currentColor;
5-
@mixin aspect-ratio-h 1 / 1, auto;
6-
6+
@apply aspect-square;
77
> svg {
88
width: 100%;
99
max-height: 100%;
10-
@mixin aspect-ratio-h 1 / 1, auto;
10+
@apply aspect-square;
1111
}
1212
}

‎packages/atomic/src/components/common/atomic-result-placeholder/atomic-result-placeholder.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../template-system/template-system.pcss';
22

3-
@mixin atomic-template-system map(post-css-map-for-sections, search);
3+
@apply atomic-template-system;
44

55
.result-root {
66
&.display-grid {

‎packages/atomic/src/components/common/generated-answer/atomic-citation/atomic-citation.pcss

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import '../../../../global/global.pcss';
2-
@import '../../../../global/mixins.pcss';
32

43
[part='citation'] {
54
--height: 2.2em;
@@ -16,6 +15,6 @@
1615
width: var(--popover-width);
1716

1817
p {
19-
@mixin set-font-size var(--atomic-text-sm);
18+
@apply set-font-size-sm;
2019
}
2120
}

‎packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../../../global/global.pcss';
22

3-
@define-mixin mobile-feedback-modal {
3+
@utility mobile-feedback-modal {
44
&::part(container) {
55
@apply w-auto min-w-full;
66
}
@@ -43,7 +43,7 @@
4343
}
4444

4545
@media (max-width: 1023px) {
46-
@mixin mobile-feedback-modal;
46+
@apply mobile-feedback-modal;
4747
}
4848
}
4949

‎packages/atomic/src/components/common/generated-answer/styles/feedback-buttons.pcss

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@define-mixin icon-coloring $color {
1+
@utility icon-coloring-* {
22
atomic-icon {
3-
color: $color;
3+
color: ----value(--atomic- *]);
44
}
55
}
66

@@ -9,7 +9,7 @@
99
width: 2.2rem;
1010
height: 2.2rem;
1111

12-
@mixin icon-coloring var(--atomic-neutral-dark);
12+
@apply icon-coloring-neutral-dark;
1313

1414
&.dislike {
1515
rotate: 180deg;
@@ -18,11 +18,11 @@
1818
&:hover,
1919
&.active {
2020
&.like {
21-
@mixin icon-coloring var(--atomic-success);
21+
@apply icon-coloring-success;
2222
}
2323

2424
&.dislike {
25-
@mixin icon-coloring var(--atomic-error);
25+
@apply icon-coloring-error;
2626
}
2727
}
2828
}

‎packages/atomic/src/components/common/generated-answer/styles/generated-answer.pcss

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
@import '../../../../global/global.pcss';
2-
@import '../../../../global/mixins.pcss';
32
@import './generated-text.pcss';
43
@import '../generated-content/generated-markdown-content.pcss';
54
@import './feedback-buttons.pcss';
65
@import './typing-indicator.pcss';
76
@import './copy-button.pcss';
87

9-
@define-mixin mobile-footer-layout {
8+
@utility mobile-footer-layout {
109
& {
1110
@apply flex-col gap-4;
1211
}
@@ -16,7 +15,7 @@
1615
}
1716
}
1817

19-
@define-mixin mobile-footer-xs-layout {
18+
@utility mobile-footer-xs-layout {
2019
& {
2120
@apply mt-4;
2221
}
@@ -26,7 +25,7 @@
2625
}
2726
}
2827

29-
@define-mixin mobile-generated-answer-footer-layout {
28+
@utility mobile-generated-answer-footer-layout {
3029
& {
3130
@apply flex-col gap-1;
3231
}
@@ -51,23 +50,23 @@
5150
}
5251

5352
@container (max-width: 37.5rem) {
54-
@mixin mobile-footer-layout;
53+
@apply mobile-footer-layout;
5554
}
5655
@media (max-width: 1023px) {
57-
@mixin mobile-footer-layout;
56+
@apply mobile-footer-layout;
5857
}
5958
@container (max-width: 25rem) {
60-
@mixin mobile-footer-xs-layout;
59+
@apply mobile-footer-xs-layout;
6160
}
6261
}
6362

6463
[part='generated-answer-footer'] {
6564
@container (max-width: 37.5rem) {
66-
@mixin mobile-generated-answer-footer-layout;
65+
@apply mobile-generated-answer-footer-layout;
6766
}
6867

6968
@media (max-width: 1023px) {
70-
@mixin mobile-generated-answer-footer-layout;
69+
@apply mobile-generated-answer-footer-layout;
7170
}
7271
}
7372

‎packages/atomic/src/components/common/generated-answer/styles/generated-text.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[part='generated-text'] {
2-
@mixin set-font-size var(--atomic-text-lg);
2+
@apply set-font-size-lg;
33

44
&.cursor::after {
55
content: '';

‎packages/atomic/src/components/common/item-list/styles/grid-display.pcss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import './mixins.pcss';
22

3-
@mixin atomic-grid-clickable-elements;
4-
@mixin atomic-grid-display-common;
5-
@mixin atomic-grid-display-desktop;
6-
@mixin atomic-grid-display-mobile;
3+
@apply atomic-grid-clickable-elements;
4+
@apply atomic-grid-display-common;
5+
@apply atomic-grid-display-desktop;
6+
@apply atomic-grid-display-mobile;

‎packages/atomic/src/components/common/item-list/styles/list-display.pcss

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
}
1919

2020
@media (min-width: 1024px) {
21-
@mixin atomic-list-with-dividers;
21+
@apply atomic-list-with-dividers;
2222
}
2323

2424
@media (max-width: 1023px) {
2525
&.image-large {
26-
@mixin atomic-list-with-dividers;
26+
@apply atomic-list-with-dividers;
2727
display: grid;
2828
justify-content: space-evenly;
2929
grid-template-columns: minmax(auto, 35rem);
@@ -34,7 +34,7 @@
3434
&.image-none {
3535
grid-row-gap: 1rem;
3636

37-
@mixin atomic-list-with-cards;
37+
@apply atomic-list-with-cards;
3838
}
3939
}
4040
}

0 commit comments

Comments
 (0)