Skip to content

Commit 85f6ba3

Browse files
obenlandobenland
authored
Fix CSS lint issues and add CSS linting to pre-commit (#2658)
1 parent e026e6c commit 85f6ba3

File tree

36 files changed

+264
-222
lines changed

36 files changed

+264
-222
lines changed

‎.githooks/pre-commit‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
#!/usr/bin/env sh
22

3-
# Get all changed PHP files once.
4-
PHP_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep "\.php$" || true)
3+
# Get all changed files once and filter by type.
4+
CHANGED_FILES=$(git diff --cached --name-only --diff-filter=ACMR)
5+
PHP_FILES=$(echo "$CHANGED_FILES" | grep "\.php$" || true)
6+
CSS_FILES=$(echo "$CHANGED_FILES" | grep -E "\.(css|scss)$" || true)
57

68
# Skip if no PHP files are changed.
79
if [ -n "$PHP_FILES" ]; then
@@ -54,6 +56,11 @@ if [ -n "$PHP_FILES" ]; then
5456
echo "$PHP_FILES" | xargs composer lint:fix > /dev/null 2>&1 || { echo "PHP formatting failed"; exit 1; }
5557
fi
5658

59+
# Run Stylelint with auto-fix on changed CSS/SCSS files.
60+
if [ -n "$CSS_FILES" ]; then
61+
echo "$CSS_FILES" | xargs npx wp-scripts lint-style --fix > /dev/null 2>&1 || { echo "CSS linting failed"; exit 1; }
62+
fi
63+
5764
# Run the WordPress formatter without showing all file output.
5865
npm run format > /dev/null 2>&1 || { echo "JavaScript formatting failed"; exit 1; }
5966

‎assets/css/activitypub-admin.css‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@
7373
display: block;
7474
text-decoration: none;
7575
color: inherit;
76-
padding: .5rem 1rem 1rem;
76+
padding: 0.5rem 1rem 1rem;
7777
margin: 0 1rem;
78-
transition: box-shadow .5s ease-in-out;
78+
transition: box-shadow 0.5s ease-in-out;
7979
white-space: nowrap;
8080
}
8181

@@ -165,13 +165,6 @@ summary {
165165
user-select: auto;
166166
}
167167

