Skip to content

Commit 66e3da5

Browse files
onmaxonmax
committed
fix: optimize CSS selectors for improved performance and readability
1 parent 0e352cd commit 66e3da5

File tree

2 files changed

+107
-115
lines changed

2 files changed

+107
-115
lines changed

‎packages/nimiq-css/src/css/typography.css‎

Lines changed: 106 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
margin-trim: block;
2323

2424
&:not(:where(.nq-prose-compact, [nq-prose-compact])) {
25-
> *:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *)) {
25+
>*:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *)) {
2626
padding-right: 2rem;
2727
padding-left: 2rem;
2828

@@ -52,12 +52,12 @@
5252
--font-size: clamp(calc(1px * var(--font-size-min)), var(--font-size-fluid), calc(var(--font-size-max) * 1px));
5353
}
5454

55-
> *:first-child {
55+
>*:first-child {
5656
margin-top: 0;
5757
/* TODO Remove margin-top and margin-bottom on last element when margin-trim is widely supported */
5858
}
5959

60-
> *:last-child {
60+
>*:last-child {
6161
margin-bottom: 0;
6262
}
6363

@@ -171,7 +171,7 @@
171171
outline-offset: 0.125rem;
172172
}
173173

174-
> a {
174+
>a {
175175
position: absolute;
176176
inset: 0;
177177
padding-left: 20px;
@@ -192,17 +192,11 @@
192192
margin-bottom: 0;
193193
line-height: 1.5;
194194

195-
& + p {
195+
&+p {
196196
margin-top: 16px;
197197
}
198198
}
199199

200-
&:where(:not(blockquote p)) {
201-
--font-size-min: 14;
202-
--font-size-max: 16;
203-
font-size: var(--font-size);
204-
}
205-
206200
&:where(figure) {
207201
figcaption {
208202
color: rgb(var(--nq-neutral-700));
@@ -282,7 +276,7 @@
282276
margin-left: 40px;
283277
}
284278

285-
> ol li {
279+
>ol li {
286280
margin-left: 0;
287281
}
288282

@@ -333,7 +327,7 @@
333327
top: 2px;
334328
}
335329

336-
> ol {
330+
>ol {
337331
counter-reset: subitem;
338332

339333
li {
@@ -415,122 +409,122 @@
415409
text-decoration: none;
416410
color: rgb(var(--nq-blue) / 1);
417411
}
418-
}
419-
420-
table {
421-
--nq-m-min: 24;
422-
--nq-m-max: 32;
423-
margin-bottom: var(--nq-m-size);
424-
margin-top: var(--nq-m-size);
425-
display: block;
426-
overflow-x: auto;
427-
border-spacing: 0;
428-
border-collapse: separate;
429-
border-radius: 6px;
430-
border: 1px solid rgb(var(--nq-neutral-300));
431-
max-height: 90dvh;
432-
max-width: max-content;
433-
scroll-behavior: smooth;
434-
435-
code,
436-
pre {
437-
--line-height: 1.3;
438-
padding: 4px 0.25rem;
439-
position: relative;
440-
}
441412

442-
th,
443-
td {
444-
padding: 12px 0.75rem;
445-
}
446-
447-
thead th {
448-
z-index: 1;
449-
position: sticky;
450-
top: -1px;
451-
text-wrap: balance;
452-
white-space: nowrap;
453-
font-weight: 400;
454-
color: rgb(var(--nq-neutral-800));
455-
background-color: rgb(var(--nq-neutral-100));
456-
}
413+
table {
414+
--nq-m-min: 24;
415+
--nq-m-max: 32;
416+
margin-bottom: var(--nq-m-size);
417+
margin-top: var(--nq-m-size);
418+
display: block;
419+
overflow-x: auto;
420+
border-spacing: 0;
421+
border-collapse: separate;
422+
border-radius: 6px;
423+
border: 1px solid rgb(var(--nq-neutral-300));
424+
max-height: 90dvh;
425+
max-width: max-content;
426+
scroll-behavior: smooth;
427+
428+
code,
429+
pre {
430+
--line-height: 1.3;
431+
padding: 4px 0.25rem;
432+
position: relative;
433+
}
457434

458-
tbody {
435+
th,
459436
td {
460-
vertical-align: initial;
437+
padding: 12px 0.75rem;
438+
}
439+
440+
thead th {
441+
z-index: 1;
442+
position: sticky;
443+
top: -1px;
461444
text-wrap: balance;
445+
white-space: nowrap;
446+
font-weight: 400;
447+
color: rgb(var(--nq-neutral-800));
448+
background-color: rgb(var(--nq-neutral-100));
462449
}
463450

464-
> tr:not(:last-child) td {
465-
border-bottom: 1px solid rgb(var(--nq-neutral-300));
451+
tbody {
452+
td {
453+
vertical-align: initial;
454+
text-wrap: balance;
455+
}
456+
457+
>tr:not(:last-child) td {
458+
border-bottom: 1px solid rgb(var(--nq-neutral-300));
459+
}
460+
}
461+
462+
/* Apply a border to the right of all but the last column */
463+
th:not(:last-child),
464+
td:not(:last-child) {
465+
border-right: 1px solid rgb(var(--nq-neutral-300));
466466
}
467467
}
468468

469-
/* Apply a border to the right of all but the last column */
470-
th:not(:last-child),
471-
td:not(:last-child) {
472-
border-right: 1px solid rgb(var(--nq-neutral-300));
469+
hr {
470+
--nq-m-min: 20;
471+
--nq-m-max: 24;
472+
margin: var(--nq-m-size) auto;
473+
width: 128px;
474+
border-color: rgb(var(--nq-neutral-500));
473475
}
474-
}
475476

476-
hr {
477-
--nq-m-min: 20;
478-
--nq-m-max: 24;
479-
margin: var(--nq-m-size) auto;
480-
width: 128px;
481-
border-color: rgb(var(--nq-neutral-500));
482-
}
477+
details {
478+
/* TODO Animate open/closing https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element */
479+
border-radius: 6px;
480+
background-color: rgb(var(--nq-neutral-200));
481+
--nq-m-min: 18;
482+
--nq-m-max: 22;
483+
margin-top: var(--nq-m-size);
484+
margin-bottom: var(--nq-m-size);
485+
color: rgb(var(--nq-neutral-900));
486+
box-shadow: 0 0 0 1.5px rgb(var(--nq-neutral) / 0.1);
483487

484-
details {
485-
/* TODO Animate open/closing https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_the_details_element */
486-
border-radius: 6px;
487-
background-color: rgb(var(--nq-neutral-200));
488-
--nq-m-min: 18;
489-
--nq-m-max: 22;
490-
margin-top: var(--nq-m-size);
491-
margin-bottom: var(--nq-m-size);
492-
color: rgb(var(--nq-neutral-900));
493-
box-shadow: 0 0 0 1.5px rgb(var(--nq-neutral) / 0.1);
494-
495-
::marker {
496-
color: transparent;
497-
}
488+
::marker {
489+
color: transparent;
490+
}
498491

499-
summary {
500-
padding: 14px 2rem 14px calc(0.7rem + 2.3em);
501-
font-size: 1em;
502-
position: relative;
503-
display: flex;
504-
align-items: center;
505-
cursor: pointer;
506-
507-
&::before {
508-
content: '';
509-
--icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIgMS40MTNBLjguOCAwIDAxMy4yMTIuNzI3bDcuNjQ1IDQuNTg3YS44LjggMCAwMTAgMS4zNzJsLTcuNjQ1IDQuNTg3QS44LjggMCAwMTIgMTAuNTg3eiIvPjwvc3ZnPg==);
510-
-webkit-mask: var(--icon) no-repeat;
511-
mask: var(--icon) no-repeat;
512-
-webkit-mask-size: 100% 100%;
513-
mask-size: 100% 100%;
514-
background-color: currentColor;
515-
color: inherit;
516-
width: 0.622em;
517-
height: 0.622em;
518-
transition: transform 100ms ease-out;
519-
display: inline-block;
520-
position: absolute;
521-
left: 0;
522-
padding-left: 4rem;
492+
summary {
493+
padding: 14px 2rem 14px calc(0.7rem + 2.3em);
494+
font-size: 1em;
495+
position: relative;
496+
display: flex;
497+
align-items: center;
498+
cursor: pointer;
499+
500+
&::before {
501+
content: '';
502+
--icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIgMS40MTNBLjguOCAwIDAxMy4yMTIuNzI3bDcuNjQ1IDQuNTg3YS44LjggMCAwMTAgMS4zNzJsLTcuNjQ1IDQuNTg3QS44LjggMCAwMTIgMTAuNTg3eiIvPjwvc3ZnPg==);
503+
-webkit-mask: var(--icon) no-repeat;
504+
mask: var(--icon) no-repeat;
505+
-webkit-mask-size: 100% 100%;
506+
mask-size: 100% 100%;
507+
background-color: currentColor;
508+
color: inherit;
509+
width: 0.622em;
510+
height: 0.622em;
511+
transition: transform 100ms ease-out;
512+
display: inline-block;
513+
position: absolute;
514+
left: 0;
515+
padding-left: 4rem;
516+
}
523517
}
524-
}
525518

526-
&[open] summary {
527-
&::before {
528-
transform: rotate(90deg);
519+
&[open] summary {
520+
&::before {
521+
transform: rotate(90deg);
522+
}
529523
}
530-
}
531524

532-
> *:not(summary) {
533-
padding: 0 1rem 14px 1rem;
525+
>*:not(summary) {
526+
padding: 0 1rem 14px 1rem;
527+
}
534528
}
535529
}
536530
}

‎packages/nimiq-css/src/unocss/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,8 @@ import { fileURLToPath } from 'node:url'
99
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
1010
import { toCSS, toJSON } from 'ts-cssjson'
1111
import {
12-
1312
definePreset,
14-
1513
presetWebFonts,
16-
1714
} from 'unocss'
1815
import { getNimiqColors } from './colors'
1916

@@ -330,6 +327,7 @@ export const presetNimiq = definePreset((options: NimiqPresetOptions = {}) => {
330327
)
331328
}
332329

330+
// TODO Move to onmaxPreset
333331
const variantLayer = `${prefix}variants`
334332
const variants: Preset['variants'] = [
335333
(matcher) => {

0 commit comments

Comments
 (0)