168-
.activitypub-settings-accordion-trigger {
169-
color: #2c3338;
170-
cursor: pointer;
171-
font-weight: 400;
172-
text-align: left;
173-
}
174-
175168
.activitypub-settings-accordion-trigger .title {
176169
pointer-events: none;
177170
font-weight: 600;
@@ -182,13 +175,13 @@ summary {
182175
.activitypub-settings-accordion-viewed .icon {
183176
border: solid #50575e medium;
184177
border-width: 0 2px 2px 0;
185-
height: .5rem;
178+
height: 0.5rem;
186179
pointer-events: none;
187180
position: absolute;
188181
right: 1.5em;
189182
top: 50%;
190183
transform: translateY(-70%) rotate(45deg);
191-
width: .5rem;
184+
width: 0.5rem;
192185
}
193186

194187
.activitypub-settings-accordion-trigger[aria-expanded="true"] .icon {
@@ -226,8 +219,8 @@ input.blog-user-identifier {
226219
position: relative;
227220
display: block;
228221
margin-bottom: 40px;
229-
background-image: rgb(168,165,175);
230-
background-image: linear-gradient(180deg, red, yellow);
222+
background-image: rgb(168, 165, 175);
223+
background-image: linear-gradient(180deg, #f00, #ff0);
231224
background-size: cover;
232225
}
233226

@@ -244,8 +237,10 @@ input.blog-user-identifier {
244237
margin-bottom: 0;
245238
}
246239

240+
/* stylelint-disable-next-line selector-id-pattern -- WordPress core ID */
247241
#dashboard_right_now li a.activitypub-followers::before {
248242
content: "\f307";
243+
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
249244
font-family: dashicons;
250245
}
251246

@@ -260,6 +255,7 @@ input.blog-user-identifier {
260255
.extra-fields-nav a + a {
261256
margin-left: 8px;
262257
}
258+
263259
.rtl .extra-fields-nav a + a {
264260
margin-left: auto;
265261
margin-right: 8px;
@@ -268,16 +264,19 @@ input.blog-user-identifier {
268264
.contextual-help-tabs-wrap dt {
269265
font-weight: 600;
270266
}
267+
271268
.contextual-help-tabs-wrap .activitypub-block-screenshot {
272269
margin: 10px 0;
273270
}
271+
274272
.contextual-help-tabs-wrap .activitypub-block-screenshot img {
275273
border: 1px solid #ddd;
276274
border-radius: 4px;
277275
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
278276
height: auto;
279277
max-width: 100%;
280278
}
279+
281280
.contextual-help-tabs-wrap .activitypub-block-screenshot figcaption {
282281
color: #555;
283282
font-style: italic;
@@ -310,7 +309,7 @@ input.blog-user-identifier {
310309
color: #50575e;
311310
}
312311

313-
.contextual-help-tabs-wrap blockquote cite:before {
312+
.contextual-help-tabs-wrap blockquote cite::before {
314313
content: "—";
315314
}
316315

@@ -337,8 +336,11 @@ input.blog-user-identifier {
337336
}
338337

339338
.plugin-list .plugin-action-buttons li {
339+
display: inline-block;
340+
vertical-align: middle;
340341
margin: 0 0 10px 0;
341342
}
343+
342344
.plugin-list .plugin-card .action-links {
343345
position: static;
344346
margin-left: 148px;
@@ -351,11 +353,6 @@ input.blog-user-identifier {
351353
text-align: left;
352354
}
353355

354-
.plugin-list .plugin-action-buttons li {
355-
display: inline-block;
356-
vertical-align: middle;
357-
}
358-
359356
.plugin-list .plugin-action-buttons li .button {
360357
margin-right: 20px;
361358
}
@@ -364,11 +361,13 @@ input.blog-user-identifier {
364361
margin-right: 24px;
365362
}
366363

364+
/* stylelint-disable no-descending-specificity */
367365
.plugin-list .plugin-card .name,
368366
.plugin-list .plugin-card .desc,
369367
.plugin-card .desc > p {
370368
margin-right: 0;
371369
}
370+
/* stylelint-enable no-descending-specificity */
372371

373372
.plugin-list .plugin-card .desc p:first-of-type {
374373
margin-top: 0;
@@ -388,11 +387,13 @@ input.blog-user-identifier {
388387
}
389388

390389
@keyframes highlight-fade {
390+
391391
0% {
392392
background-color: #e7f3ff;
393393
border-color: #3582c4;
394394
box-shadow: 0 0 0 1px #3582c4;
395395
}
396+
396397
100% {
397398
background-color: #fff;
398399
border-color: #8c8f94;
@@ -401,6 +402,7 @@ input.blog-user-identifier {
401402
}
402403

403404
@media screen and (max-width: 782px) {
405+
404406
.activitypub-settings {
405407
margin: 0 22px;
406408
}

‎assets/css/activitypub-embed.css‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -66,17 +66,6 @@
6666

6767
.activitypub-embed-content .ap-preview {
6868
border: 1px solid #e6e6e6;
69-
border-radius: 8px;
70-
overflow: hidden;
71-
}
72-
73-
.activitypub-embed-content .ap-preview img {
74-
width: 100%;
75-
height: auto;
76-
display: block;
77-
}
78-
79-
.activitypub-embed-content .ap-preview {
8069
border-radius: 8px;
8170
box-sizing: border-box;
8271
display: grid;
@@ -90,25 +79,10 @@
9079
width: 100%;
9180
}
9281

93-
.activitypub-embed-content .ap-preview.layout-1 {
94-
grid-template-columns: 1fr;
95-
grid-template-rows: 1fr;
96-
}
97-
98-
.activitypub-embed-content .ap-preview.layout-2 {
99-
aspect-ratio: auto;
100-
grid-template-rows: 1fr;
101-
height: auto;
102-
}
103-
104-
.activitypub-embed-content .ap-preview.layout-3 > img:first-child {
105-
grid-row: span 2;
106-
}
107-
10882
.activitypub-embed-content .ap-preview img {
10983
border: 0;
11084
box-sizing: border-box;
111-
display: inline-block;
85+
display: block;
11286
height: 100%;
11387
object-fit: cover;
11488
overflow: hidden;
@@ -127,6 +101,21 @@
127101
width: 100%;
128102
}
129103

104+
.activitypub-embed-content .ap-preview.layout-1 {
105+
grid-template-columns: 1fr;
106+
grid-template-rows: 1fr;
107+
}
108+
109+
.activitypub-embed-content .ap-preview.layout-2 {
110+
aspect-ratio: auto;
111+
grid-template-rows: 1fr;
112+
height: auto;
113+
}
114+
115+
.activitypub-embed-content .ap-preview.layout-3 > img:first-child {
116+
grid-row: span 2;
117+
}
118+
130119
.activitypub-embed-content .ap-preview-text {
131120
padding: 15px;
132121
}
@@ -145,7 +134,9 @@
145134
align-items: center;
146135
gap: 5px;
147136
}
137+
148138
@media only screen and (max-width: 399px) {
139+
149140
.activitypub-embed-meta span.ap-stat {
150141
display: none !important;
151142
}

‎assets/css/activitypub-post-preview.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -84,25 +84,25 @@ main address {
8484
font-style: normal;
8585
}
8686

87-
main address .name,
88-
main address .webfinger {
89-
color: #000;
90-
}
91-
9287
.name {
9388
color: #ccc;
94-
font-weight: bold;
89+
font-weight: 700;
9590
display: block;
9691
}
9792

9893
.webfinger {
9994
color: #ccc;
10095
font-size: 0.8em;
101-
font-weight: bold;
96+
font-weight: 700;
10297
display: block;
10398
margin-top: 0.5em;
10499
}
105100

101+
main address .name,
102+
main address .webfinger {
103+
color: #000;
104+
}
105+
106106
address img,
107107
.sidebar .fake-image {
108108
border-radius: 8px;
@@ -150,10 +150,6 @@ main .attachments.layout-2 {
150150
height: auto;
151151
}
152152

153-
main .attachments.layout-3 > img:first-child {
154-
grid-row: span 2;
155-
}
156-
157153
main .attachments img {
158154
border: 0;
159155
box-sizing: border-box;
@@ -165,6 +161,10 @@ main .attachments img {
165161
width: 100%;
166162
}
167163

164+
main .attachments.layout-3 > img:first-child {
165+
grid-row: span 2;
166+
}
167+
168168
main .attachments video,
169169
main .attachments audio {
170170
max-width: 100%;

0 commit comments

Comments
 (0)